[React] React 환경구축, vscode extension

시작전 vscode extinsion

• live server
  : Live Server는 정적 웹 페이지를 빠르게 개발 및 테스트할 수 있는 확장 프로그램입니다. Live Server를 사용하면 코드를 변경하거나 저장할 때 실시간으로 브라우저를 새로 고침할 수 있습니다. 이를 통해 웹 페이지의 변경 사항을 빠르게 확인할 수 있습니다.
  
• Reactjs code snippets, dsznajder.es7-react-js-snippets
  : Visual Studio Code의 확장 프로그램 중 하나로, React 개발을 보다 효율적으로 진행할 수 있도록 React 코드 조각을 제공해주는 도구입니다. 이 확장 프로그램을 설치하면 React 구성 요소, 라이프사이클 메서드, 스타일링 관련 코드 등을 빠르게 삽입할 수 있습니다.
  
  
• Prettier - Code formatter
  
  
• ESLint
  : 코드에서 잠재적인 오류를 찾아주고 코드 스타일을 검사해주는 정적 분석 도구입니다.
  
  
• Tailwind CSS IntelliSense
  
  
• JavaScript and TypeScript Nightly
  
  
• vs코드에서 es6 코드 highlighting 안될 때
  Preferences -> Color Theme and change it to Dark+ (default dark).

 

 

---

 

1. nodejs 설치

 

 

2. vscode 설치 후 터미널 실행

npx create-react-app .

 

현재 디렉토리에 React프로젝트 생성

오류발생 시

npm install npm -g

 

 

 

오류발생 시

 tar version이 낮아서 발생하는 오류

npm install tar@6 -g

 

 

 

3. 개발서버 구동

npm start

 

package.json에서 포트변경가능

 

 

4. 빌드

npm build

 

package.json에 상대경로 설정

 

5. 빌드한 프로젝트 로컬실행

npx serve -s build

 

 

 

6. typescript 설치

npm install -g typescript

 

 

.js 파일을 .ts 파일로 바꿔서 이용

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

새로운 프로젝트 생성

npx create-react-app {app-name} --template typescript

 

 

그 외 install (모듈 moudles)

npm install redux
npm install react-redux
npm i  @reduxjs/toolkit

npm i @headlessui/react   (https://headlessui.com/)
npm i @heroicons/react (https://heroicons.com/)

npm install react-router-dom (react router)
npm i axios

npm install styled-components
npm install react bootstrap bootstrap

npm install immer
(배열이나 객체를 업데이트 해야 할 때에는 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트)

react-draft-wysiwyg (text editor)

react-loader-spinner (로딩바)

 

 

 

CSS프레임워크 tailwind설치

npm install -D tailwindcss
npx tailwindcss init
https://tailwindcss.com/showcase   

tailwind.config.js에 추가
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], };

css 파일에 추가
@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

7. 확장자

• TS (TypeScript): TypeScript는 JavaScript를 기반으로 하며, 정적 타입 검사를 지원하는 JavaScript의 슈퍼셋이다. TS는 대개 .ts 파일 확장자를 사용한다.
• TSX (TypeScript with JSX): TSX는 React에서 UI를 작성하는 데 사용되는 TypeScript이다. React에서 JSX를 사용하는 경우 일반적으로 TSX 파일 확장자를 사용한다.

 

 

8. dependencies

dependencies에는 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치하고
devDependencies에는 개발할 때 필요한 라이브러리를 설치한다.

 

-dependencies에 패키지를 추가하는 명령어:

npm:

npm install <package-name> --save

 

yarn:

yarn add <package-name>

 

-devDependencies에 패키지를 추가하는 명령어:

npm:

npm install <package-name> --save-dev

 

yarn:

yarn add <package-name> --dev

 

 

---