한지 - 한조각 쓸모있는 지식 레터

새로운 프로젝트를 시작하며

여러가지 상황을 고려해

next.js로 개발을 진행중입니다.

개발에서 가장 어려운건

환경 세팅이라고 그랬던가...

역시나 순탄하게 흘러가는 법이 없네요.

next.js에서 페이지 핫 로딩 후

styled-component가 먹통이 되는일이 발생하였네요.

다른 분들도 겪을듯 하여 해결 방법을 공유해봅니다.

// package.json

"babel": {
    "env": {
      "development": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": ["next/babel"],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": false
            }
          ]
        ]
      }
    }
  }

ubuntu가 빠르게 업데이트 되고있지만, apt package manager는 그렇지 못한것 같습니다.

node 버전이 8에 머물러있네요...

node버전 문제를 해결하는 방법은 nvm (node version manager)을 사용하는 것입니다.

nvm 설치 명령어

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

nvm install 버전 (ex. nvm install 12.13.0)

위의 명령어를 통해 최신버전의 node, npm 을 설치할 수 있습니다.

다만, 프로젝트의 의존성 모듈을 설치하는 중에 경우에따라 Missing write access to ... 와 같은 권한문제를 맞이할 수 있습니다.

해결책

프로젝트 폴더의 접근권한을 주는것입다

sudo chown -R $USER 폴더경로 및 폴더명

어렵지않게 위의 명령어로 깔끔하게 해결가능합니다.