프로젝트 세팅하기
🥙 사용할 스택 확인
- Next.js
- Typescript
- styled-components
🥙 프로젝트 생성
먼저 원하는 위치에 Next.js + Typescript 프로젝트를 만든다.
npx create-next-app chat-bot --typescript
🥙 styled-components, eslint 설치
만든 프로젝트로 경로를 옮기고 styled-components 관련 라이브러리와 eslint를 설치해준다.
cd chat-bot
yarn add styled-components @types/styled-components babel-plugin-styled-components eslint
🥙 .babelrc 파일 추가
루트 경로에 .babelrc 파일을 만든다.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
🥙 eslint 초기화
다시 명령 프롬프트 창에서 eslint를 원하는 옵션으로 초기화해준다.
eslint --init
🥙 eslint 수정
루트 디렉토리에 있는 .eslintrc.js 파일의 rules를 입맛대로 수정해준다.
rules: {
"linebreak-style": 0, // Expected linebreaks to be 'LF' but found 'CRLF' 오류 안뜨게
quotes: ["error", "double"], //더블 쿼터 사용
"@typescript-eslint/quotes": ["error", "double"], //더블 쿼터 사용
"no-unused-vars": "off", //사용안한 변수 경고 중복
"spaced-comment": "off", //주석을 뒤에 쓰지 말라는 경고
"@typescript-eslint/no-unused-vars": "warn", //사용안한 변수는 경고
"react/no-array-index-key": "off", // key값으로 index를 사용할수 있다.
"arrow-body-style": "off", //화살표 함수 안에 return을 사용 할 수 있다.
"react/no-unescaped-entities": "off", //문자열 내에서 " ' > } 허용
"react/jsx-one-expression-per-line": "off", //한라인에 여러개의 JSX를 사용 할 수 있다.
"react/prop-types": "off", //proptypes를 사용하지 않는다.
"implicit-arrow-linebreak": "off", // 화살표 함수 다음에 줄 바꿈을 사용할 수 있다.
"react/react-in-jsx-scope": "off", // jsx를 사용하여도 React를 꼭 import 하지 않아도 된다.
"react/jsx-props-no-spreading": "off", //props를 스프래드 할 수 있다.
"jsx-a11y/anchor-is-valid": "off", // next js에서는 a에 href없이 사용
"global-require": "off", //함수 내에서 require 사용가능
"jsx-a11y/label-has-associated-control": "off",
"no-confusing-arrow": "off",
"react/jsx-curly-newline": "off",
indent: "off",
"react/jsx-filename-extension": [
1,
{ extensions: [".js", ".jsx", ".tsx", ".ts"] }, //jsx사용가능한 확장자 설정
],
"import/extensions": [
"off", //import 시 확장자명은 사용하지 않는다.
],
"react/function-component-definition": [
2,
{
namedComponents: "function-declaration",
},
],
"import/no-extraneous-dependencies": ["error", { devDependencies: true }],
"comma-dangle": "off",
},
.eslintrc.json 파일도 수정해준다.
{
"plugins": ["import"],
"extends": "next/core-web-vitals"
}
🥙 _documents.tsx 파일 추가
pages 폴더 하위에 _documents.tsx 파일을 만든다.
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>,
],
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
🐱👤 참고 : -
'프로젝트 > Chatbot' 카테고리의 다른 글
| [react-chatbot-kit] 챗봇 구현하기 - 3 (0) | 2022.06.09 |
|---|---|
| [react-chatbot-kit] 챗봇 구현하기 - 2 (0) | 2022.06.09 |
