[React] 초기 세팅 (VSCode 기준)

나중에 까먹을까봐 미리 적어둔다. VSCode 기준.

 

1. Node.js 설치 필요 (최초 1번)
2. CRA (Create-React-App) 설치
   • 기본설정을 자동으로 해주는 라이브러리
   • npx create-react-app 앱명칭 으로 생성
     • 만일 타입스크립트를 사용한다면 npx create-react-app 앱명칭 --template typescript
3. npm start 실행시 초기 실행 됨.
   • 요즘은 npm 보다 yarn 을 더 많이 사용함. 
4. VSCode 에 확장프로그램으로 ES7 React snippets 설치
   • 코드 자동완성 툴
5. Tailwind CSS 설치
   • HTML 태그의 class 에 예약된 이름을 입력하면, 자동으로 css를 반영해줌. (물론 bootstrap도 마찬가지)
   • npm install -D tailwindcss 로 설치
     • -D 의 의미는 -sav-dev 로서 개발시에만 사용하는 라이브러리의 의미
   • npx tailwindcss init 명령으로 설정 파일 생성
   • VSCode 의 확장프로그램으로 tailwind css intelisense 도 추가 설치
   • tailwind.config.js 파일을 열고 다음을 입력

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

• index.css 를 열어 최상단에 다음을 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

 

6. env 파일 추가

• API 키 등 소스코드에 노출되지 않고 전역변수 처럼 사용 할 수 있는 파일
• Android 등에서 string.xml 처럼 사용 가능하다. 
• 프로젝트 폴더 -> 앱 폴더 에 신규 파일 생성 -> .env 파일을 생성
  • 개발, 운영 등 각각 동일 항목을 따로 관리하고 싶다면 다음의 파일들을 생성하여 동일 변수명을 각각 입력
    • .env.development
    • .env.local
    • .env.production 
  • package.json 에서, scripts {} 안에 있는 명령어 추가 혹은 편집 하여 각 항목별 명령어를 편집
    • 예 : env-cmd -f .env.local start
• 해당 파일 내부에 APIKEY = "" 라고 예를들어 적어준다면, 소스코드에서 process.env.APIKEY 를 통해 접근 가능
  • html 코드에서 접근하여 사용할 때에는 {process.env.APIKEY} 
• gitignore 에 해당 파일 추가 하는것 잊지 말 것

 

 

 

7. 기본적으로 설치해야 하는 모듈 목록 (추가될 수 있음)

• react-dom
• react-router-dom
• axios
• recoil
• create-react-app
• tailwindcss
•  json-server (필수는 아니고 추천)
• 만일 typescript를 사용한다면 각각 모듈의
  • @types/모듈명