본 글은 2020년에 작성된 글입니다. Lint란 실보푸라기를 의미한다. 보푸라기가 많은 옷은 보기 좋지 않고, 오래 입기 힘들 것이다. 하지만 입을 수는 있겠지. 프로그래밍에서도 이런 보푸라기가 있다. 흔히들 '더러운 코드'라고 말한다. 하지만 동작은 하겠지. 당장은 동작하지만 에러투성이로 더러운 코드보다 여러 사람들이 읽기 쉽고, 오래 유지보수할 수 있고, 재사용성이나 확장성이 좋은 코드를 작성하는 것이 더 중요하다. 이 부분을 잡아주기 위해 코드의 오류, 코드 스타일 등을 점검하는 것을 린트(Lint) 또는 린터(Linter)라고 부른다. 이를 사용하면 코드의 가독성을 높이는 것 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방할 수 있다. 그럼 ESLint는 뭘까? ESLint란 ES(EcmaS..

우리는 Webpack이 왜 필요할까? 본 글은 2020년에 작성된 글입니다. 프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다. W seogeurim.tistory.com 지난 포스팅에서 Webpack이 무엇이며 왜 쓰는지에 대해 알아보았다. 다시 한 번 그 내용을 정리하자면 다음과 같다. Webpack은 모듈 번들러이다. 프로젝트 규모가 커지고 JavaScript가 발전(모듈 시스템)하면서 요청하는 파일들이 많아졌다. 그 많은 파일들을 모듈 번들러가 합쳐서 요청하는 파일의 수를 줄일 수 있다. 번들(합쳐진 파일)이 너무 커진다면 초기 로딩 속도가 느려지는 문제가 발생할 수 있고, 청크, 캐..

본 글은 2020년에 작성된 글입니다. 프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다. Webpack, 어떤 일을 하는 도구인가? 우선 웹팩의 공식 문서를 살펴보자. 다음 링크로 들어가면 된다. (https://webpack.js.org/) 웹팩에 대해 한 번이라도 찾아본 적이 있다면 다음 이미지가 꽤 익숙할 것이다. 공식 페이지의 메인 이미지이기도 하다. 이 이미지가 말하고자 하는 것이 무엇일까? 뭔가 의존 관계로 얽힌 다양한 파일들, 모듈들을 훨씬 간단하게 만들어주고 있다. 중간에서 그 역할을 하고 있는 저 파란색 정육면체 모양의 도구가 바로 Webpack이다. Webpack은 간단히..

본 글은 2020년에 작성된 글입니다. node 개발 환경에서는 패키지 매니저로 npm 또는 yarn을 쓰곤 한다. 나는 그냥 npm이 편해서 npm을 써왔었는데, 한 프로젝트를 진행하다가 팀원들이 다 yarn을 쓰자고 하는 것이다. 그래서 yarn이 훨씬 좋은 무언가가 있는 것인가? 하는 생각이 들어서 한 번 찾아봤다. 우선 개발에 있어서 npm과 yarn, 이 둘의 차이는 크게 없다라고 보면 된다. 'yarn이 npm의 조금 더 개선된 버전이다'라는 것은 많이 들어봤을 것이다. 이 사실에서 우리는 두 가지를 유추할 수 있다. 첫 번째, npm이 먼저 나왔기 때문에 yarn보다 다운로드 수 및 점유율 측면에 있어서 뛰어날 것이다. 그리고 두 번째, yarn이 npm의 부족한 점들을 개선했기 때문에 사람..