0201

 

Node.js

 

Node.js — Download

 

node.js

브라우저 외부에서 javascript를 실행하기 위해 설치.

node 위에 react app 실행

설치 후 cmd 실행

npm --version //버전확인

npm install -g yarn //global option으로 yarn 설치

 

-

Microsoft Windows [Version 10.0.19045.3930]
(c) Microsoft Corporation. All rights reserved.

C:\Users\user1>npm --version
10.2.4

C:\Users\user1>node --version
v20.11.0

C:\Users\user1>npm install -g yarn

added 1 package in 603ms
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice

C:\Users\user1>yarn
yarn install v1.22.21
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.11s.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
----

---

React

 

https://bottlesun.tistory.com/20

[React]구조파악하기

 

package.json 의존 명세서
-dep, devDep, script
-버전관리할때도 제일 먼저 챙겨야함.


index.html
jsx확장자:react에서사용되는확장자
jsx - xml(반드시 root태그 하나를 가져야함)
오전 11:16:54 [vite] hmr update /src/App.jsx (x4) 
hot module replace

/**
 * JSX
 * -react가 지원하는 component 작성 문법
 * -xml 문법을 따르고 있기 때문에 하나의 root 태그로 반드시 묶어서 작성해야함.
 * -if/for문 사용에 제한이 있으므로 삼항연산자,짧은조건문,for문은 Array#map함수등으로 대체 사용
 * @returns 
 */

react 이전엔 jquery
react:가상dom을 이용해 일부분만 갱신[재 랜더링]

내용이 있는 경우  
<Comp01>
</Comp01>
내용이 없는 경우
<Comp01/>



//rafce react arrow function component expression
function Comp01()
{
    return (
        <>
            <h1>🎁Comp01</h1>
        </>
    )
}

export default Comp01; //외부에서 import를 할 수 있도록 노출시키는 설정
사용자 입력값[변하는값] state로 관리 객체,배열 원하는대로.
---------------------------------------------------------------------------------------------------------

 

 

 

 

jquery처럼 react도 cdn형식으로 사용할 수 있음.

 

js와 css를 하나로 묶는 bundle.js - 효율,편리

 

react는 변경된 내용 일부분만 갱신한다.

virtual dom이 copy본을 가지고 차이점만 비교하여 변경함.

 

파일 버전 관리

이전상태로 돌리고 싶을때

소스트리 - 변경된 파일 - 우클릭 -discard -마지막으로 커밋한 시점으로 되돌아감