[React+Next+TypeScript] 내가 보려고 정리한 초기세팅 + 푸념

아무래도 한국은 리액트가 대세(?) 다 보니 .. (vue 개발자는 정말 적다)
기초부터 차근차근 공부하기 앞서 초기세팅을 정리해봤다.

install

npx create-next-app --typescript [파일명]
npm i styled-reset
npm i sass
npm i styled-components
npm install -D prettier eslint-plugin-prettier eslint-config-prettier
npm i babel-plugin-tyled-components

각종세팅

👉 next.config.js

const nextConfig = {
 compiler: {
   styledComponents: true,
 },
 reactStrictMode: true,
}
module.exports = nextConfig

👉 package.json

{
 "name": "joeun-home",
 "version": "0.1.0",
 "private": true,
 "scripts": {
   "dev": "next dev",
   "build": "next build",
   "start": "next start",
   "lint": "next lint"
 },
 "dependencies": {
   "@types/node": "18.15.3",
   "@types/react": "18.0.28",
   "@types/react-dom": "18.0.11",
   "babel-plugin-styled-components": "^2.0.7",
   "eslint": "8.36.0",
   "eslint-config-next": "13.2.4",
   "next": "13.2.4",
   "react": "18.2.0",
   "react-dom": "18.2.0",
   "sass": "^1.59.3",
   "styled-components": "^5.3.9",
   "styled-reset": "^4.4.5",
   "typescript": "4.9.5"
 },
 "devDependencies": {
   "eslint-config-prettier": "^8.7.0",
   "eslint-plugin-prettier": "^4.2.1",
   "prettier": "^2.8.4"
 }
}

👉 .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "all"
}

👉 .babelrc

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

👉 .eslintrc.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier",
    ["styled-components", { "ssr": true }]
  ],
  "presets": ["next/babel"],
  "parserOptions": {
    "project": "./tsconfig.json",
    "createDefaultProgram": true
  },
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
    "no-useless-catch": "off"
  }
}

👉 tsconfig.json
여기서는 baseUrl 로 초기 경로를 재설정 해주는것도 가능하다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"],
      "@components": ["./src/components"],
      "@source": ["./src/source"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

이런식으로 baseUrl을 설정해줍니다. 가끔 해놓고 오류가 나는 경우가 있는데 이런경우 node moduls 파일을 삭제 후 `npm i`로 재설치 하거나 baseUrl 이나 paths 를 다시 살펴보는 걸 추천한다. (사실 이전까지는 컴퓨는 거짓말 안해! 하고 무작정 에러를 찾으려고 했지만,, 생각보다 컴퓨터도 거짓말을 하긴 하더라! 프로젝트가 꼬였다 싶을땐 다시 시작한다는 마음으로 컴퓨터를 재부팅 한다거나 프로젝트를 다시 생성하는것도 나쁘지 않은 방법이다- 물론 이런경우는 초반에만 가능하고 대부분 설정은 프로젝트 초기설정 그대로 유지한채 개발하는걸 추천한다)

	"baseUrl": "./src",
    "paths": {
      "@src/*": ["/*"],
      "@components/*": ["/components/*"],
      "@containers/*": ["/containers/*"],
      "@utils/*": ["/utils/*"],
      "@styles/*": ["/styles/*"]
    }

리액트는 언어에 불과하다

기초 보는과정에 좀 내 생각을 얹어보자면 생각보다 리액트를 칭송(?) 하다싶이 하는 분들이 너무너무너무 많아서 좀 당황스러울때가 있다. 리액트가 바닐라보단 쉽고 개발의 자유도가 높은 건 맞다. 하지만 프로젝트의 특징에 맞게 개발도구로 사용하는게 맞지, 무턱대고 리액트가 최고야! 라고 하는덴 문제가 있다고 생각한다.

단순히 남들을 따라 남들이 좋다하니 나도 할거야! 라는 마음보다는 앵이든 뷰든 리액트든 여러가지 도구를 사용해보고 앞으로 만들어갈 프로젝트의 성향에 맞체 도구로서 이용했으면 좋겟다. 단순히 리액트 칭송자들에게 " 왜 리액트만 해? " 라고 물어보면 돌아오는 대답이 블로그에서나 볼 법한 교과서적이 대답뿐이라 좀 답답할때가 많다. 리액트 든 뷰 든 앵 이든 다 써보고 둘을 비교해 봐도 나쁘지 않지 않을까,,, 차라리 자스 공부를 빡시게 하는걸 추천한다. 어짜피 언어는 배우면 그만이다

특히나 요즘은 국비에서 제이쿼리를 옛 언어취급하면서 배우지 말라고 한다던데,, 이정도면 국비 슨생님들 다 바꿔야하지 않나 싶다.