728x90

개인공부/FE 2

[React] 넷플릭스 메인 화면 클론 코딩

넷플릭스 메인화면을 React로 클론 코딩해보려 한다. 넷플릭스 안 본지 진짜 오래되었는데... 컨텐츠 말고 맨날 메인 화면만 보고 있었던 탓인지 메인화면은 대충 떠오르는 것 같다. (솔직히 뭐 보지 고민하느라 메인화면 보는 시간이 실제 컨텐츠 보는 시간 보다 길었던거.. 나만 그런거 아니지) 기본적으로 아래의 영상을 기반으로 한 클론 코딩이다. https://www.youtube.com/watch?v=XtMThy8QKqU TMDB의 영화 정보 API를 이용해서 메인 화면에 영화 정보를 넷플릭스의 메인화면 처럼 보여주는 코드를 구성했다. React 공부에 치중을 둔 프로젝트인 만큼 실제 서비스의 동작은 하지 않는다. 우선 기본 index 페이지 코드는 다음과 같다. 이 코드에서는 후에 우리가 사용할 루트..

개인공부/FE 2022.03.11

[Web] CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

사실 이 개념은 프론트엔드, 백엔드 어느 한 쪽에 국한 되는 개념은 아니다. 내가 이 개념을 프론트엔드 공부할 때 접한 개념이었어서 FE카테고리에 넣은 것이지, 이 개념이 FE에 한정되는 개념이 아님을 밝히고 시작하려 한다. 우선 CORS의 정의는 다음과 같다. 추가 HTTP 헤더를 이용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 이 정의만 보면 무슨 이야기인지 잘 와닿지 않을 것이다. (나도 처음 접할 때 무슨 말인지 한참을 들여다봤다.) 위의 말을 다른 표현으로 쓰자면, 브라우저 관점에서 origin이 다른 서버를 바로 호출 할 수 없다는 이야기이다. 예를 들면, 내가 "https://aaaaaaa.com"라는 ..

개인공부/FE 2022.03.02
728x90
반응형