[WIL | 원티드 FE 인턴십] 1주차 (06.26 ~ 30) 후기

[진행 기간]: 23.06.26(월) ~ 30(금) 

[교육 내용]

• FE 개발자끼리의 협업을 위한 기본 세팅(환경 설정), 생산성을 높여주는 배포 자동화 등.. 
• 서버와 클라우드 컴퓨팅 AWS 개념, CI/CD with GitHub Actions 
• 5명 이상의 개발자끼리의 공유 리포, git 연습(best practice를 추합해서 main에 병합하는 식으로 진행)
• 서로 코드를 공유하고 best practice 선정하기 (어떤 코드가 좋을 지, 어떻게 더 개선할 수 있을 지, 스택 선정 사유  등)

[느낀 점]

1. git CLI 및 컨벤션

• 프로젝트를 여러 번 진행했고 3명 이상의 FE 취준생들과 같이 github으로 작업을 했음에도 불구하고 막상 다시 브랜치를 분기해서 PR을 올리고 PR형식과 commit 형식을 맞추고 진행하는 것이 마냥 쉽지는 않았다. 심지어 우리팀의 컨벤션이 다른 팀보다 정교한 것도 아니고 PR도 상세하게 형식을 잡진 않았다. 공유 템플릿을 만들어 공유하면 좋겠지만 시간이 좀 촉박한 거 같고 다들 PR형식을 자유롭게 사용했던 터라 우선은 간단한 형식으로 맞추고 진행하였다.  
• 원격 브랜치의 내용은 `git branch -r` 옵션으로 확인할 수 있으며 git 관련 명령어들을 확인하고 싶다면 git --help를 통해 확인이 가능하다. 개인적으로 프로젝트를 진행할 때에는 source tree => vscode extension(gitlens)를 활용하였는데 gitlens GUI에서 직접 커밋을 할 때에 새로운 브랜치가 생겨서 당황한 경험을 했다. 결국 정말 내가 원하는 브랜치를 생성하고 작업을 하려면 안전하게 GUI가 아닌 CLI를 사용하는 것이 좋다고 느꼈다. 

1-1. git branch 옵션 설명 

git branch: 현재 저장소의 브랜치 목록을 보여줍니다. 현재 위치한 브랜치는 앞에 별표(*)로 표시됩니다.

git branch <branch_name>: 새로운 브랜치를 생성합니다. <branch_name>은 새로 생성할 브랜치의 이름입니다.

git branch -d <branch_name>: 지정한 브랜치를 삭제합니다. 이 옵션은 브랜치를 삭제하기 전에 해당 브랜치가 현재 브랜치에 병합되었는지 확인합니다. 병합되지 않은 브랜치는 삭제할 수 없습니다.

git branch -D <branch_name>: 강제로 지정한 브랜치를 삭제합니다. 이 옵션은 해당 브랜치가 병합되었는지 여부에 상관없이 삭제합니다.

git branch -m <new_branch_name>: 현재 브랜치의 이름을 변경합니다. <new_branch_name>은 변경할 브랜치의 새로운 이름입니다.

git branch -a: 로컬과 원격 저장소의 모든 브랜치를 보여줍니다.

git branch -r: 원격 저장소의 브랜치 목록을 보여줍니다.

git branch --merged: 현재 브랜치에 병합된 브랜치 목록을 보여줍니다.

git branch --no-merged: 현재 브랜치에 병합되지 않은 브랜치 목록을 보여줍니다.

이 외에도 git branch 명령어에는 다양한 조합과 옵션이 있습니다. git branch --help 명령어를 실행하면 Git 공식 문서에서 자세한 설명을 확인할 수 있다

2. git hooks? husky🐕‍🦺?

솔직히 이전에 잠깐 스쳐지나가듯 허스키라는 것에 대해서 들어본 적은 있다. 하지만 정확히 어떤 개념을 갖고있고 어떤 기능을 하는 지는 알 수 없었다.

• 간단히 말하면 git hooks는 우리가 이전에 정해놓은 prettier, eslint 같은 정책들을 강제하는 것 혹은 검사를 자동화시켜주는 것이라고 이해했다(정확히는 Git과 관련된 이벤트가 발생했을 때, 특정 스크립트를 실행시켜주는 기능).
• eslint 나 prettier를 설치하고 세팅했어도 어떤 상황에서는 검사가 안되거나 실행이 안될수도 있다. 이런 상황을 방지하고자 husky를 통해 검사를 강제, 자동화한다. 
• 기본적으로 git hooks는 .git 폴더에서 관리되기 때문에 공유파일에서 배제된다. 이때, husky를 사용하면 쉽게 팀원들에게 git hooks를 공유할 수 있다고 한다.  

 

husky로 git hook 하자 포스팅

가비아 라이브러리

3. best practice ?

• 각자 본인이 사전과제로 제출한 투두리스트 중에서 잘했다고 생각하는 부분을 베스트 프렉티스로 선정하여 추합하기로 했다. 이 과정에서 본인이 기능을 무작정 구현하는 것보다 어떻게 무슨 기준으로 뷰와 로직을 나누고 할 지 생각을 많이해야겠다고 느꼈다. 또한, 그때 당시는 좋다고 생각한 코드가 나중에 더 세분화하려고 할 때, 오히려 응집도가 너무 높아 별로라고 느껴지기도 했다. 예를 들어 Context api, useReducer 조합! 코드도 잘 안 읽히고 지저분하다. 
• 내 코드를 팀원들이 이해하기 쉽게 설명해야하기 때문에 아무 생각 없이 짠 코드는 다시 시간을 들여 이해해야 한다. 또한, 주석없이 코드만 읽었을 때 무슨 기능을 하는 지 알아보게 코드를 짠다는 것이 얼마나 어려운 일인 지 알게 됐다.
• 결국, 처음부터 어떤 구성으로 뷰와 로직을 나눌 지 폴더 구조를 정하고 컨벤션을 정하는 일에 시간을 투자해야 이후에 코드를 짤 때에도 편하다는 것을 체감했다. 
• 마지막으로 공통된 로직을 리팩토링을 통해 뽑아내려고 했을 때, 뽑혀지지 않는 로직도 있었고 뽑아낼 때에는 단순히 코드가 중복되니까 뽑아낸다로는 당위성을 부여할 수 없다. => 오히려 뽑혔을 때, 더 좋지않은 경우도 있다.(이 부분을 잘 구분하지 못해서 분하다.)
• 리팩토링 과정에서 `커스텀 훅`과 `커스텀 함수(내 기준 유틸 함수)`를 구분하는 기준을 모르고 뽑아서 뽑아내서 사용했었는데 이 부분을 best practice 선정 과정을 통해 느끼게 됐다. 
  • 여기서 말하는 커스텀 함수란 컴포넌트 내에서 공통으로 사용되는 로직을 재활용하기 위해 utils 폴더에 따로 빼놓는 함수를 말한다. 커스텀 훅 역시 컴포넌트 내에서 사용되는 공통 로직을 뽑아내서 사용하는 것인데 그나마 찾은 이유라하면 커스텀 훅에는 제약조건(컴포넌트 상단에서 사용, useEffect 내부에서 직접 호출x)이 있고 useState등 리액트 훅을 포함하는 경우가 많다는 것이다. 이 내용은 아래에서 더 자세하게 다뤄보자

3-1. 리액트 커스텀 훅 vs 유틸 함수 

1️⃣ 커스텀 훅(Custom Hook)

: 상태 로직을 재사용할 수 있도록 하는 기능이다. +  컴포넌트 내에서 사용되는 특정 기능을 구현하기 위해 작성된 함수, 주로 state 나 props를 처리하기 위해 사용된다. 

여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 

커스텀 훅은 보통 use라는 접두어를 사용하여 함수의 이름을 정의한다. React의 기본 훅을 이용하여 구성된다. 또한, JSX 코드나 렌더링과 관련된 코드를 포함해서는 안되며, 컴포넌트 내부나 외부에서 호출하여 사용한다.

커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.

• 사용예시) API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 커스텀 훅으로 만들어 사용

2️⃣ 유틸 함수(util function)

: React의 유틸 함수는 일반적으로 리액트에서 자주 사용되는 기능들을 모듈화하여 재사용할 수 있도록 도와주는 함수들을 말한다.

장점은 커스텀 훅과 비슷하며 프로젝트에서 자주 사용되는 함수들을 모아서 별도의 파일로 관리하는 것이 일반적이다.(utils 폴더)

• 사용예시) 배열 안에서 특정 아이템을 찾거나, 문자열에서 특정 문자를 대체하는 등의 기능을 유틸함수로 구현(유효성 검사 등)

✅ 유틸 함수와 커스텀 훅의 차이점

유틸 함수는 특정 작업을 수행하고 애플리케이션의 여러 부분에서 재사용할 수 있는 독립 실행형 함수이다. 

일반적으로 입력 인수를 받아 계산을 수행하며 결과를 반환한다.

반면, 커스텀 훅은 React Hook을 사용하여 구성 요소에 특정 동작이나 기능을 제공하는 기능이다. 

재사용이 가능하도록 설계되어 기능 구성 요소 내에서 호출할 수 있다. 

 

=> 유틸 함수는 어플리케이션 어느 곳에서나 사용할 수 있는 독립 실행형 함수인 반면에 커스텀 훅은 React hooks를 사용하여 구성 요소에 특정 동작이나 기능을 제공하는 함수이다. 

[요약] 유틸 함수는 어플리케이션 전체에서 공통적으로 사용되는 작은 기능을 처리하는 함수이고 커스텀 훅은 주로 특정 컴포넌트에서 사용되는 기능을 처리하는 함수이다. 

 

참고 ref: https://growing-jiwoo.tistory.com/83

[React.js] 커스텀 훅(Custom Hook)과 유틸 함수(util function)에 대해서

 

💥공통 로직을 빼면서 겪은 이슈들 

-> 참고로 util함수가 아니라 전부 커스텀 훅으로 빼고자 했다. 이때는 둘의 차이를 크게 모르고 있었다. 

1. navigate 모듈화 x
   1. navigate 부분만 추출해서 훅으로 만들기 X(useEffect 내부에서 커스텀훅못씀)
   2. useEffect 부분이랑 navigate부분 둘 다 커스텀 훅으로 만들기 X => 확인해보니까 무한렌더링 아예 컴포넌트 내부에서 useEffect써야 될거같음

이 부분은 팀원들이랑 모듈화를 같이 진행하면서 해결하였는데 바보같이 커스텀 훅을 직접 호출해서 생긴 문제였다. 커스텀 훅의 return 값으로 navigate 함수를 만들고 리턴해줘서 컴포넌트 내에서 호출할 시에는 문제가 없었다.

1. 이메일 패스워드 로직 모듈화 x
   • isValidate랑 setIsValidate 포함해서 비즈니스 로직 분리하려고 했는데 onChange 함수 내부에서 호출하고 있어서 못함 

현재 생각하기에 이 부분은 커스텀 훅이 아니라 유틸 함수로 뺐어야 맞는 거 같다. onChange내부에서 current.value를 인자로 넘겨줬으면 큰 문제가 없었을 것