이국진의 개발블로그

스토리북 파일 안에서 Typescript에서 설정한 절대 경로로 Import를 할 때 경로를 찾지 못하는 오류가 발생한다.

그럴 때는 tsconfig-paths-webpack-plugin을 설치하고 사용하면 된다.

.storybook/main.ts에서 tsconfig-paths-webpack-plugin를 불러와주고

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

config 객체 안에 코드를 넣어준다.

const config: StorybookConfig = {
	... 생략 ...
    
	webpackFinal: async (config: Configuration) => {
        if (!config.resolve) {
            config.resolve = {};
        }

        if (!config.resolve.plugins) {
            config.resolve.plugins = [];
        }

        config.resolve.plugins.push(new TsconfigPathsPlugin({}));

        return config;
    }
}

다수의 class를 선택자(selector)로 사용했을 때 헷갈리는 부분을 정리해볼까 한다.

.first-class.second-class {
	background: red;
}

두개 이상의 class를 공백 없이 넣게 되면 두개의 클래스를 모두 가지고 있는 요소가 선택된다.

<div class="first-class second-class"></div>

.first-class, .second-class {
	background: red;
}

두개 이상의 class를 쉼표(comma)로 구분할 경우 class가 포함된 모든 요소를 선택하게 된다. 

<div class="first-class"></div>

<div class="second-class"></div>

.first-class .second-class {
	background: red;
}

두개 이상의 class를 공백으로만 구별할 경우 앞에 class의 하위 요소를 선택하게 된다.

<div class="first-class">

    <div class="second-class"></div>

    <div class="second-class"></div>

</div>

.first-class + div {
	background: red;
}

더하기로 구분할 경우 첫번째 요소의 가장 인접한 형제 요소를 선택하게 된다.

<div class="first-class">

   <div></div>

   <div></div>

</div>

.first-class > div {
	background: red;
}

> 를 사용하여 구분할 경우 바로 하위에 있는 자식 요소들을 선택하게 된다.

<div></div>

<div class="first-class">

    <div></div>

    <div></div>

</div>

<div></div>

.first-class ~ div {
	background: red;
}

~ 을 사용할 경우 첫번째 class의 형제 요소들을 선택하게 된다.

<div class="first-class"></div>

<div></div>

<div></div>

Next.js는 node_modules의 일부 파일을 포함하여 프로덕션 배포에 필요한 파일만 복사하는 독립 실행형 폴더를 자동으로 생성할 수 있다.

이 기능을 사용하기 위해서는 next.config.js에서 아래와 같이 활성화를 해주면 된다.

module.exports = {
  output: 'standalone',
}

이렇게 하면 .next/standalone에 폴더가 생성되며, 이 폴더는 node_modules를 설치하지 않고도 자체적으로 배포할 수 있다.

또한 next start 대신 사용할 수 있는 server.js 파일도 생성된다. 이 서버는 기본적으로 public 또는 .next/static 폴더를 복사하지 않는다. 이러한 폴더는 CDN에서 처리하는 것이 이상적이지만, 이러한 폴더를 standalone/public 및 standalone/.next/static 정적 폴더에 수동으로 복사할 수 있으며, 그 후에는 server.js 파일이 자동으로 해당 폴더를 서비스한다.

운영 서버에 npm run build를 통해 생성된 .next/standalone 폴더만 업로드 하면 되고 node server.js로 실행하면 된다. 

추가적으로 .next/static을 CDN으로 처리를 하려 한다. 

next.config.js에서 assetPrefix 옵션에 CDN의 URL을 추가해주면 CDN 안에서 .next/static 를 찾게 된다.

module.exports = {
    output: 'standalone',
    reactStrictMode: false,
    swcMinify: true,
    assetPrefix: 'https://cdn.mydomain.com'
};

아래 보면 cdn 폴더 경로를 보면 .next가 아닌 _next로 찾게 되기 때문에 폴더명을 변경해줘야한다.