[TIL] Next.js & TypeScript & styled-components 초기 세팅

ESLint & Prettier🔽

Next.js 초기세팅 - eslint, prettier, typescript(tsconfig) - 짜구's WIKI

터미널에 다음 항목들을 설치하고, 위 글을 참고해 ESLint와 Prettier 설정을 해준다

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

npm i -D babel-eslint eslint-plugin-babel

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

VS Code 설정의 settings.json에 다음 내용을 추가해준다

  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.alwaysShowStatus": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

 

styled-components🔽

Next.js + Typescript + Styled-components 쉽게 구축하기

다음 명령어로 설치하고 위 글을 참고해 세팅해준다

npm i styled-component

npm i -D @types/styled-components

npm i styled-reset

npm i --save-dev babel-plugin-styled-components

 

반응형 레이아웃 예시🔽

import styled from 'styled-components';
import { media } from '../styles/theme';

const Test = styled.div`
  color: ${({ theme }) => theme.color.primary};
  ${media.mobile} {
    color: ${({ theme }) => theme.color.secondary};
  }
`;

export default function TestComponent() {
  return (
    <>
      <Test className="pc-only">PC</Test>
      <Test className="mobile-only">Mobile</Test>
    </>
  );
}