-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
질문입니다.
20.04.01 11:05 작성 조회수 206
0
강의 중간중간에 나머지 연산자에 대한 내용을 자주 언급하시는데 구글링을 해도 마땅한 정보를 찾을 수가 없어서..
이것이 무슨 뜻이고 어떤 기능인지 설명 좀 해주시거나 구글에서 어떤 키워드로 검색해야 학습이 가능한지 알고 싶습니다.
2. webpack으로 dist 폴더를 생성한 후에 index.html 파일안에 input 태그의 가장 중요한 속성인 type 속성이 사라진 것을 확인했는데 이건 어떤 문제인지 알 수 있을까요?
< webpack.config.js>
const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
process.env.NODE_ENV = process.env.NODE_ENV || "development"
module.exports = {
mode: "production",
entry: {
main: "./src/app.js"
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [
process.env.NODE_ENV==="production" ? MiniCssExtractPlugin.loader: "style-loader"
, "css-loader"]
},
{
test: /\.(png|jpg|svg|gif)$/,
loader: "url-loader",
options: {
name: "[name].[ext]?[hash]",
limit: 10000 // 10Kb
}
}
]
},
plugins:[
new webpack.BannerPlugin({
banner : `빌드 날짜 : ${new Date().toLocaleString()}`
}),
new HtmlWebpackPlugin({
template: './src/index.html',
templateParameters :{
env:process.env.NODE_ENV === 'development'?'(개발용)' :'',
}
}),
new CleanWebpackPlugin(),
...(process.env.NODE_ENV==='production' ?
[new MiniCssExtractPlugin({
filename :'[name].css'
})] :[]),
]
/**
* TODO: 아래 플러그인을 추가해서 번들 결과를 만들어 보세요.
* 1. BannerPlugin: 결과물에 빌드 시간을 출력하세요.
* 2. HtmlWebpackPlugin: 동적으로 html 파일을 생성하세요.
* 3. CleanWebpackPlugin: 빌드 전에 아웃풋 폴더를 깨끗히 정리하세요.
* 4. MiniCssExtractPlugin: 모듈에서 css 파일을 분리하세요.
*/
};
<index.html> in dist
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>검색</title>
<link href="main.css?9d95228d2bede0c25351" rel="stylesheet">
</head>
<body>
<div id="app">
<header>
<h2 class="container">검색</h2>
</header>
<div class="container">
<form class="FormView">
// type 속성 어디갓지
<input placeholder="검색어를 입력하세요" autofocus>
<button type="reset"
class="btn-reset"></button></form>
<div class="content">
<div id="tabs"></div>
<div id="search-keyword"></div>
<div id="search-history"></div>
<div id="search-result"></div>
</div>
</div>
</div>
<script type="text/javascript" src="main.js?9d95228d2bede0c25351"></script>
</body>
</html>
좋은 강의 감사합니다.
답변을 작성해보세요.
1
Holden Colfield
2021.08.08
- 나머지 연산자는 rest operator
- 전개 연산자는 spread operator
위 둘을 찾으면 좋을 것 같습니다.
문법(syntax)이 비슷해서 혼동이 올 수 있을 것 같아요.
1
1
0
답변 4