22일차

 

  "dependencies": {
    "@babel/core": "^7.18.0",
    "@babel/register": "^7.17.7",
    "babel-loader": "^8.2.5",
    "babel-preset-react-app": "^10.0.1",
    "compression": "^1.7.4",
    "concurrently": "^7.2.1",
    "express": "^4.18.1",
    "nodemon": "^2.0.16",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-error-boundary": "^3.1.4",
    "resolve": "^1.22.0",
    "rimraf": "^3.0.2",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "prettier": "^2.6.2"
  }

@babel/core : 바벨 변환 작업을 위한 동작 방식 지정

@babel/register : 각각의 모듈을 결합할 때 사용되는 훅 모듈

compression : express의 third party middleware로 웹페이지의 데이터 크기를 줄이기 위해 페이지를 압축하는 것

concurrently : 서버와 클라이언트를 한번에 시작시켜주는 라이브러리

nodemon : 서버 실행히 코드가 바뀔때 마다 자동으로 재시작

resolve : 동기 비동기 식으로 require.reolve를 구현

rimraf : rm -rf 명령어를 윈도우에서 사용할 수 있도록 하는 것

cross-env : 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env변수를 주입하는 방법

 

<noscript> 클라이언트 사이드 스크립트를 사용하지 않도록 설정했을 때 콘텐츠를 정의할 때 사용

dangerouslySetInnerHTML : 브라우저의 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법, 일반적으로 코드에서 HTML을 설정하는 것은 크로스 사이트 스크립팅에 위험하기때문에 이를 상기시키기 위해 적어준다.

aria-busy : 영역의 일부만 변경되더라도 스크린 리더가 라이브 영역을 표시해야하는지 여부 설정