1. CSR Client Side Rendering 클라이언트가 서버쪽에서 정보를 전달 클라이언트가 랜더링하여 화면에 보여준다. 즉 클라이언트는 서버와 요청,응답을 통해 페이지를 전환할 수 있다. 2. SPA Single Page Application 클라이언트가 처음만 서버 요청하고 이후 필요한 정보들은 응답 받았던 정보를 사용해 페이지를 전환한다. SPA 단점 : SEO 검색앤진 최적화 검색앤진 검색앤진은 사이트를 랜더링 하지 않고 META 정보만 가져간다. 3. SSR Server Side Rendering 클라이언트가 요청하면 서버에서 랜더링 하여 전달한다.

Promise - 비동기 패턴 객체 사용 1. 비동기 패턴 1-1. 콜백함수 callback 함수는 a라는 로직 이후에 실행 되는 로직을 말한다. 함수의 인수로 사용되는 함수를 콜백함수 실행 순서 보장 function a(callback){ // 1. 함수 setTimeout(()=>{ console.log("a"); callback() // 2. 콜백함수의 실행 위치 },1000) } function b() { console.log("b") } a (function (){ // 3. 콜백함수 = a 함수의 인수로 사용되는 function 함수 b() }); 1-2. 콜백지옥 (연이은 콜백함수의 사용) 순차적으로 콜백함수를 사용할때 > 이와 같은 모양이 나타나게 된다. 다음 순서를 보장은 하지만 관리가 ..

클래스형 컴포넌트 (Class Component ) 1. 내보내기 1-1. default 내보내기 컴포넌트들은 보통 default로 내보낸다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. class App extends Component{ render(){ return ( 예산 계산기 ) } } //내보내기 default - 메인으로 내보냄 export default App; 2-1. 클래스 바로 내보내기 여러개 내보낼 수 있다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. export class App extends Component{ render()..

JSX (Javascript syntax extension) 1. JSX (Javascript syntax extension)이란 ? JSX를 이용하여 UI를 나타낼 때 자바스크립트 (logic)와 HTML구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 할 수 있습니다. 리엑트에서 JSX를 사용하지 않을 수도 있지만, 편리하기 때문에 사용을 권장합니다. 만약 JSX를 사용하지 않는다면 리엑트에서 제공하는 React.createElement API를 사용해야한다. React.createElement API 엘리먼트 객체를 생성 후 IN-Memory에저장 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려준다 . 2. JSX..