리액트 개발 환경 준비(npm.version)

npm

• npm은 ‘Node.js’라 불리는 별도의 실행 환경에서 동작
• node 명령을 이용한 버전 확인 : node -v
• 새 디렉터리 만들기와 npm을 이용한 프로젝트 초기화
  - npx create-react-app react-for-beginner
• 프로젝트 중복 생성시
  - npm uninstall -g create-react-app

파일 제거

• src/App.css
• src/App.test.js
• src/logo.svg

• 건들면 안되는 파일들
  • public/index.html → 페이지 템플릿
  • src/index.js → 자바스크립트 시작점

기본 디렉토리 생성

• src/components : 컴포넌트들이 위치하는 디렉토리
• src/pages : 각 라우터들이 위치하는 디렉토리
• src/client : 브라우저 측에서 사용할 최상위 컴포넌트

React-Router-dom

• 리액트를 사용할 때 페이지를 이동할 때 필요한 라이브러리
• react-router-dom 설치
  - npm install react-router-dom

Root 컴포넌트 생성

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js 수정

import Layout from "./Layout";
import Home from "./routes/Home";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

function App(){
  const router = createBrowserRouter([
    {
      path: "/",
      element:
        <Layout />,
      children: [
        {
          path: "home",
          element: <Home />
        },
      ]
    },
  ]);
  
  return (
    <RouterProvider router={router} />
  )
};

 

typescript

• typescript 설치
  - npm install typescript
  - npm install -D typescript @types/node @types/react @types/react-dom @types/jest

• tsconfig.json 생성 및 세부 옵션 설정
• 컴파일 세부 옵션
  • strict: 타입 검사를 엄격하게 한다. false로 하면 타입스크립트를 사용하는 의미가 없다.
  • include: ts 파일을 js로 컴파일할 폴더 지정
  • exclude: js 컴파일 제외 폴더 지정
  • target: 컴파일 js 버전. 보통 es5를 기준으로 한다.
  • lib: 컴파일할 때 포함될 라이브러리 목록
  • module: js 파일 간에 import 시 어떤 문법을 사용할지 지정한다. (commonjs는 require 문법, es2015와 esnext는 import 문법)
  • outDir: 컴파일된 js가 생성되는 경로
  • roodDir: 시작 경로
  • allowJs: ts 파일을 컴파일할 때 js 파일도 포함할지 설정. 기존 자바스크립트 프로젝트에서 타입스크립트로 적용할 때 유용하다.
  • esModuleInterop: export default가 없는 라이브러리도 * as 없이 불러올 수 있다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
        "esModuleInterop": true,

        "strict": true, //strict 관련 모드 전부 켜기
        "noImplicitAny": true, //any 타입 금지 여부
        "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
        "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
        "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
        "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
        "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
      
        "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
        "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
        "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
        "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
      
    }
}

react-query

• react query 설치
  - npm install @tanstack/react-query