- React
- Redux-thunk
- React-Router
- axios
- styled-components
- prop-types
- antd
- express
- passport
- mongo
- EC2 (인스턴스 종료)
- typescript
- SEO
- nginx
- CI/CD
- Redux 다시 들어내서 => SWR?
- 상황1
- React를 도입하고 싶어하는 사람을 가정
- 기존 방식은 tempplate engine을 사용해서 view 그려주고 있었다
- 하지만 최신 웹을보니, React를 많이 쓰더라 -> 우리도 바꿔보자는 상황을 가정
- 이미 서버는 구성되어 있는 상황에서 Front 영역을 React로 변경하는 작업
- 상황2
- 기존 React로만 만들어진 환경을 한번 더 변경 -> typescript
- CSR은 검색최적화가 안된다는데...검색이 조금 더 잘되게 하고싶다
- 일정
- 1차 작업 예상기간: 2일, 실제 걸린기간: 5일
- 기록
- 대충 UI만 바꾸고, API서버에 데이터 요청하는 로직만 만들면 금방 끝날줄 알았다
- 그런데 생각보다 오래걸렸던 부분이 로그인
- 이전에는 서버에서 temlplate rendering 하는 경우라 데이터를 요청하는 경우에 제약이 없었다.
- React로 바꾸면서, Front, Server 출처가 달라져서 여러 문제가 생기기 시작
- SOP
- Same Origin Policy의 약자로, 다른 출처의 리소스를 사용하는 것에 제한하는 방식
- 동일 출처 정책은 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 요청을 주고 받을 수 있도록 한 정책
- CORS
- 서로 다른 도메인이 정보를 주고 받으려할 떄 브라우저에서 발생합니다.
- 이 문제를 해결하기 위해선 브라우저에 Cross-Origin-Resource-Sharing 허용(이 경로는 괜찮다.)
- 추가적인 HTTP헤더를 사용하여 한 출처에서 실행중인 웹애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
-
- prxoy
- 대리/대신
- 보안상 통신할 수 없는 두 주체가 통신할 수 있게 해주는 방법 (중계서버)
-
- response header: access-control-allow-origin: *
- 너네 서로 다르니까, 믿을수 있겠어? => 얘는 괜찮아 라고 말해줌
- Cookie를 전달해주지 못한다 -> 로그인이 유지되지 않는다.
- Credentials: 쿠키, 인증헤더, TLS client certificates(증명서)
- [FRONT] axios -> withCredential: true / [BACK] cors -> cors({ credential: true });
- 사실 현상황에서 React가 필요없다는 상황 -> 그렇게 동적인 작업이 이뤄지지 않는다.
- CSR로 초기 로딩시 화면 깜빡임이 존재하는데, 오히려 사용자 경험에 안좋은 영향을 주지 않을까