React.js, 2024

■ 용어

NPM(Node Package Manager)
Vite(비트): 차세대 프런트엔드 개발 툴. webpack에 비해 빠르다. 
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행환경,구동기)이다 - Run JavaScript Everywhere.

 

 

■ 개념

1. 웹브라우저의 렌더링 과정(Critical Rendering Path)

DOM(Document Object Model), CSSOM(CSS Object Model)

 

2. class형 Component의 Lifecycle

React, Lifecycle of Class Type Component(2024)

 

 

■ Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행환경,구동기)이다 - Run JavaScript Everywhere.

 

1. Node 설치 & 실행

// 0. node.js 설치 & 버전확인
> node -v
> npm -v

// 1. package create
> npm init  // package.json 생성됨.

/* package.json▼
  {
    "name": "proj-name",
    "version": "0.1.0",
    "description": "2024.05",
    "main": "index.js",
    "scripts": {    
      "test": "echo \"Error: no test specified\" && exit 1",
      // ▼ 실행 명령 생성: npm run XXX 으로 실행
      "start": "node src/index.js"
    },
    "author": "",
    "license": "ISC"
  }
*/

// 2. src/index.js 생성
console.log("Hello, Node.js world!");

// 3. js 실행
> node src/index.js
// 또는 package.json > scripts > "XXX" 정의하여 사용 
> node run start

 

2. Node 모듈 시스템 

	ES Module(ESM)	CommonJS(CJS)
문법	export import	module.exports = {}; const moduleName = require("./file");
동작방식	비동기	동기
사용환경	웹브라우저(ES6), NodeJS	NodeJS
패키지 관리	package.json, npm	require

 

//-----------------------------------------------
/* CommonJS 모듈 방식*/
// 1) testValue.js (module.exports)
function isEmptyString(v, doTrim = true) {
    if (typeof v !== 'string') return false;
    return !v|| (doTrim ? v.trim().length : v.length) === 0;
}
function isNullOrUndefined(v) {
    return v === null || v === undefined;
}
module.exports = {
    isEmptyString,
    isNullOrUndefined,
}
// 2) index.js (require)
const utils = require("./testValue");
console.log(utils.isEmptyString(''));
//또는
//const { isEmptyString, isNullOrUndefined } = require("./testValue");
//console.log(isEmptyString(" "));

 

//-----------------------------------------------
/* ES module 방식*/
// 0) package.json 설정 필요
{ ...
  "type": "module"
  ...
}

// 1) testValue.js (export)
export function isEmptyString(v, doTrim = true) {
    if (typeof v !== 'string') return false;
    return !v|| (doTrim ? v.trim().length : v.length) === 0;
}
export function isNullOrUndefined(v) {
    return v === null || v === undefined;
}
export default { isEmptyString }

// 2) index.js (import)
import util, {isNullOrUndefined} from "./testValue.js"
console.log(isNullOrUndefined(" "));
console.log(utils.isEmptyString(" "));

 

3. Node 라이브러리 사용하기

// 1) 필요한 라이브러리 찾기 (npmjs)
// https://www.npmjs.com/

// 2) 설치
> npm i randomcolor // npm install {라이브러리명}
//▶ package.json > dependencies 에 자동 추가됨.
//▶ package-lock.json 생성(변경): 라이브러리 상세 정보 포함.

> npm i // package.json의 모든 라이브러리 자동설치

// 3) 사용법
import randomColor from "randomcolor"; // 경로 불필요.
console.log(randomColor()); // #b7782f

 

 

■ React.js 개발환경

VSCode extensions: ESLint

 

 

// TanStack > Query
https://tanstack.com/query/v3
TS/JS, React, Solid, Vue, Svelte 및 Angular를 위한 강력한 비동기 상태 관리
세분화된 상태 관리, 수동 다시 가져오기 및 끝없는 비동기 스파게티 코드 그릇을 버리십시오. TanStack Query는 개발자와 사용자 경험을 모두 직접적으로 개선하는 선언적이고 항상 최신의 자동 관리 쿼리와 변형을 제공합니다 .

 
 

/*
    ▼useContext (Prop Drilling 필요없이 컴포넌트 트리 전체에 데이터 제공. 단, 컴포넌트 독립성이 약해짐.)    
    ├ createContext: context 생성
    ├ Provider: context를 컴포넌트에 전달(제공)
    └ Consumer: context의 변화를 감시하는 컴포넌트
 */
import React, { createContext } from "react";
import Children from "./Children";

// AppContext 객체를 생성한다.
export const ThemeContext = createContext();

const App = () => {

const [isDark, setIsDark] = useState(false);
  return (
    <>
      <ThemeContext.Provider value=({isDark, setIsDark})>
        <div>
          <Children />
        </div>
      </ThemeContext.Provider>
    </>
  );
};

export default App;

 
 
테스트환경

// 테스트용 json server
> npm i -g json-server
// json-server 띄우기 (terminal이 아닌 cmd창에서 실행할것)
> json-server --watch public/data/db.json -p 4000
//▶ http://localhost:4000

// 설치된 lib 확인
> npm fund

 
 

// fetch -> axios -> react query -> TanStack-query(old.React-query)
//STEP 1. fetch 사용

// 2단계. axios
> npm i axios

 
읽을것!
fetch vs axios vs ajax : https://ji-musclecode.tistory.com/65
 

React Router

React Router는 "클라이언트 측 라우팅"을 활성화합니다.
기존 웹사이트에서 브라우저는 웹 서버에서 문서를 요청하고, CSS 및 JavaScript 자산을 다운로드 및 평가하고, 서버에서 전송된 HTML을 렌더링합니다. 사용자가 링크를 클릭하면 새 페이지에 대한 프로세스가 다시 시작됩니다.
 

// React router
// https://reactrouter.com
> npm i react-router-dom

//React Bootstrap
//https://react-bootstrap.netlify.app/docs/getting-started/introduction
> npm i react-bootstrap bootstrap

 
 

■ References

Tailwind CSS (VSCode plugin: tailwind, Figma연동)
- 사용법: https://so-so.dev/web/tailwindcss-w-twin-macro-emotion/