#1-1 / React Setting

Framework - Anguler, React, Vue + Ajax

• 정적 웹사이트 -> 동적 웹사이트
• 랜더링 기반의 웹 구조
• HTML 코드 => DOM(javascript) 
• CDN, CLI
  CDN : 웹 엔진을 적용해서  HTML 코드와 결합  - web 위주 / ex) jquery.js
  CLI : Node 엔진을 적용해서 HTML 코드와 결합  - App, Web-spa
• React + RestAPI => ReactJs
  
  
• NodeJS : 16.x or 18.x 버전 많이 씀
• npm : 6.x , 7.x ~ 8.x 
• npm or npx 설치 명령어
  npm : PC에 패키지 젼역으로 설치
  npx : PC에 패키지 없이 설치

 

---

setting  (만약 java 프로젝트에 설치하고싶으면  webapp 폴더에 해야함 - 우린 vscode에 할거임)

1. node.js 설치
   Download Node.js (LTS)  다운 =>  LTS : 가장 안정적인 버전
2. D:\nodejs 여기에 받을거임 
3. 걍다 next해서 받으면 됨
   

 

 

👀 visual studio에 세팅 방식(D:\react_web에 받을거임)

 

✅ setting

1. CMD 오픈
2. D:\react_web 으로 이동
3. 노드버전 확인 (node -v) / npm 버전 확인 (npm -v)
   20.17.0 / 10.8.2 나옴 =>  
4. npx로 설치할거임
   cmd d:/ 에서 npx create-react-app react_web 
   [에러 뜨면?]
   C:\Users\admin\AppData\Roaming
   여기에 npm 폴더 생성
5. 다시 cd react_web 으로 해당 폴더 들어가서 (꼭 여기 들어가야함)
   d:\reac_web > npm start
   => 기다리면 3000번 포트 열리면서 새로운 브라우저가 하나 뜸... (끄러면 ctrl + c)
   => 작업전 이게 필수임 - 실행하는거 (가상 서버로 react 실행 )
6. visual strudio open
   ->  react_web  open folder (package.json 절대 삭제 X)
        div id="root" 도 지우면 안됨
        html명과 js명 맞춰야함 (index.html은 inex.js와 연결)
7.  

---

 

- 구조 : html,js => js로 화면 출력(jsx) : javascript + xml

- className

 

- index.js

import React from 'react'; //react 라이브러리 선언
import ReactDOM from 'react-dom/client'; //HTML , XML 출력
import './index.css'; //css(style 적용)
import App from './App'; //App.js를 실행 (추가 js를 로드) - 굳이 안만들고 여기다 다 때려박아도 됨
import reportWebVitals from './reportWebVitals'; //버그 및 data 상황을 report

//ReactDom.creatRoot : HTML로 출력하는 파트 및 html 파일 중에서 해당 id로 DOM 출력하는 역할
const root = ReactDOM.createRoot(document.getElementById('root'));
//render : append or innerHTML 과 같은 역할 (이 안에 주석 작성 불가)
//<App /> : 가상의 App 태그를 이용하여 HTML태그 or Data를 출력하는 역할
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

 

-App.js

import cute from './cute.png'; //src 안에 이미지를 가져오는 형태
import './App.css';

function App() { //즉시실행 함수 -> return 을 통해 HTML 태그를 적용
  //return 안의 코드는 기본으로 markup을 사용,두 뭉탱이 들어올수 없음(큰 뭉탱이 안에 자잘자잘히 넣어야함 - 실무에선 <></> 빈태그 활용)
  //{} import 이름을 가져와서 사용하는 형태
  return (
    <>
      <label className='box'></label>
      <br /><br />
      <div className='appimg'>
        <img src={cute} /> {/*우왕*/}
        <img src="./cute.png" /> 
        <img src={require("./cute.png")} />  {/*암호화하려면 이렇게*/}
      </div>
    </>
  );
}

export default App;

img imort해서 가져오고싶지 않으면 public 폴더 안에 넣어야함!

import해서 {]로 가져오면 경로가 암호화됨! => react의 장점

 

-index.css

.box {
  width : 100px;
  height : 100px; background-color: orange;
  display: block;
}

 

 

** React는 기본적으로 해당 index 외의 파일에서는 React핸들링 을 할 수 없다.

** React 기본 URL 형태

    1. localhost:3000/index

    2. localhost:3000/login

    3. localhost:3000/membership

 

router 설치 : npm install react-router-dom@6

=> 여러 페이지 구성시 사용