웹 (4) 썸네일형 리스트형 react-redux practice 1. react-redux를 사용하는 기본적인 index.js파일 세팅 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reducer from './js/reducers' import { Provider } from 'react-redux' import { applyMiddleware, createStore } from 'redux'; import { logger } from 'redux-logger' // const store = createStore(reducer, applyMiddleware(logger)) // 디버깅에 유용한 logger를 사용하고 싶을 때 const store .. React-practice ● 리액트를 사용하여 유튜브 페이지 만들어보기 1. 터미널에서 npx create-react-app (원하는 파일이름) 을 입력하여 프로젝트를 생성한다. 원래는 프로젝트 구조나 연결들 하나하나를 모두 설정해줘야 하지만 create-react-app이라는 기본적인 구조와 연결을 모두 갖춰서 프로젝트를 생성하는 기능을 사용하는것! 2. 나에게 맞게 폴더 구성을 수정한다. 이때, import로 연결되어있는 주소값들도 같이 수정해주어야한다 3. 전체적으로 어떤 식으로 컴포넌트들이 구성될지 그림을 그려본다. 기본적으로 트리모양으로 종속관계를 나타내어 보고, 재사용 가능한 컴포넌트들을 표시해본다. 이때, state는 어디서 관리해야할지, 어떤 메소드들이 필요할지, 어떤것들을 props로 내려줘야할지 어느정도 생각해.. CORS 클라이언트측에서 서버로 simple requests(아래 링크 참고)에 해당하는 요청이 아닌 요청을 보내면 https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS HTTP 접근 제어 (CORS) cross-origin request의 예: https://domain-a.com에서 제공되는 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json를 요청. developer.mozilla.org CORS preflight 가 발생하게 된다. CORS preflight는 OPTION이라는 HTTP메소드로 서버측에 먼저 헤더의 내용들이 허가되는지를 요청한다. 서버측에서 허락.. HTTP http란 웹 상에서 클라이언트와 서버 간 통신을 위해 개발된 프로토콜(규약)을 의미한다. 클라이언트와 서버 사이에 요청과 응답(request & response)이 이루어지는 과정이기도 하다. 예를 들어, 클라이언트인 웹 브라우저가 http를 통하여 서버에 웹 페이지, 그림등의 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 사용자에게 전달한다. 그 결과, 이러한 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나게 된다. http는 주로 HTML 문서를 주고받는 데에 쓰이며, TCP와 UDP를 통해 이루어지며, 80번 포트를 사용한다. 한번에 한 요청만 수행하며, 그렇기 때문에 모든 요청은 서로 독립적이라 할 수 있다. 요청과 응답 모두 Header와 Body로 이루어져 있다. htt.. 이전 1 다음