React
npx 뒷 이야기
예전에 react를 사용하기 위해서는 직접 babel과 webpack 등 환경 설정을 하는 데만 몇 시간이 걸렸다고 한다. 이후 create-react-app 패키지로 미리 셋팅된 환경으로 시작할 수 있게 되었다. 이 패키지를 npm을 사용해서 global로 설치했어야 했는데 npx 덕분에 local에서 설치해서 사용가능해졌다. local에서 사용하면 좋은 점은 그때 그때 다운 받으니 최신 버전으로 사용할 수 있고 디스크 저장공간을 줄일 수 있다는 것이다.
proxy 설정으로 cors 에러 해결
proxy는 클라이언트의 실제 ip를 감추고 동일한 출처인 것처럼 변경하여 api서버와 소통할 수 있도록 해준다.
코드스테이츠에서 첫 번째 프로젝트를 할 때 package.json 파일에 proxy 값을 지정하여 서버 주소를 모두 입력하지 않아도 되는 수고로움을 줄열다. 문제는 aws s3 에서 package.json을 사용하지 못한다는 점에서 발생했다. ec2와 달리 원격 서버에서 package.json을 사용하여 필요한 모듈을 설치하고 실행하는 것이 아니라 build 된 파일을 s3에 올려두기 때문이다. 그래서 이전에 마주치지 못했던 cors에러 때문에 혼이 났었다.
package.json 말고도 수동으로 proxy 설정을 하는 방법을 알아냈다. 바로 http-proxy-middleware 모듈을 사용하는 것이다. 사용방법은 src 폴더 안에 proxy 설정 파일을 하나 생성하고 아래 코드를 입력하면 된다.
import { createProxyMiddleware } = require('http-proxy-middleware');
export default function(app){
app.use(
'/api',
createProxyMiddleware({
target: "http://localhost:서버포트",
changeOrigin: true, // 클라이언트의 IP를 서버 IP로 변경하여 요청 보내기
})
);
}
Javascript Study
try catch 에러 꼭 잡자!
try catch 용도를 제대로 몰랐나 보다. 개발중 에러를 발견하는 용도로만 생각해서 방어코드를 작성한 후 에러를 잘 잡는지 확인하고 빨간 줄 잘 나온다! 하고 넘어갔다. 에러를 잡지 않는 것이 프로그램이 뻗는다는 사실에 미치지 못했을까...! 앞으로는 무조건 catch에서 에러를 잡기로 하자. catch에 줄곧 console창에 로그만 남기기만 했었다. 이참에 프론트 쪽 에러를 로그로 남기는 방향으로 프로그래밍해야지.
setState 사용하는 까닭
javascript로 컴포넌트형식을 따라 만들어보고 있다. React처럼 setState 메서드를 만들어 상태변경을 제어한다. 왜 직접 state를 변경하는 것보다 setState를 사용하도록 구현하는 지에 대한 이유는 다음과 같다. 먼저 state를 직접 변경할 때 state에 잘못된 데이터가 들어갈 수 있다. 두 번째로 state 값에 맞춰 다시 렌더링을 해주는 과정을 까먹고 생략할 수 있다. setState 함수 안에 데이터 검증로직과 렌더링 로직을 구현해두면 위 두 문제를 해결할 수 있다.
