January 24, 2022

<aside> 👨🏻‍💻 팀이 모여서 토론이 필요한 팀 별 과제입니다. 기업과제(d)를 시작하기 전에 아래 주제에 대한 토론을 하시고, 과제가 끝난 후 다시 모여 노션에 정리해주세요.

줌, google meets 등으로 온라인 만남이 필수로 요구됩니다.

</aside>

• 주제: CRA Project Structure

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

  공식적인 단어를 선택하기 위해서 아래 참조링크의 ‘리액트 공식 문서 추천 구조'를 참조하였습니다.

  저는 프로젝트를 진행할때 ‘파일의 기능이나 라우트에 의한 분류’ 방법을 사용해서 파일 구조를 정하였습니다.

  • 장점 : 각 페이지의 기능에 맞게 라우트로 분류된 폴더를 정하고, 이렇게 했을 때의 장점은 연관성이 있는 파일 끼리 묶어두어서 다른 사람들이 봐도 직관적으로 이해하기 쉽습니다.

  • 단점 : 구조가 복잡해 질 수 록 한 컴포넌트 폴더가 가지는 파일의 수가 너무 늘어나고, 뎁스가 깊어질 수 있습니다. 따라서 규모가 작은 서비스에 적합합니다.

  • 참조링크 🔗

    1. 리액트 공식 문서 추천 구조
    2. [React] 프로젝트 디렉토리 구조 도대체 어떻게 잡아야 되나요? - 고민하지 마세요🙃
    3. **리액트 어플리케이션 구조 - 아토믹 디자인 ⭐️⭐️⭐️ ⇒ 이번 과제에 사용해보고 싶은 구조!**

• 주제: CSS 작성 방법

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

     1. Styled Component :

        1. CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)
        2. JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를 들어, React에서는 props를 활용한 조건부 스타일링이 가능하다.
        3. 현재 사용중인 스타일만 DOM에 포함한다. 컴포넌트 간 CSS 충돌이 없다.

     2. Tailwind CSS :

        1. 랩핑 태그의 클래스명을 사용할 일이 거의 없으므로 container, wrapper, inner-wrapper와 같은 클래스명을 고민하지 않아도 된다.
        2. 모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 일관된 스타일로 구현하기가 수월하다.
        3. emotion이나 styled-components 와 같은 CSS-in-JS 라이브러리와 함께 사용할 수 있다.
  • 참조링크 🔗
    1. https://velog.io/@ken1204/styled-components-선정의-이유
    2. Hello Tailwind CSS! | 장점, 단점, 사용법
    3. https://velog.io/@goodenough/Tailwind-CSS-장점-단점

• 주제: Commit Message

  • 팀별로 Commit Message 템플릿 정하셨나요? 어떻게 정하셨는지, 왜 그렇게 하셨는지 알려주세요.
  1. 정민형 :
     1. 교육자료에서 제공해주신 'Udacity Git Commit Message Style Guide’를 사용해보는 게 어떨까 합니다.
     2. 특히 커밋메세지를 영어로 작성하기 보다는 네이버, 토스와 같이 타입(feat, fix, docs, ...)를 제외한 나머지를 한글로 작성해서 가독성을 높이면 좋을 것 같다는 생각을 했습니다.