FrontEnd의 기반 기술: HTML, CSS, JavaScript

• MPA: 뷰(view) 페이지가 여러 개이다. JSP, Thymeleaf, ….

  Server에서 랜더링(html 코드를 생성)한다. ← WAS: 톰캣

  • 서버의 부하가 늘어난다.
  • 반복된 코드가 많다.
  • 수정, 유지 보수하기가 어려울 수 있다. <Enterprise Site>
  • 요청한 페이지 전체 페이지가 렌더링 됨
    • 비동기 통신(ajax)을 사용하면 일부분만 렌더링 할 수 있다.

• SPA: 뷰(view) 페이지가 하나이다. index.html

  • 하나의 뷰 페이지에서 컴포넌트를 호출해서 사용함
  • 중복 코드를 줄여줌
  • 유지 보수가 쉬워짐
  • 하나의 뷰 페이지에서 컴포넌트가 변경
  • 전체 페이지가 렌더링 되지 않고 변경된 부분만 렌더링
  • 클라이언트 브라우저가 랜더링을 한다.
  • 서버의 부하를 감소함
  • 가상돔: 변경된 부분만 빠르게 랜더링 할 수 있는 가상 공간
  • 서버에서 값만 받아옴(XML, JSON), 값을 받아서 랜더링은 클라이언트 브라우저에서 함
  • 서버의 비동기 통신: XMLHttpRequest, Fetch, AJax, xios
    • 서버에서 값(JSON)만 받아옴
  • 앵귤러(구글, 2022 지원 종료), 리액트(메타), 뷰(중국의 개발자, 쉽다)

SPA를 위한 JavaScript 라이브러리

다양한 라이브러리를 import해서 사용

node.js가 필수적으로 설치 되어있어야 함

• https://nodejs.org/en/download
• LTS Version: 20.11.1
• 기본 경로대로 설치

  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/1709dd5a-d841-45cb-91c6-796cb47a3387/Untitled.png>)
  
  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/ca2b700e-7bfd-4276-a853-4c8d5c1f1bd1/Untitled.png>)
  
  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/52c07a3c-139a-4dae-a60a-00cfe60251bc/Untitled.png>)
  
  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/d54c3285-f8bc-491e-a7fe-f964e7b197d3/Untitled.png>)
  
  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/441a3131-f7e6-4008-b081-56427aa90fb2/Untitled.png>)
  
  ![Untitled](<https://prod-files-secure.s3.us-west-2.amazonaws.com/2081a06c-c73f-44be-ab7e-6739f9241e06/b6af5526-5339-4bc6-8a21-5213cbcdceaa/Untitled.png>)

리액트에서 사용되는 라이브러리를 다운로드하고 관리하는 명령어

• npm: 기본 내장되어 있음. 느릴 수 있다.
• yarn: 설치가 필요함. 빠름
• vite: 설치가 필요함. 빠름 ← 리액트에서 권장 사항

yam 설치: windows의 모든 프로젝트에서 사용할 수 있도록 global하게 yarn을 설치함

• npm i -g yarn
• npm install -g yarn
• npm install —global yarn(- 2개)

리액트 프로젝트 생성

• yarn을 사용해서 생성

  • cd c:\

  • mkdir Workspace-React

  • cd Workspace-React

  • yarn create react-app my-react-app ← my-react-app: 프로젝트 생성

  • cd my-react-app ← 프로젝트 폴더로 이동

  • yarn start ← React 프로젝트 실행: 기본적으로: localhost:3000 포트에서 실행

  • 명령 프롬프트: <가상 서버 작동 중지>

  • CTRL + c

• npm을 사용해서 생성: 느림

  • npx create-react-app my-react-app2 ← 프로젝트 생성
  • cd my-react-app2
  • npm start ← React 프로젝트 실행: 기본적으로: localhost:3000 포트에서 실행

• 컴포넌트(*.js) - 클래스형 컴포넌트(옛날에 사용된 컴포넌트), 함수형 컴포넌트(요즘 사용하는 컴포넌트)
  • HTML, CSS, JS를 컴포넌트로 생성, 호출해서 사용
  • JSX 문법으로 생성: JavaScript를 확장해서 쉽게 랜더링 가능하도록 생성된 문법
  • gitHub에 전송되지 않도록 하는 파일