Project 1) todo-list

🐣Team17 - 비타지(BeTasy)

🐣팀원 : [Beemo] [Tami] [Daisy]

React Level

• [Beemo] : 🟦⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1
• [Tami] : 🟦⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1
• [Daisy] : 🟦⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1

BE Level

• [Beemo] : 🟨⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1
• [Tami] :🟨⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1
• [Daisy] :🟨⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ Lv.1

팀 사진

---

BeTasyTo-do List

https://www.notion.so/BeTasy-To-do-List-825c3a20680f4739b9b10dc76d39821e

팀 규칙

• 브랜치 전략, 깃 컨벤션 링크
• styled components 컨벤션 링크
• 팀 회의시간 : 아침10시, 점심2시, 저녁9시에 한번씩

Git Branch 전략

Git 협업 방식 습득

• Issues, Project 사용법 습득, 협업시 각 기능을 어떻게 활용하면 좋을지 논의 및 test 용 Issues 발행

회의 내용 및 협업 과정

1. [개인] 리액트 공부

2. [페어] 컴포넌트 제작하기

   App
   └ Container
     └ Wrap
       └ Title
   

   • 위와같이 점점 폴더의 depth가 깊어지는 문제 발생 , scss BEM depth도 깊어짐..

   

3. 폴더구조를 개선하기 위해 아토믹 디자인 패턴(Atomic Design Pattern)을 도입하기로 결정

4. scss Bem depth가 깊어지는걸 방지, 네이밍 중복을 방지하기 위한 styled components 도입하기로 결정

Atomic Design Pattern

Atomic Design Pattern 기반으로 재설계 과정

1. Atomic Design Pattern이 무엇인지 함께 학습

2. Atomic Design Pattern을 도입한 리액트 개발 레퍼런스를 조사하여 프로젝트에 어떻게 도입하면 좋을지 논의

3. UI를 Atoms - Molecules - Organisms 로 구분하여 컴포넌트 구조를 재설계

4. Google 프레젠테이션을 이용하여 UI를 Atoms - Molecules - Organisms로 각각 나누고, 폴더명을 정함

개선된 파일 구조

Before

After

컴포넌트 정의하기

Atoms

• 해당 설계의 최소 단위
• form, input ,button 같은 HTML의 태그나 최소의 기능을 가진 기능의 커스텀 태그 컴포넌트

Molecules

• Atom들을 최소의 역할을 수행할 수 있게 합한 그룹입력을 받기 위한 form, label, input 등

Organisms

• 배치를 위한 layout 단위로 하나의 인터페이스를 형성하는 그룹header, navigation 등

BE

• API 구조 등의 백엔드 구성은 프론트 작업이 끝난 후에 할 예정.. (아마 다음주 부터..)