Create-React-App(CRA) 설정 뜯어보기

들어가기

 

Create-React-App(이하 CRA)를 하게 되면 

 

index.js 와 index.html 등을 만들어 주고

 

react에 필요한 dependacy들을 설치해 주고

 

react-scripts 를 이용한 리액트 명령어를 추가해준다.

 

또 간단하게 아래와 같은 것들도 설정해준다.

 

아래의 것들은 그중에서 필요한가? 싶었던 것들과 이게 뭔데 싶은 것들을 정리한 것이다.

 

git ignore

##.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

 

 

 

package.json 설정들

## package.json

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

 

 

 

1. react-scripts가 있다.

 

scripts를 보면 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

와 같이 react-script 명령어가 있는데, 이걸 실행하기 위해서 받아주는 것이다.

 

react-script는 CRA 명령어로 생성한 프로젝트에서 자주 쓰이는 것들을 쉽게 쓰라고 묶어놓은 것인데

 

예를들면 react-scripts-start 는 npm-run-all -p watch-css start-js 명령을 실행한다.

 

쪼개보면 이것은 두가지 명령어로

 

watch-css와 start-js이다

 

watch-css는 .scss파일을 .css로 변환하고 반영하고

 

start-js는 localhost:3000(기본으로 설정)을 사용해 호스팅해서 개발모드로 앱을 실행한다.

"start": "set PORT=8000 && react-scripts start"

그래서 이런식으로 커스텀도 할 수 있다.

 

 

 

2. @testing-library/react

 

리액트로 테스트 코드 짤때 필요한 녀석들

https://velog.io/@velopert/react-testing-library

react-testing-library 를 사용한 리액트 컴포넌트 테스트

여기를 보면 예시코드를 볼 수 있다.

 

 

왜 dependancy 에 넣고 devDependancies에 안 넣었지?

-> Node 앱이면 dependencies 와 devDependencies 를 나누는게 의미가 있는데, CRA의 경우 결과물 자체가 static bundle이고, build시에만 모든 package를 이용하기때문에 궅이 따지자면 모든 dependencies가 development dependencies 입니다. 일부 배포스크립트가 동작하지 않을  수 있기 때문에 dependancy로 간 것이란다. (참조 https://github.com/facebook/create-react-app/issues/6180)

 

 

 

robots.txt

크롤링 시에 어떤 정도까지 접근 할 건지 적용하는 파트입니다.

https://searchadvisor.naver.com/guide/seo-basic-robots

robots.txt 설정하기

여기를 참조하면 좋습니다.

 

 

## robots.txt

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

 

 

 

manifest

네이버의 사전적 의미이다.

 

찾아보니 앱에 대한 정보를 나타내는 것이란다.

## manifest.json
#https://developers.google.com/web/fundamentals/web-app-manifest/

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

• short_name : 사용자 홈 화면에서 아이콘 이름으로 사용
• name : 웹앱 설치 배너에 사용
• icons : 홈 화면에 추가할때 사용할 이미지
• start_url : 웹앱 실행시 시작되는 URL 주소
• display : 디스플레이 유형(fullscreen, standalone, browser 중 설정)
• theme_color : 상단 툴바의 색상
• background_color : 스플래시 화면 배경 색상
• orientation : 특정 방향을 강제로 지정(landscape, portrait 중 설정)

 

BrowsersList

얘도 package.json에 있음

 

브라우저 종류에 따라 처리할 작업이 다를 때 이것을 옵션으로 설정하기 위한 파일이다.

 

어떤 버전을 쓸지 를 지정할 수 도 있고 특정 브라우저를 제외시켜버릴수도 있다.

 

 

추가

+ favicon 은 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 난 리액트 이미지가 이쁜거 같아서 그냥 뒀음