Portfolio

Goals

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

성현 :

개인적으로 타스와 next 제대로 써본적 없어서 이것만 써봐도 성공했다고 생각한다

저번 프로젝트로 webpack의 띠꺼움과 디자인 통일 때문에 좀 고생한 기억 있어서 이부분이 잘 해결되면 좋겠다

vite ?
tailwind or 잘 구조화된 무언가

recoil은 이론적으로 리액트와 코드적으로나 방향성으로나 잘 맞지만 너무 어려웠음… 😵

주영 : 1) 취업 준비랑 병행하며 민폐되지 않게 무사히 잘 마치기. 2) 새로운 기술에 대한 욕심은 없고 해봤던 것 or 써봤던 것이라도 더 좋은 코드로 만들어보기. 물론 다른 팀원분들이 새로운 것이 써보고 싶다면 그것도 좋음. 단, TS는 꼭 썼으면 좋겠다.

민형

react-query 공식문서 중에 현재 필요한 부분만 숙지해 이번 프로젝트에 사용해보고 싶다.

프로젝트를 진행하며 API 파일, 컴포넌트, 폴더 구조 등에 있어 기능, 역할이 명확하도록 제작해보고 싶다.

지역성의 원칙을 고려한 패키지 구조: 기능별로 나누기

패키지 구조의 선택은 프로그래머로서 맞닥뜨리는 단골 고민 주제 중 하나다. 정답이 없는 문제겠지만, 여러 차례 관련된 고민을 하면서 나름의 깨달음을 발견해 글로 남겨본다. 간단한 쇼핑몰을 만드는 경우를 생각해보자. 프로젝트를 시작하는 시점엔 코드의 양도 적고, 다루어야 하는 복잡도도 그다지 높지 않다. 그렇다고 모든 파일을 동일한 레벨에 늘어놓을 수는 없기에, 어떤 형태로든 정리를 해나가다 보면 보통 아래와 같은 형태의 디렉터리 구조가 나온다.

https://ahnheejong.name/articles/package-structure-with-the-principal-of-locality-in-mind/

파일을 모듈화

이전 프로젝트 때 TS를 사용했다기 보다는 끌려 다녔단 느낌이 없지 않아 있었기 때문에 이번에는 프로젝트 전에 조금 더 공부를 해 TS를 유연하게 사용했으면 좋겠다.

다연

타스+리액트 또는 넥스트..? 조합에 emotion, react-query를 써보고 싶다.

eslint, prettier와 함께 stylelint도 쓰고 싶다.

반응형 디자인

스토리북

개인적인 소망: 코어타임 참여가 어렵다 보니 밤시간에 스크럼을 한번 하면 좋을 것 같다. 저번 프로젝트때 이 방식으로 진행해서 프로젝트 진행상황을 공유받은 것이 좋았다.

Team Goals

💡

Tech Stack

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

언어

메인 라이브러리

Next.js

상태관리

react-query

배포

자동 배포

수동 배포도 고려

s3
cloud front

자동화

github action

Style

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

방법

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

이미지 파일명

스네이크 케이스

변수명, 함수명

컴포넌트 만들 때

최상위는 function 키워드

파스칼 케이스

기능용 함수는 화살표 함수

카멜 케이스

변수명, 함수명

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

File Structure

파일 유형별 그룹화


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

1차 회의