71일차 리액트 [ node.js, Vite, react ]

[ node.js 다운로드 & 경로설정 ]

 

1) node.js 다운로드 검색 (20대 버전 짝수 버전 다운로드)

 

2) 터미널 창에서 node.js 설치 잘 되었는지 확인 (node -v)

 

3) Document -> react -> test01 -> VSCode에서 파일 폴더열기 test01 

 

4) 🩷 command + J = VSCode에서 터미널창 열기

      -> npm init -> 패키지 이름 test01 -> 나머지 다 엔터 -> package.json 파일 생성

 

5) index.js 새로운 파일을 만들고 console.log로 메세지 입력후 터미널에서 node index.js 를 입력하면 터미널에 출력 됨

 

6) 만약에 index.js을 src라는 폴더 안에 생성하면 경로를 node src/index.js로 설정해줘야함 (그냥 node index.js로 하면 오류 발생)

 

7) 혹은 package.json 파일에 "start": "node src/index.js" start 경로를 따로 설정 가능 -> 터미널에 npm run start 입력 실행 

 

8) 이번엔 calculator.js 파일을 생성해서 여기서 모듈화를 통해 기능별로 나누고 index.js에 내보내서 출력

     -> package.json에 "type": "module" 설정 추가 

    -> Es module 작업 주로 사용 (CommonJS 작업은 요즘 잘 사용되지 않음)

export를 하는 2가지 방법 : 왼쪽은 마지막에 export 오른쪽은 함수마다 export

import를 하는 2가지 방법 : 위쪽은 한번에 import, 아래쪽은 따로따로 import

calculator.js에서 만든 함수 index.js에서 import해서 console로 출력 -> npm run start

package.json에 "type": "module" 추가

 

9) npm library에서 필요한 라이브러리 가져와서 import해서 자동으로 사용 가능 

    -> npm i start 하면 자동으로 node_modules, package-lock.json 파일 생성됨 

    -> index.js에서 import Color from 'color' 하면 사용 가능 -> const color = Color(), console.log(color)

 

---

[ Vite ]

1) 파일 열기 -> react 폴더 열고 -> 터미널창에 npm create vite@latest 입력

    -> Ok to proceed? (y) y -> Project name: test02 -> React -> JavaScript -> React App 생성 됨 

 

2) 다시 파일 열기 -> 생성된 test02 파일 열기 -> 터미널창에 npm i -> package-lock.json 파일 생성 됨 

 

3) 터미널 창에 npm run dev -> Local에 뜬 주소 창 입력 

위 : index.html // 아래 : src/main.jsx -> 브라우저 화면이 뜨게 된 경로

4) App.jsx에 function App() {}의 return () 부분을 고치면 화면 출력되는 결과가 달라짐 

 

 

---

[ ESlint ]

1) 항상 새로운 프로젝트 만들 때 react 파일을(=최상위파일) 새로 열고 그 경로에서 해야 함 ! ->  npm create vite@latest -> test03 

 

2) npm i -> package-lock.jsco 파일 생성

 

3) public 폴더 안에 vite.svg 삭제 -> assets 폴더 안에 react.avg 삭제

    -> App.jsx 코드 수정 -> main.jsx import './index.css' 코드 삭제 -> App.css, index.css 파일 삭제 

4) npm run dev -> Local:   http://localhost:5173/

 

5) ESLint 설치(오류가 발생할만한 코드가 있으면 바로바로 경고 띄어주는 것)

    -> .eslintrc.cjs 파일에서 rules: { } 에 "no-unused-vars":"off", "react/prop-types":"off", 코드 추가 

    -> eslint에 에러가 발생한다면? <header> 태그를 <div> 태그로 감싸주기 

 

6) 사용자 정의 태그 -> App.jsx 파일에 사용자 정의 태그 만들어 보기 -> import { Fragment } from "react"

     리액트에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야 한다. function Header() {} -> 사용자 정의 태그 

     -> 만약에 funcion App() {}에 <Header />를 추가하지 않고 npm run dev를 실행하게 되면 "안녕 리액트"만 브라우저에 출력 됨 

 

7) src 폴더에 components 폴더 생성 -> Header.jsx 파일 생성 -> 위에서 App.jsx에서 만든 const Header = () => { } 코드 복붙 

    -> App.jsx 파일로 돌아가서 import Header from "./components/Header"

 

8) scr/components 폴더에 Footer.jsx와 Main.jsx 파일 생성 -> Header.jsx 작업 반복 복습

 

 

---

[ Node.js ]

   Node.js : 자바스크립트를 실행시키는 구동기

   JacaScript : 단순한 웹 브라우저에서 이벤트 작업(브라우저안에서만)

   Node, react : 패키지라는 프로그램 단위로 만들어짐

   모듈 : 복잡한 기능을 하나의 파일에 작성하면 코드 어마어마해짐

   수정할때도 번거롭고 생산성이 떨어지기때문에 기능별로 관리한다 -> 기능별로 나누어진 각각의 자바스크립트 파일을 모듈이라 부른다

   회원관리 기능 -> user모듈   /   장바구니 기능 -> cart 모듈   /   결제 기능 -> pay 모듈

 

[ Vite ]

   차세대 프론트엔드 개발 툴 

   기본 설정이 적용된 React App 생성이 가능하다 

   리액트는 안에 서버 내장되어있음 

   npm run dev : react app 서버를 가동시켜라 

   http://localhost:5173/ : 현재 가동중인 리액트 웹 서버에 접속할 수 있는 주소

 

[ React.js ]

   리액트 특징 : 화면 업데이트 구현이 쉽다. 컴포넌트 기반 UI를 구현한다. 화면 업데이트가 빠르게 처리된다.

  리액트로 업데이트 구현: 목적만 명시/ 코드 간결

 Js로 업데이트 구현: 모든 과정을 다 설명/ 코드 길어짐

     - 리액트에서는 각각의 페이지를 컴포넌트 단위로 나눠 개발하게 되는데, 

        이때 각각의 컴포넌트들에는 state라는 상태를 저장하는 변수를 둘 수 있다.

    - State변수 값에 따라 UI 결과가 달라진다. (화면 업데이트 시, State변수 값만 바꾸면됨)

 

[ 브라우저 렌더링 Critical Rendering Path ]

Virtual DOM이란? 

   - DOM을 자바스크립트 객체로 흉내낸 복제판 

   - 리액트는 업데이트가 발생하면 실제 DOM을 수정하기 전에 가상의 복제판 DOM에 먼저 반영해본다

   - 실제 돔이 아닌 복제판에 반영한 후 -> 실제 돔에 반영 (일종의 버퍼역할) -> 업데이트 처리 빨라짐!

데이터 업데이트 -> 전체 ui를 virtual dom 에 리렌더링 -> 이전 virtual dom 과 비교 -> 바뀐 부분만 실제 dom에 적용

 

HTML -> DOM (DOM이 수정되면 업데이트가 일어남)

   : Render Tree (웹페이지 청사진)  -> Layout (요소배치) -> Painting (실제로 화면에 그려냄)

CSS -> CSSDOM

동시에 발생한 업데이트를 모아놨다가 한꺼번에 DOM수정해야함 -> 한번한번 다 DOM수정하면 성능안좋아짐 

복잡한 대규모에선 불가능 (리액트는 이 과정을 자동으로 처리해줌)

 

 

[ JSX ]

함수에서 반환하는 내용이 마치 html 을 작성한 것과 같이 보임 

   1. 리액트 컴포넌트에서 요소 여러 개를 하나의 요소처럼 감싸줘야 한다.

       반드시 DOM 트리 구조로 되어 있어야 virtual dom 에서 컴포넌트 변화를 감지한다. 

   2. 자바스크립트 표현식 작성하려면 JSX내부에서 코드를 { }로 감싸야 한다. 

   3. 태그를 꼭 닫아야 한다. <> </> (안 닫으면 에러 발생)

   4. class 대신 className

 

[ 사용자 정의 태그 ]

리액트에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야 한다. 

function Header() {} -> 사용자 정의 태그 

 

---

https://www.npmjs.com/

npm | Home