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 }], ...] <- 이게 필요
                        },
                    },
                },
            },
        ],
    }

설명

필요없는 컴포넌트들은 처음에 불러오지 않도록 하고, 필요한 컴포넌트들은 그때그때 불러오게 하는 기법.

어떤 컴포넌트들을 불러와야하나

  - 페이지들을 분리한다.(쉬운 기준)

        ex) 로그인 페이지에 와 있는데 굳이 회원가입 페이지를 미리 불러올 필요가 없는 경우가 있으면 로그인 페이지와 회원가입 페이지는 코드스프리트 해도 된다.

   - 서버사이드 렌더링이 필요없는 것들

        ex) 규모가 큰 텍스트 에디터들 같은 경우에는 굳이 서버에서 렌더링할 필요가 없다.

import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';

에서

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

로 바꾼다. 이렇게 하면 코드 스프리팅을 언제 할지, 언제 불러올지를 크게 고민할 필요 없이 알아서 불러온다.

추천

  페이지 단위로 코드 스프리팅 하는것을 추천한다고 한다.

Session

• 세션데이터는 쿠키 안에 저장되지 않고 세션ID만 저장하고, 세션데이터는 서버사이드에 저장된다.
• 서버쪽의 기본 세션 공강인 MemoryStore는 제품 환경을 위해 안만들어 졌고 대부분의 조건에서 메모리 부족 현상이 있을 것 이므로 싱글프로세스를 커버하지 못한다. 그래서 디버깅이나 개발요인 의미이다. 저장공간을 할 때 redis 같은 저장공간이 따로 필요하다

Express-session

요청마다 개인의 저장 공간을 만들어준다.

밑은 기본 설정 값이다.

 { 

     path: ‘/’, 

     httpOnly: true, 

     secure: false, 

     maxAge: null 

}

app.use(session());을 하면 “req.session”이 생긴다. 특별히 아이디같은 것을 정해 줄 필요없이 그 사용자에 대한 고유한 세션이 된다. 그래서 예를 들어 req.session.id = ‘hello’ 를 하면 모든 사용자의 아이디가 다 hello가 되는것이 아니라 그 사용자에 대한 아이디가 hello가 되는 것이다. 

세션 쿠키 설정

session에는 다양한 옵션들이 있다.

• Resave: 요청이 왔을 때 세션에 수정사항이 생기지 않아도 다시 저장할지 여부
• saveUninitialized: 세션에 저장할 내역이 없더라도 세션을 저장할지
• Secret: 쿠키 암호화.
• Cookie: session 일때는 항상 session-cookie를 쓴다. 그 session-cookie에 대한 설정을 여기다가 하는 것이다.
• httpOnly: 이것은 항상 true로 해 둬야 javascript로 부터 공격받지 않는다.
• secure: 만약 secure가 설정되면, 당신이 http로 사이트를 접근할 때, 쿠키는 설정되지 않는다. 만약 당신이 proxy뒤에 nodejs를 돌리고 있고, secure: true 라면 express 안에 'trust proxy'를 설정해야한다.
• Name: 기본적으로 default 값으로 “connect.sid”로 되어있는데 바꿔도 무방하다.[1]

req.session.name = '~~~';  // 세션 등록

req.sessionID;  // 세션 아이디 확인

req.session.destroy();  // 세션 모두 제거