2024/07/23 4

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - CORS

참고 블로그: https://evan-moon.github.io/2020/05/21/about-cors/#cors%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%82%98%EC%9A%94 CORS ( Cross-Origin Resource Sharing 크로스-오리진 리소스 셰어링 )애플리케이션을 통합하면서 우리는 CORS 문제를 맞닥뜨리게 된다.이 문제는 백엔드에서 해결해야 한다. componentDidMountTodo 아이템을 불러오는 부분이다.우리가 http://localhost:3000 접속하면 Todo 아이템이 리스트에 보여야 한다. 렌더링이란?리액트는 브라우저에 보이는 HTML DOM 트리의 다른 버전인 ReactDOM..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - SPA

SPA(Single Page Application)한 번 웹 페이지를 로딩하면 사용자가 임의로 새로 고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션 파싱(parsing)브라우저가 HTML, CSS, JavaScript 등의 소스 코드를 해석하는 과정렌더링(rendering)파싱된 웹 페이지를 화면에 실제로 표시하는 과정  [React.js로 알아보는 SPA 동작 원리] 1. index.html 렌더링   2. index.js 실행ReactDOM.render(,document.getElementById('root'));  3. root Element 아래에 React.js 가 생성한 HTML Element 추가 ..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 브라우저의 동작 원리

브라우저의 동작 원리사용자가 브라우저 주소창에 http://app.softwareengineer.com 웹 url 입력브라우저는 HTTP GET 요청을 http://app.softwareengineer.com의 서버에게 전송http://app.softwareengineer.com 서버는 HTTP Response 로 index.html 반환브라우저는 index.html을 받고 코드를 해석(파싱)하고 사용자의 화면에 띄워준다(렌더링).  DOM파싱은 렌더링의 전처리 단계파싱 단계에서 브라우저가 하는 일은 3가지가 있다.브라우저는 HTML을 트리 자료 구조의 형태인 DOM(Domain Object Model) 트리로 변환IMAGE, CSS, SCRIPT 등 리소스들이 담긴 자바스크립트 다운로드다운받은 자바스크..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 리액트 애플리케이션 생성

사용자는 자신의 컴퓨터에서 브라우저를 실행한다.브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScript, CSS 등)을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행한다. Node.jsNode.js 등장 전까지 자바스크립트는 브라우저 내에서만 실행할 수 있었다.자바스크립트는 브라우저상에서 HTML 렌더링 일부로 실행하거나 개발자창의 자바스크립트 콘솔을 이용해 실행해야 했다.다시 말해 자바스크립트는 브라우저 밖에서는 실행할 수 없었다.이젠 그렇지 않다.Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다.Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다.  NPM(Node Package Manager) NPM(Nod..

개발 2024.07.23