Side Project log #1

* 프로젝트 기본 환경 설치

1. node.js 설치

https://nodejs.org/ko/download/

다운로드 | Node.js

- node.js를 설치함으로써, npm(Node로 만들어진 패키지들을 관리해주는 툴)과 npx(node 5.2.0부터 새로 추가됨)이 자동으로 설치됨.

 - 보다 더 빠른 패키지관리 명령어인 yarn을 대체로 사용해도 된다.

아래는 npm과 yarn을 비교한 글과 npm의 명령어 및 관련 파일에 관하여 설명한 글들.

 

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-npm%EA%B3%BC-yarn

[개발상식] npm과 yarn

https://curryyou.tistory.com/346

Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법

 

- yarn을 설치할 경우

npm install -g yarn

해당 명령 사용.

2. IDE: Visual Studio Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

3. VSCode 확장 플러그인 설치

* Prettier 

-코드 작성시 사용자가 정의한 설정 혹은 기본 설정에 맞게 강제적으로 포맷팅 해주는 도구.

-코드 작성 후 F1을 누르고 format을 입력한 다음 Enter를 누르면 자동 정렬됨. => 혹은 VsCode format on save설정으로 저장할때마다 자동정렬이 되게끔 설정해줄 수 있다.

- .prettierrc에서 사용자 정의 셋팅 변경해줄 수 있다. 

* EsLint 설치

- 문법 검사 도구로, 코드를 작성할 때 실수하면 에러 또는 경고 메시지를 VS Code에디터에서 바로 확인 가능

* Reactjs Code Snippets : 리액트 컴포넌트 및 lifecycle함수 작성할 때 단축단어(rsc, rss...etc)를 사용하여 간편하게 코드를 작성할 수 있는 스니펫 모음. charlampos karypidis 제작자가 제작한 플러그인 설치 요망.

 

---

* 프로젝트 생성 과정

 

1.로컬의 프로젝트 폴더 하위 경로로 이동 ( what-should-i-eat-front)

해당 경로에서 아래의 명령 실행하여 react 

yarn create react-app what-should-i-eat-front

=> create-react-app <애플리케이션 이름> 으로 react web app을 자동으로 셋팅할 수 있다. (해당 명령을 사용하면 svg나 css파일을 불러오는 작업을 도와주는 webpack도 자동으로 설치됨)

 

2. 리액트 환경으로 구성으로 만들어진 해당 디렉터리로 이동

cd what-should-i-eat-front

 

3. 아래의 명령어로 프로젝트 시작.

yarn start

Compiled successfully!

You can now view what-should-i-eat-front in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.219.129:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

=> 3000번 포트로 접속하여 로컬에서 해당 프로젝트를 띄울 수 있다. 

 

---

* 기타 환경 설정 과정(참고용)

 

1. UI 개발자분들이 CSS 전처리기로 Sass를 사용하실 것 같아서, 일단 임시로 node-sass를 설치함.

SaSS(Syntatically Awesome Style Sheets)는 스타일 코드의 재활용성을 높여주고 코드의 가독성 도와주는 CSS전처리기.

 

yarn 을 사용할 경우:

yarn add node-sass

npm을 사용할 경우:

npm install node-sass

위의 명령어를 사용하여 설치한다 

이 작업 이후 package.json의 dependencies에

    "node-sass": "^8.0.0",

해당 라이브러리 package.json 의존성으로 추가된 것 확인 가능

 

 

2. 비동기 통신을 위한 axios 패키지 설치

yarn add axios

이 작업 이후 package.json의 dependencies에

    "axios": "^1.2.3",

해당 라이브러리 package.json 의존성으로 추가된 것 확인 가능

 

 

3. 특정 url에 컴포넌트를 생성 및 맵핑시키기 위해 사용하는 react-router-dom설치

yarn add react-router-dom

이 작업 이후 package.json의 dependencies에

 

    "react-router-dom": "^6.7.0",

해당 라이브러리 package.json 의존성으로 추가된 것 확인 가능

 

 

4. backend 서버에 api요청시 ip,포트번호 다름으로 발생하는 CORS문제 해결하기 위한 proxy 관련 셋팅 추가

yarn add http-proxy-middleware

    "http-proxy-middleware": "^2.0.6",

이 작업 이후 package.json의 dependencies에 해당 라이브러리 package.json 의존성으로 추가된 것 확인 가능

=> 이 설정은  proxy설정을 통해. 마치 서버와 같은 ip및 포트로 보내는 양 일종의 브라우저를 속이는 방법임.

=> 이 부분에 대해서는 backend api에서 해당 컨트롤러 혹은 메서드를 @CrossOrigin어노테이션 or Config설정으로 해당 ip+포트 허용을 하면 필요 없음. 추후 결정해야할 선택사항임. 가능하면 백엔드에서 @CrossOrigin설정해주는 것이 정석적인 방법.

자세한 사항은 아래 글 참고.

https://junhyunny.github.io/information/react/react-proxy/

React 개발 서버 CORS 해결하기 with Proxy

 

/src/setUpProxy.js 에 프록시 설정 임시로 해둠.

/api로 시작하는 api요청은 프록시 타고 서버에 정상적으로 요청될 것임. 

백엔드 서버 포트 및 주소 정해지면 target에 서버 주소 변경해서 넣어줘야함.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'https://jsonplaceholder.typicode.com',
      changeOrigin: true,
    }),
  );
};

 

---

* 그 외....Git Clone 

전제 : Git을 설치한다. 

https://git-scm.com/downloads

Git - Downloads

1. 로컬의 작업 폴더를 하나 생성한 후, 해당 폴더에 접속.

cd <본인 작업할 폴더>

2. 해당 프로젝트 클론 받기

git clone <전달한 git 프로젝트 주소>

3. 깃 development브랜치로 체크아웃

git checkout development

4. development브랜치에서 기능별로 브랜치 따서 작업하시면 됩니다.

git branch <브랜치 이름>