JavaScript 이론/React (3) 썸네일형 리스트형 CORS Error와 프록시(Proxy) 설정하기 다른 도메인에서 API를 요청해 사용하기 위해서는 CORS 설정이 필수적이다. 개인적인 API 연습을 위해 localhost를 사용한다면 CORS 설정에서 모든 도메인을 허용해도 상관없지만, 실제로 프로젝트를 진행한다면 특정 도메인만을 허용하도록 구현해야 한다. 정석적인 방식으로는 프론트엔드에서 백엔드에게 개발 서버의 도메인을 허용하도록 요청을 보내고, 백엔드에서 요청받은 도메인만을 허용하도록 코드를 수정할 수 있겠지만 프록시(Proxy)를 사용하면 CORS 정책을 우회할 수 있다. 프록시를 사용하지 않는 경우, 프론트엔드-브라우저-백엔드 간의 흐름은 다음과 같다. 1. 프론트엔드에서 백엔드의 API를 사용하길 요청 2. 브라우저에서 백엔드에게 해당 앱에 대한 접근 권한이 있는지 확인 (같은 출처인지 확.. [React] 컴포넌트의 스타일을 커스텀하여 사용하기 (Custom Styled-Components) CSS in JS는 CSS를 자바스크립트로 작성 가능하는 CSS 사용 방식이다. 기존에는 웹 페이지의 구성이 HTML/CSS/JavaScript 였다면 React는 HTML+JS/CSS로 만들었고, CSS in JS를 사용하여 HTML+JS+CSS가 되었다. 대표적인 CSS in JS로는 Styled-Component가 있다. Styled Component는 컴포넌트 기반으로 CSS를 작성하게 해 주는 라이브러리로, CSS를 컴포넌트 안으로 캡슐화하여 네이밍이나 최적화를 신경쓸 필요가 없지만 각종 라이브러리를 사용하므로 번들의 크기가 커지고, 빠른 페이지 로드에는 불리해진다는 단점이 있다. 그럼 Styled-Component를 직접 사용해보자. 라이브러리를 사용하기 위해서는 제일 먼저 import가 필요.. React로 Single Page Application 만들기 - 1 (Component, Router) 싱글 페이지 애플리케이션(Single-page application, SPA)은 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. 1. 리액트 프로젝트 만들기 작업하고자 하는 폴더를 열고 터미널에서 프로젝트를 만든다. //npx create-react-app 파일명 npx create-react-app 1_blog 기본적인 형태의 블로그를 만들어볼까 하고 파일명은 1_blog로 지어주었다. node_modules: 라이브러리 모음 폴더 public: 이미지 파일, 폰트 등 static 파일 보관함. > public 폴.. 이전 1 다음
