React.js, 2024

* 2024.03.25 ~ 2024.05.22 수업 내용 요약 정리.

▼강의노트

https://brainy-rainstorm-177.notion.site/03-25-05-27-JS-74746f7f11624baba4096707c0eb865f

https://www.w3schools.com/js/default.asp

https://www.w3schools.com/react/default.asp

■ 용어

NPM(Node Package Manager)

Vite(비트): 차세대 프런트엔드 개발 툴. webpack에 비해 빠르다. 

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

 

 

// 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