SNS 팀 프로젝트

🏔️

SNS 팀 프로젝트

기획 GO TO

📌주제 Brain

기술 스택 회의

프로젝트 컨벤션 회의

Brewers 프로젝트 기획서

프로젝트 데이터 모델링

Brewers 중간 발표

Brewers 중간 회고

Brewers 최종 회고

개발 GO TO

QA 알려주세요

페이지별 URL 정책

⛳ 팀 마일스톤

💡

✍️ 팀 회의록

1차 팀 회의록

2차 팀 회의록

12/25 회의록

🏁 개인 목표

곽연경 : 1. 투박하지 않은 UI 2. 상태관리에 대한 고민, 선택 3. 코드 퀄리티 4. 협업 경험

김나현 : 기획부터 배포까지 협업의 전체적인 프로세스를 이해하는 것.

박종운 : 협업 경험과 실제 서비스 경험 쌓기, 디자인 시스템 적용해보기

신지희 : 이번 목표는 1. styled-components에 익숙해지기 2. 컴포넌트 재사용성에 집중해 구현하기. 3. 유저가 ‘사용할만한’ 프로젝트를 만들기. 완성도 높은 프로젝트가 되었으면 한다.

최용재 : 겉이 이쁜 프로젝트보다는 코드 완성도가 높은 결과물 만들기. 팀원들이 게을러질 수 있도록 재사용성 높이기.

🤝 팀 문화

Agile하게! ⇒ 여러 번의 짧은 스프린트로 개발 진행하자

스프린트 단위

권장 4~5일, 최대 1주 단위 스프린트

4번 개발 스프린트
QA 스프린트

시간 남으면
하루 이틀

스프린트 과정

스프린트 첫날

스프린트 목표 세우기

팀 목표

역할 분담

본인이 하고 싶은 일 선정
예상 시간 산정
다 나뉘어지면 회의

둘째날부터

오픈 스크럼 (최대 25분)

컨디션 점수 + TMI
오늘 할 거
깃헙 칸반보드 화면공유

각자 지금 맡은 기능 진행상황을 %로 얘기

질문사항

고민되는 부분
에러 트러블슈팅 도와주세용

클로징 스크럼

오늘 한 거
체크리스트 체크
질문사항

고민되는 부분
에러 트러블슈팅 도와주세용

👥 팀원 역할

개발환경세팅 : 기획서 대로 초기 개발 환경 구성 후 깃헙에 push, 다른 사람들은 해당 push pull로 동일 환경 구성 ⇒ 1명

노션 관리(회의록 작성, 팀 마일스톤(일정) 관리, 등) ⇒ 1명

깃허브 관리 (PR 리뷰 누락 확인 및 알림, issue+PR 템플릿, label 관리, 깃헙 Readme 파일 관리…) ⇒ 1명

디자인(와이어프레임, 컴포넌트, 디자인 시스템(디자인 토큰 관리), 시퀀스 다이어그램), ⇒ 2명 정도??

기획 : 시퀀스 다이어그램 (UML) + UX 고민 + (상태관리)

이름

프로젝트 역할

노션 관리

디자인

디자인

디자인

기획

디자인

팀장

개발 환경 세팅

깃허브 관리

🔧 프로젝트 기술 스택

📚 테스크

💬 프로젝트 컨벤션

ESlint + Prettier

우선 recommended만 설정한다

프로젝트 진행하면서 불필요한 linting은 warning으로 전환 + 필요 linting 추가한다

Issue 템플릿

제목은 Issue 내용만 작성한다. 단, Label을 필수로 추가한다

Issue 관련 회의 내용은 노션 회의록에서 Issue번호를 명시하고 회의한다

PR 템플릿

제목 형식대로 제목을 작성한다. Label을 필수로 추가한다.

PR을 업로드할 때 마지막 주석을 해제하고 `이슈번호`에 PR과 연결된 이슈번호를 작성한다

제목 형식

[이슈번호] 한 일 간략히 설명

예시 : [67] 헤더 검색창 태그 필터 기능

브랜치 전략

GITLAB-FLOW 기반으로 개발하며 브랜치는 Merge 후 삭제한다

브랜치 PR 후 자동 삭제 action 조사 중

브랜치 네이밍 형식

이슈번호-커밋 태그

커밋 규칙

형식

commit태그: commit내용

커밋 태그

태그	설명
Init	프로젝트 세팅
Feat	새로운 기능 추가
Docs	문서 수정, Storybook stories 관련 변경
Style	css ui만 변경
Fix	버그 수정 (코드 수정 O)
Refactor	파일명 폴더명 이동 등 변경, 버그 수정 외의 코드 수정
Test	테스트 관련 코드 추가
Chore	라이브러리 설치, 설정 변경, 기타
Comment	주석

네이밍

💡

TS 타이핑 시 Type 접미사 추가

props 타입 네이밍 형식

컴포넌트명 + Props + Type

배열 데이터 네이밍 형식

배열은 복수로 네이밍
요소는 단수로 네이밍

네이밍 규칙

이벤트 객체 네이밍

e

이벤트 핸들러

handle 접두사
핸들러를 props로 넘길 때 on 접두사

boolean 변수 네이밍

is 접두사

CRUD 네이밍

타이핑

컴포넌트 props 타입 정의 위치 → 해당 파일에서 named export 로 정의

나머지 타입 (API 타이핑, …) → 별도의 파일에 named export로 정의

컴포넌트 children props 타입→ React.ReactNode로 통일

interface vs type 사용 조건

interface : 객체
type: 나머지

type: 나머지

type: 나머지

기타 코드

경로 alias

~ : /src

import 경로 정책

같은 폴더에 있는 파일은 상대 경로(./*)를 사용한다.
다른 폴더에 있는 파일은 절대 경로(~/*)를 사용한다.

import 순서

react > 라이브러리 > component > hook > atoms > utils > types > constants > css

함수 작성 방식

기본적으로 함수 표현식
예외: this binding 등 필요한 경우 function 으로 정의

export default는 코드 마지막 줄에 추가

폴더구조 + 컴포넌트 분류

CSS

NHN CSS 컨벤션 기반 (속성 순서)

직접 구현하거나 아래 패키지 수정하여 사용

styled-components stylelint 설정하기(stylelint-styled-components-order 개발기)

stylelint 조사를 하고 설정을 하면서 자료가 부족해 어려움이 많았다. 그래서 내가 직접 styled-component 기반 grouping order 기능이 있는 stylelint 설정 패키지를 만들어 npm에 배포했다. 이름하여…

styled-components stylelint 설정하기(stylelint-styled-components-order 개발기)

https://medium.com/@dlxotjde_87064/stylelint-styled-components-order-개발기-styled-components-stylelint-설정하기-acd0c741e58a

styled-components stylelint 설정하기(stylelint-styled-components-order 개발기)

스타일 린팅 자동화

lint-staged로 staged상태인 파일을 대상으로 eslint, prettier, stylelint 교차 확인

lint-staged가 commit 전 단계에서 동작하도록 pre-commit 훅 생성

husky로 pre-commit 훅 등록

리코일

💬

폴더 구조 atom들은 recoil/도메인/atoms.ts selector들은 recoil/도메인/selectors.ts

에러 메시지 컨벤션

💬

도메인: 에러 메시지 (에러가 발생한 메서드/[상세])


## 🚀구현 기능
1.
## 📌스크린샷
## 📄작업 내용
- [ ]


## 주요 작업 내용

## 스크린샷

## 고민 중인 부분 및 참고사항

<!-- ## 이슈 번호 close -->


함수, 변수, index.tsx가 없는 폴더, 나머지 파일 => camelCase
컴포넌트, 컴포넌트 파일, 타입, index.tsx가 있는 폴더 => PascalCase
상수 => SNAKE_CASE


function gen-*
function make-*
function get
function set
function create
function remove
function delete


src
	- api
	- recoil
		- login
			-atoms.ts
		- search
			-atoms.ts
			-selectors.ts
	- pages
	- hooks
		- api
			- comment
				- useCreateComment.ts
				- useDeleteComment.ts
			- notification
				- useCreateNotification.ts
				- useGetNotification.ts
				- useReadNotification.ts
			- search
				- ...
	- components
		- templates
		- common
			- Button
			- Badge
			- Avatar
			- ...
	- constants
	- utils
	- types
		- api
			- ...
		- common.ts
	- stories
	- App.tsx
	- main.tsx


// 공식문서 가이드

// 선언
export const somethingState = atom({
	key: "somethingState",
	default: ...
});

// 사용
// 상태뒤에 State 접미사를 사용한다면 이름이 겹치는 문제가 발생
const [something, setSomething] = useRecoilState(somethingState);


// 제가 사용하는 방법 (종운)

// 선언
const somethingAtom = atom({ ... });

// 사용
const [somethingState, setSomethingState] = useRecoilState(somethingAtom);