회사에서는 보통 신규프로젝트를 하지않으니 내가 할일이 없었고, 신규개발을 하더라도 나 혼자 했기때문에 상관이없었는데 사이드프로젝트를 들어가게 되면서 협업을 하려다보니 어떤것을 꼭 미리 세팅해둬야하는지의 정확한 가이드라인을 찾아보게 되었다🤝
- 깃 브랜치 전략 세우기
- 프로젝트 및 .gitignore 생성
- 폴더 구조 생성
- 코드 가이드라인 및 스타일가이드라인 설계
- 프레임워크 및 라이브러리 설정
여러 사람과 협업할때에는 협업 시 수정된 코드의 충돌을 방지하기 위해 깃 브랜치 전략을 세우는것이 중요하다.
나는 제일 많이쓰고 유명한 Git Flow 전략을 선택했다.
(배민개발이 이거쓰더라)
간단히 말하자면 main과 dev브랜치를 각각 두고, dev브랜치에서 feature브랜치를 생성해 기능별로 dev에 갖다붙이는것이다.
이렇게하면 실제 배포할 브랜치와 개발서버에 배포할 브랜치를 나눌 수 있어서 좋다.
프로젝트는 간단히 만들수 있는 것을 선택한다.
나는 대체로 이렇게 이용하는 편
[리액트]
npx create-react-app .
npx create-react-app . --template typescript
[넥스트]
npx create-next-app@latest
혹시 cra로 설치하다가 8 vulnerabilities (2 moderate, 6 high) 문제가 뜨면
package.json
에 이부분을 추가하면 에러가 없어진다."name": "dodoesdid-client", "version": "0.1.0", "private": true, // 이 밑에부분 추가 overrides~ "overrides": { "react-scripts": { "@svgr/webpack": "8.1.0", "typescript": "4.9.5", "postcss": "8.4.38" } },
.gitignore 파일은 깃에 올릴떄 가려줄 파일을 말한다.
예를들면 중요한 정보가 있는파일이나, 용량이많은 node_modules/
가 있겠다.
cra는 node_modules/ 가 가끔 /node_modules 이렇게 되어있는경우도많아서 수기로 직접 넣어주는편이다
프로젝트 시 폴더 구조를 미리 설계해두고 해당 폴더에 파일을 추가하는 방식은 프로젝트의 능률도올라가고 매우 중요하다.
dodoesdid-client/
├─ public/ --> 정적 파일 및 HTML 파일이 저장되는 폴더
├─ src/ --> 앱의 소스코드가 저장되는 폴더
│ ├─ lib/ --> 우리가 사용하는 라이브러리 폴더
│ │ ├─ api/ --> API 요청과 관련된 코드를 저장하는 폴더
│ │ ├─ data/ --> client내에서 사용되는 데이터를 저장하는 폴더
│ │ ├─ hooks/ --> 사용자 Custom Hook코드를 저장하는 폴더
│ │ ├─ utils/ --> 유틸리티 함수 등 여러 곳에서 자주 사용될것같은 함수를 저장
│ ├─ assets/ --> 이미지,CSS,글꼴과 같은 리소스를 저장하는 폴더
│ │ ├─ images/
│ │ ├─ fonts/
│ │ └─ css/
│ ├─ components/ --> 리액트 컴포넌트가 저장되는 폴더
│ │ ├─ common/ --> 공통으로 재사용되는 컴포넌트
│ │ ├─ contents/ --> 페이지별로 하위디렉토리 구성
│ ├─ containers/ --> 로직이 포함된 컨테이너 컴포넌트를 저장하는 폴더 (페이지별로 하위디렉토리구성)
│ ├─ pages/ --> 각각의 페이지에 대한 레이아웃이나 특정 페이지 관련 로직을 담당하는 컴포넌트를 저장하는 폴더
│ ├─ routes/ --> 라우팅 정보를 저장하는 폴더
│ ├─ types/ --> 자주 사용되는 타입을 담은 폴더
│ └─ stores/ --> 상태 관리를 위한 관련코드들이 저장되는 폴더
├─ .env
├─ .gitignore
├─ package.json
└─ README.md
tailwind css 를 설치해주었다 공식문서에서 보는게 제일좋음!
npm install -D tailwindcss
npx tailwindcss init
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx}'], <= 추가
theme: {
extend: {},
},
plugins: [],
};
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
...
prettier, eslint
npm i -D prettier
터미널에 입력한 후, 루트에 .prettierrc
파일을 생성한다.
이후 원하는 설정을 써주면 되는데 구글에 많이나와있다.
밑에는 내가 많이 사용하는 설정!
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"importOrder": [
"^@modules/(.*)$",
"^@lib/(.*)$",
"^@pages/(.*)$",
"^@containers/(.*)$",
"^@components/(.*)$",
"^@assets/(.*)$",
"^@styles/(.*)$",
"^@types/(.*)$",
"^[./]"
],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true
}
npm init @eslint/config
설치가 완료되면 eslint.config.mjs 파일이 root 폴더에 생성된다. 익숙한 JSON 형식으로 .eslintrc 파일을 생성하여 다음과 같이 설정한다.
// package.json
"devDependencies": {
"@eslint/js": "^9.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.3",
"globals": "^15.6.0",
"typescript-eslint": "^7.14.1"
}
// .eslintrc
{
"env": {
"browser": true,
"es2021": true},
"extends": ["react-app", "eslint:recommended"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true},
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
이렇게만해도 eslint가 적용되지만, 더 강화해보겠다.
npm i -D eslint-config-airbnb
설치하고, .eslintrc
파일에 extends
에 “airbnb”
를 추가해준다.
{
"env": {
"browser": true,
"es2021": true},
"extends": ["react-app", "eslint:recommended", "airbnb"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true},
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
에러뜨면 airbnb-typescript도 추가하고 관련npm도 설치해야한다
prettier와 eslint가 충돌날수있으니 다음과같이 해준다.
npm i -D eslint-config-prettier
명령어로 설치하고 .eslintrc
파일에 extend
s에 “prettier”
를 추가한다.
{
"env": {
"browser": true,
"es2021": true},
"extends": ["react-app", "eslint:recommended", "airbnb", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true},
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
.eslintrc 파일에 rules 부분에 원하는 에러 룰을 추가한다.
{
"env": {
"browser": true,
"es2021": true},
"extends": ["react-app", "eslint:recommended", "airbnb", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true},
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
"no-var": "warn",
"no-multiple-empty-lines": "warn",
"no-console": ["warn", { "allow": ["warn", "error", "info"] }],
"eqeqeq": "warn",
// "dot-notation": "error",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "warn",
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}