오드로이드로 개인서버 구축하기 #3 우분투 초기 설정 및 방화벽 설정하기
2018-06-24
2018-01-25
Explanation
webpack3 버전이 릴리즈 된지도 어느덧 수개월이 지나 이미 4버전 알파가 올라오고 있는 시점이지만.. 아직 서비스 중인 프로젝트는 2버전을 사용하고 있어서 3, 4 버전을 알아보기 전에 2버전의 내용을 간단하게나마 정리해보려 합니다.
예제 코드: Github – falsy (예제 코드라고 할것도 없지만..)
1-1. init
|
1 |
$ npm init |
1-2. webpack 설치
2버전 마지막인 2.6.1 버전을 설치합니다.
|
1 |
$ npm install webpack@2.6.1 --save-dev |
1-3. 빌드를 테스트할 개발 서버 설치
|
1 |
$ npm install webpack-dev-server --save-dev |
1-4. html-webpack-plugin 플러그인 설치
|
1 |
$ npm install html-webpack-plugin --save-dev |
1-5 예시
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// package.json { "name": "cheolguso-webpack2", "version": "1.0.0", "description": "webpack version2 guide", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "CHEOLGUSO", "license": "WTFPL", "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^2.6.1", "webpack-dev-server": "^2.11.1" } } |
2-1. index.html
|
1 |
$ vi index.html |
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>cheolguso : webpack version2 guide</title> </head> <body> hello </body> </html> |
2-2. index.js
|
1 |
$ vi index.js |
|
1 |
document.write(' world'); |
2-3. webpack.config.js
|
1 |
$ vi webpack.config.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
'use strict'; var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = function makeWebpackConfig() { var config = {}; config.entry = { app: './index.js', }; config.output = { path: __dirname + '/build', filename: 'cheolguso.bundle.js' }; config.devtool = 'eval-source-map'; config.module = {}; config.plugins = [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ template: './index.html', inject: 'body' }) ]; return config; }(); |
3-1. package.json 수정
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "name": "cheolguso-webpack2", "version": "1.0.0", "description": "webpack version2 guide", "main": "index.js", "scripts": { "build": "webpack --bail --progress --profile", "server": "webpack-dev-server --history-api-fallback --inline --progress" }, "author": "CHEOLGUSO", "license": "WTFPL", "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^2.6.1", "webpack-dev-server": "^2.11.1" } } |
3-2. 개발 서버 실행
|
1 |
$ npm run server |
3-3. 빌드
|
1 |
$ npm run build |
4-1. entry, output
entry는 몇가지 형태로 존재하는데, 그 이해를 위해선 output도 함께 보는 것이 좋습니다.
|
1 2 3 4 5 6 |
// 1. config.entry = './index.js'; config.output = { path: __dirname + '/build', filename: 'cheolguso.bundle.js' } |
|
1 2 3 4 5 6 |
// 2. config.entry = ['./index.js', './addScript.js']; config.output = { path: __dirname + '/build', filename: 'cheolguso.bundle.js' } |
|
1 2 3 4 5 6 7 8 9 10 |
// 3. config.entry = { index : './index.js', addScript : './addScript.js' }; config.output = { path: __dirname + '/build', filename: '[name].bundle.js' } // 여기에서 [name]은 entry객체의 키값이 됩니다. (eg. index, addScript) |
4-2. devtool
|
1 |
config.devtool = 'eval-source-map'; |
압축, 난독화, es6+ 의 트랜스파일 등의 작업들로 어려워지는 디버깅을 소스맵을 통해 조금 수월하게 할 수 있는 옵션으로 이미 여러가지 옵션이 있으며 플러그인을 통해 더 확장되는 것으로 보입니다.
개인적으로는 angular1 + babel을 사용한 프로젝트에서 eval 이 포함되지 않는 옵션은 알 수 없는 오류가 발생해서 실험해보지 못하였으며, 단순히 결과적으로 배포를 위한 번들을 만듦에 있어, eval-source-map 에서 2.7mb 였던 번들의 크기가 eval에서 830kb 로 줄어드는 것을 알 수 있었습니다.
아직 옵션들 하나 하나의 정확한 차이는 알지못합니다..
이부분은 webpack v3(또는 v4) 버전의 글을 작성할때 추가하도록 하겠습니다.
4-3. module
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
config.module = { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', query: { presets: ['es2015'] } } }, { test: /\.less$/, use: [ {loader: "style-loader"}, {loader: "css-loader", options: {sourceMap: true}}, {loader: "less-loader", options: {sourceMap: true}} ] }] }; |
예를 들어 위와 같이 설정한다면, es6 -> es5로 less는 css 트랜스파일 됩니다.
babel-loader, style-loader, css-loader, less-loader 는 추가로 설치해야 합니다
4-4. plugin
|
1 2 3 |
config.plugins = [ new webpack.optimize.UglifyJsPlugin() ]; |
이름 그대로 플러그인을 설정합니다.
UglifyJsPlugin 플러그인은 자바스크립트 코드를 압축해줍니다.
검색을 통해 더 많은 글을 참고하였지만 그중에 좋았던 글들을 추려서 남깁니다. 감사합니다!
hyunseob.github.io
dev-momo.tistory.com
github:FEDevelopers
github:FEDevelopers
blog.jeonghwan.net
[…] Select Box – CSS 효과주기 […]
셀렉트 박스 펼침이 됐을떄 검정테두리가 두껍게 생기는데…그걸 제어하는 방법은 없을까요??
1px로 흐리게 하고 싶다면 어떻게 해야하나요…펼칩목록에…
안녕하세요, 제가 확인이 늦었네요.
말씀하신 부분이 정확하게 어떤 부분인지 잘 모르겠네요..
셀렉트 박스가 펼쳐졌을때에는 기본적으로 스타일이 들어가지 않는 것으로 알고 있습니다.
해당 상황을 확인해야 정확하게 알 수 있을것 같습니다 ~
감사합니다 이 글은 꼭 지우지 말아주세요…
댓글 남겨주셔서 감사합니다 :)
이거…한화면에 셀렉트가 많을때는 어떻게 사용하면될까요^^;;
안녕하세요,
지금은 간단한 이해를 위해 id를 선택자를 주었는데요, html과 css모두 class로 바꾸고 스크립트 부분을
var select = $(“.color”);
이런식으로 바꾸시면 될거 같습니다 :D
다른 글들은 봐도 이해안됬었는데, 이 글은 너무나 쉽게 이해가 쏙 되네요ㅠㅠ
select 박스때문에 헤매고 있었는데 고맙습니다!! ^^
이 글이 도움이 되었다고 하시니 저도 너무 기분이 좋아요ㅎ
이렇게 댓글까지 남겨주셔서 제가 더 감사해요 ^^
select option 디자인적용도 가능할까요? option의 padding이나, 마우스오버될때 효과를 넣고 싶은데 css만으로 가능한지 질문드립니다.
select option{height:33px;font-size:14px;line-height:33px;color:#777;padding:10px;background-color:#f6f6f6;} 이렇게 적용시켰더니 font-size, color, background-color는 적용이 되는데 height,padding,line-height 속성은 적용이 안되네요.
안녕하세요? 기본적으로 select option 에는 스타일 적용이 안된다고 생각하는게 좋을거 같아요. 브라우저나 os에 따라서 적용에도 차이가 있으니까요,
보통은 스타일을 꼭 주어야한다면 다른 요소(li, div…)로 드롭다운 메뉴를 만들어서 셀렉트 기능을 대신해서 사용하는게 좋을꺼 같아요 :D
잘 활용하여 사용하겠습니다.
정말 유용한 내용이었어요.
감사드려요 ^^
도움이 되었다니 다행이에요 :D
이 댓글 때문인지 오늘 하루가 좋았던거 같아요, 감사합니다 ~
안녕하세요.. ie8에서 하니 깨지는 현상이 발생하네요 ㅠㅠ
안녕하세요? 확인해보니 실수로 select태그에 css속성 ‘filter: alpha(opacity=0);’ 을 주지 않았네요. 죄송합니다…
지금은 수정하였습니다. 다시 한번 확인해보시고 안되시면 다시 댓글 남겨주세요.
댓글 남겨주셔서 감사합니다! :D
Cheolguso님 답변감사합니다. selectbox모양으로 태그를 이용하여 비슷하게 만드는 것 외에는 아직 안되는것이군요.. ㅜㅜ
더 도움이 되어 드리지 못해 아쉬움이 남네요…
김한솔님, 새해 복 많이 받으시고 하시는 일 좋은 일만 가득하시길 바랄게요 ~
안녕하세요^^ 덕분에 겨우 selectbox를 수정했습니다. 정말감사합니다.
그런데 혹시 option 같은경우도 수정할수 있을까요??
안녕하세요? 첫번째 댓글이네요. 이렇게 댓글 남겨주셔서 감사합니다 :D
우선. option 요소에는 css 속성이 적용되지 않는 것으로 알고 있습니다. 하고자 한다면 select & option 태그를 사용하지 않고 다른 태그(div, ul, li..)를 사용하여 비슷하게 만들 수 있겠지만 모바일 디바이스에서 select 기능을 사용하지 못하게 되니 UX적으로도, 스크린리더기를 통한 접근성에도 좋지 않은 방법이 되리라 생각이 듭니다.
차후에 더 나은 select box 스타일링 방법을 찾게되면 다시 포스팅 하도록 하겠습니다.