오늘은 사전 Todo 프로젝트 과제를 끝내는 날이었다.
오후에는 큰 기능 별로 나누어 작업한 각 세 팀이 작업하던 git branch 내의 작업물들을 하나로 합치는 작업을 하였다. 나는 이렇게 프론트엔드 개발자 분들이랑 같이 협업을 한 것이 처음이었기 때문에(거의 항상 백엔드나 데이터 분석 쪽 개발자 분들이랑만 협업을 했었다.) 팀원 분들의 컴포넌트를 결합하는 과정을 열심히 보고 또 모르는 부분은 질문하며 많은 것을 배울 수 있었다.😊
팀 협업
처음에 main에서 dev branch를 만들고, 각자가 해당 기능의 이름을 가진 branch를 따로 파서 기능을 만들었다. 오늘은 이 각자의 branch를 하나씩 합친 후(merge 전에 PR을 날려 각자의 코드를 확인해주었다. 이렇게 모두가 짠 코드를 한 번에 보니 변수명이라던가 컴포넌트를 나누고 파일을 나누는 부분 등에서 통일을 해줄 필요성을 느꼈다. 다음 기업 프로젝트 시작할 때는 이 부분을 논의 해봐야겠다는 생각이 들었다.) 충돌이 나는 부분은 제거 하고(생각보다 충돌이 많이 나지는 않았다.) dev로 합쳐줬다. 하지만 이 때 우리 팀이 만든(addTodo) 특정 컴포넌트의 scss파일이 통째로 날라간 것을 발견하였다. 다행히도 기존의 addTodo branch 삭제를 하지 않았기 때문에 파일을 다시 가져올 수 있었지만 어느 부분에서 빵꾸가 났는지 알아내지는 못하였다. 이 부분에 대해서는 꼭 확인하고 넘어가야겠다.(하지만 그 많은 파일 중에 특정 컴포넌트의 scss파일만 날라간 게 이상하긴 하다.)
기능 추가 및 수정
branch dev에 합친 후 기능이 잘 작동하는지 확인해보니 addTodo 모달이 main 부분 뒤에 뜨는 문제가 있었다. 이는 main부분의 z-index 값보다 addTodo 모달의 z-index 값을 더 크게 주어 이를 해결할 수 있었다. 하지만 고치면서 모달인데 왜 뒤에 뜰까? 하는 의문이 남아 이 부분에 대해서도 다시 확인을 해봐야할 것 같다.
피드백
준형님의 각 팀 프로젝트 피드백 시간이 있었다. 받은 피드백을 전체적으로 정리하면 다음과 같다.
- 쉽게 기능 구현이 가능하면 굳이 라이브러리를 써서 무겁게 하지 않아도 됨
- 코드의 가독성 중요
- 변수명 직관적으로 적어주어야 함
- map 안에서 함수 선언x
- javascript 의 reduce를 잘 알아두자!
- localStorage는 string 으로 가져와 json으로 처리해줘야 하지만 store-js를 써서 쉽게 해결할 수 있음
- alert 를 사용하게 되면 모든 자바스크립트 코드가 멈추기 때문에 안 쓰는 게 좋음
- carousel로 이니셜 값 밖으로 빼주기
- useMemo는 값을 useCallback은 함수를 저장 하는 것!!!
- 커스텀 훅을 사용하게 되면 함수를 계속 사용하게 되기 때문에 useCallback으로 처리해줄 수 있지만 useCallback을 남용하면 메모리를 잡아먹음(캐시에 대한것)
연산량이 많은지 확인한 후 그렇다면 useCallback을 사용해줄 수 있음- contextAPI 는 대규모 데이터를 다루는 큰 프로젝트에서는 사용하지 않는 게 좋음
- 날짜 사용 함수 등 큰 규모의 함수들은 util 파일로 따로 빼주기
- setTimeout을 하면 clearTimeout도 해주어야함
혼자할 때는 이런 피드백을 받을 기회도 없고 내가 코드를 제대로 작성하는 게 맞나 항상 궁금증과 한계를 느꼈었는데 이 경험을 통해 정말 많은 ,, 정말 많은 것을 배워가는 것 같아서 이 과정을 마친 후에는 훨씬 자신있게 코드를 작성할 수 있을 것 같다는 생각이 들었다.
오늘 배운 내용
라이브러리 정보 확인
라이브러리 issues: 깃헙의 issues탭을 확인하면 볼 수 있다. 이 때 최신 날짜를 보면 해당 라이브러리의 활성화 정도를 확인할 수 있다.
라이브러리 insights: fork를 받고 각자가 코드를 수정하고 PR날려서 적용을 요청한 후 승인이 되면 main에 적용할 수 있다.
질문 잘하는 법
질문 시 다음과 같은 것들을 전달하여 한 번에 구체적으로 질문할 수 있도록 한다. 질문 시에는 커뮤니케이션이 적을 수록 좋다.
- 브라우저 환경
- 에러 메세지
- 기대하는 바
- 실제 결과이미지 최적화
보통 버튼의 이미지 등은 디자이너가 해주지만 컨텐츠에 들어가는 이미지들은 우리 프론트엔드 개발자들이 해야한다. 다만, admin 프로필사진 등의 사진을 사이즈마다 만들어서 저장하고 처리하는 건 백엔드 개발자의 몫이다.
이미지 최적화 사이트 : https://squoosh.app/
- 색상이 적은 건 jpg말고 png로 압축하면 훨씬 최적화 된다.(gif는 쓰지 않음- 항상 용량이 큼)
- 팔레트 제한 걸어주기(컬러 수를 줄여주기)
svg 파일의 경우 디자이너가 이미지 파일을 png로 주면 다시 달라고 해야한다..
