TIL(2020.12.28)

김지민·2020년 12월 28일
0

TIL

목록 보기
12/28

1. package.json

  • npm 프로젝트 진행 시 init(초기화)단계 이후 작성되는 파일
  • 내 프로젝트의 카탈로그라고 할 수 있음. 카탈로그만 봐도 어떤 제품에 대해 파악할 수 있는 것처럼 package.json만 봐도 어떤 모듈이 포함되어있는지 알 수 있다.
  • 간단히 몇 가지 특성만 알아보자면

1) dependencies

  • 해당 프로그램이 실행되기 위해 필요한 모듈 목록
 "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  }

2) scripts

  • npm으로 실행시킬 수 있는 명령어. 명령어: 동작 형식

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

    2. boilerPlate

  • 프로젝트를 시작할 때 기본이 되는 템플릿. 상용구 코드라고 부르기도 함.

  • 작은 수정만으로 여러 곳에 활용 가능한 코드 등을 뜻하기도 함.

  • 반복되지만 자주 쓰이는 형태를 자동화한다는 것이 핵심.

  • 보일러 플레이트 기본 골자
    .
    ├── css (이 디렉토리는 모든 프로젝트들의 CSS 파일을 포함)
    │ ├── main.css (거의 모든 페이지에 삽입될 기본 CSS 파일을 이 곳에 작성)
    │ └── normalize.css (CSS 리셋을 위한 파일)
    ├── doc (이 디렉토리에 모든 HTML5 보일러 플레이트 설명서가 있음)
    ├── img (사이트 제작시에 필요한 이미지들을 이 곳에 저장)
    ├── js (이 디렉토리는 모든 프로젝트들의 JS 파일을 포함)
    │ ├── main.js (사이트 및 애플리케이션의 자바스크립트 코드를 참조하거나 포함하는 용도로 사용)
    │ ├── plugins.js (jQuery 플러그인 및 제 3자 스크립트와 같은 다른 모든 플러그인을 포함하는 용도로 사용하며, console 오류를 방지하는 폴백을 포함)
    │ └── vendor (이 디렉토리는 모든 제 3자 라이브러리 코드를 포함하는 용도로 사용)
    │ ├── jquery.min.js (기본적으로 최신의 jQuery 라이브러리를 압축된 버전으로 포함)
    │ └── modernizr.min.js (기본적으로 최신의 Modernizr 라이브러리를 압축된 버전으로 포함)
    ├── .editorconfig (다른 편집기와 IDE 사이에 일관된 코딩 스타일을 유지하기 위해 도움을 줌)
    ├── .htaccess (아파치 서버 설정을 위한 기본 설정을 포함)
    ├── 404.html (커스텀 404 페이지를 제공)
    ├── apple-touch-icon.png (애플 터치 아이콘으로 사용될 아이콘)
    ├── browserconfig.xml (IE11에 대한 커스텀 타일에 대한 설정을 포함)
    ├── index.html (모든 페이지의 기초를 형성하는 기본 HTML 골격)
    ├── humans.txt (해당 사이트 및 애플리케이션 제작자들의 기술적 자문을 구하기 위한 연락처와 같은 정보 기술)
    ├── robots.txt (검색 엔진 크롤러가 액세스하지 않기를 바라는 구역을 설정)
    ├── crossdomain.xml (크로스 도메인 요청 작업을 위한 템플릿)
    ├── favicon.ico (파비콘)
    ├── tile-wide.png (IE 타일 아이콘)
    └── tile.png (IE 타일 아이콘)

출처: https://webdir.tistory.com/449 [WEBDIR]

잘 정리된 내용은 https://webdir.tistory.com/449?category=561477 을 참고

3. react.strictMode

  • strictMode는 app 내 잠재적인 문제를 알아내기 위한 도구.
  • Fragment와 같이 UI를 렌더링하지 않고 자손들에 대한 부가적인 검사와 경고를 활성화함.
    • strict모드는 개발 모드에서만 활성화되기 때문에, 실제 프로젝트 빌드에는 영향 없음
import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}
  • 위의 코드처럼 적용할 경우 Header, Footer는 strict 검사가 적용이 안됨. 하지만 Component(one, two)는 각각의 자손까지 검사가 이루어짐.
    - strict모드로 알 수 있는 것.
    • 안전하지 않은 lifeCycle을 사용하는 컴포넌트 발견
    • 레거시 문자열 ref 사용에 대한 경고
    • 권장되지 않는 findDOMNode 사용에 대한 경고
    • 예상치 못한 부작용 검사
    • 레거시 context API 검사
      자세한 내용 참고 https://ko.reactjs.org/docs/strict-mode.html
profile
wishing is not enough, we must do.

0개의 댓글