[슈퍼코딩] 1차 피드백

FE 1차 Project 해설 강의 자료

<aside> 💡 OVERVIEW

</aside>

클론 프로젝트 해설

• 프로젝트 의도
• 피드백
• 다음 프로젝트 전 준비사항

<aside> 💡 LECTURE

</aside>

프로젝트 의도

1. 우리가 실제 서비스에서 사용하는 동작을 동일하게 구현할 수 있는가

• 간단한 동작들처럼 보이지만, 실제 구현은 간단하지 않은 경우도 많다.

1. 어떤 기능을 보고 이 기능을 구현하는데 얼마나 걸릴지 일정을 올바르게 산출할 수 있는가

• 실제 현업에서는 없는 서비스를 새로 만들어야 하는데 그 일정을 미리 예측해서 동료에게 전달해야 한다.

피드백

코드베이스 관련

1. Git 브랜치 전략에 맞게 커밋, 푸시, PR을 작성하고 리뷰를 통해 코드를 병합했는가?
2. 디렉토리 구조를 MECE하게 잘 구분하였는가?

• Contexts
• Hooks
• Components

리액트 관련

1. 리액트 컴포넌트를 재사용성이 가능하게 잘 쪼개서 만들었는가?
2. 상태를 디버깅 하기 수월하게 데이터 구조를 설계했는가?
3. 불필요한 리렌더링이 여러 차례 일어나지 않도록 최적화를 진행했는가?
4. 여러 곳에서 사용하는 커스텀 훅을 응집성 있게 잘 만들어서 사용했는가?
5. 비동기 통신을 사용한 경우 async/await 또는 Promise를 적절하게 잘 사용하였는가? 예외 처리도 빠짐없이 잘 해주었는가?

다음 프로젝트 전 준비 사항

1. 요구사항 정의 (1) API 데이터 설계 (2) 에픽 – 스토리 – 태스크 (3) 일정 관리
2. 비동기 통신(API call) 관련 미흡한 부분 추가 학습 (1) 로딩 (2) 에러 핸들링 (3) 관련한 API call 라이브러리도 살펴보기(e.g. react-query, swr)

<aside> 💡 LECTURE

</aside>

클론 프로젝트 고생하셨습니다!

 

✅MECE하게

 

"MECE"는 "Mutually Exclusive, Collectively Exhaustive"의 약어로, 한국어로 번역하면 "상호 배타적이면서 전체를 아우르는" 정도가 됩니다. 이는 구조나 분류를 설계할 때 사용되는 원칙 중 하나입니다.

디렉토리 구조를 MECE하게 구분한다는 것은 각 디렉토리가 서로 중복되지 않고, 전체적으로는 모든 요소를 포괄한다는 것을 의미합니다. 예를 들어, 소프트웨어 프로젝트의 폴더 구조를 설계할 때, 각 폴더가 특정한 역할이나 기능을 수행하며 중복되지 않도록 하는 것이 중요합니다.

예를 들어, 웹 개발 프로젝트에서 아래와 같은 폴더 구조가 MECE하게 설계되었다고 할 수 있습니다:

 

/project
  /src
    /controllers
    /models
    /views
  /public
    /css
    /js
    /images
  /config
    /database
    /routes
  /tests

 

 

이 구조에서 각 디렉토리는 다음과 같은 역할을 수행하며 중복되지 않습니다:

• /src: 소스 코드 관리, MVC 아키텍처를 따름.
  • /controllers: 컨트롤러 관련 파일들.
  • /models: 모델 관련 파일들.
  • /views: 뷰 관련 파일들.
• /public: 웹 페이지에 공개되는 정적 파일들.
  • /css: CSS 파일들.
  • /js: JavaScript 파일들.
  • /images: 이미지 파일들.
• /config: 설정 파일들.
  • /database: 데이터베이스 설정 파일들.
  • /routes: 라우팅 설정 파일들.
• /tests: 테스트 관련 파일들.

이렇게 구성함으로써 각 디렉토리가 명확한 역할을 수행하며, 전체적으로는 모든 요소를 포괄하고 있습니다. 이는 프로젝트를 유지보수하거나 새로운 개발자가 참여할 때에도 구조를 이해하고 적용하기 쉽게 만듭니다.