티스토리 뷰

저는 커서 개발자가 될래요/CEOS

Next.js 개발 환경 셋팅

선돌이 2022. 12. 17. 06:10
728x90

생소했던 Next.JS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

우리가 그동안 React에서 주구장창 활용했던 라이브러리에 대해서도 별도의 설정이 필요했습니다.

초기 셋팅에 대하여 알아봅시당~

Next.js에서 Prettier 사용하기

CEOS 공지 내 Prettier 설정을 통해

그동안은 CEOS 미션 제출 방법을 따라서 하면 저장할 때마다 자동으로 prettier가 적용 되었습니다!

근데 이번에는 똑같이 설정을 해도 저장할 때마다 자동으로 적용이 안되더라고요 ㅠ.ㅠ…….

그래서 방법을 찾아 보다가 필요할 때마다 일일이 호출하는 방법을 찾았습니다 ……….

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --check --ignore-path .gitignore .",
    "format:fix": "prettier --write --ignore-path .gitignore ."
  },

npm run format:fix

터미널에서 다음과 같이 작성하면 prettier가 적용됩니다.

혹시 저장될 때마다 자동으로 동작하게 할 줄 아시는 분 도와주세용

Next.js에서 styled-component 사용하기

next.js는 SSR으로 사전 랜더링을 진행합니다.

사전 랜더링이되면 초기에 만들어둔 html(+css) 파일이 먼저 랜더링 된 후 js파일로 만들어둔 컴포넌트들은 나중에 로드 됩니다.

하지만 styled-component는 CSS in JS 입니당.

따라서 css도 js가 로드될 때 함께 로드 되기 때문에 처음 페이지를 켰을 때 html 코드만 덩그러니 랜더링 될 수도 있습니다.

그럼 next에서 styled-component를 못쓸까요? 어떻게 해야 할까요??????????????????????????????????

Nextjs에서 방법을 제공합니다.

https://nextjs.org/docs/advanced-features/custom-document#customizing-renderpage

  1. styled-component 설치하기
npm i styled-components
  1. styled-component용 babel 설치(크로스브라우징 문제 해결)
npm i --save-dev babel-plugin-styled-components
npm i babe-preset-next

3.루트 폴더 밑에 .babelrc파일 생성

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

styled-component 적용 전에 화면이 랜더링 되지 않게 설정해줍니당.

4._document.js에 코드 추가

import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet()

    // Step 2: Retrieve styles from components in the page
    const page = renderPage(
      (App) => (props) => sheet.collectStyles(<App {...props} />),
    )

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement()

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags }
  }

  render() {
    return (
      <HTML>
        <Head>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>

정말 간단하지요~~~

어려웠던 점

  1. 생소한 SSR

페이지에 있는 컴포넌트에서만 getServerSideProps를 사용할 수 있다는 말을 듣고 구조를 한 번 싹 뜯어 고쳤습니다. 그래서 home 코드가 더러워졌는데 더 깔끔하게 짜는 방법을 연구해봐야할 것 같습니다.

  1. axios 방식

axios로는 안되고 fetch로는 되길래 대체 뭐가 문제지 고민 했는데 알고보니 axios는 자체로 json 형식 데이터 파일을 반환해주기 때문에 json 변환이 필요 없었습니다,,,,,, axios create라는 것도 처음으로 배웠습니다…

자주 쓰이는 라이브러리인 만큼 더 많은 공부가 필요하다고 생각했습니다.

3.미흡한 css

나름 css 구조 짜는 법을 잘 익혔다 생각을 했는데 자꾸 생각했던 거랑 다르게 동작해서 많이 당황스러웠습니다. 이 부분에 대해서도 열심히 공부해야겠다고 느꼈습니다.

어려웠던 점이 너무 많나요?? ㅠ.ㅠ

728x90

'저는 커서 개발자가 될래요 > CEOS' 카테고리의 다른 글

[IT창업동아리] CEOS 동아리 16기 서류, 면접, 활동 후기!  (3) 2023.02.20
Recoil 사용법 + TypeScript 사용 중 어려웠던 점  (0) 2022.12.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함