본문 바로가기

전체 글102

ESLint, Prettier 자동화 세팅하기 (feat.husky) 프리온보딩 첫 주차 세션에서 ESLint, Prettier 세팅이 협업에서 매우 필수적임을 배웠다. 그 전에도 팀 프로젝트에서 린터와 포맷터 모두 사용했지만, 이를 자동화하여 사용할 생각은 하지 못했다. (수동으로 config 파일을 깃에서 fork 할 때 받아와서 에디터에서만 사용했고, push, commit시 체크하지 않았던 기억...) 린터/ 포맷터의 필요성과 자동화 세팅 방법에 대해 배운 것을 채용 과제를 하며 적용해보기로 했다. 자동화는 Husky의 도움을 받을 것이다. 초반에는 세팅이 조금 번거로울지라도, 회사에서 협업 시 필수이므로 지속적인 개발 생산성 향상을 위해 지금 시도해보기로 했다. 1. 설치 - lintting 기능은 ESLint / formatting은 Prettier를 사용 - .. 2023. 7. 1.
프로젝트 구조 설계하기 프리온보딩 인턴십을 진행하며 사전 과제인 Todo 앱을 각자 어떻게 구현해왔는지 리뷰하는 시간을 가졌다. 깔끔한 프로젝트 폴더 구조를 통해 모듈화를 수행하신 분들의 코드를 보게 되었다. 그 전에는 부끄러운 폴더 구조... (components, pages만 대충 나누는 정도였음) 로 구상하던 나에게 모듈화 / 프로젝트 구조 설계에 대한 관심을 갖게 해준 좋은 기회였다. 나의 부끄러운 과거... ㅋㅋㅋㅋㅋ components, pages만 겨우 나누고 components 내에서도 layout 등으로 나누지 않았다. 그리고 저 안에 API 호출과 validation 함수 등이 모두 한꺼번에 들어가있음...(지옥) 이렇게 모듈화를 안해준 것이 코드의 가독성을 매우 해쳤다. 협업 시, 내 코드를 가독성 좋게 작.. 2023. 7. 1.
Tailwind CSS 프로젝트에 도입하기 (특징 / 설치) - 이전 팀 프로젝트를 두 회차 진행하며, CSS 스택 후보로 항상 Tailwind CSS 가 등장했었다. 그러나 항상 익숙한 styled-components에 밀려 채택되지 못했다. "다음번에는 도입해봐야지" 생각만 하다, 채용 과제를 진행하며 드디어 적용해보게 되었다. 이번 계기를 통해 tailwind를 사용해보고, 내가 직접 느낀 장단점까지 향후 정리해보고자 한다. - 도입에 앞서, Tailwind 공식 페이지에서 특징을 탐색해보았다. - utility-first / 개발 속도 향상 - Rapidly build modern website without ever leaving your HTML -> 퍼블리싱 작업을 하면 class 나 기타 CSS 선택자를 신경쓰며 HTML 구조가 있는 파일과 CSS를.. 2023. 7. 1.
Redux-saga 알아보기 채용 과정을 진행하면서, redux-saga를 기술 스택으로 쓰고 있는 회사를 종종 보게되었다. 그리고 현재 과제 전형을 진행하고 있는 회사에서도 redux-saga를 쓰고 있었다. redux-saga가 무엇인지 전혀 배경지식이 없어서, 아래 아티클을 요약하며 읽어보았다. https://min9nim.vercel.app/2020-04-23-redux-saga/ redux-saga 가 해결하는 문제 본 글에서는 redux-saga 를 알고 싶지만 왠지 높아 보이는 진입장벽으로 마음이 불편한 개발자들을 위해 작성되었다. redux-saga 가 필요한 이유와 redux-saga 가 어떤 문제를 해결하는 지에 대한 이해를 min9nim.vercel.app - Redux-saga가 등장하게 된 배경 프로그래밍이란.. 2023. 6. 24.

티스토리툴바