개요

1. 개요
- facebook 제공
- 프론트엔드 프레임워크
(3대 프레임워크: React.js-facebook, Vue.js-중국계미국인, Angular-google)
==> JS 기반
- MVC 패턴에서 V(View) 담당
- 가상 DOM 이용해서 빠른 DOM 처리가 가능.
- 개발방법 2가지

  가. 함수형
      - 현재 개발 방법.
      - 일반함수 가능
        arrow 함수 가능
      - 클래스 컴포넌트에서만 사용가능한 문법들이 있었음.
        버전업이 되면서 함수형 컴포넌트에서도 사용가능하도록 문법지원.
        (hooks 지원)

  나. 클래스
      - 과거에 주로 사용됨.


2. React.js 종류 3가지

1> CSR (Client Side Rendering)
- 웹브라우저에서 랜더링하는 방식(클라언트자원으로 랜더링)
- 일반적으로 React.js 라고 부름.

2> SSR (Server Side Rendering)
- jsp 처럼 서버에서 화면을 만들고 웹브라우저에 응답하여 랜더링되는 방식.
- 일반적으로 next.js 라고 부름.

3> Reactive native
- 모바일용 React 의미.


3. 환경설정

1> node.js 설치

    C:\Users\ssginc03>node --version
    v20.12.2

2> VSC 설치
3> VSC 플러그인

    ReactJS Snippets 설치(교안기준 함수기반)

4> 크롬 React 확장팩 설치

    chrome 웹 스토어 React Developer Tools 설치
    https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

4. React 프로젝트

    https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app (react.js 문법)
    https://react.dev/blog/2023/03/16/introducing-react-dev (next.js 문법)

1> 리액트 툴체인
- facebook 공식 개발툴 (CSR만 지원됨)
- 요즘에는 vite 개발툴도 있음

2> 방법
문법: npx create-react-app 프로젝트명
가. 설치

    npm install npm -g <== npx create-react-app my-app 실행시 에러날때
    npm install create-react-app

    npx create-react-app my-app
    cd my-app
    npm start

나. my-app 폴더 생성

다. reactjs 버전 변경
- my-app > package.json
  maven 의 pom.xml 역할의 package.json

    "react": "^18.3.1",
    "react-dom": "^18.3.1",

    ↓ 버전변경

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

- npm install 적용(maven 의 update)

    C:\reactjs_study>cd my-app    

    C:\reactjs_study\my-app>npm install

    up to date, audited 1545 packages in 3s

    262 packages are looking for funding
    run `npm fund` for details

    8 vulnerabilities (2 moderate, 6 high)

    To address all issues (including breaking changes), run:
    npm audit fix --force

    Run `npm audit` for details.

    실행하여 변경사항을 적용시킴(my-app 디렉토리안에서)


3> 실행

    cd my-app
    npm start

        Local:            http://localhost:3000
        On Your Network:  http://10.10.10.179:3000


4> my-app 프로젝트 구조

    my-app
        ㄴnode_modules (maven 의 C:\Users\ssginc03\.m2 저장소역할을 함. 의존성(.jar 가 아닌 js 역할))
          public
            - 이미지저장가능
            ㄴindex.html(메인 홈페이지 화면, 화면을 구성하는 특정 js 파일을 이용해서 화면 랜더링함.)
          src
            - 이미지저장가능(권장- public 에서 저장시 build할때 누락될가능성이 있음)
            ㄴ index.js(App.js 를 import 해서 App.js 의 화면을 랜더링 함)
               App.js(결론적으로 App.js에서 화면 구축하면 됨)

          package.json (maven의 pom.xml 기능)
          README.md (실행 명령어 제공)

          ==> 변경된 의존성을 갱신할려면 npm install 명령어를 실행해야 된다.

- *.js 마다 *.css 만드는것이 일반적인 패턴이다.
- <label for="userid" class="col-sm-2 col-form-label">*아이디</label> label 속성의 for 를 그대로 사용하면
  for 문으로 인식하기에 다른방식으로 써야한다.(toolchain 사용)


5> public vs src
==> 이미지 저장 가능한 폴더이다.

(1) public
- 외부에서 접근이 가능
- build 시 누락될수 있기에 권장하지 않는다.

(2) src
- assets 폴더에 저장한다.
- 외부에서 접근불가.(private)
- build 할때 누락없이 빌드 가능.(권장)