React / React + Typescript / 초기 프로젝트 세팅

타입스크립트 템플릿을 이용한 리액트 초기세팅

프로젝트 생성 부분

yarn create react-app typescript-init --template=typescript

 

 

npx를 이용한 프로젝트 생성은 의존성 문제로 작동하지 않고 있음

Prettier

작성한 코드를 가독성 좋게 만들어주는 호가장 도구

간단한 코드 수정임에도 띄어쓰기 등에 따라 변경사항이 추적되는 것을 방지하기 위함

yarn add --dev prettier

 

 

prettier 설정

• 루트 디렉토리에 .prettierrc 파일을 생성한다.
  
   

 

• 내용을 수정한다.

{
   "arrowParens": "always",
   "bracketSameLine": false,
   "bracketSpacing": true,
   "embeddedLanguageFormatting": "auto",
   "htmlWhitespaceSensitivity": "css",
   "insertPragma": false,
   "jsxSingleQuote": true,
   "printWidth": 80,
   "proseWrap": "always",
   "quoteProps": "as-needed",
   "requirePragma": false,
   "semi": true,
   "singleAttributePerLine": false,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
   "vueIndentScriptAndStyle": false
}

 

 

• package.json에 scripts를 추가한다. 
• "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "format": "prettier --check ./src", "format:fix": "prettier --write ./src" }

 

 

• 강제로 App.tsx의 내용을 수정하고 yarn format:fix로 형식을 맞춘다.

 

App에 불필요한 공백을 삽입하였다.

yarn format:fix로 형식을 맞춘다.

 

 

형식이 변경된 것을 확인할 수 있다.

 

 

emotion 설치

yarn add @emotion/react @emotion/styled