Portfolio

Goals

각자 이번 프로젝트를 통해 이루고 싶은 목표나 다짐을 적어보고, 이를 기반으로 팀 목표를 정해보아요!

지원 : 다른 개발자들과의 협업 경헙, 완성도가 높은 서비스를 만들기 위한 deep problem solving

민재 : 각자 강점을 드러낼 수 있는 프로젝트로 나중에 취업에서도 플러스가 될 수 있는 경험을 해보고 싶다.

민종 : 현업에서 많이 사용하고 있는 기술을 접할 수 있는 기회가 있으면 좋겠다.

다연 : 감정 상하지 않고 최선의 결과물을 만들어 낼 수 있는 프로젝트를 진행하고 싶고, 타겟을 정해서 사용자 중점적인 서비스를 개발하는 것

Team Goals

💡

각자 강점을 활용한 완성도 높은 프로젝트 + 감정 상하지 않는 원활한 협업

Tech Stack

어떤 기술을 베이스로 개발을 해볼까요?

언어

메인 라이브러리

React

상태관리

Redux

Recoil

배포

vercel

~~netlify~~

Style

어떤 방법으로 스타일을 적용할까요? 또, 관련해서 적용하고 싶은 라이브러리가 있는지!

방법

css in JS

styled-component

Code Style

코드 규칙에 대해 정해보아요~

eslint

.eslintrc.json


{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

prettier

tab 2 or 4

single or double

single

세미콜론 여부

라인 넘어가는 것

80
bracketSameLine

이미지 파일명

스네이크 케이스

변수명, 함수명

컴포넌트 만들 때

화살표 함수

파스칼 케이스

변수명, 함수명

최대한 풀어서 쓰기
카멜 케이스

File Structure

파일 유형별 그룹화


|-- FEDC3
    |
    |-- public
    |   
    |   
    |----- src
    |       |-- components
    |       |    ... // 컴포넌트 파일
    |       |
    |       |-- hooks
    |       |  ...  // hook 모음
    |       |
    |       |-- assets (images/css)
    |       |  ... // 이미지 / css 파일
		|		    |       |-- images
		|		    |       |-- css
    |       |
    |       |-- pages
    |       |  ... //페이지 모음
    |       |
    |       |-- routes
    |       |  ...// 라우팅 파일 
    |       |
    |       |-- store
    |       |  ...// context api store
    |       | 
    |       |-- utils    
    |             |
    |             |---- apis
    |                ... //api 모음
    |-- App.js
    |
    |-- package.json //설치 모듈 및 버전

File Structure - React

React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. Grouping by features or routes One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.

https://reactjs.org/docs/faq-structure.html

[팀플] 2차 회의