DO MY BEST

프론트랑 백의 포트번호가 다르면 OPTIONS라는 요청이 또 간다.
이것이 CORS에 대한 요청이다.

이것에 대한 해결 방법

       전제: 

       프론트의 주소: http://localhost:3090

       백의 주소:  http://localhost:3095

       백: 

       (노드의 경우)

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

이렇게 설정을 해준다.

프론트: 

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

       💡 이렇게 프록시를 설정 해주면 같은 포트번호인 것 처럼 속여줬기 때문에 같은 도메인끼리 소통한 것 처럼 인식하여 OPTIONS 요청을 안보낸다.

      💡 Web pack 데브서버가 CORS문제를 피해갈 수 있게 도움을 준다. 

      💡  프론트 백 둘 중 하나만 조치를 취해줘도 되고 둘 다 취해줘도 된다. 방법은 조금 달라질 뿐이다.

                  ex) 백에서 CORS 조치를 취해주면 프론트에서 axios로 요청을 보낼 때 밑에 처럼 해줘야 한다.

       ※ 서버랑 프론트 둘 다 로컬호스트일 때만 프록시 설정 가능.

axios요청 보낼 때 주의사항

       axios.post('http://localhost:3095/api/users', {  ...  }     이 의미는 (포트번호) 3090 -> 3095 로 보낸다는 것이고

       axios.post('/api/users', {  ...  }     이 의미는 (포트번호) 3095 -> 3095 로 보낸다는 것이다.

useCallback은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수이다.

const onSubmit = useCallback(
	(e) => {					        ★
    	e.preventDefault();     	   		        ★
        console.log(email, nickname, password,, passwordCheck); ★
    },	
    [email, nickname, password, passwordCheck],     ☆
)

☆(deps)에는 ★(함수)안에서 사용하는 변수들을 다 넣어줘야 한다. 그래야 지만 ★(함수) 안에 있는 값들이 업데이트된다.

useCallback 자체가 ★(함수)를 캐싱해둬라(기억해둬라)이다. 언제까지 기억하냐면 ☆(deps)값들 중에 하나라도 바뀔 때까지.

하나라도 바뀌면 ★(함수)를 새로 만들고 바뀌는 게 없으면 이전 함수를 계속 쓴다.

특성

클래스에서는 필요 없는데 함수에서는 매번 전체가 재실행되기 때문에 useCallback으로 감싸지 않으면 ★(함수)들이 매번 재생성된다. 이것을 막기 위함이다.

그러나

리 렌더링이 많이 일어난다고 해서 성능에 크게 영향을 미치지 않으나 디버깅하기가 어려워진다.

useCallback으로 안 감싸도 동작은 하지만 매번 함수가 새로 생기면 밑에 예제를 보면 onChange에 들어가는 것이 매번 새로운 함수가 들어간다. 그러면서 리 렌더링이 발생한다. (그러나 리렌더링이 발생한다 하더라도 실제로는 화면을 다시 그리는 것은 아니다.)

	...
        <Label id="nickname-label">
          <span>닉네임</span>
          <div>
            <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname} />
          </div>
        </Label>
        <Label id="password-label">
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
        </Label>
	...     
     

css in js (emotion, styled component)

       - styled component와 비교하면 emotion이 설정이 더 간단하다.

       - emotion이 서버사이드 렌더링할 때도 좀 더 쉽다.

emotion 초기설정

※ @emotion/core에서 @emotion/react로 바뀌었다.

emotion 문법  

export const Label = styled.label`
	margin-bottom:17px;
    ...
    & > span {   // &가 Label을 표현한다. 즉 Label의 자식인 span을 다음과 같이 정의한다로 해석된다.
    	...
    }
 `;

이것을 하기 위해서는 

을 해야한다.

그리고, webpack.config.ts에 

...
    module: {
    	rules: [
        	{
            	test:
                loader:
                options: {
                	presets: [
                    	
                    ],
                    env: {
                    	develtopment: {
                        	plugins: [['@emotion', { sourceMaps: true }], ...] <- 이게 필요
                        },
                    },
                },
            },
        ],
    }