[리액트 클론코딩] 1. 프로젝트 세팅하기(1) - 리액트

장대하지 않은 클론코딩의 시작...! 두두둥..

(나의 목적은 단순히 리액트를 익히는 것이다.)

 

나름 일정관리를 위해 노션도 만들고, 회의도 간략히 했다.

너무 심각하게 일정을 짜면 오히려 안 할 것 같아서 우선 러프하게 가되 시작부터 해보자고 했다.

 

친구는 모델링을 시작했고 나는 프론트엔드 프로젝트 세팅을 시작했다.

 

그리고 친구는 다 끝났다. 너무 멋있다.

 

근데 나는 안 끝남...

 

프론트 개발은 내가 다 주도하고 결정해야했다. (왕부담ㅠ)

리액트로 개발한다는 것만으로도 쉽지 않을 것 같아서 타입스크립트까지 하면 더 힘겨워지는건 아닌지 고민했다.

근데 주변에서 그냥 타입스크립트까지 적용하라고 해서 그렇게 했다.

 

어차피 고통스러운건 나,, 그래도 배우는 사람도 나,,

화이팅,,

 

---

 

◽ react + typescript 프로젝트 만들기

1. 새롭게 만드는 경우

npx create-react-app [프로젝트 명] typescript

// 타입스크립트 템플릿(.tsx)으로 만들어짐
npx create-react-app [프로젝트 명] --template typescript

 

2. 이미 만들어진 프로젝트에 적용

이미 만들어진 곳에 설치했는데 문제가많아서 결국 1번으로 돌아갔다.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

---

 

세팅 목록

◽ 리덕스

npm install redux react-redux @types/react-redux

 

 

◽ 스타일드 컴포넌트

npm i --save styled-components
npm i --save-dev @types/styled-components // 타입스크립트용

styled-components

 

 

◽ 리셋 css

npm i styled-reset

styled-reset

 

 

◽ axios

npm i axios

 

 

◽ Sass

npm i --save--dev node-sass style-loader css-loader sass-loader

 

 

◽ react-router-dom

npm i react-router-dom

 

 

 

---

설정 파일

ts.config.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

 

 

 

---

 

 

 

이전 프로젝트를 버리면서 만들어뒀던거 옮기는데 혹시나 안될까봐 심장 뛰었다. 잘 띄워진다. (야호)

 

아직 세팅할 것도 산더미.. 공부할 것도 산더미..

그래도 Vue만 하다가 React하니까 어렵고 신기하고 재밌다.

 

개발은 너무 어려워...

아이고 두야