webpack - devServer webpac -devServer은 webpack에서 제공해주는 node Server이다. CRA(create react App)을 해본 분이라면 알겠지만 yarn start명령어를 통해 실행하면 포트 3000번이 켜지는 것을 확인할 수 있다. 그래서 필자는 처음에 프론트인데 왜? 서버위에서 돌리지라는 의문을 가진 경험이 있었는데 이번에 공부를 하며 알 수 있었다. 정확히 devServer는 webpack에서 빠르게 prototype을 만들 수 있게 제공하는 nodeServer이다. 코드를 고칠 때 마다 빠르게 리로딩이 가능하다. 그래서 cra에서 코드를 고치면 빠르게 적용 된 것이다. 1. 설치 방법 yarn add --dev webpack-dev-server 2. 실..

webpack resolve webpack 모듈 번들러의 경우 어떤 위치에서 어떻게 로드해줄지가 중요하다. 즉 ``` import test from test //를 어떻게 로드해오는가에 따른 설정을 resolve에서 할 수 있다. ``` option alias 모듈을 로드할 때 별칭을 사용하여 더 쉽게 로드할 수 있게 만든다. webpack.config.js alias:{ Model: path.resolve(__dirname, 'src/model/') } js 파일에서 import 해올 때 import model from "src/model/User"처럼 사용하던 것을 import model from "Model/User" 와같이 사용할 수 있다. modules 설치된 라이브러리를 가져올 때 어느 폴더를..

webpack plugin plugin을 bundling되기 전이나 후에 파일을 custom하여 개발자가 원하는 추가 기능을 넣을 수 있다. 그래서 어떤 plugin이 있나 알아보자!! 이 글에서는 모든 plugin을 알아보기에는 제한이 있어서 일부만 소개해드리겠습니다. 1. ProvidePlugins 모든 모듈에서 사용할 수 있도록 해당 모듈을 변수로 변환한다. 한마디로 특정 모듈을 전역으로 사용할 수 있게 만든다는 의미입니다. 아래 예제는 jquery를 $라는 변수로 전역으로 사용할 수 있게 만든다는 의미입니다. new webpack.ProvidePlugin({ $:"jquery" }) 2. DefinePlugins webpack 번들링을 시작하는 시점에서 필요한 상수들을 정의한다. 문자열 숫자 tr..

webpack loader webpack은 원래 js만을 bundling할 수 있습니다. 그렇지만 우리는 web 코드를 작성할 때 js뿐만 아니라 css, scss, html, typescript 등등 도 bundling할 수 있어야한다. 그래서 lodaer라는 것을 사용해야한다. 사용법은 entry, ouput과 특별히 다르지 않고 webpack.config.js에 아래 사진과 같이 모듈을 추가해주면 된다. 추가로 필요한 loader는 yarn이난 npm으로 설치해주어야한다. module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "sass-loader"] }, { test: /\.ts$/, use: ["ts-loader"] }..

entry webpack의 entry는 번들화 시킬 파일을 지정하는 속성이다. entry로 지정된 파일들을 모두 묶어서 bundle.js를 작성한다. 사용법은 간단한데 json, 배열, 문자열 그 어떤 것도 상관없다. output output은 entry에 지정된 파일을 어디에 만들지 지정하는 방법이다. filename은 번들링한 파일의 이름을 지정한다. path는 bundle.js가 위치할 폴더이름을 지정한다. 추가로 entry를 json형태로 설정하였다면 output의 filename을 [name].js로 설정하면 entry 객체의 key값으로 파일이 설정된다. 아래 사진을 사용하여 예를들면 SignIn.js, SignUp.js등이 된다.

https://www.acmicpc.net/problem/11729 11729번: 하노이 탑 이동 순서 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 옮기려 한다. 한 번에 한 개의 원판만을 다른 탑으로 옮길 수 있다. 쌓아 놓은 원판은 항상 위의 것이 아래의 것보다 작아야 한다. 이 작업을 수행하는데 필요한 이동 순서를 출력하는 프로그램을 작성하라. 단, 이동 횟수는 최소가 되어야 한다. 아래 그림은 원판이 5 www.acmicpc.net 재귀 문제 예제로 정말 많이 쓰이는 문제이다. 설명을 할 때 start mid end 이런식으로 세부분으로 나누어서 설명..