Study/Frontend
-
ESLint를 자동화해보자 (feat. husky & lint-staged)Study/Frontend 2022. 4. 14. 13:23
Lint 코드의 오류나 버그, 스타일 등을 점검하는 것을 lint라고 부른다. 린트는 코드의 가독성을 높이는 것뿐만 아니라 자바스크립트와 같은 동적 언어의 특성인 런타임 버그를 예방하는 역할도 한다. ESLint는 ECMAScript 코드에서 문제점을 검사하고 더 나은 코드로 고쳐주는 lint tool이다. ESLint를 사용해서 개발을 하면 잠재적인 오류와 버그를 제거할 수 있다. 협업을 하는 프로젝트에서 lint를 적용하는 것은 필수라고 할 수 있다. 왜냐하면 모든 개발자들이 같은 규칙 내에서 개발해야 잠재적인 오류를 방지할 수 있기 때문이다. 하지만, 아무리 ESLint를 모든 개발자들이 사용한다고 해도 warning, error 등 lint 결과를 무시하고 바로 commit 하고 push 해버릴 ..
-
웹팩 성능 최적화를 통해 개발 효율성을 극대화 해보자 ✨Study/Frontend 2022. 4. 8. 16:25
🚧 이 글은 윈도우로 개발하는 동료로부터 시작되었습니다..! 사실 m1 맥북 13 프로를 쓰는 나로서는 개발하는데 성능의 문제성을 크게 느끼지 못했다. 서버 사양도 나쁘지 않아서 배포하는데도 크게 느리다는 생각을 못했다. 하지만 윈도우 환경에서 개발하는 동료의 빌드 속도를 보고 경악을 금치 못했다... 첫 순수 빌드 시간이 거의 30초에 가까웠으며, webpack dev server를 첫 구동하는 시간이 무려 90초나 걸리는 것이었다.. 내 개발환경의 성능과 비교해보자면 첫 빌드는 약 3배, dev server 구동은 약 13배 차이가 났다. 그래서 동료 개발자의 웹팩 개선 시도를 기점으로, 정확하게 개발 환경의 문제점을 파악하고 고치기 위해 Webpack 공식 문서를 정독하면서 성능을 최적화해보기로 했..
-
나를 너무나 힘들게 했던 CORS 에러 해결하기 😂Study/Frontend 2021. 4. 21. 18:39
🔥 사건의 발단 : 외부 API 호출 때는 바야흐로 2020년 3월. 프론트엔드 공부를 시작한 지 얼마 되지 않은 채 홀로 토이 프로젝트를 진행하던 중이었다. 코로나 바이러스 관련 웹서비스를 만들고자 했고, React로 클라이언트단을 개발하고 Firebase로 배포까지 진행해보려고 했다. 확진자 데이터를 지도에 보여주는 것을 구현하기 위해서 코로나 바이러스 확진자 데이터를 제공해주는 외부 API를 사용해야 했다. 당시 내가 프로젝트를 시작했을 때만 해도 공공 데이터 포털에서 제공해주는 API가 없어서, Dropper Lab이라는 곳에서 제공하는 API를 사용하기로 결정했다. (내가 프로젝트를 끝낼 즈음에 공식 API가 출시되었다.) API 문서를 보며 차근차근 코드를 작성한 후, React 클라이언트단에..
-
[Git & GitHub] 왕초보를 위한 깃과 깃허브 사용 튜토리얼Study/Frontend 2020. 2. 13. 13:00
Git & GitHub 튜토리얼 Git은 리눅스의 창시자 Linus Torvalds가 개발한 도구이다. 위는 깃허브에 Linus가 올린 첫 번째 수정 커밋인데 커밋 메세지가 눈길을 끈다. Initial revision of "git", the information manager from hell 지옥에서 온 정보 관리자... ㅋㅋㅋㅋ 얼마나 소스코드를 공동으로 관리하는 것이 힘들었는지 알 수 있는 메세지다. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. 깃은 한마디로 버전 관..