Today 요약

1. ESLint, Prettier
2. 리팩토링(사전과제)
3. husky

1. What I did?

1. 1 지난 프로젝트에 ESLint, prettier 적용해보기

크게 어려운 점은 없었다. npm init -y로 package.json 파일 생성시키고 eslint 패키지 설치한 다음에 내가 원하는 대로 하나씩 lint 규칙을 설정해나갔다. 그때 prettier랑 겹치는 부분은 옵션을 off 시키는 식으로 보완해 나갔다. 통합시키는 방법도 있는데 당분간은 그냥 설정을 off시키는 방법으로 사용해보려고 한다.

vscode에서 eslint 오류가 발생하면 자동으로 추론해주기 때문에 그 부분을 가지고 오류를 해결하면 손쉽게 해결이 가능했다. 예전에는 전역에 설치를 해서 관리를 하려고 했다가 좀 많이 헤매기도 했는데, 공식 문서에서도 전역 설치는 권장하지 않고 있기 때문에 프로젝트를 시작할 때마다 설정해서 활용할 생각이다.

1.2 폴더 네이밍

폴더의 이름을 지을 때 공백을 제거하고 영어로 작성하는 습관을 들이는 것이 좋다. 배포할 때 문제가 될 수도 있다고 하며 실제로 리액트로 프로젝트 진행 중에 폴더 명이 한글이여서 문제가 발생했던 적이 있다. GPT가 이야기해주는 한글 네이밍의 문제점은 호환성 문제와 이식성 문제, URL 및 경로 문제, 협업 문제 등을 이야기해주었다. 내가 예전에 문제가 되었던게 정확하게 어떤 문제였는지 기억은 안 나는데, 설마 한글로 폴더 이름을 지었다고 문제가 생길 수 있다는 게 어의 없었던 기억이 난다. 그래서 깃허브와 연결되어 있는 폴더 중에 상위 폴더가 한글이고 중간에 영어로 변경했을 때 push했을 때 호환 문제가 생긴다거나 할 수도 있을 것 같아 테스트를 해봤고 이상이 없는 걸 확인 후로 현재 대부분의 폴더(95% 이상)를 한글에서 영어로 변경시켜놨다.

1.3 리팩토링(사전 과제)

오늘은 아무래도 자꾸 미루게 되는 리팩토링을 조금이라도 해보고자 원티드 프리 온보딩 사전과제로 리팩토링을 진행했다. 엄청 많은 걸 하진 않았고 오늘은 간단하게 Header 부분에 중복된 코드가 있어서 하나의 Header로 통일해서 나머지 다른 부분은 prop으로 전달해서 해결했다.

여러개의 컴포넌트를 하나의 컴포넌트로 통합?한건데, 컴포넌트의 중복된 코드를 함수로 추출했다고 표현하는 게 맞을지 모르겠다..

아무튼 앞으로 주말에는 리팩토링 관련 공부는 실제 구현했었던 프로젝트 코드를 가지고 리팩토링을 하면서 공부하도록 하자.

2. What I Learned?

2.1 husky

husky란 git hook을 관리하는 도구, git hook이란 git 작업 흐름 중에 특정 이벤트가 발생하면 실행되는 것이다. 그러니까 보통은 commit이라는 이벤트가 발생하기 전에 어떤걸 실행할지 그리고 push이벤트가 발생하기 전에 어떤 걸 실행할지 관리해주는 것이다. 그걸 package.json에 postinstall로 설정해주면 npm install 같이 패키지 install을 실행할 때 huksy install도 같이 실행할 수 있다. 그리고 husky add를 통해서 원하는 hook을 설정하면 된다.

3. What I curious?

https://fierce-baryonyx-006.notion.site/2023-06-24-55ae9ed29b7a4ee9b94f578044ba87d4?pvs=4