나영팀 기획서 (2)

멤버 및 역할

• 이재웅 / 팀 대표, 개발(홈, 가입자목록)

• 장규범 / 개발(사용자, 프로필 편집, 404)

• 홍정기 / 개발(글쓰기, 논쟁 투표, 논쟁결과 댓글)

• 팽건우 / 개발(회원가입, 로그인)

프로젝트 주제

토론토

기술 스택

폴더 구조

┃ ┣ 📂public
 ┃ ┃ ┣ 📜favicon.ico
 ┃ ┃ ┣ 📜index.html
 ┃ ┃ ┣ 📜logo192.png
 ┃ ┃ ┣ 📜logo512.png
 ┃ ┃ ┣ 📜manifest.json
 ┃ ┃ ┗ 📜robots.txt
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂api
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📂atoms
 ┃ ┃ ┃ ┣ 📂molecules
 ┃ ┃ ┃ ┗ 📂organisms
 ┃ ┃ ┣ 📂constants
 ┃ ┃ ┣ 📂contexts
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂layout
 ┃ ┃ ┃ ┗ 📜Layout.jsx
 ┃ ┃ ┣ 📂pages
 ┃ ┃ ┃ ┣ 📜About.jsx
 ┃ ┃ ┃ ┗ 📜Home.jsx
 ┃ ┃ ┣ 📂stories
 ┃ ┃ ┣ 📂templates
 ┃ ┃ ┣ 📜.DS_Store
 ┃ ┃ ┣ 📜App.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📜.DS_Store
 ┃ ┣ 📜.eslintrc
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜.prettierrc
 ┃ ┣ 📜README.md
 ┃ ┣ 📜package.json
 ┃ ┗ 📜yarn.lock
 ┣ 📜.DS_Store
 ┗ 📜README.md

코딩 컨벤션

Github

• main

• release

• develop

• feature/*

• hotfix

feat(기능/파일): 수정 부분 Title

수정 부분 자세히



docs(README): 요구사항 체크

사람 나타내기, api 연결

컴포넌트

• 컴포넌트 명: PascalCase

• 함수 명: camelCase

• 변수 명: camelCase

폴더 및 파일

• 파일 확장자: .jsx, .js

코드 포맷팅

//Lint
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["react-app", "eslint:recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-console": "warn"
  }
}

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

와이어 프레임

컴포넌트 세부구조

atoms

• Button

• Input

• Text

• Icon(iconName)

• Spinner

• Image

• Divider

• Card

molecules

organisms

일정 계획