devnote 프로젝트 - 1

오늘 팀장으로 새로운 React 프로젝트를 시작하게 되었다.

 

우리의 프로젝트 이름은 devnote이고, 본인의 프로젝트를 업로드하여 다른 사람들의 프로젝트를 보기도 하고, 내 프로젝트를 자랑하거나 알리기 위한 웹사이트이다.

 

와이어 프레임 (변동 가능성 99%...)

SignIn / SignUp

 

 

메인 페이지

 

 

마이 페이지

 

 

글작성 및 수정

 

 

상세 페이지

 

 

개발 프로세스

1. Vite 프로젝트 셋업 - 팀장인 내가 프로젝트 생성과 github repository를 만들고 공유했다.

2. .prettierrc 파일 만들기 - 팀원들과 코드포맷팅 규칙을 동일하게 설정하기 위해 설정한다.

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "trailingComma": "none"
}

 

3. supabase 셋업 

4. 환경변수(.env.local) 셋업 - supabase 의 계정 정보(api_key포함) 등 보안이 필요한 정보들은 .env.local 파일에 담아서 github에 공유되지 않도록 한다.

5. git 브랜치 관리 - 우리는 각각의 기능 브랜치를 생성하여 작업 후 develop 브랜치에 PR하고 develop에서 main으로 pr하는 flow를 선택했다. 또 github commit 규칙도 정했는데 아래와 같다.

6. 초기에 폴더 구조나 기본적인 파일들은 미리 생성하여 다른 팀원들이 clone 후 바로 작업이 가능하도록 하였다.

 

 

구현 할 기능과 역할 분담

공용으로 사용하는 component를 만들고, 각자 페이지 구현과 페이지에서 필요한 기능의 component를 구현하기로 했다.

🎈나는 로그인과 회원가입을 구현하게 되었다.

 

 

목표

• SPA with RRD
  • [ ] SPA(Single Page Application)에서도 페이지 전환은 필수! RRD(React Router Dom)를 이용하여 부드럽게 페이지 전환과 라우팅 기술을 구현할 수 있다.
  • [ ] 부모-자식 컴포넌트의 개념을 이해하여 컴포넌트 구조 설계를 효율성 있게 할 수 있다.
  • [ ] 불필요한 렌더링을 줄이기 위해 memoization 기법을 활용할 수 있다.
• Hooks
  • [ ] 다양한 state를 자유자재로 만들고 제어할 수 있다. 특히, setState의 배치업데이트 특성을 이해하고 오류 없는 코드를 작성할 수 있다.
  • [ ] useEffect hook을 활용하여 컴포넌트 기반의 라이프사이클(mount / update / unmount)을 제어할 수 있다.
  • [ ] 반복되는 로직 또는 규모가 있는 로직은 custom hook으로 분리하여 효율성을 추구할 수 있다.
• CRUD with Supabase
  • [ ] 진정한 CRUD는 데이터베이스까지, supabase를 통해 게시글을 fetching하여 컴포넌트에 보여줄 수 있다.
  • [ ] Create, Update, Delete를 할 수 있다.
  • [ ] 위 과정에서 내부 state와의 동기화를 적용할 수 있다.
  • [ ] 데이터 fetching 시, 컴포넌트 내부에 데이터를 주입하기 위해 useEffect를 사용할 수 있다.
• 스타일링 방식
  • [ ] styled-components를 통해 체계화된 컴포넌트 스타일을 적용할 수 있다.
  • [ ] St / Styled 등의 prefix를 활용하여 일반 컴포넌트와 styled-components를 명확히 구분하여 ‘협업’의 대명사 팀이 될 수 있다.
  • [ ] props를 통해 동일한 컴포넌트도 재사용성을 고려하여 만들 수 있다.

• 상태관리 라이브러리
  • [ ] context API를 사용하여 전역상태를 구현할 수 있다.
  • [ ] context API의 핵심 개념 3가지(createContext, Provider, useContext)를 자다 깨서도 3초 만에 설명할 수 있다.
  • [ ] 부모-자식 관계가 아닌 컴포넌트끼리도 데이터를 공유하고 주고받을 수 있다.
• Git
  • [ ] git add / commit / push 활용할 수 있다.
  • [ ] git 브랜치/ PR / merge 활용할 수 있다.
  • [ ] github pull request에서 Code review 활용할 수 있다.
• 배포
  • [ ] Vercel 을 이용하여 배포할 수 있다.

 

프로젝트가 끝나고 위 목표에서 얼마나 내가 성장했는지 알고싶다.