반응형
⭕ 카카오테크캠퍼스 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 룰을 추천받아 사용했지만, 왜 그것을 사용했는지 리뷰어가 이해할 수 있도록 설명하지 못한 것 같았다. 🤷♂️
- 앞으로는 설정의 이유와 필요성을 명확히 설명하고, 리뷰어가 이해할 수 있도록 하는 데 신경 써야겠다. 오늘의 경험을 바탕으로 더 나은 코드를 작성하고, 효과적인 커뮤니케이션을 할 수 있도록 노력하겠다. 💪✨
반응형
'프론트엔드 > 카카오테크캠퍼스 2기' 카테고리의 다른 글
카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고 (77) | 2024.07.10 |
---|---|
카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고 (78) | 2024.07.10 |
카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고 (83) | 2024.07.09 |
카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고 (83) | 2024.07.09 |
카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고 (67) | 2024.07.01 |
카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고 (66) | 2024.07.01 |
카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고 (66) | 2024.07.01 |
카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고 (66) | 2024.07.01 |