안녕하세요. J4J입니다.
이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
개발환경 구축 방법
Next에도 React의 CRA와 동일한 것이 존재합니다.
다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다.
$ npx create-next-app --ts {프로젝트 명}
하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다.
저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다.
[ 1. package.json 생성 ]
$ npm init
명령어를 입력하면 다음과 같이 추가 내용을 입력해줘야 합니다.
package name: (init_typescript)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\User\Desktop\tistory_next\init_typescript\package.json:
{
"name": "init_typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
필요한 항목들은 입력해주시고 괄호가 있는 것들은 default값이니 아무 입력 없이 넘어가면 default값으로 자동 설정이 됩니다.
[ 2. package.json scripts 설정 ]
만들어진 package.json의 scripts설정을 해줘야합니다.
scripts들은 작성된 코드들의 실행 명령어, 빌드 명령어들을 명시해두는 것이라고 생각해주시면 됩니다.
"scripts": {
"dev": "next dev -p 8088",
"build": "next build",
"start": "next start"
}
[ 3. 패키지 설치 ]
$ npm install react react-dom next
$ npm install -D typescript @types/react @types/node
[ 4. tsconfig.json 생성 ]
$ npx typescript --init
tsconfig.json은 타입 스크립트를 사용하기 위한 설정 파일입니다.
해당 파일에 설정된 값에 맞게 타입 스크립트가 동작되기 때문에 타입 스크립트를 사용한다면 필요한 파일입니다.
[ 5. tsconfig.json 설정 ]
{
"compilerOptions": {
/* Projects */
"incremental": true,
/* Language and Environment */
"target": "es2016",
"lib": [
"ES2015",
"ES2016",
"ES2017",
"ES2018",
"ES2019",
"ES2020",
"DOM"
],
"jsx": "preserve",
/* Modules */
"module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
/* JavaScript Support */
"allowJs": true,
/* Emit */
"declaration": true,
"noEmit": true,
/* Interop Constraints */
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
/* Completeness */
"skipLibCheck": true
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
만들어진 tsconfig.json 파일을 보면 여러 가지 설정들을 확인할 수 있습니다.
그중 저는 위의 설정만 남겨둔 채 모두 제거하였고 제가 설정한 것에서도 더 필요하다면 추가, 필요 없다면 제거해주시면 될 것 같습니다.
[ 6. 기본 파일 생성 ]
기본 파일로 _app.tsx, index.tsx, _error.tsx 총 3개의 파일을 만들어보겠습니다.
pages폴더를 새롭게 생성해준 뒤 /pages/_app.tsx 파일을 다음과 같이 생성해주시면 됩니다.
import * as React from 'react';
import { AppProps } from 'next/app';
const App = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} />;
};
export default App;
이번엔 /pages/index.tsx 파일을 다음과 같이 생성해주시면 됩니다.
import * as React from 'react';
import { NextPage } from 'next';
import Head from 'next/head';
const Index: NextPage = () => {
return (
<>
<Head>
<title>init_typescript</title>
</Head>
<div>
index page!!
</div>
</>
);
};
export default Index;
마지막으로 /pages/_error.tsx 파일을 다음과 같이 생성해주시면 됩니다.
import * as React from 'react'
import { GetServerSideProps } from 'next';
interface IError {
statusCode: number;
}
const Error: React.FC<IError> = ({ statusCode }): JSX.Element => {
return (
<div>
에러 발생 시 나오는 페이지 <br /> {statusCode}
</div>
);
};
export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
const statusCode = res.statusCode;
return {
props: {
statusCode,
},
};
};
export default Error;
실행 화면
파일을 모두 작성한 뒤 터미널에서 다음의 명령어를 입력해주시면 됩니다.
$ npm run dev
package.json의 scripts에 작성했던 dev가 실행이 될 것이고 http://localhost:8088을 접속해보면 다음과 같이 index.tsx파일에 적은 내용이 나오는 것을 확인할 수 있습니다.
또한 도메인 뒤에 다음과 같이 존재하지 않는 값을 입력하게 될 경우에는 _error.tsx파일에 작성한 것과 같은 결과를 확인할 수 있습니다.
Build
Build는 일반적으로 구현이 완료된 소스코드들을 서버에 배포하기 위해 사용합니다.
Next는 자체적으로 모듈 번들러인 Webpack 구성이 되어있기 때문에 package.json의 scripts에 작성했던 build를 이용하면 Webpack을 이용하여 소스코드들의 번들링이 이루어집니다.
다음 명령어를 통해 Build 해줄 수 있습니다.
$ npm run build
그리고 Build가 성공하면 root경로의 .next라는 폴더 안에 빌드된 여러 파일들을 확인할 수 있습니다.
또한 Build가 이루어진 파일들을 이용하여 실행하고자 할 때는 다음 명령어를 입력해주시면 됩니다.
$ npm run start
그 뒤 http://localhost:3000을 접속해보면 Build 된 파일로 실행된 화면을 확인할 수 있습니다.
이상으로 타입 스크립트 개발환경 구축하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > Next' 카테고리의 다른 글
| [Next] Styled Components 사용하기 (0) | 2022.01.11 |
|---|---|
| [Next] Editor 사용하기 (3) - React Draft Wysiwyg (1) | 2022.01.09 |
| [Next] Editor 사용하기 (2) - Toast UI (1) | 2022.01.07 |
| [Next] Editor 사용하기 (1) - React Quill (0) | 2022.01.06 |
| [Next] 초기 개발환경 구축하기 (0) | 2021.07.28 |
댓글