제 컴에서는 되는데요?(It works on my computer)

들어가며 총 10개월가량의 프로젝트가 오픈을 앞두고 근래 4달은 야근 없는 날이 없을 정도로 바쁘게 달려왔다. 평소에 우스개 소리로 "이번 프로젝트에서 천 번은 커밋한 거 같아"라고 이야기했는데 실제로 몇 번이나 했는지 문득 궁금해졌다. 그래서 저장소에 내가 커밋한 횟수를 알아내는 방법을 찾아보았다. 방법 빠르게 결론이 필요한 분들을 위해 결과부터 공개한다. git log --oneline --no-merges --author bbubbush | wc -l 하나씩 과정을 설명하면 git에는 커밋 내용을 확인할 수 있는 log 명령어를 제공한다. log에는 몇 가지 옵션이 있는데 그 중 커밋 메시지를 한 줄로 표시하는 '--oneline'과 커밋의 작성자를 필터링하는 '--author'가 있다. 두가지 옵..

들어가며 ES6부터 객체의 값을 안정적으로 가져오는 옵셔널이 도입됐다. 개념도 쉽고 적용하기도 쉽기 때문에 활용도가 높다. 더 이야기할 게 없으니 바로 알아보자 🙂 전통적인 객체 프로퍼티 확인 개발하면서 발생할 수 있는 상황을 통해 전통적인 방식의 프로퍼티 확인 방식을 보려고 한다. 이번 목표는 책ID로 책 정보를 찾아 작가의 이름을 출력하는 코드를 만드는 것이다. 먼저 책의 정보가 어떻게 구성되었는지 보자. // book은 이런 형태로 데이터 구조를 갖는다. const sampleBook = { bookId: 1, title: '객체지향의 사실과 오해', isbn: '9788998139766', author: { name: '조영호', }, } 특별한 것 없이 최소한의 정보를 담았다. 마저 기능개발을 ..

들어가며 아마 ES6의 내용 중 이해하기 가장 어려운 내용이 프로미스가 아닐까 생각한다. 다른 변경사항은 기능에 충실한 반면, 프로미스는 특정한 상황을 해결하기 위해 등장했기 때문이라 생각한다. 예를 들면 배열과 객체의 새로운 활용방법은 그냥 기능이다. 그렇게 외워서 쓰면 누구나 금방 사용한다. 근데 프로미스는 사용해야 하는 상황이 있어야 한다. 비동기 처리가 업무에 포함된 상황이다. 그래서 이해하기도 어렵고, 응용해서 실무에 적용시키기는 더욱 어렵다. 그래서 처음 프로미스를 접하는 개발자에게 한방에 이해시키는 것을 목표로 내용을 최대한 간추리고 비유해서 설명하고자 한다. 우선 전체 내용을 정리하면 다음과 같다. 상황별 코드 예제는 아래 있다. 숲을 보고 나무를 보고자 함이니 흐름만 눈에 넣어두면 된다...

들어가며 자바스크립트는 함수로 대표된다고 해도 과언이 아니다. 이제는 객체지향적인 방식으로 작업하는 개발자도 많지만 과거부터 함수를 정의하고 사용해왔기에 아직까지 함수 지향적인 코드를 접하는 분들도 많을 것이다. 이번에는 함수의 모던함을 정리하려고 한다. 주로 자주 반복되는 키워드를 생략하고, 축약하여 표현하는 방식으로 변경되었다. 크게 세 가지의 주제로 새로운 함수 사용방법을 정리했다. 그 전에 함수와 자주 혼동되는 메서드를 같이 비교하여 명확히 개념을 정리하고 시작하고자 한다. 함수와 메서드의 차이 함수와 메서드의 구분을 어려워하는 분들이 많아 간단명료하게 한 줄의 문장과 두 줄의 코드로 설명을 끝내겠다. " 바로 호출 가능하면 함수, 다른 객체를 통해서 호출해야 하면 메서드 " alert('Hell..

들어가며 자바스크립트에서 맵(Map)은 ES6가 되어서야 등장했다. 다른 언어에 비하면 상당히 늦은 편이다. 왜일까? 바로 객체(Object)라는 대안이 있었기 때문이다. 따라서 맵을 어떻게 사용하는지 알아가는 것도 좋지만, 그전부터 맵을 대신하던 객체를 어떻게 기깔나게 사용할 수 있는지 파악하는 것이 더 중요하다는 생각이 들었다. 그래서 이번에는 객체에 대해 자세히 알아보려고 한다. 순서는 맵과 객체의 차이를 간단히 살피고, 기존의 객체 사용 방식을 어떻게 개선된 방법으로 사용할 수 있는지 비교하며 설명하면서 진행된다. 객체와 맵의 차이 두드러지는 차이는 키의 타입이다. 객체는 오로지 문자열만 키로 사용할 수 있고, 맵은 모든 데이터 타입을 사용할 수 있다. const sampleFunc = () =>..

들어가며 배열(Array)은 맵과 함께 데이터를 관리하기 위한 가장 효율적인 자료구조다. 이번에는 배열로 무엇을 할 수 있는지 보면서 for 구문의 지옥에서 벗어날 수 있는 것을 목표로 한다. 고전적인 배열 사용방법 배열을 사용하면서 자주 만나는 상황을 통해 그동안 어떻게 해결했는지 살펴보자. 우선 예제로 사용할 데이터를 정의하고 출발한다. const memberList = [ {id: 0, name: '김철수', deptCd: '01', isManager: true}, {id: 1, name: '이영희', deptCd: '02', isManager: false}, {id: 2, name: '고냠이', deptCd: '02', isManager: false}, {id: 3, name: '강이지', dep..

들어가며 ES6에서는 변수를 사용하기 위해 새로운 문법인 let과 const를 지원하면서 동시에, var의 사용을 지양하라고 권한다. 그렇다면 var는 어떤 문제가 있기에 새로운 대체 문법이 생겼는지, 어떤 차이가 있는지 살펴보자. 우선은 var의 문제점 세 가지를 살펴보자. var의 세 가지 문제점 1. 선언을 중복해서 할 수 있다 var code = 10; var code = 20; console.log(`code: ${code}`); // 'code: 20' 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작하며, 가장 마지막 값을 저장하고 있는다. 2. scope의 범위가 전역 / 함수로 제한된다 var code = 10; if (true) { var code = 0; var codeName =..

들어가며 프로젝트를 진행하는 중에 브라우저 화면을 그대로 PDF로 만들어야 하는 업무가 생겼다. 'html2pdf'라는 오픈소스를 통해 구현은 간단히 끝났지만 속도가 느리다는 새로운 문제가 발생했다. 그러다 문득 'JS에서는 속도를 어떻게 측정하지?'라는 생각이 들어 이 포스팅을 작성하게 되었다.(PDF 생성의 속도 문제를 해결하는 방법은 여기서는 생략한다) JS에서 성능 측정 방법 console.time(id: string) console.timeEnd(id: string) 두 함수는 짝을 이뤄 사용한다. 측정을 시작할 때는 console.time() 함수에 고유한 값을 문자열로 넣어주면 된다. 마찬가지로 측정을 끝낼 때는 console.timeEnd() 함수에 동일한 고유값을 문자열로 넣어준다. co..

들어가며 웹 개발을 하다 보면 코드 블록의 깊이가 깊어지는 경우가 발생한다. 특히 퍼블리싱된 HTML 파일은 탭 간격만으로 모니터의 절반을 차지하기도 한다. 이런 경우 탭 간격을 기본값으로 사용한다면, 세로로 길어지는 코드로 인해 가독성이 떨어지게 된다. 그때 탭 간격의 변경이 필요해진다. 설정하는 방법 먼저 아래와 같이 1) Preferences로 이동하고 (Window는 'settings'로 이동) 2) 검색창에 "tab size"라고 검색한다. 3) Code Style 영역에서 원하는 언어에 대한 Tab size를 수정할 수 있다. 기본값은 4칸이다. 마치며 좋은 개발자가 되기 위해 좋은 습관을 몸에 익혀두자. 코딩 스타일은 그런 의미에서 항상 나은 방법을 찾아야 하고 이를 실천하는 노력이 필요하다..

들어가며 코드 스타일은 개인마다 다르다. 개인이 선호하는 스타일도 있지만 보통 본인이 속한 팀의 스타일을 따라가게 된다. 그렇다면 개발자 누구나 한 번쯤 꿈꾸는 회사, 구글의 자바 코드 스타일은 어떨까? 이들의 코드 스타일이 무조건 정답은 아니지만 한번 구경해볼 수 있는 좋은 오픈소스가 있다. "google-java-format" 설치 방법 이곳에 자세한 설치 및 사용방법이 있지만, 이번 글에서는 인텔리제이에서 플러그인을 통해 사용한다. 먼저 아래와 같이 1) Preferences로 이동하고 2) Plugins를 누른 후 3) Marketplace에서 "google"을 검색하면 맨 위에 있는 "google-java-format"을 설치하고 restart를 한다. 이렇게 간단하게 사용할 준비가 끝났다. 이..