분류 전체보기
[JavaScript] 구조 분해 할당 (Destructing)
Destructuring (구조 분해 할당) JavaScript로 개발을 하다 보면 함수에 객체나 배열을 전달하는 경우가 생긴다. 또 모든 데이터가 아닌 일부만 필요한 경우도 자주 생긴다. 이럴 때 Destructing(구조 분해 할당)을 통해 객체나 배열을 변수로 쉽게 분해할 수 있다. 1. Array Destructuring (배열 구조 분해 할당) 1) 배열은 인덱스 위치를 기준으로 할당된다. const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(..
[JavaScript] axios와 fetch 차이
axios와 fetch 모두 JavaScript의 비동기 통신을 위한 라이브러리다. 두 라이브러리는 어떤 차이가 있을까? 이를 비교하기 위해 우선 Ajax가 무엇인지부터 알아보자. Ajax (Asynchronous JavaScript And XML) Javascript를 사용한 비동기 통신을 의미한다. 클라이언트와 서버 간에 XMLHttpRequest(XHR)를 활용해 소통한다. Asynchronous Asynchronous(비동기)는 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어지는 방식이다. XMLHttpRequest (XHR) XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용된다. 이를 통해 전체 페이지의 새로고침 없이도 URL로부터 일부의 데이터를 받아올 수 있..
[회고] 디프만 10기 합격
디프만 - Depromeet 오직 디자이너와 프로그래머의 동반성장을 위해서 depromeet.com 공백은 없다 8주 간의 DND 5기 활동이 끝났습니다. 싸피, 스터디, 동아리를 병행하느라 정말 정신없었던 여름이었네요. 당시 저는 협업 경험이 거의 없었지만 팀의 리더로 지원했습니다. 제가 가진 시간과 에너지가 경험의 부족을 메울 수 있을 거라 생각했죠. 그 결과, 누구보다 열정적으로 참여하는 리더가 될 수 있었습니다. 하지만 프로젝트와 협업의 측면에서는 부족함이 많은 리더였습니다. 그러한 아쉬움이 컸기 때문일까요. 잠깐의 휴식을 가진 후 바로 디프만 10기에 지원하게 되었습니다. 디프만은 빠른 MVP 런칭을 통해 피드백을 가질 수 있는 것이 특징입니다. (그리고 학부생 때부터 관심 있었던 동아리이기도 ..
[회고] 6개월간의 일일 커밋
1일 1커밋이 6개월이 되었고 이쯤 되어 회고를 해보고자한다. 왜 시작했어? 별로 좋지 않은 계기에서 시작하였다. 항상 무언가 열심히 했지만, 막상 나를 증명할 무언가는 기록하지 못했다. 졸업 후 나는 조금 방황했고, 그럼에도 개발 공부는 계속 해야했다. 그때의 나에겐 잔디가 일종의 강제성을 부여하는 도구였다. 이 이유 하나만으로도 매일 코드를 볼 수 있겠다는 생각이 들었기 때문이다. 그래서 어땠어? 1. 잔디는 절대 노력의 기준치가 될 수 없다. 처음엔 이런 날들이 많았다. 잔디를 심기 위해 커밋을 날리는 날들 완전히 주객전도된 것이다. 잔디의 목적이 공부여야 하는데, 공부의 목적이 잔디가 되는 것이다. 이런 잡초들을 심은 날을 생각하면 잔디는 결코 노력의 기준치가 될 수 없었다. 그럼에도 잔디 심기를..
[JavaScript] Clean Code - 11. 주석(Comments)
1. 주석을 다는 것은 로직이 복잡하다는 증명이다. 좋은 코드는 코드 자체로 말한다. // BAD function hashIt(data) { // 이건 해쉬입니다. let hash = 0; // lengh는 data의 길이입니다. const length = data.length; // 데이터의 문자열 개수만큼 반복문을 실행합니다. for (let i = 0; i < length; i++) { // 문자열 코드를 얻습니다. const char = data.charCodeAt(i); // 해쉬를 만듭니다. hash = ((hash
[JavaScript] 클린 코드 - 10. 포맷팅(Formatting)
포맷팅에 관한 과도한 논쟁은 낭비라고 생각한다. 이미 좋은 포맷팅 도구가 많기 때문이다. 하지만 아래의 몇 가지 기본적인 지침은 따르는 것이 좋다. 1. 일관된 대소문자를 사용한다. // BAD const DAYS_IN_WEEK = 7; const daysInMonth = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restore_database() {} class animal {} class Alpaca {} // GOOD const DAYS_IN_WEEK..
[JavaScript] 클린 코드 - 9. 에러 처리
1. 단순히 에러를 확인만 하지 않는다. 에러를 확인했다면 그에 대한 계획이나 장치를 마련해야 한다. // BAD - 출력만 하면 에러 로그를 잃어버리기 쉽다. try { functionThatMightThrow(); } catch (error) { console.log(error); } // GOOD try { functionThatMightThrow(); } catch (error) { // 1. console.error는 console.log보다 조금 더 알아채기 쉽다. console.error(error); // 2. 유저에게 에러를 알린다. notifyUserOfError(error); // 3. 서비스 자체에 에러를 기록한다. reportErrorToService(error); // 4. 그 ..
[JavaScript] 클린 코드 - 8. 동시성 (Concurrency)
1. Callback 대신 Promise를 사용한다. Callback은 깔끔하지 않고 많은 괄호 중첩을 만든다. // BAD - 중괄호 중첩 require('request').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => { if (requestErr) { console.error(requestErr); } else { require('fs').writeFile('article.html', response.body, (writeErr) => { if (writeErr) { console.error(writeErr); } else { console.log('File written'); } }); } });..
[JavaScript] 클린 코드 - 7. 테스팅
테스트 테스트는 배포하는 것보다 중요하다. 스스로 또는 팀 내에서 정한 Coverage 목표를 달성하는 것에 초점을 둔다. 테스트 주도 개발(Test Driven Development, TDD)은 훌륭한 개발 방법론이다. 테스트 컨셉 지엽적인 테스트보단 특정 케이스에 대한 테스트 특히 테스트 케이스는 많을수록 무조건 좋다! // BAD const assert = require('assert'); describe('MakeMomentJSGreatAgain', () => { it('handles date boundaries', () => { let date; date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); assert.equal('1/31/..