[TIL] 프리온보딩 6일차 - 220508

📍 팀 과제

1️⃣ Git develop 브랜치로 push 하기

Git을 협업해서 사용해보는 것이 처음이라 develop 브랜치로 push하는데 애먹었다.

뭔가 공부하면서 해보고 싶었는데 그러기엔 시간이 촉박해서 팀원분께 도움 요청해서 함께 push를 진행했다.

코스하는 도중에 'git 협업 가이드' 게시물을 정리하고 싶지만 시간이 없는 관계로 여기에 간단히 정리하고 추후에 더 공부를 해야겠다.

1. 현재 내가 작업한 브랜치로 checkout하여 add, commit, push
2. git pull upstream develop
3. conflict 파일이 있다면 충돌이 난 경우
   1. 충돌난 것 비교하면서 해결
   2. 초록색을 적용하고 싶다면 accept current change, 파란색을 적용하고 싶다면 accept incoming change
4. git push upstream 내가 작업한 브랜치 
5. github에서 basemain을 develop으로 하고, compare를 내가 작업한 브랜치로 지정
6.  PR request 하기
   1. 만약 안된다면 conflict 파일이 있는 것이다
   2. pr close 하기
   3. 수정하고 나서 add, commit, push (이 때 push는 origin이 아닌 upstream으로 해줄 것)
   4. github에서 다시 pr하면 된다.
   5. 성공하면 merge pull request 하기

 

 

2️⃣ 멘토님께 처음 받은 짧은 코드 리뷰

시간이 부족해 내 코드를 다 봐주신건 아니지만 input 작성하고 enter하면 실행되는 것에 대한 작지만 귀한 칭찬을 받았다. (input 작성하고 enter하면 실행되는 것은 form에 submit으로 날려주면 된다) 근데 변수명 이게 뭐냐는 지적도 받았다 (ㅋㅋ) 피곤해서 머리가 안돌아갈 때는 뭔가 그 때 당시엔 최선이였지만 쌩쌩할 때 보면 경악스러운 변수명이 나오는 것 같다. 변수명 생각하는게 나만 힘든가.. 더 잘 생각해봐야지.. 다짐..

 

 

3️⃣ 첫 react 팀 프로젝트를 하면서 느낀 점

아직 react를 공부하지 얼마 안된 상태에서 프로젝트를 해서 그런지 애를 많이 먹었다.

솔직히 안힘들었다면 거짓말이지만 배운 것이 많아 좋았다.

이번 프로젝트를 하면서 어려웠던 점은 route로 어떻게 데이터를 받아오는지가 어려웠다.

회사를 다닐 때는 api 문서가 있어서 그거대로 진행했다면.. 이번에는 localStorage로 데이터를 어떻게 내 페이지까지 넘겨주는지 감이 안잡힌 상황에서 시작하니까 힘들었던 것 같다..

그래도 이제 api를 통한 프로젝트를 많이 할 것 같아서.. 조금은 안심이 되지만 공부해보지도 않고 사용해보는 recoil과 typescript를 어떻게 바로 프로젝트에다가 적용시킬 수 있을까 걱정이 된다.

---

📍 수업 내용 정리

1️⃣ 개발 일정 잘 조율하기

개발 기간이 만약 일주일이라면 5일 안에는 끝내보도록 하자.

그 후 이틀동안은 test와 버그도 잡고 readme도 작성 등등.. 할 게 많다.

 

 

2️⃣ useMemo() & useCallback()

useMemo()는 값을 저장하고, useCallback()은 함수를 저장한다.

useMemo()나 useCallback()은 용량을 많이 차지하기 때문에 연산이 크면 사용하는 것이 좋고 간단한 코드라면 안쓰는게 퍼포먼스적으로 좋을 것 같다.

[React] useCallback()과 useMemo() 사용하기

 

 

3️⃣ 오픈 소스 라이브러리

git에는 정말 많은 오픈 소스 라이브러리가 있다.

사용자가 많이 사용하는지 확인해보고, 라이브러리를 만든 사람이 더 이상 업데이트를 하지 않는 등 여러가지 조건을 확인해 볼 필요가 있다. (git issues 메뉴혹은 README에서 확인) 만약 오픈 소스 라이브러리를 만든 사람이 더 이상 업데이트를 해주지 않는다면 fork한 사람들이 진행한 업데이트가 있는지 확인할 수 있다.(insights 메뉴에서 network 클릭하면 fork해서 수정된 repo가 뜬다.)

---

💡 그 외에 배운 작지만 소중한 TIP

- Component에 150자 미만으로 작성해보자.

- 'Git clone 레포URL 폴더명'을 입력하면 해당 위치에 폴더가 생성되면서 클론된다.

- alert()는 쓰지 않는다. alert가 뜨면 자바스크립트 코드가 멈추기 때문에 !

- 상수값은 Component 밖에 작성 ! (리렌더링될 때 다시 선언되지도 않지만, 가독성이 좋아진다)

- navigation bar에 대한 명칭 (global navigation bar, snb 혹은 lnb navigation bar)

- 오늘 처음 본 &.open 가상 선택자..

- state에 객체는 넣지 않는 것이 좋다. (useState가 하나의 값으로 볼 수 있기 때문에)

- 버튼 내용 작성 안하고 싶을 땐 버튼 속성 aria-label 사용

 

 

🌈 오늘의 유용한 사이트 및 라이브러리

- store.js 사이트 (localStorage 대신 사용 가능하고, localStorage보단 당연히 편리하다)

store-js

 

 

- Slick.js (Carousel 관련된 오픈 소스 라이브러리)

GitHub - kenwheeler/slick: the last carousel you'll ever need

 

 

- Squoosh (이미지 최적화 사이트)

WebP는 최신 사파리만 지원해서 사용하지 않는게 좋다.

색깔이 많은건 JPG, 색깔이 적은건 PNG를 사용하자.

Squoosh

 

 

- framer-motion 라이브러리 (react에서 애니메이션과 제스처를 쉽게 다룰 수 있게 하는 라이브러리)

GitHub - framer/motion: Open source, production-ready animation and gesture library for React

 

 

- dayjs 라이브러리 (날짜 라이브러리)

moment 라이브러리도 많이 사용하는데 dayjs 라이브러리가 용량이 훨씬 적기 때문에 사용하기 좋다.

Day.js · 2kB JavaScript date utility library