<div id="readability-page-1" class="page"><p><cite>개 발자국</cite>
                  <span> 2023. 3. 15. 09:20</span>
                </p><div>
                                <h2 data-ke-size="size26">기본 폴더 구조 및 파일 구조</h2>
<p data-ke-size="size16"><b>Note :</b> <code>/src/Components/Header.jsx</code> , <code>/src/Utils/Math.ts</code>, <code>/src/style/main.css</code> , <code>/src/Utils/index.ts</code> , <code>/src/UI/Button.tsx</code> 를 제외한 파일들은 이전 포스팅에서 내용을 확인해주세요</p>

<p data-ke-size="size16"><b>Note :</b> 이 포스팅은 <code>webpack-dev-server</code> 사용 할 수 있도록 <code>webpack.config.js</code>와 의존성이 일부 설치되어 있습니다. 이전 포스팅에서 내용을 확인해주세요.</p>

<p data-ke-size="size16"><b>폴더 구조</b></p>
<p data-ke-size="size16"><br>.<br>├── babel.config.js<br>├── dist<br>│ ├── bundle.js<br>│ └── index.html<br>├── package.json<br>├── public<br>│ └── index.html<br>├── src<br>│ ├── App.jsx<br>│ ├── UI<br>│ │ └── Button.tsx<br>│ ├── Utils<br>│ │ ├── Math.ts<br>│ │ └── index.ts<br>│ ├── Components<br>│ │ └── Header.jsx<br>│ ├── constants<br>│ ├── index.js<br>│ └── style<br>│ └── main.css<br>├── webpack.config.js<br>└── yarn.lock</p>

<p data-ke-size="size16"><b>src/Utils/Math.ts</b></p>
<pre><code>export function add(a: number, b: number) {
    return a + b
}</code></pre>
<p data-ke-size="size16"><b>src/Utils/index.ts</b></p>
<pre><code>export * from "./Math"</code></pre>
<p data-ke-size="size16"><b>src/UI/Button.tsx</b></p>
<pre><code>import React from 'react'

export default function Button() {
  return (
    &lt;button&gt;Hello world&lt;/button&gt;
  )
}</code></pre>
<p data-ke-size="size16"><b>src/style/main.css</b></p>
<pre><code>div{
    color : blue
}</code></pre>
<p data-ke-size="size16"><b>src/Components/Header.jsx</b></p>
<pre><code>import React from 'react'

export default function Header() {
  return (
    &lt;div&gt;Header&lt;/div&gt;
  )
}</code></pre>
<h2 data-ke-size="size26">Resolve</h2>
<p data-ke-size="size16">Webpack의 Resolve 옵션은 <b>모듈을 불러 올 때, 어디서 어떻게 찾는가?</b> 에 대한 옵션이다. 예를 들어 우리는 모듈을 불러 올 때, 상대경로로 파일을 작성한다. 그러나, 프로젝트 규모가 커지고 폴더들이 분산되어 버린다면, 모듈을 찾기위해 <code>../../../</code> 이렇게 작성한다면, 매우 폭력적인 코드가 될것이다. 이를 위해, <code>Resolve</code> 옵션은 <code>alias</code>와 같은 기능을 통해 특정 문자열을 특정경로로 해석 해주는 기능을 제공한다.</p>
<h2 data-ke-size="size26">alias</h2>
<p data-ke-size="size16">우리는 현재 위치를 기준해서, 특정 파일 혹은 폴더까지 경로를 <b>상대경로</b> 라고 한다. 그리고 컴퓨터 루트 폴더에서 특정 파일 혹은 폴더까지 경로를 <b>절대경로</b>라고 한다.</p>
<p data-ke-size="size16">상대경로를 사용하는 경우, 바로 같은 폴더내에 위치하는 파일을 찾거나 하위 폴더에 위치한 파일을 찾는 것은 크게 불편하지 않다. 그러나, 찾는 파일이나 폴더가 현재 위치보다 상위 폴더에 위치하고 있을 때, 상위 폴더로 이동하기 위해서 <code>../</code> 를 사용해야 한다.</p>
<p data-ke-size="size16">문제는 상위 폴더로 이동이 많아 질수록 <code>../</code> 를 많이 사용해야 하며, 현재 파일의 위치가 변경되면 이 경로 또한 변경되어야 한다.</p>
<p data-ke-size="size16"><code>alias</code> 옵션은 <b>특정 문자열을 특정 경로로 변경해 줄 수 있다.</b> 이말인 즉 특정 문자열을 절대경로로 변경이 가능하다는 것이다.</p>
<p data-ke-size="size16">현재 ‘src’ 폴더내에 폴더는 components, style, ui, utils가 존재하니 이를 alias를 이용해서 경로를 지정해보자.</p>

<pre><code>const path = require("path");
...
module.export = {
    ...
     resolve: {
        alias: {
            "@Components": path.resolve(__dirname, 'src/Components/'),
            "@UI": path.resolve(__dirname, 'src/UI/'),
            "@Utils": path.resolve(__dirname, 'src/Utils/'),
            "@style": path.resolve(__dirname, 'src/style/')
        }
    },
    ...
}</code></pre>
<p data-ke-size="size16">alias옵션을 설정하는 것은 매우 간단하다. <b>resolve 옵션을 생성하고 alias객체를 생성 한 뒤, 경로를 지칭할 key와 경로를 설정해주면 된다.</b> alias 옵션으로 설정된 경로는 ‘at’의 의미를 담아 “@”를 접두사로 주로 사용한다.&nbsp;이제 이를 이용하여, App.jsx 에서 /src/Components/Header.jsx를 불러보자.</p>

<p data-ke-size="size16"><b>/src/App.jsx</b></p>
<pre><code>import React from 'react'
import Header from "@Components/Header.jsx"
export default function App() {
    return (
        &lt;div&gt;
            &lt;Header&gt;&lt;/Header&gt;
        &lt;/div&gt;
    )
}</code></pre>


<figure data-ke-mobilestyle="widthOrigin" data-origin-width="492" data-origin-height="116">
    <span data-url="https://blog.kakaocdn.net/dn/M7ECH/btr3V7nyYOK/7zcSy53qvHXWIhbKDLKki1/img.png" data-lightbox="lightbox" data-alt="브라우저 렌더링 결과">
        <img src="https://blog.kakaocdn.net/dn/M7ECH/btr3V7nyYOK/7zcSy53qvHXWIhbKDLKki1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="492" data-origin-height="116">
    </span>
    <figcaption>브라우저 렌더링 결과</figcaption>
</figure>


<p data-ke-size="size16">성공적으로 App.jsx 에서 Header.jsx를 사용 할 수 있다.</p>
<h2 data-ke-size="size26">Extensions</h2>
<p data-ke-size="size16">Css와 같은 파일들은 자주 임포트하지 않으니, 확장자를 사용하는 것은 감수 할 수 있다. 그러나 스크립트 파일은 자주 사용해야 하다보니, <code>js,jsx,ts,tsx</code> 를 사용하는 것은 매우 귀찮은 일이 될 수 있다.</p>

<p data-ke-size="size16"><code>extensions</code> 옵션은 확장자를 가지지 않은 경우, 내가 지정한 순서에 따라, 해당 폴더내에서 확장자를 부여하며 같은이름의 파일을 찾을 수 있다</p>

<p data-ke-size="size16"><b>webpack.config.js</b></p>
<pre><code>module.exports = {
     resolve: {
        extensions : [".js",".jsx",".ts",".tsx"],
        alias: {...}
    },
}</code></pre>

<p data-ke-size="size16"><b>src/App.jsx</b></p>
<pre><code>import React from 'react'
import Header from "@Components/Header"
export default function App() {
    return (
        &lt;div&gt;
            &lt;Header&gt;&lt;/Header&gt;
        &lt;/div&gt;
    )
}</code></pre>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="496" data-origin-height="134">
    <span data-url="https://blog.kakaocdn.net/dn/ccVk6V/btr3Xyd8FC5/JeIkKZ339Wk6FdsPofehV1/img.png" data-lightbox="lightbox" data-alt="브라우저 렌더링 결과">
        <img src="https://blog.kakaocdn.net/dn/ccVk6V/btr3Xyd8FC5/JeIkKZ339Wk6FdsPofehV1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="496" data-origin-height="134">
    </span>
    <figcaption>브라우저 렌더링 결과</figcaption>
</figure>


<p data-ke-size="size16">이제 확장자 없이 경로를 지정하여도, 파일을 찾을 수 있다.</p>
<h2 data-ke-size="size26">css 사용해보기</h2>
<p data-ke-size="size16"><b>Src/index.js</b></p>
<pre><code>import "@style/main.css"</code></pre>
<p data-ke-size="size16">css를 import 하기 위해서는 <code>css-loader</code> 가 필요하다.</p>
<pre><code>$: yarn add -D css-loader</code></pre>
<p data-ke-size="size16"><b>webpack.config.js</b></p>
<pre><code>module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: ["css-loader"],
            },
        ],
    },
    ...
}</code></pre>
<p data-ke-size="size16">여기까지 진행 했지만 파일이 생성되거나, 어떤 변화도 존재하지 않는다. 그 이유인 즉<code>css-loader</code> 는 ‘.js’ 파일에서 css파일을 가져오는 역할만 하기 때문이다. Import 되어 있는 css를 사용하기 위해서는 <code>style-loader</code> 혹은 <code>MiniCssExtractPlugin</code> 이 필요하다.</p>
<pre><code>$: yarn add style-loader mini-css-extract-plugin -D</code></pre>
<p data-ke-size="size16">먼저 style-loader는 <b>임포트되어 있는 css를 렌더링 되는 html에서 style태그를 만들어, 스타일을 사용 할 수 있게한다.</b> 사용 방법은 <code>use</code> 배열에 <code>style-loader</code> 입력하면 된다.</p>

<p data-ke-size="size16"><b>webpack.config.js</b></p>
<pre><code>module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: ["style-loader","css-loader"],
            },
        ],
    },
    ...
}</code></pre>
<p data-ke-size="size16">이렇게 작성하고, <code>$: yarn dev</code> 명령어로 확인해보면 다음과 같이 임포트 된 css가 스타일 태그로 변경된 결과를 볼 수 있다.</p>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="716" data-origin-height="137">
    <span data-url="https://blog.kakaocdn.net/dn/OgyfZ/btr3SxHxymV/nEGKmBa2ybjhuJFmADauD1/img.png" data-lightbox="lightbox" data-alt="브라우저 렌더링 결과 및 스타일 태그">
        <img src="https://blog.kakaocdn.net/dn/OgyfZ/btr3SxHxymV/nEGKmBa2ybjhuJFmADauD1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="716" data-origin-height="137">
    </span>
    <figcaption>브라우저 렌더링 결과 및 스타일 태그</figcaption>
</figure>

<p data-ke-size="size16">이번에는 스타일 태그가 아닌 css 파일로 제공 해줄 수 있도록 <code>mini-css-extract-plugin</code>을 사용해보자.</p>

<p data-ke-size="size16"><b>webpack.config.js</b></p>
<pre><code>const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...

module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader,"css-loader"],
            },
        ],
    },
    plugins: [
        ...
        new MiniCssExtractPlugin()
    ],

    ...
}</code></pre>
<p data-ke-size="size16">위와 같이 작성하고, 다시 <code>$: yarn dev</code> 명령어를 실행해보면 아래와 같이 html파일에 main.css가 링크되고, dist폴더에는 ‘main.css’라는 파일이 생성된다.</p>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="712" data-origin-height="138">
    <span data-url="https://blog.kakaocdn.net/dn/eaU2Rd/btr3Qzr3EZt/aCrknKXYZLFPG31Q3V2m20/img.png" data-lightbox="lightbox" data-alt="브라우저 렌더링 결과 및 css">
        <img src="https://blog.kakaocdn.net/dn/eaU2Rd/btr3Qzr3EZt/aCrknKXYZLFPG31Q3V2m20/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="712" data-origin-height="138">
    </span>
    <figcaption>브라우저 렌더링 결과 및 css</figcaption>
</figure>

<h2 data-ke-size="size26">sass 사용해보기</h2>
<pre><code>$: yarn add sass-loader sass</code></pre>
<p data-ke-size="size16"><b>sass-loader</b> : sass를 css로 변환해주는 모듈<br><b>sass</b> : sass를 해석하기 위한 모듈</p>

<p data-ke-size="size16"><b>webpack.config.js</b></p>
<pre><code>const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...

module.export = {
  ...
    module: {
        rules: [
            ...
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // css file gen
                    MiniCssExtractPlugin.loader,
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
        ],
    },
    ...
}</code></pre>

<p data-ke-size="size16"><b>src/components/Header.jsx</b></p>
<pre><code>import React from 'react'

export default function Header() {
  return (
    &lt;div&gt;
      &lt;h1 className='title'&gt;WOW&lt;/h1&gt;
      &lt;h2 className='sub-title'&gt;H2&lt;/h2&gt;
    &lt;/div&gt;
  )
}</code></pre>

<p data-ke-size="size16"><b>src/style/main.css -&gt; /src/style/main.scss</b></p>
<p data-ke-size="size16">포맷 변경</p>
<pre><code>div{
    .title{
        color: red;
    }

    .sub-title{
        color : blue
    }
}</code></pre>
<p data-ke-size="size16">Header.jsx와 main.scss를 변경하면 다음과 같은 렌더링 결과와 scss의 결과물을 볼 수 있다.</p>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="753" data-origin-height="162">
    <span data-url="https://blog.kakaocdn.net/dn/TKNz7/btr3Qx16Lq8/mofeOUH6mm7afuHCUNGo41/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/TKNz7/btr3Qx16Lq8/mofeOUH6mm7afuHCUNGo41/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="753" data-origin-height="162">
    </span>
    
</figure>


            
            
                </div></div>

자스민

기본 폴더 구조 및 파일 구조
Note : /src/Components/Header.jsx , /src/Utils/Math.ts, /src/style/main.css , /src/Utils/index.ts , /src/UI/Button.tsx 를 제외한 파일들은 이전 포스팅에서 내용을 확인해주세요
 
Note : 이 포스팅은 webpack-dev-server 사용 할 수 있도록 webpack.config.js와 의존성이 일부 설치되어 있습니다. 이전 포스팅에서 내용을 확인해주세요.
 
폴더 구조
.
├── babel.config.js
├── dist
│ ├── bundle.js
│ └── index.html
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.jsx
│ ├── UI
│ │ └── Button.tsx
│ ├── Utils
│ │ ├── Math.ts
│ │ └── index.ts
│ ├── Components
│ │ └── Header.jsx
│ ├── constants
│ ├── index.js
│ └── style
│ └── main.css
├── webpack.config.js
└── yarn.lock
 
src/Utils/Math.ts
export function add(a: number, b: number) {
    return a + b
}
src/Utils/index.ts
export * from "./Math"
src/UI/Button.tsx
import React from 'react'
export default function Button() {
  return (
    <button>Hello world</button>
  )
}
src/style/main.css
div{
    color : blue
}
src/Components/Header.jsx
import React from 'react'
export default function Header() {
  return (
    <div>Header</div>
  )
}
Resolve
Webpack의 Resolve 옵션은 모듈을 불러 올 때, 어디서 어떻게 찾는가? 에 대한 옵션이다. 예를 들어 우리는 모듈을 불러 올 때, 상대경로로 파일을 작성한다. 그러나, 프로젝트 규모가 커지고 폴더들이 분산되어 버린다면, 모듈을 찾기위해 ../../../ 이렇게 작성한다면, 매우 폭력적인 코드가 될것이다. 이를 위해, Resolve 옵션은 alias와 같은 기능을 통해 특정 문자열을 특정경로로 해석 해주는 기능을 제공한다.
alias
우리는 현재 위치를 기준해서, 특정 파일 혹은 폴더까지 경로를 상대경로 라고 한다. 그리고 컴퓨터 루트 폴더에서 특정 파일 혹은 폴더까지 경로를 절대경로라고 한다.
상대경로를 사용하는 경우, 바로 같은 폴더내에 위치하는 파일을 찾거나 하위 폴더에 위치한 파일을 찾는 것은 크게 불편하지 않다. 그러나, 찾는 파일이나 폴더가 현재 위치보다 상위 폴더에 위치하고 있을 때, 상위 폴더로 이동하기 위해서 ../ 를 사용해야 한다.
문제는 상위 폴더로 이동이 많아 질수록 ../ 를 많이 사용해야 하며, 현재 파일의 위치가 변경되면 이 경로 또한 변경되어야 한다.
alias 옵션은 특정 문자열을 특정 경로로 변경해 줄 수 있다. 이말인 즉 특정 문자열을 절대경로로 변경이 가능하다는 것이다.
현재 ‘src’ 폴더내에 폴더는 components, style, ui, utils가 존재하니 이를 alias를 이용해서 경로를 지정해보자.
 
const path = require("path");
...
module.export = {
    ...
     resolve: {
        alias: {
            "@Components": path.resolve(__dirname, 'src/Components/'),
            "@UI": path.resolve(__dirname, 'src/UI/'),
            "@Utils": path.resolve(__dirname, 'src/Utils/'),
            "@style": path.resolve(__dirname, 'src/style/')
        }
    },
    ...
}
alias옵션을 설정하는 것은 매우 간단하다. resolve 옵션을 생성하고 alias객체를 생성 한 뒤, 경로를 지칭할 key와 경로를 설정해주면 된다. alias 옵션으로 설정된 경로는 ‘at’의 의미를 담아 “@”를 접두사로 주로 사용한다. 이제 이를 이용하여, App.jsx 에서 /src/Components/Header.jsx를 불러보자.
 
/src/App.jsx
import React from 'react'
import Header from "@Components/Header.jsx"
export default function App() {
    return (
        <div>
            <Header></Header>
        </div>
    )
}
 
 
 
 
성공적으로 App.jsx 에서 Header.jsx를 사용 할 수 있다.
Extensions
Css와 같은 파일들은 자주 임포트하지 않으니, 확장자를 사용하는 것은 감수 할 수 있다. 그러나 스크립트 파일은 자주 사용해야 하다보니, js,jsx,ts,tsx 를 사용하는 것은 매우 귀찮은 일이 될 수 있다.
 
extensions 옵션은 확장자를 가지지 않은 경우, 내가 지정한 순서에 따라, 해당 폴더내에서 확장자를 부여하며 같은이름의 파일을 찾을 수 있다
 
webpack.config.js
module.exports = {
     resolve: {
        extensions : [".js",".jsx",".ts",".tsx"],
        alias: {...}
    },
}
 
src/App.jsx
import React from 'react'
import Header from "@Components/Header"
export default function App() {
    return (
        <div>
            <Header></Header>
        </div>
    )
}
 
 
 
이제 확장자 없이 경로를 지정하여도, 파일을 찾을 수 있다.
css 사용해보기
Src/index.js
import "@style/main.css"
css를 import 하기 위해서는 css-loader 가 필요하다.
$: yarn add -D css-loader
webpack.config.js
module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: ["css-loader"],
            },
        ],
    },
    ...
}
여기까지 진행 했지만 파일이 생성되거나, 어떤 변화도 존재하지 않는다. 그 이유인 즉css-loader 는 ‘.js’ 파일에서 css파일을 가져오는 역할만 하기 때문이다. Import 되어 있는 css를 사용하기 위해서는 style-loader 혹은 MiniCssExtractPlugin 이 필요하다.
$: yarn add style-loader mini-css-extract-plugin -D
먼저 style-loader는 임포트되어 있는 css를 렌더링 되는 html에서 style태그를 만들어, 스타일을 사용 할 수 있게한다. 사용 방법은 use 배열에 style-loader 입력하면 된다.
 
webpack.config.js
module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: ["style-loader","css-loader"],
            },
        ],
    },
    ...
}
이렇게 작성하고, $: yarn dev 명령어로 확인해보면 다음과 같이 임포트 된 css가 스타일 태그로 변경된 결과를 볼 수 있다.
 
 
이번에는 스타일 태그가 아닌 css 파일로 제공 해줄 수 있도록 mini-css-extract-plugin을 사용해보자.
 
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
module.export = {
  ...
    module: {
        rules: [
            ...
           {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader,"css-loader"],
            },
        ],
    },
    plugins: [
        ...
        new MiniCssExtractPlugin()
    ],
    ...
}
위와 같이 작성하고, 다시 $: yarn dev 명령어를 실행해보면 아래와 같이 html파일에 main.css가 링크되고, dist폴더에는 ‘main.css’라는 파일이 생성된다.
 
 
sass 사용해보기
$: yarn add sass-loader sass
sass-loader : sass를 css로 변환해주는 모듈
sass : sass를 해석하기 위한 모듈
 
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
module.export = {
  ...
    module: {
        rules: [
            ...
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // css file gen
                    MiniCssExtractPlugin.loader,
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
        ],
    },
    ...
}
 
src/components/Header.jsx
import React from 'react'
export default function Header() {
  return (
    <div>
      <h1 className='title'>WOW</h1>
      <h2 className='sub-title'>H2</h2>
    </div>
  )
}
 
src/style/main.css -> /src/style/main.scss
포맷 변경
div{
    .title{
        color: red;
    }
    .sub-title{
        color : blue
    }
}
Header.jsx와 main.scss를 변경하면 다음과 같은 렌더링 결과와 scss의 결과물을 볼 수 있다.

React resolve + css/sass 적용하기

댓글