[MarketBully] - 초기 셋팅

🙏 Trello에 빠지다..

Trello는 크게 Back,Front,This Week,In Progress,Done이라는 list로 나눈다

This Week은 이번주에 할일과 목표설정을 작성하고, In Progress는 현재 진행중인 상황을 자세히 파악할 수있다. 마지막으로 Done은 완료된 것들을 모아논 곳이다

트렐로는 이렇게 진행상황을 한눈에 파악할 수있다는 게 가장큰 장점이다. 협업할때 팀원들이 현재 진행상황이 어떠한지 파악 할 수있고, 그에 맞춰서 프로젝트를 진행할 수 있다. 또한 기능중에서 제일 유용한 것은 체크리스트 기능이다. 체크리스트는 내가 정한 목표들을 적어놓고, 완료되면 체크하는 방식으로 사용 할 수있다. 보다 체계적으로 내가 할일들을 파악할 수 있어서 매끄럽게 진행 할 수있다.

Notion 설정

이렇게 역할분담과 백엔드 & 프론트 전체 프로젝트의 공통사항들도 정리하여 노션에 기입했다. 이렇게 함으로써 보다 더 명확하게 프로젝트를 진행할 수있다.

CRA 설치

npx create-react-app MarketBully

React Router 설치

npm install react-router-dom --save

Sass 설치

npm install node-sass --save

📘 src 폴더

Pages 폴더

• 각자 맡게될 레이아웃을 컴포넌트화 시킨다.
• Login Signup Home Nav 등등

Components 폴더

• 해당 컴포넌트 js, scss를 만든다

Style 폴더

• reset.scss : default css 속성 초기화
• common.scss : 함께 쓰는 공통 css 속성(ex.theme color)

Router.js

• 팀원이 맡을 컴포넌트를 한곳으로 모아 라우터 시켜준다.

📘 public 폴더

data 폴더

data 폴더

• data 폴더는 추후에 mock data를 만들어서 불러올 때 사용한다.
• mock data의 장점은 백엔드에서 아직 api를 받아오지않을때 해당 기능의 구현을 확인할 수있다.

📍 ESLint, Prettier 설치 및 설정

ESLint는 자바스크립트 문법이나 code convention을 검사하는 도구(linting utility)이다. 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어다. 따라서 사소한 타이핑 실수를 알아채지 못한 채 잘못된 프로그램을 배포할 수 있다. 요즘의 library, framework들은 기본적으로 이런 검사 도구가 세팅되어있기 때문에 걱정할 필요가 없다. ESLit로 코드를 검사하고 잠재적인 문제들에 대해 경고를 해준다.

Prettier는 code formatter이다. 설정한 ESLint 룰에 따라 Prettier가 자동으로 format을 잡아준다.

우리는 작업할때 공통으로 개발코드를 볼 수있게 ESLint와 Prettier를 추가했다.

1. CRA에 ESLint 추가하기

• CRA는 기본적으로 ESLint 세팅이 되어있다
• ESLint 플러그인 설치 - VSCode (Code - Preference - Extentions 에서 ESLint 검색 후 설치)

2. ESLint 세팅

• 프로젝트 root에 .eslintrc.json 라는 이름의 파일을 추가하고 아래 내용을 추가한다.

{
  "extends": "react-app"
}

3. CRA에 Prettier 추가하기

ESLint만으로 부족하다. 혼자 개발하면 몰라도, 여러 명이 같이 일하고 있기 때문에 다른 사람의 코드를 보고 짜증나지 않으려면 서로 format을 맞추어 동일한 code style을 유지해야한다. 그걸 Prettier가 알아서 format을 맞춰주겠다는 것이고, Editor에 플러그인을 추가하여 강제로(자동으로) formatting을 하려고 한다.

(1) 플러그인 설치 (Code - Preference - Extentions 에서 Prettier 검색 후 설치)

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

(2) Prettier을 사용하려면 install을 해야한다. 그리고 eslint rule에 따라 formatting도 추가or삭제할 것이므로 eslint관련 패키지도 추가한다.

(3) Prettier 세팅

• Code - Preference - Settings
• 우측 상단에 {} 를 눌러주어 json파일 형태로 바꾼다. 그리고 아래 6개 프로퍼티를 추가한다.

"[javascript]": {
  "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"

위의 설정을 추가하면 나의 코드에 온통 빨간색으로 밑줄이 쳐진다. 뭐가 문제인지 mouse를 올려보면 된다.

이 상태에서, 파일 수정하고 ctrl+s하면 자동으로 format 되어 저장된다. 아래는 엔터 한 번 치고 저장해본 결과이다.

참고로 VSCode setting은 github에 올라가지 않습니다.

📍 github repo 연동 및 push

초기 세팅이 완료되면 github에 올려준다.

그러고 나면 다른 팀원들이 해당 repo를 clone 받고, master에서 바로 작업 하는게 아니라 반드시 branch 새로 생성하고 시작한다.

// 초기세팅 작업 완료 후

// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."
// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin (해당 repo 주소 입력)
// 연동된 repository로 push 해주세요.
git push origin master
// remote master에 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작해주세요.
git clone (해당 repo 주소 입력)
git branch feature/chanyoung

🎁 초기셋팅완료!!

시작이 반이라는 말이 있다. 초기셋팅은 단순히 셋팅만하는 것이아니라 의외로 회의할 것들이 많았다. 크게 페이지 역할분담과 본인이 추가하고싶은 기능들, 그리고 공통으로 사용되는 scss 정의, 백엔드에서도 해당 컴포넌트와 같은 역할을 하는분과의 의사소통등 처음으로 회의다운 회의를 한 것같았다.

로그인, 메인페이지, 상품리스트등등이 있었는데 그중에서도 개인적으로 메인페이지를 하고싶었다. 사실 메인페이지에서 슬라이드 구현과 상품리스트를 소비자 측면에서 UI를 재구현하고싶었고, 메뉴바, 검색어 기능또한 매력적이어서 지원하게 되었다.

벌써부터 두근두근 거리고 팀원들 모두 좋은분들이라 일하는 게 즐겁고 행복하다. 다들 어설프고 아직 익숙하진 않지만 그러는 과정에서 서로가 도와가면서 성장해나가는 과정이 정말 소중하다. 팀원들과 끝까지 좋은 추억을 만들기위해서라도 책임감을 가지고 맡은 바 역할을 열심히 할것이다!! 마켓불리 화이팅!!!