플젝 공지, Q&A
•
발표일 : 1월 5일이나 6일
•
회의록 : 주간 정기/상시 회의로 나눠서 구분
•
Q. PR 할때 모든 사람이 코드리뷰 하고 merge? 팀장 한명만 코드 보고 merge?
A. 간단한 건 팀장이 코드 보고 merge / 개인이 PR을 머지한 경우도 있습니다. 리뷰없이 머지가 되니까 그냥 스스로 머지하고 나중에 주간회의때 자신이 짠 코드를 설명하는 그런 팀도 있었어요.
•
Q. 개인 머지 or 리뷰 후 머지(빠르게 진행할거면 스스로 머지하는게 빠를 것 같고 리뷰어만 머지하는 방법은 남의 코드를 능숙하게 읽을 리뷰어가 있어야 가능한게 아닌지)
A. 코드 읽는 능력이 능숙한 사람이 하는 것이 아니라 기능이 돌아가는지, 오타는 없는지, 리뷰하는 방법으로 진행할 수 있다! / 그래서 스스로 머지하는 경우도 있죠. 팀 수준에 따라, 경우에 따라, 단계에 따라 협의하며 진행하시면 됩니다.
•
Q. 기능별로 타임라인은?
A. 회의해서 기한을 잡고 루즈해지지 않게 작업하기
•
구글링 팁 : (기술이름 ) how to make (기능) / 유튜브에 검색
•
작업 팁 : 모듈 → 페이지 → API
•
플젝은 도전 - 한계를 맞닥뜨리고 그 이상으로 넘어가는 경험! 코드 향상과 플젝 진행 경험에 도움이 된다 
팀회의
목표
1.
주간 회의 날짜 정하기
혜빈: 화, 목 5시-6시 설정해놓고 필요하면 임시회의 가지면 좋을 것 같다
2.
컴포넌트 만들기
3.
라우터
4.
공통 스타일 작성
5.
마감기한 이야기 나누기
6.
깃헙 프로젝트 사용해보기
회의 동안 한 것
게더타운 만들기
같이 스토리 보드 보면서 URL 작성
app.js에 라우터 연결하기 (풍윤)
미경님 디자인 같이 보기
스플래쉬 : 초안으로 가기
로딩 : 풀 심어지는 이미지 초안으로 가기
로그인 화면 : 이메일로 로그인/회원가입 버튼 위로 올리고, sns 로그인 아래 작게 내리기
global style 의논 및 적용
컴포넌트 작업 나누기(월요일 전까지 푸쉬하기)
•
header (유연하게) : 풍윤
•
tab-menu (유연하게) : 은영
•
button : 미경
•
postcard : 혜빈
•
profile : 혜빈
•
product : 미경
•
comment : 은영
•
modal (확인 취소 알림창) : 풍윤
•
modal (수정 신고 아래에 뜨는 창) : 은영
깃허브 프로젝트 테스트
코드 리뷰 규칙 정하기
•
merge 권한 : 모두
•
리뷰어는 리뷰만, 머지는 기능 구현한 본인이 셀프 머지
•
의문점 드는 게 없으면 PR 날리고 ⇒ 셀프 merge
•
코드 리뷰는 의문점 있을 때 요청
주간 회의 날짜 정하기 : 화 목 5-6시
전체 일정 정하기
프로젝트, 이슈 생성 (미경)
해야할 일 (~12.12.월)
•
스토리보드 담당자가 페이지 내용 채우기
•
prettier 적용 방법 알아오기
◦
prettier 설정 : 홑따옴표, 탭 간격 2, 세미콜론
•
eslint 자동 import 적용 방법 알아오기
•
merge 권한 확인
•
월요일까지 컴포넌트 구현 후 PR 날리기 :
◦
풍윤 : header, modal(알림창)
은영 : tab-menu, comment, modal(수정 신고)
혜빈 : postcard, profile
미경 : button, product
→ 월요일 1시~2시 코드 리뷰 후 머지하기
→ 수요일까지 할 일 각자 이슈로 등록하기
→ 수요일까지 UI 완성
혜빈: 이슈, PR 템플릿 작성하기
(띄어쓰기 없이 **strong** 이렇게 부탁드려용)
윤구님 블로그~ 좋아요 꾸욱~
package.json
{
"name": "good-harvest-market",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
"styled-reset": "^4.4.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build",
"build-and-serve": "npm run build && npm run serve"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.29.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.8.1"
}
}
JavaScript
복사
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'plugin:import/recommended',
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'airbnb-base',
'prettier',
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'import'],
rules: {
'import/no-unresolved': 'off',
'import/extensions': [
'error',
{
ignorePackages: false,
},
{
js: 'never',
jsx: 'never',
},
],
'import/no-unresolved': [
{
commonjs: true,
amd: true,
},
],
'react/destructuring-assignment': [0, 'always'],
'react/prop-types': 'off',
'react/jsx-no-useless-fragment': [
2,
{
allowExpressions: true,
},
],
'import/no-cycle': 'off',
'no-console': 'off',
'no-unused-vars': 'off',
'no-useless-concat': 'off',
'react/no-unknown-property': 'off',
'react/jsx-props-no-spreading': 'off',
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx'],
},
],
// 중괄호 안 일괄된 줄바꿈
'object-curly-newline': [
'error',
{
// 객체 리터럴 구성
ObjectExpression: 'always',
// 객체 분해 할당의 객체 패턴에 대한 구성
ObjectPattern: {
multiline: true,
},
// 명명된 가져오기에 대한 구성
ImportDeclaration: 'never',
// 명명된 내보내기 구성
ExportDeclaration: {
multiline: true,
minProperties: 3,
},
},
],
// 같은 줄에 있는 식 사이에 줄 바꿈을 삽입합니다.
// 'react/jsx-one-expression-per-line': 'off',
},
};
JavaScript
복사
.prettierrc.js
module.exports = {
// 화살표 함수의 매개변수 표시 형태
arrowParens: 'always',
// 브라켓 한줄 사용 여부
// 마지막 '>'를 다음줄로 내릴지 여부
bracketSameLine: false,
// 객체 선언시 괄호 양 끝 사이의 공백 사용여부
bracketSpacing: true,
// 파일 안에 또다른 형식의 코드에도 Prettier를 적용할지 여부
embeddedLanguageFormatting: 'auto',
// html의 공백을 처리하는 방법
htmlWhitespaceSensitivity: 'css',
// 미리 정의된 @format marker의 사용 여부 (v1.8.0)
insertPragma: false,
// jsx에서 홀따옴표 사용여부
jsxSingleQuote: false,
// 코드가 보여지는 너비
printWidth: 80,
proseWrap: 'preserve',
// 객체의 속성을 표현할때, 따옴표를 적용하는 조건
// "as-needed" : 필요한 경우에만 객체에 따옴표
// "consistent" : 하나라도 따옴표가 필요하다묜 모든속성에 따옴표
quoteProps: 'as-needed',
// 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
requirePragma: false,
// 세미콜론 사용여부
semi: true,
// 큰따옴표 대신 작은 따옴표 사용 여부
singleQuote: true,
// 들여쓰기 간격
tabWidth: 2,
// 후행 쉼표의 사용조건
// 배열의 요소와 객체 타입의 속성을 나열하는 경우에, 맨 마지막 요소 뒤에 쉼표를 입력할지를 결정합니다.
trailingComma: 'es5',
// 탭을 사용할지 여부
useTabs: false,
};
JavaScript
복사
