양성호 닷컴 만들기(포트폴리오) 초기환경 설정

개인 포트폴리오 웹을 하나 만들기로 했다.

사용 스킬은 next.js / sass / typescript 이다.

먼저 npx create-next-app으로 프로젝트를 생성한다.
명령어에서 app이라는 자리에 프로젝트 이름을 작성해도 되지만 app으로 실행해도 이후 프로젝트 이름을 뭐로 할건지
작성하라고 뜬다.
프로젝트가 생성되면 기본적으로 package.json에 react, next, react-dom이 “dependencies”에 추가되어있다.

typescript를 사용하기 위해서 next.js typescript 이런식으로 구글링을 해서 글 작성이 잘되어 있는 것을 따라 설치했다.
설치는 다 끝내고 typescript 문법을 사용하려고 코드를 작성하면 에러가 발생했다.
이 에러 전에도 파일 확장자 .ts / .tsx에 따라 코드 전체에 빨간 줄이 생기기도 안생기기도 해서 왜 그런지 구글링을 했지만…
도저히 모르겠고… 진행은 해야되니… 아무 문제가 안생기는 .tsx 확장자로해서 묻고 지나온 상태였다..(이 문제로만 하루를…)
어쨋든 다시 원점으로 돌아와서 typescript 문법 작성하면 에러가 발생했는데 해결하기 위해 구글링하면서 해결을 시도하다보니 nextjs에서 typescript를 내장 지원해준다고 해서 typescript를 사용하기 위해 설치했던 몇가지들은 삭제했다.

sass를 사용하려고 기존에 next.js 프로젝트 생성하고 환경 세팅할때 처럼 똑같이 했는데 style 적용이 안된건 아니지만 css reset을 해주려고 적용하다보니 _app.tsx에서

import resetstyle from '../style/resetstyle.scss'

위 처럼 scss 파일 모듈을 불러오기 위해 임포트했다.
그런데 빨간 줄이 그어지면서 모듈을 찾을 수 없다고 하는것이다.
이와 관련해서도 구글링하면 여러가지 해결방법들이 있었는데, 패키지나 노드모듈 관련 해결방법은 제외했고, 나에게 적용될만한것들 중에 next.config.js에서 webpack을 설정하는 방법도 있고, declarations.d.ts라는 파일을 만들고 이 파일에
declare module "*.scss";를 작성하는것이었다.
처음에는 적용될만한 것들을 다 적용해보고 해결이 된 상태에서 어느 해결방법이 나의 에러를 해결했는지 알 수 없었기에
하나씩 없애보며 테스트를 해봤는데 결과로는 next.config.js에서는 기존 next.js에서 sass 설정할 때와 같고(next.config.js에서 해결하기 위해 적용한 것들은 싹 다 지웠음.) declarations.d.ts파일을 만들어서 declare module "*.scss";를 작성한 것이 에러를 해결한 방법이었다.

그리고! next.config.js는 .tsx확장자로 하면 안된다.

next.config.js

const withSass = require("@zeit/next-sass");

module.exports = withSass({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: [
        {
          loader: "url-loader",
          options: {
            limit: 100000
          }
        }
      ]
    });
    return config;
  }
});

declarations.d.ts

declare module "*.scss";

tsconfig.js

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es6",
      "dom"
    ],
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "pages/_app.tsx"
  ]
}