카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고

📝 설정 관련 PR 리뷰

ESLint 설정

• ESLint 설정은 프로젝트를 진행하면서 워닝/에러가 표시되는 부분을 확인하고 필요한 설정을 추가해 나가는 방식이 좋음.
• 설정 파일 종류: .eslintrc.json, .eslintrc.cjs, .eslintrc.js 등 다양한 파일 이름이 있는데, 이는 작성 방식과 빌드 크기에 차이가 있을 수 있으나 큰 영향을 미치지 않음.

---

ESLint와 Prettier 설정

• ESLint: JavaScript/TypeScript 코드를 일정한 규칙에 따라 작성하도록 돕는 도구. (예: 사용되지 않는 변수 경고, import문 순서 경고)
• Prettier: 코드 포매팅 도구로, 코드의 모양을 예쁘게 만들어 줌. (예: 큰따옴표, 세미콜론, 탭 간격 등)
• 각 도구의 차이를 이해하고, 공식 문서를 참고하여 필요한 옵션을 설정하면 좋음.

---

 

공식 문서 활용

• 무엇인지, 왜 사용하는지, 자주 사용되는 룰은 무엇인지 등의 기본 지식을 가지고 있는 것이 중요함.
• 공식 문서를 참고할 때는 필요한 부분을 정확히 짚어 공부하는 것이 좋음.
• 어려움이 생길 때마다 공식 문서와 구글링을 통해 해결하는 방식이 유용함.

 

📝 커밋 관련 PR 리뷰

패키지 설치 커밋 메시지

• 초기 세팅: init으로 커밋 메시지를 작성함.
• 중간 패키지 설치: chore로 커밋 메시지를 작성함.

 

📝 프로젝트 구조 관련 PR 리뷰

컴포넌트 스타일링

• 기본적인 컴포넌트: 공통적으로 사용하는 스타일을 포함하는 것이 좋음.
  • 예: border나 padding이 항상 동일하다면 해당 컴포넌트에서 스타일을 작성.
• 옵션이 여러 가지인 경우: props를 통해 스타일을 주입받아 컴포넌트에서 핸들링할 수 있도록 설정함.
  • 예: 글자 크기, 색상 등을 props로 받아 처리.

---

 

모듈화

• 컴포넌트와 스타일 파일을 구분할 때 너무 광범위하거나 너무 잘게 쪼개지 않도록 주의해야 함.
• 적절한 모듈화 수준은 프로젝트마다 다를 수 있으며, 직접 다양한 방식으로 시도해보면서 적정선을 찾는 것이 좋음.

---

 

권장 구조

• 지난주 작성한 구조
  • Button.tsx
  • ButtonStyles.ts
  • Button.stories.tsx
• 개선한 구조
  • index.tsx: 컴포넌트 파일
  • style.ts: 스타일 파일
  • .stories.ts: 스토리북 파일

Button/
  ├── index.tsx
  ├── style.ts
  └── Button.stories.tsx

 

📝 Daily Scrum 이후

1. 멘토링 신청

• 학습 질문을 모아 멘토링 신청할 계획

---

2. 데일리 투두 리스트

• PR 리뷰 학습이 필요함.
• 클론 코딩 강의 전에 문서를 숙지하는 것이 필요함.

---

3. 학습 내용 및 공유

• 지난주에 공식 문서와 관련한 어려움을 겪어 기술 블로그를 많이 참고했음. 이와 관련된 고민을 공유하고자 했음.
  • 라이브러리를 도입하기 전, 공식 문서의 'motivation' 부분과 'get started' 같은 기본 튜토리얼을 읽는 것이 중요함.
  • 간단한 부분 적용 시 한국어 테크 블로그를 참고해도 좋지만, 영어로 검색하면 더 많은 양질의 정보를 획득할 수 있었음.
  • 이를 참고하여 진행할 예정임.

 

😋 Today 회고

• 소규모 프로젝트를 두 번 진행했지만, 각자 맡은 부분만 개발하고 형식적인 PR을 남겼을 뿐, 실제로 리뷰를 받아본 것은 이번이 처음이었다. 😅 이번 기회에 각자의 구조와 코드에 대해 피드백을 받고, README에 남긴 질문들에 대해서도 답변을 받았다. 몇 가지는 구체적으로 질문을 남겨 효과적인 답변을 받을 수 있었고, 이를 정리할 수 있었다. ✍️
• 하지만 스스로 반성할 부분도 있었다. 🤔 설정을 하면서 왜 그런 설정을 했는지 명확히 설명하지 않았던 점이 아쉬웠다. 나는 카테캠의 과제로 모든 멘토분이 과제의 모든 내용을 잘 알고 있을 것이라 생각했지만, "Airbnb는 제약이 상당히 많은데, 권장사항일까요?"라는 리뷰를 받았다. 🧐 과제에서 대표적인 Airbnb 룰을 추천받아 사용했지만, 왜 그것을 사용했는지 리뷰어가 이해할 수 있도록 설명하지 못한 것 같았다. 🤷‍♂️
• 앞으로는 설정의 이유와 필요성을 명확히 설명하고, 리뷰어가 이해할 수 있도록 하는 데 신경 써야겠다. 오늘의 경험을 바탕으로 더 나은 코드를 작성하고, 효과적인 커뮤니케이션을 할 수 있도록 노력하겠다. 💪✨

 

➡️ 참고 링크

https://github.com/kakao-tech-campus-2nd-step2/react-gift-react-foundation/pull/35#event-13341843985

강원대 FE_허윤수_1주차 과제 by sugoring · Pull Request #35 · kakao-tech-campus-2nd-step2/react-gift-react-foundation