jquery만 쓰다가 typescript 한 번 따라하기 (1)
엄청 천천히 나갑니다;
저는 몇년간 jquery만 쓰다가 어느날 갑자기 React로 개발을 하게 되었는데요, 그 때 무척 고생했었습니다. 그래서 한 번 typescript까지 소프트 랜딩을 할 수 있는 문서를 만들어보고 싶었습니다.
저도 배우는 입장이라 부족한 부분은 말씀해주시면 많이 감사합니다. 🥰
node.js와 yarn까지 설치된걸 전재로 시작해 보겠습니다.
︎이번 목표: webpack을 한 번 써보기
처음 써보는 webpack
javascript에 모듈이라는 개념이 생기면서 모듈 단위의 개발이라는 개념이 생기고, 다시 그런 모듈들을 하나의 파일로 번들링해줄 필요가 생겼습니다. 그래서 webpack이 태어났습니다. 한 번 해볼게요.
- 빈 디렉토리를 만들고
yarn init -y로 초기화 해줍니다. yarn add webpack webpack-cli jquery로 필요한 패키지들을 추가합니다.package.json에 scripts를 추가해줍니다."scripts": { "build": "webpack" }webpack.config.js파일을 만들고, 다음과 같이 적어줍니다.
module.exports = {
entry: {
index: './index.es5'
},
output: {
path: __dirname,
filename: '[name].js'
},
};5. index.es5 파일을 만들고, 다음과 같이 적어줍니다.
var $ = require('jquery');$(function () {
console.log('hello, world. this is index.js');
});
6. index.html 파일을 만들고, 다음과 같이 적어줍니다.
<script src="index.js"></script>
<p>hello, world. this is webpack-test-01</p>아 이제 준비가 끝났습니다. 한 번 번들링 해볼게요.
yarn build
그러면 index.js라는 파일이 생성될거에요.
이제 index.html파일을 열어서 개발자 도구의 콘솔창을 확인해보죠
hello, world. this is index.js확인이 잘 되셨을까요?
우리는 6번에서 평소처럼? jquery를 <script src>로 load하지 않았지만,
5번에서require()를 통해 jquery를 가져와 사용할 수 있었습니다.
webpack은 webpack.config.js의 내용을 참고하여 index.es5 파일을 index.js 파일로 번들링 해줍니다. 이 때 jquery가 index.js에 녹아들게 됩니다.
그럼 한 번 우리만의 모듈을 만들어볼게요.
모듈 만들어보기
7. mymodule.es5파일을 만들고, 다음과 같이 적어줍니다.
export function test() {
console.log('hello, world. this is mymodule.test()');
}8. index.es5를 수정해봅니다.
var $ = require('jquery');
var mymodule = require('./mymodule.es5');$(function () {
console.log('hello, world. this is index.js');
mymodule.test();
});
다시 한 번 번들링하고 yarn build브라우저를 새로고침해 콘솔창을 확인해 봅니다.
hello, world. this is index.js
hello, world. this is mymodule.test()오, 우리가 방금 만든 모듈이 잘 불러와지고, 잘 사용된 것 같습니다.
실은 2번의 yarn add가 중요합니다. 다른 사람들이 만들어둔 여러 패키지들을 편리하게 가져오는 방법입니다. 이후 require()를 통해서 그 패키지를 사용하게 됩니다.
아주 간단하게 webpack을 통해서 모듈로 개발하는 흐름을 배워봤습니다. 다음에는 ts-loader와 typescript를 통해 typescript를 한 번 사용해 보겠습니다.
전체 코드는 아래에서 확인하실 수 있습니다.
https://github.com/eungook/webpack-test-01
