Portfolio

멤버 및 역할

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

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

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

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

프로젝트 주제

토론토

10, 20대를 타겟으로 일상에서 생기는 가벼운 주제로 서로 토론하는 서비스 (ex. 깻잎 논쟁, 새우 논쟁, 롱패딩 지퍼)

Notion: https://www.notion.so/prgrms/951216bec199464d8c3adf81cba144e5

Github: https://github.com/prgrms-fe-devcourse/FEDC2_ToronTo_Nayoung

(나영) 피드백

거시적으로 어떤 주제에 대해서 필요성을 느꼈고 → 어떻게 서비스로 풀려고 했는지에 대한 흐름, 컨텍스트 → 기능화 어떻게 했는지가 좀더 설명이 필요해보입니다. (스토리 텔링)

서비스에 대한 기획도 중요하지만(Project Design), 프로젝트 진행에 대한 계획, 매니징을 어떻게 하셨는지 좀더 현실적으로? 표현되면 좋을 듯 합니다. (Project Managing) 실무에서는 서비스 기획의 역할보다는, 프로젝트 계획을 개발자 스스로 관리하고 약속해낼 수 있는 역량이 더 중요하기 때문입니다. (PM이 해주기도 하지만, 그래도 개발자가 해낼수 있어야함!)

때문에 기획서에는 {{ 기획에 대한 내용 + 기술스택 + 프로젝트 매니징 }} 이러한 구성으로 되면 다른분이 프로젝트를 이해하는데에 도움이 될 듯 합니다.

`Project Design`

P1) 프로젝트의 서비스를 통해서 유저의 어떤 문제를 → 해결할 수 있는지 나열 필요 (문재해결)

ex) SNS와 같은 비대면 형태의 서비스에서 좀더 편하게 대화하는 현상을 보았음. 커뮤니티에서의 의견 교류는 있으나, 무거운 분위기가 아닌 light하게 접근할 수 있는 …

P3) 서비스의 컨셉 키워드로 도출 → 요걸 UI적으로, 기능적으로 어떻게 표현하려고 했는지 설명이 있으면 좋을거 같습니다.

ex) Light, Easy, 캐쥬얼

Light, Easy → 원터치 기능으로 단순화함

P3) 기획 컨텍스트 기준으로 → 유저 Flow에 대한 정리도 있으면 좋을 것 같습니다.

다이어그램으로 표현되어도 좋습니다.
유저 flow가 정리되면 엣지케이스(상세한 처리)가 잘 보여서 완성도 있는 기능개발을 할 수 있습니다. (마치 404페이지 만들었듯이 ㅎㅎ)

P1) 기획 컨텍스트 → 유즈케이스 + 기본적인 CRUD 형태로 기능을 기획서에도 정리되면 좋을 듯 싶습니다.

유저는 토론을 만들고, 관리할 수 있다. (유저 → 토론 item)

Create: 유저는 토론을 생성할 수 있다. (생성자)

Read: 유저는 다른사람이 생성한 토론을 조회할 수 있다.

Update: 유저는(생성자) 자신이 생성한 토론을 수정할 수 있다.

Delete: 유저는(생성자) 자신이 생성한 토론을 수정할 수 있다.

유저는 하나의 토론에서 댓글을 생성하고, 관리할 수 있다. (유저 → 토론 item > comment)

유저는 하나의 토론에서 다른사람의 투표 결과(집계)를 확인할 수 있다. (유저 → 토론 item > 집계)

Read: …

유저는 토론에 참여할 수 있다. (유저 → 토론 item > reaction)

Create: …

Read: …

Update: …

유저는 자신의 활동내역을 확인할 수 있다.

Read: …

Delete: …

유저는 자신의 개인정보를 관리할 수 있다.

Read: …

Delete: …

`Project Managing`

P1) 업무 분배가 적절히 좀 더 분산해야할거같습니다

정기님한테 대부분의 기능들이 몰려 있는 듯 합니다. 페이지단위가 아니라, useCase 단위로 업무를 쪼개셔야할거같습니다.

P2) 예상 일정에 대해서 표현이 되어야할거같습니다.

~~환경셋팅~~ + 컴포넌트 제작 + useCase기준으로 작성되면 좋을 듯 합니다.
일정 예상은 계속 훈련하셔야하기때문에 (무조건 빠르게 잡는게 좋은게 아님) 하시는 것을 추천드립니다!

기타) 예전에 말씀드렸던 테크스펙이라는 것을 작성하는 걸 한번 해보시면 좋을듯합니다. 현재는 이미 시작하셨으니, 프로젝트 종료후에 작성하시는 것을 추천드립니다.

기타) 적극적으로 슬랙에서 커뮤니케이션해보기 (디스코드로 하시나요?)

기술 스택

언어: HTML, CSS, JavaScript

IDE: VSCode

라이브러리: React, Styled-Component, React Router

프레임워크: Storybook

배포: Netlify

협업 툴: Github, Notion, Figma

ETC: ESLint, Prettier

패키지 관리: yarn

폴더 구조


┃ ┣ 📂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

git flow 브랜치 전략 사용

https://velog.io/@jinuku/Git-브랜치-전략

main

release

develop

feature/*

hotfix

Commit Message


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

CardHeaderText

Divider

Card

List

(나영) 피드백

Color 상수변수 → atoms에 만들기

색상은 디자인 분야세어 essential에 해당되기때문에 atom에 넣거나, common이라는 폴더 등에 추상화하시고, 상수변수로 만드셔서 재사용하게끔 하시는것을 추천드립니다.

네이밍 관습: 참고 (material design)

색상의 진하기 순서로 blue-100, blue-200, blue-XXX …

atoms, molecules, organisms 레벨

atom은 html tag 수준으로 + 컨텍스트 없이 추상화하시는 것을 추천드립니다. (단일 컴포넌트)

CardHeaderText → molecule

List → ListItem과 그걸 담은 List로

ListItem: molecule
Lidt: organism

molecules와 organism 구성 설명

어떤 조합으로 구성되어있는지에 대한 간단한 설명이 포함되면 좋을 듯 합니다.

Header = Navigation + XX + XX

molecules

Header

Profile

Modal

organisms

PieChart

일정 계획

토론토 일정 (1)

나영팀 기획서

멤버 및 역할

프로젝트 주제

토론토

(나영) 피드백

Project Design

Project Managing

기술 스택

폴더 구조

코딩 컨벤션

Github

컴포넌트

폴더 및 파일

코드 포맷팅

와이어 프레임

컴포넌트 세부구조

atoms

(나영) 피드백

molecules

organisms

일정 계획

`Project Design`

`Project Managing`