Frontend study/정리 및 기록 (12) 썸네일형 리스트형 React Proxy 설정하기 React Proxy 설정하기 http-proxy-middleware 패키지를 사용해서 Proxy를 설정하는 방법에 대해서 살펴본다. 1. Proxy를 왜 설정하는 거지? 동일한 출처(도메인, 프로토콜, 포트)라면 이러한 설정없이도 요청해도 되지만, 동일한 출처가 아닌 경우 요청을 보낼 때 CORS 이슈가 발생한다. 여기서 CORS란 Cross-origin Resource Sharing(교차 출처 리소스 공유) 의 약자로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 제도이다. 따라서 CORS 이슈가 발생했다는 건 다른 출처에 접근할 수 있는 권한이 없다는 의미이다. 이러한 문제를 해결하는 데 주로 .. HTTP 프로토콜 01. 웹 동작 방식 브라우저 검색창에 www.google.com 을 입력하면 구글 해당 페이지로 이동하게 된다. 어떻게 구글 페이지가 출력되는 것일까? 사용자가 브라우저를 통해 구글에 접속할 때, 다음과 같은 방식으로 동작한다. 1) 사용자가 웹브라우저를 통해 찾고자하는 URL 주소를 입력 (서버에 요청) 2) 사용자가 입력한 URL 주소 중에 도메인 네임 (google.com) 부분을 DNS 서버에서 검색 3) DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 4) 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성 5) 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지.. JSON Server 사용해보기 [환경] Clinet: React Server: json-server 1. JSON server json 파일을 사용해서 가짜 REST API 서버를 생성할 수 있는 도구이다. 이것은 실제 서버가 아닌 개발용 서버로 사용하는 것이 좋으며, 만약 실제 프로젝트를 개발하기 위해서는 실제 백엔드 서버를 구축해야한다. 2. JSON server 설치하기 npm 또는 yarn을 사용해서 전역으로 설치해준다. ** npm $ npm i -g json-server ** yarn $ yarn global add json-server 3. Dummy Data 만들기 가짜 서버를 만들기 위해서는 json 형식의 데이터가 필요하다. 먼저 dummy.json 이란 파일을 만들어보자! data/dummy.json { "todo.. npx create-react-app 설치 에러 create-react-app을 사용해서 리액트 프로젝트를 새롭게 구성하려고 설치하는 도중 다음과 같은 에러를 발생했다. 이와 같은 에러가 생겼다. 설치해야하는데 뭐 글로벌로 설치한 create-react-app이 이전 버전이니 최신 버전으로 설치해야한다는 그런 의미인거 같다. 그래서 stackoverflow 에 검색해서 다음과 같은 해결방법을 찾았다. 해결하는 방법 (아래 순서로 진행하면 된다.) 첫번째: 전역으로 설치된 create-react-app을 일단 지운다. - npm -g ls 명령어로 지워졌는지 확인 npm uninstall -g create-react-app 두번째: - 다시 전역으로 create-react-app을 설치한다. npm install -g create-react-app 세번.. 이전 1 2 다음
