주제: CRA Project Structure

• CRA로 만든 프로젝트의 폴더구조는 참 다양합니다. 어떤 폴더구조로 프로젝트를 진행하셨나요? 왜 그렇게 나누었는지, 그리고 해당 구조의 장점과 단점은 무엇인가요?

src
│ 
├─components
│  │  
│  └─SelectConverter  
│  │       SelectConverter.jsx
│  └─TabConverter
│          TabConverter.jsx
│
├─constants
│      index.js
│
├─pages
│     MainPage.jsx
│
├─styles
│     GlobalStyles.js
│ 
├─utils
│     dateConverter.js
│

팀별로 컴포넌트 디렉터리를 생성하고, 공통된 메인 페이지에서 호출하는 방식을 사용했습니다. 또한, 스타일 reset 을 적용하기 위해 styles 디렉터리를 구성하였으며, 공통적으로 사용하는 상수(API 엔드 포인트, 목데이터)를 constants디렉터리에 위치하였습니다. api에서 데이터를 fetch로 받아 값을 가져오는 useEffect 함수는 utils에 배치했습니다.

주제: CSS 작성 방법

• React에서 많이 사용하는 CSS 작성 방법은 Styled Component, SASS, CSS Modules 등이 있습니다. 어떤 방식을 선택하셨나요? 선택한 방법의 편리한 점은 무엇이었나요?

Styled Component를 선택했습니다. CSS에서는 명시적으로 정의하지 않는 경우 부모 요소에서 자동으로 상속되는 속성이 있습니다. 하지만 CSS in JS 에서는 문서 레벨이 아니라 컴포넌트 레벨로 CSS를 추상화 하기 때문에 부모 요소의 속성을 상속하지 않습니다. 이 특징을 이용하여 컴포넌트 단위로 관리할 수 있다는 장점을 살려 프로젝트를 설계할 수 있었습니다. state props를 넘겨줄 수 있다는 장점도 있으며, class값을 사용하지 않아 가독성이 높다고 판단했습니다.

주제: Commit Message

• 팀별로 Commit Message 템플릿 정하셨나요? 어떻게 정하셨는지, 왜 그렇게 하셨는지 알려주세요.

깃모지를 사용하여 직관성을 높이고, 기능이나 UI 설계에 따른 메세지를 커밋 메세지에 담는것을 컨벤션으로 결정했습니다. 깃모지로 인해 상대방이 어떤 작업을 수행했는지 한 눈에 확인할 수 있고, 메세지를 보며 조금 더 상세한 상황을 파악할 수 있습니다.