October 06, 2019

Setting a absolute path

경로 문제로 deploy fail 문제를 겪다가 NODEPATH 설정 관련해서 글을 읽게 되었다.
이전에는 상대경로를 사용하지 않고 src 폴더 아래 존재하는 폴더명 부터 기재해서 파일을 import 하려면, 환경변수에서 `NODE
PATH=src`를 직접 설정했어야 했다.
(상대 경로를 사용하면 길고, 지저분하게 보이는게 너무 싫어 항상 환경변수를 설정해주곤 했다.)
방법은 아래 글을 참조하자.

참고: cross-env vs dotenv

그러나 2019년 4월 Create React App 3으로 released 되면서, jsconfig.json 또는 tsconfig.json에서 아래와 같이 설정만 해주면 위와 같은 작업을 하지 않아도 되게 되었다! (오예!)

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}
// 기존의 방식
import Menu from "src/components/Menu"

// 새로운 방식(물론, 환경변수를 설정하면 이전에도 아래와 같이 사용할 수 있었다.)
import Menu from "components/Menu"

Try to set gatsbyjs

현재는 gatsby-plugin-resolve-src 라이브러리를 사용중이었으나, gatsby에서도 적용이 가능할까 궁금해서 gatsbyjs 문서를 찾아봤다. 역시나 이미 방법이 있었다.
 Absolute imports

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
    },
  })
}

항상 자기가 사용하는 언어, 라이브러리의 released를 주의깊게 살펴보자.
Documetaion은 항상 꼼꼼히 읽도록 노력하자.
만드는 것도 중요하지만 설명서대로 만들지 않으면 원래 의도한 결과가 나오지 않는다. 뭔가 조립할 때도 설명서를 읽지 않고 만들 순 있지만, 놓치는 부분이 많았던 경험을 잘 떠올려보자.

Reference

What’s new in Create React App 3