React로 Watchapedia 구현하기

1. 프로젝트 생성
   
   타입스크립트를 지원하는 리액트 프로젝트를 생성한다.
   "상단 탭 File -> Opend Folder -> watchapedia 폴더 선택"으로 프로젝트를 연다.
   파일들이 tsx로 잘 만들어진 것을 확인할 수 있다.

2. 깃허브 연동
   1) GitHub 레포지토리에 프로젝트를 생성한다.
   +) git init을 했더니 Reinitialized ~가 뜸. 프로젝트 폴더 안에 있는 .git 삭제한 후 진행.
   2) git init
   3) git remote add origin <레포주소>
   4) git remote -v : 연결 확인
   5) git add .
   6) git commit -m "메세지"
   7) git push origin master

3. CSS와 SASS/SCS 알아보기
   CSS(Cascading Style Sheets)는 스타일 언어로 HTML과 XHTML에 주로 쓰이며, 기본 파일명은 style.css이다.
   SASS/SCSS는 CSS의 단점을 보완하기 위해 나온 CSS 전처리기 언어인데 웹은 CSS만 받아들일 수 있으므로 직접 동작시킬 수 없다. 전처리기 언어 문법의 코드를 실행하면 CSS로 컴파일하여 웹으로 동작시키는 방식이기 때문에 CSS 코드를 만들어 내기 위한 도구라고 생각해야 한다. 즉, SASS가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일하여 CSS 파일을 빌드하는 것이 SASS를 통해 스타일 시트를 생산하는 과정이다. - 참고

SCSS 문법과 사용법을 잘 알지 못하므로 우선 CSS로 작업하고, 추후에 SCSS로의 변환을 고려해 볼 예정이다.

4. npm과 yarn 알아보기 병렬 설치, 자동 lock 파일 생성, 보안 등의 측면에서 yarn이 낫다고 한다. 하지만 npm을 많은 사람들이 쓰고 있고, yarn은 brew나 npm을 통해 추가로 설치해야 한다는 단점도 있다. 이 둘을 함께 사용하지 않아야 한다.. 나는 npm을 사용하려고 한다.

5. ESLint와 Prettier 알아보기
   코드 컨벤션을 위해 사용하는 것들이다.
   ESLiint는 문법적인 오류나 스타일 오류 등에 표시하여 알려준다. (코드 퀄리티/linting)
   Prettier는 코드를 더 예쁘게 작성할 수 있도록 도와준다. (코드 스타일/formatting)

<ESLint 설정 방법>
1) npm install eslint --save-dev

2) npm init @eslint/config
y 선택
To check syntax and find problmes 선택
JavaScript modules 선택
React 선택
Yes 선택
Browser 선택
JSON 선택
Yes 선택
npm 선택
설치 성공적으로 완료됨.
프로젝트 폴더 안에 ".eslintrc.json" 파일이 생성된 것을 확인할 수 있다.
=> "px eslint 검사할파일이름.형식"으로 오류를 파악할 수 있고, 뒤에 --fix를 붙이면 자동 교정을 할 수 있다.
==> 즉각적인 자동 교정을 지원하는 extension인 "ESLint"를 설치한다.
-> Ctrl + , 를 눌러서 설정을 켠 뒤에 자동 저장 기능을 켜서 편하게 사용할 수 있음(아직 안 함)

<ESLint 확인>
1) npx eslint ./src/App.tsx 입력하여 App.tsx 검사
사진처럼 Warning 발생 -> .eslintrc.json에 코드 추가

"settings": {
    "react": {
      "version": "detect"
    }
  }

Warning 해결. 설정된 rules가 없으니 발생된 에러도 없음.

<Prettier 설정 방법>
1) npm install --save-dev --save-exact prettier

2) .prettierrc.json 파일 생성 후 코드 추가

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 80
}

<Prettier 확인>
1) npx prettier --write ./src/App.tsx

• 기존
  
• 망치기
  
• Prettier 적용
  
  
  App logo의 작은따옴표 수정 & 9번, 19번 들여쓰기 수정 & ; 수정 적용됨.
  => setting.json 수정해서 저장 시에 자동으로 Prettier가 적용되도록 설정 가능(아직 안 함) - 참고

+) 초기 생성한 프로젝트에서 favicon.ico, logo192.png, logo512.png, manifest.json, App.text.tsx, logo.svg, setupTests.ts를 삭제하고 진행해도 된다.