WHOAMI 프로젝트의 이름을 변경하였습니다.

이름하야...LETMEIN!!!🙋🏻‍♀️🙋🏻‍♀️🙋🏻‍♀️

LET ME INTRODUCE MYSELF

주제는 같은데 이름만 바꿨어요. 이유는..비슷한 제목을 찾아서.입니다.

저번 코드는 과감히 날렸습니다!

짬짬이 개발스킬을 키우기 위한 프로젝트이므로, 부족한 것이 많을 수 있습니다!


🙇🏻‍ LET ME IN 🙇🏻‍

1. SETTING

먼저, 필요한 기본 세팅을 해보겠습니다.

Git과 npm 세팅을 해주시고, Git repo와 연결해줍니다.(연결 생략)

mkdir LETMEIN
cd LETMEIN
git init
npm init -y (or yarn init)
//... 이후 연결 생략 ... //

💅 필요한 라이브러리를 설치합니다.

yarn add react react-dom next

yarn add -D typescript @types/node @types/react @types/react-dom

package.json에 scripts 설정을 해줍니다.

// package.json
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
},

루트디렉토리에 pages 폴더를 생성하고, index.tsx를 작성합니다.

// index.tsx
import React from 'react';

const Home = () => <h1>🙇🏻‍♂️ LET ME IN 🙇🏻‍♂️</h1>;

export default Home;

yarn dev를 실행하면 tsconfig.json짜잔🧞‍♂️하고 생성됩니다!

하지만 내용을 바꿔줍니다. starter의 json파일을 참고하였습니다.

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

.gitignore를 생성하고 작성합니다.

// .gitignore
node_modules
.next

마지막으로

// .babelrc
{
  "presets": ["next/babel"]
}

http://localhost:3000를 들어가서 아래 화면을 확인하고 커밋!!

image.png