Proxy CORS 처리를 백엔드 개발자에게 요청할 필요없이 React 라이브러리, Webpack Dev Server에서 제공하는 proxy기능을 사용하면 CORS 정책을 우회할 수 있다. 이는 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다. 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다. 브라우저를 proxy 기능을 통해 속이는 것입니다. 위 그림에서 Direct data exchange는 proxy를 사용하기 전의 흐름이다. 프론트엔드, 즉 여러분이 개발한 React 앱에서 브라우저 쪽으로 요청을 보냅니다. 그러면 브라우저는..
스터디에서 이번주제로 정해진 브라우저의 렌더링 과정을 블로그를 작성하며 공부를 해보려고한다. 평소에 아무생각없이 들락거렸던 웹사이트들이 어떻게 작동되고 얼마나 복잡한일을 거친뒤 나오는건지 알아보도록하자. 그럼 브라우저에서의 렌더링과 파싱 단어부터 간단하게 무엇인지 알아보자 렌더링 (rendering) HTML, CSS, Javascript 파일을 파싱해, 브라우저에 시각적으로 출력하는 과정 파싱 (parsing) 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계 브라우저의 렌더링엔 과정이 있으므로 그 과정을 순차적으로 알아보도록하자 브라우저 렌더링의 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받..
오늘은 리액트를 사용하여 만들어보았던 sprint 중에 StatesAirline - Client를 express를 사용하여 Server를 만들어보았다. server에 s자도 몰랐던 나로써는 너무나도 버거웠다... 오늘 과제의 구현은 express 프레임워크를 이용하여 서버를 만들고, 클라이언트 요청에 따라 항공편과 예약 데이터를 조회, 생성, 수정, 삭제하는 기능을 수행할 수 있다. 먼저, app.js를 보면 express 프레임워크를 통해 서버를 구현하고 app.use를 통해 각각 flightRouter, bookRouter, airportRouter에 분기점을 만들어주었다. router폴더에서 flightRouter.js를 살펴보면 controller폴더의 flightController의 파일들에서 ..
오늘은 저번시간에 했던 Mini-Node-Server에서 http모듈을 사용하여 만들었던 과제를 express 라는 프레임워크로 리팩토링 하다가 알게된 것을 정리하여 적어보려합니다. 그럼 먼저, express가 무엇일까?? 일단 먼저 확실한건 티익스프레스는 아닙니다. 뭐라구요?? 재미없다구요? 저도알아요 Express.js는 Node.js 환경에서 웹 서버, 또는 API서버를 제작하기 위해 사용되는 프레임워크이다. 앞서 작성했었던 http모듈로 작성한 서버와 다른점은 미들웨어 추가가 편리하고, 자체 라우터를 제공한다는 것이다. 미들웨어 추가가 편리..?? 미들웨어가 뭔지알아야 추가가 편리한지를 알죠 미들웨어(middleware)는 간단하게 말하면, 클라이언트에게 요청이 오고 그 요청을 보내기위해 응답하려..
오늘은 웹 서버에 대해서 공부를하였다. 첫번째로 CORS에 대해서 배웠는데 이에 대한 부분은 새로 포스팅하여 자세히 공부해볼 예정이다. 오늘한것은 node.js의 http모듈을 이용하여 웹서버를 만들어보았다. 모듈이라고는 저번에 포스팅했던 fs모듈써본게 다였던지라 많이 어렵고 헷갈렸다. 했지만 하지않은것 같은..?? 3. fs모듈을 활용하여 비동기 처리(callback, Promise) 브라우저는 자바스크립트를 해석하고, 실행할 수 있는 자바스크립트 엔진을 내장하고 있음. 또한, Node.js도 자바스크립트 엔진을 내장하고 있음. 따라서 자바스크립트는 브라우저 환경 또는 Node. jhbljs92.tistory.com 이번엔 http모듈을 통해 HTTP 요청과 응답을 다루어보았다. 코드스테이츠에서는 no..
