개발 문화

🛠️ 기술 스택

BASE

4

MORE

11

WORK

4

No Select0

TypeScript

language

React

library

Vite

build

npm

package

axios

API

Redux

stateManagement

react-query

dataFetching

react-router-dom

route

storybook

test

vitest

test

Chakra UI

UI library

Emotion

style

ESLint

codeFormat

Prettier

codeFormat

Vercel

deploy

Slack

co-work

Notion

co-work

Github

co-work

Discord

co-work

• 종혁
• [ suspense 컴포넌트 + errorboundary 컴포넌트 ] 를 사용하여 제어하는 것이 좋아보인다 !
• errorboundary 컴포넌트가 감싸는 형태

React Query와 함께 Concurrent UI Pattern을 도입하는 방법 | 카카오페이 기술 블로그

카카오페이에서 React Query를 활용하여 Concurrent UI Pattern을 도입한 사례에 대해 소개합니다. 이 글은 연작 중 2편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Query와 함께 Concurrent UI Pattern을 도입하는 방법

https://tech.kakaopay.com/post/react-query-2/

💄 코드 컨벤션

🧑🏻‍💻 eslint, prettier

• 홑따옴표 (’ ’) 사용

⚡️ code 규칙

• 컴포넌트 생성할 때는 화살표 함수 사용

• if문 curly룰 적용

• type, 컴포넌트, 파일명 ⇒ PascalCase (ex. MainPage.tsx)

• 함수, 변수(state 등)명 ⇒ camelCase
• 함수명 - 함수 네이밍은 동사 + 명사 (ex. onChange, getUserData …)
• 함수명, 변수명 작성 시, 함축어 말고 풀네임 : btn ⇒ button

• 상수명 ⇒ UPPER_SNAKE_CASE (ex. API_KEY)

• 이벤트 발생 시 동작하는 함수들 ⇒ on~~ (ex. onBackMove)

• alias 절대 경로(경로 별칭) ⇒ /src = @

• API 응답 타입 위치
• 재사용성 높은 것은 type.ts 폴더에 관리

• nullish 연산자
• 일단 사용하되, PR 때 논의 (눈에 잘 안 보일 경우 안쓰는 방향으로 조정)

• 삼항연산자, 축약 표현(&&) vs if문
• JSX 내부에선 필연적으로 삼항연산자, 축약 표현(&&)
• JSX 외부, 즉 함수를 정의할 때는 PR 때 논의
• 삼항연산자 중첩 금지

• if문 ⇒ 가능하면 Early Return

• curly-rule 사용

• 리액트 v18로 넘어오면서 React.FC or props & 반환 타입을 직접 지정하는 형태로 타이핑 해줘야 한다.

const Welcom: React.FC<WelcomeProps> = ({ name }) => {
	...
}

// 근데 책에 나와있는 예시에서는 별도로 컴포넌트 타입을 지정해주지 않음

📂 디렉토리 구조

(아래는 예시로 가져온 디렉토리 구조)


├── src
		└── assets
		|
│   ├── components
|   |   └── Post // default 컴포넌트에서 분리가 발생하면 여기에 넣기
|   |        └── index.tsx // default 컴포넌트
│   ├── types // 명세 + 한 번 이상 쓰이는 타입 파일
|   ├── pages
|   ├── constants // 스타일 상수, 그냥 상수는 파일로 분리! 
|   ├── hooks
|   ├── apis
|   ├── atoms
|   ├── utils
|   ├── styles
|   ├── storage
|   ├── App.tsx
|   ├── index.tsx
└──

⚙️ github

⌥ 브랜치 전략

• 기능을 추가할 때는 feature/기능명

• 무언가를 수정할 때는 fix/기능명

• 스타일 수정할 때는 style/기능명

• 주석 제거, 등등 문서 작업 docs/기능명

• 이슈를 사용한다면 feature/#이슈번호/기능명

• 기능 명 작성 시, 단어가 여러 개일 경우 -으로 구분한다.

• 실질적으로 레포에 남아있는 브랜치는 main, develop

🌈 커밋 컨벤션

• 커밋 메세지 형태 (템플릿 형태에 맞게 수정 필요)

✨ 타이머 기능 추가

- 메인 페이지에 타이머 기능을 추가 하였습니다.

이슈 번호 : #6

• 깃모지 사용법

⚡️ Gitmoji 사용법 정리 (+ 깃모지 툴 소개)

Gitmoji 란? gitmoji란 git + emoji를 합쳐서 부르는 말로 emoji를 이용하여 commit message를 작성하는 tool이라고 보면 될 듯하다. 지금까지 그냥 글로만 커밋 메세지를 써왔겠지만, 메세지에 이모지(이모티콘)을 더하면, 나중에 커밋 메세지를 훑어볼때 훨씬 가독성 높게 읽기가 가능해니다. 예를 들어 커밋 메시지에 이모티콘을 사용하면 사용된 이모티콘만 보고 커밋의 목적이나 의도를 쉽게 식별할 수 있게 된다. 위의 커밋 로그처럼 단순하게 글귀만 나열하는 것보다 시각적인 강조를 얻을 수 있는걸 느낄 수 있다. 그리고 이모지 아이콘에 익숙해졌다면, 글을 읽지 않아도 전체적으로 어떤 일이 있었는지 한눈에 볼 수 있게 된다. 예를들어, ✨ 모양의 이모지는 기능 추가를 의미하는 깃모..

https://inpa.tistory.com/entry/GIT-⚡️-Gitmoji-사용법-Gitmoji-cli

• 커밋과 이슈 연결하기

[개발] Github 이슈와 커밋 메시지를 연결해보자

안녕하세요 devport 입니다. Github에 이슈를 대응하고 커밋할 때에 특정 포맷을 사용하게된다면 커밋된 내용이 자동으로 이슈에 반영되는 기능에 대해서 간단히 알아보도록 하겠습니다. Github commit message 이슈에 자동 링크 Github의 Repository에 대하여 Commit Message에 "#[Issue Number]"를 입력하게 될 경우 자동으로 이슈에 커밋 내용을 추가하게 됩니다. 추가된 이슈는 커밋 메시지와 함께 링크를 제공하게 되며 링크를 클릭하게 되면 변경 이력에 대하여 출력 하게 됩니다. 커밋과 함께 이슈를 Close 할 수 있는 Keyword 이슈에 올라온 버그 또는 기능을 수정하였을때에 Commit Message에 적절한 키워드를 사용하게되면 이슈를 같이 Clos..

https://devport.tistory.com/12