20220518 TIL

• 코드 리팩토링시 변수나 함수, 클래스명 등 네이밍이 중요하다(한눈에 어떤것인지 알수있게 하기). 줄여쓰기 지양

• dev dependency 추가

yarn add <package> --dev
or
npm i -D <package>

• netlify로 배포하기(터미널에서)

1. yarn build 로 빌드dir 생성
2. cd build 후 yarn add netlify-cli -g (설치)
3. cd .. > netlify deploy
4. 안내에따라 url명, 사용자 이름 등 선택 후
5. netlify deploy --prod 로 배포

• netlify 배포시 cors 문제
  cors 문제때문에 proxy를 사용하거나 헤로쿠 앱을 사용해 api를 불러오는데, netlify 배포시 proxy가 제대로 동작 하지 않는다!!
  netlify를 통해 배포후 redirects를 통해 proxy를 지정해주는 방법이있다.

1. root폴더에 'netlify.toml' 이란 파일을 생성.
2. netlify.toml에 아래와 같이 작성

[[redirects]]
from = "/proxy/*"
  to = "api의 url/:splat"  
  status = 200
  force = true

3. api를 불러오는 함수가 있는곳에 아래와 같이 PROXY 추가

const PROXY = window.location.hostname === 'localhost' ? '' : '/proxy'

const url = `${PROXY}/B551182/diseaseInfoService/getDissNameCodeList?_type=json&sickType=1&medTp=2&numOfRows=10&ServiceKey=${process.env.REACT_APP_API_KEY}`

4. 이후 배포시 정상적으로 동작한다.

• 완료기한 적어도 2-3일 이전에 프로젝트를 완성해야한다. 리팩토링할 시간도 그렇고 생각치 못한 오류가 정말 많이 발생한다..

• 다음 과제를위해 Victory.js 공부를 해봐야겠다!