Portfolio

컨벤션 및 작업방식 정리

TypeScript, Redux-toolkit 사용

Storybook 사용 → JS로 작성


커밋 메시지는 한글로 통일, type 뒤에는 :(콜론)을 사용한다.
ex) feat: 커밋 내용

커밋 컨벤션(한글 사용)


feat: 기능 추가
fix: 버그 수정
refactor: 리팩토링
style: css 디자인 관련
docs: 문서 작성 및 수정
// test: 테스트 관련
// build: 빌드 관련
// deploy: 배포 관련
chore: 그 외

git branch 전략


git flow branch 전략 사용, 작업 중 develop이 최신화 되면 rebase 사용

git rebase develop
git add .
git rebase --continue
git push -f

<Sequence>
(git Issue 제작 -> feature/. branch 생성)

<git branch>
main: 배포
develop: 리뷰 완료된 코드
feature/현재-개발중인-기능: develop에서 분기된 기능들

Issue template


Issue 제목: 닉네임 / 기능 이름


## 기능
<!-- 기능을 설명해주세요. -->

## 세부 설명
<!-- 세부적인 내용을 설명해주세요. -->

## 기타

Pull Request template



PR 시 Issue 연결
PR 이름: Feature/개발-완료-기능
PR은 선착순 2명이 달면 수정해서 merge



## 기능
<!-- 기능을 설명해주세요 -->

## 구현 내용
<!-- 구현 내용을 작성해 주세요 -->

## 기타

코드 스타일(lint) → 중간때 사용했던 내용 바탕으로 정리

Prettier


{
  "endOfLine": "auto",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

Lint


- typescript/recommended
- react

환경 설정(패키지, 라이브러리)


Language: TypeScript

Library & Framework: React(CRA —typescript), React-router, Axios, Redux-toolkit, Storybook(js)
mui-icons-material, moment

Style: MUI, Emotion

ETC: ESLint, Prettier, npm, Figma

Deploy: netlify

디자인 패턴 관련

Components, Container, View 세 가지 폴더로 분류 *참고자료

폴더 구조


 ┃ ┣ 📂public
 ┃ ┃ ┣ 📜favicon.ico
 ┃ ┃ ┗ 📜index.html
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂api
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┃ index.ts 
 ┃ ┃ ┃ ┣ 📂HomePage
 ┃ ┃ ┃ ┃ ┣ 📂Button(component)
 ┃ ┃ ┃ ┃ ┃ ┣ Button.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ Button.style.ts // Style 파일은 * 대신 named로 가져올 것
 ┃ ┃ ┃ ┃ ┃ ┗ Button.stories.js
 ┃ ┃ ┃ ┗ 📂AboutPage
 ┃ ┃ ┃ ┃ ┣ 📂Input(component)
 ┃ ┃ ┃ ┃ ┃ ┣ Input.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ Input.style.ts
 ┃ ┃ ┃ ┃ ┃ ┗ Input.stories.js
 ┃ ┃ ┣ 📂container
 ┃ ┃ ┣ 📂constants
 ┃ ┃ ┣ 📂interfaces
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂store
 ┃ ┃ ┣ 📂routes
 ┃ ┃ ┣ 📂pages
 ┃ ┃ ┃ ┣ 📜About.jsx
 ┃ ┃ ┃ ┗ 📜Home.jsx
 ┃ ┃ ┣ 📜App.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📜.eslintrc
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜.prettierrc
 ┃ ┣ 📜README.md
 ┃ ┣ 📜package.json
 ┗ 📜README.md

컴포넌트

컴포넌트 → 함수 선언문

함수 → 함수 표현식(화살표 함수)


function Button() {
	const onClick = () => {
		// ...	
	}

	return (
		// ...
	)
}

컴포넌트 폴더 & 파일 이름


/Button
  - Button.tsx
	- Button.style.ts

스타일링


import { Button } from './Button.style'
function Button() {
	return (
		<Button>click me!</Button>
	)
}


import styled from '@emotion/styled'

export const Button = styled.button``

익스포트 & 임포트


/src
	/components
		index.js
			/Button
				Button.tsx
				Button.style.ts

1) 컴포넌트 export


// components/Btn/Btn.tsx

export function Button() {
	// ...
}

2) index.js에서 모아서 export


// components/index.js

export { Button } from 'components/Button/Button'
// ...

3) index.js에서 절대경로 import


import { Button } from 'components'

export function Menu() {
	return(
		<Btn>click me!</Btn>
	)
}

임포트 순서 *참고자료

리액트

라이브러리

모듈

스타일


// 리액트
import { useState, useEffect, ... } from 'react'

// 라이브러리
import { throttle, debounce, ... } from "lodash";

// 모듈
// components, hooks, store, utils, assets, interface..
import { Button } from 'components'

// 스타일
import { ButtonStyle } from './style';


import axios, { AxiosInstance } from 'axios';

const host = process.env.REACT_APP_API_HOST ?? 'localhost';
const port = process.env.REACT_APP_API_PORT ?? 3000;

const API_ENDPOINT = `${host}:${port}`;

const axiosInstance: AxiosInstance = axios.create({
  baseURL: API_ENDPOINT, // baseURL 미리세팅
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.response.use(
  (response) => Promise.resolve(response),
  (error) => {
    console.error(error);
    return Promise.reject(error);
  },
);

export default axiosInstance;

업무 분담

보일러플레이트 - 패드
Figma - 키아
Github: issue, pr template, branch 생성, - 맥키
컨벤션 문서화 - 제이
기획서 초안, ReadMe, (slack채널 연동) - 팽

로그인, 회원가입 시 OAuth 2.0 인증 관련

redirect된 페이지의 query String token, client id 넘김?

백엔드의 편지

백엔드 할일이 너무 적어 기능을 더 넣고 싶은데

프론트 일정 산출 후 이야기를 나눠야 할 것 같습니다가장 추가하고 싶은 내용은

인스타 피드처럼 각 스터디에서 공부한 것을 공유할 수 있는 페이지입니다

7/23 프론트엔드 회의

컨벤션 및 작업방식 정리

컴포넌트