react, vite

 

react : 자바스크립트 UI 라이브러리(프레임워크)
node : 자바스크립트 런타임 환경 JRE
nvm : node version manager (여러버전의 node)
npm : node package manager (프로젝트 정보랑 모듈관리)
npx : node package executor (node module을 설치하지 않고, 임시로 딱 한번만 쓰고싶을때 사용. 사용하고나면 사라짐)

 

 

npx create-react-app 프로젝트 폴더명

 

 

 

 

 

 

폴더를 이미 만들었으면 cd로 그 경로로 들어가서

 

cd 프로젝트명

 

 

 

프로젝트 만들기 (프로젝트명이 아니라 점(.)으로 해야함)

npx create-react-app .

 

 

 

프로젝트 실행

npm start
npm test

 

---

c.r.a하는 것보다 vite 설치하는 것이 나음

vite는 필요한 라이브러리 다 다운받아줘서 더 편함

 

 

프로젝트 만들기

npm create vite@latest

 

프로젝트명 입력

 

 

 

프레임워크 선택하고 cd로 경로 이동 후 모듈 설치

npm install

 

 

 

프로젝트 실행

npm run dev

 

 

dev를 사용할 수 있는 이유는 package.json에 dev가 있기 때문 !

 

 

npm start를 사용할 수 없는 이유는 scripts 안에 start가 없기 때문

npm run dev
npm run build
npm run lint
npm run preview

 

다 할 수 있는데

run을 생략할때는 npm start, npm test로 함

 

 

mywebserver.js

import express from 'express';
import serveIndex from 'serve-index';

const serverPort = 272;

const app = express();

app.use('/',express.static("./public"),serveIndex('./public',{icons:true}));

app.listen(serverPort,()=>{
    console.log(`server is running on ${serverPort}`);
});

 

 

package.json에서 start: 서버 실행하는 명령문을 넣어주면

 

이제 앞으로 터미널에서 node mywebserver.js 하지 않고도 npm start를 입력하면 서버 실행이 됩니당

 

 

 

h를 입력해보면 단축키가 나옵니당

 

r + enter는 서버 재가동

u + enter는 서버 url 보여주기

o + enter는 브라우저 열림 

c + enter는 콘솔 정리 (cls)

q + enter는 나가기

 

 

 

 

---

google webstore에서 react developert tools 설치

 

 

 

components와 profiler가 추가된 것 확인

 

 

 

components에는 jsx 즉 컴포넌트들이 들어있음. (지금은 app밖에 없음)

 

 

---

snippet 

 

rfce

 

 

화살표 함수

rafce

 

 

 

JSX (javascript syntax extension, 스크립트 문법 확장)

- 컴포넌트

- return 뒤에 태그 사용

- jsx파일을 따로 만들어서  main.jsx에 <app/> 이런 식으로 여러 파일을 붙여 사용 → 재활용 가능

(컴포넌트 연결할 때 컴포넌트명(파일명) 맨앞 글자는 대문자로 해야함!!)

 

---

배포하기

 

npm run build

 

하면 dist 폴더가 생기면서 배포할 수 있게 됨

 

 

이 세개 파일을 spring boot의 static 폴더에 넣으면 됨

 

react는 SPA(single page application)이라서 메인 페이지인 index.html 페이지만 있으면 됨