Today 요약

1. 강의

1. What I Learned?

OPTIONS 요청

프런트엔드와 백엔드 URL이 다르고 CORS 제한이 적용될 수 있는 요청을 하는 경우 브라우저는 안전한 원본 간 통신을 보장하기 위해 CORS 메커니즘의 일부로 OPTIONS 요청을 보낼 수 있다. 서버는 구성된 정책에 따라 액세스를 허용하거나 거부하기 위해 적절한 CORS 헤더를 사용하여 이러한 OPTIONS 요청에 응답해야 한다.

CORS

현재 서버의 경우 localhost:3095, 클라이언트의 경우 localhost:3090에서 작업 중이다. 그래서 서버에서 적절하게 CORS 설정을 해줘야지 클라이언트 요청이 전달되는 상황이다.

app.use(
  cors({
    origin: true,
    credentials: true,
    webSocket: true,
  })
);

만약 localhost에서 작업하고 백엔드에서 cors 설정을 해주지 않았을 때는 프론트엔드에서 webpack devServer 설정으로 proxy 설정을 해서 요청을 3095로 보낸 것처럼 만들 수 있다.

devServer: {
	...
	port: 3090,
	proxy: {
		'/api/': {
			target: 'http://localhost:3095',
			changeOrigin: true,
			ws: true,
		},
	},
},

그리고 실제 localhost가 아니라 최근에 진행했던 프로젝트의 실제 서버 주소 (예 : http://3.35.16.126 ) 와 같은 것도 proxy가 가능한지에 대해서 테스트해보자.

withCredentials

withCredentials 옵션은 단어의 의미에서 알 수 있듯이, 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목이다.

이번 프로젝트 때 백엔드에서 OAuth를 구현한 뒤 테스트 해볼 때 OAuth에서 발생한 토큰이 쿠키에 저장되어 있어서 이걸 어떻게 header에 담아서 보낼까를 고민하다가 쿠키에 있는 걸 가지고 와서 로컬스토리지에 담아서 보낼 생각을 했었다. 하지만 생각처럼 쿠키에 있는 토큰 정보를 가지고 오기가 쉽지 않았다. 이제 withCredentials 옵션에 대해서 알게되었으니, withCredentials 옵션을 true로 설정해서 요청을 보내서 토큰 정보가 담겨서 서버에 요청이 전달되는지 체크해봐야 할 것 같다.

2. What I did?

eslint no-unused-vars

사용되지 않는 변수에 대해서 경고를 띄워주려는 목적으로 eslint를 사용하고 있었는데..

"rules": {
	"import/extensions": ["off"],
	"camelcase": "off",
	"no-unused-vars": "warn",
	"react/react-in-jsx-scope": "off"
}

타입 스크립트로 프로젝트 진행하면서 이전 프로젝트에서는 제대로 no-unused-vars가 경고를 제대로 띄워주고 있었는데, 이번에 강의 들으면서 새롭게 진행하는 프로젝트에서는 사용하지 않는 변수 일부분에 대해서 경고창이 아니라 에러로 발생시키는 상황이 발생했다. 원인은 생각보다 간단하고 해결책도 그만큼 간단했지만, 정작 왜 기존 프로젝트에서는 잘되었는데, 현재 프로젝트에서는 안되는지에 대한 이유는 찾지 못했다..

일단 타입스크립트의 경우 @typescript-eslint/no-unused-vas 옵션이 따로 있는 것 같아서 해당 부분도 같이 warn으로 설정하면 문제는 해결된다.

{
	"files": ["*.ts", "*.tsx"],
	"parser": "@typescript-eslint/parser",
	"plugins": ["@typescript-eslint"],
	"extends": ["plugin:@typescript-eslint/recommended"],
	"rules": {
		"@typescript-eslint/no-unused-vars": "warn"
	}
},

하지만 이전 프로젝트에서는 해당 설정을 하지 않고 진행해도 에러가 발생하지 않았었다. 이 부분에 대해서는 일단 인지만 하고 있고, 추후에 해당 옵션을 주지 않고도 에러가 발생하지 않는 상황이 있다면 그때 다시 비교해보자.