inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

174만명의 커뮤니티!! 함께 토론해봐요.

file-loader를 이용한 백그라운드 이미지 불러오기 관련 질문 드립니다

미해결

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

안녕하세요 수업 내용대로 file-loader를 이용하여 백그라운드 이미지를 불러오는 실습을 진행하다가 에러가 발생하여 질문 드립니다. 강의에서는 file-loader를 사용하지 않고 .css 파일에서 style-loader와 css-loader만 사용하고 빌드했을 경우에는 에러가 나야하는데 저는 에러가 나지 않고 브라우저에서 열어 봤을 때에 바로 백그라운드 이미지가 나옵니다. 또한 file-loader가 포함된 코드를 webpack.config.js에 추가했을때에는 빌드는 잘 되는데 오히려 브라우저에서 백그라운드 이미지가 나오지 않습니다. style-loader와 css-loader에서 file-loader의 역할을 대신해주도록 업데이트가 된걸까요..? 아래에 패키지 버전과 코드를 남겨드립니다. 패키지 버전 "dependencies" : { "css-loader" : " ^6.2.0 " , "file-loader" : " ^6.2.0 " , "style-loader" : " ^3.2.1 " } } app.js import * as math from ' ./math.js ' import ' ./app.css ' console . log ( math . sum ( 1 , 2 )); app.css body { background-image : url ( bg.png ); } webpack.config.js (백그라운드 이미지 뜨는 경우) const path = require ( ' path ' ); module . exports = { mode: ' development ' , entry: { main: ' ./src/app.js ' }, output: { path: path . resolve ( ' ./dist ' ), filename: ' [name].js ' }, module: { rules: [ { test: / \. css $ / , use: [ ' style-loader ' , ' css-loader ' ] }, ] } } webpack.config.js (백그라운드 이미지 뜨지 않는 경우) const path = require ( ' path ' ); module . exports = { mode: ' development ' , entry: { main: ' ./src/app.js ' }, output: { path: path . resolve ( ' ./dist ' ), filename: ' [name].js ' }, module: { rules: [ { test: / \. css $ / , use: [ ' style-loader ' , ' css-loader ' ] }, { test: / \. png $ / , // .png 확장자로 마치는 모든 파일 loader: " file-loader " , options: { publicPath: " ./dist/ " , // prefix를 아웃풋 경로로 지정 name: " [name].[ext]?[hash] " , // 파일명 형식 }, }, ] } } 아래와 같은 코드에서 빌드했을 때에 dist/main.js 코드 입니다. /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /** *** */ ( () => { // webpackBootstrap /** *** */ " use strict " ; /** *** */ var __webpack_modules__ = ( { /***/ " ./node_modules/css-loader/dist/cjs.js!./src/app.css " : /* !***********************************************************!*\ !*** ./node_modules/css-loader/dist/cjs.js!./src/app.css ***! \********************************************************** */ /***/ ( ( module , __webpack_exports__ , __webpack_require__ ) => { eval ( " __webpack_require__.r(__webpack_exports__); \n /* harmony export */ __webpack_require__.d(__webpack_exports__, { \n /* harmony export */ \" default \" : () => (__WEBPACK_DEFAULT_EXPORT__) \n /* harmony export */ }); \n /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \" ./node_modules/css-loader/dist/runtime/api.js \" ); \n /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__); \n /* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \" ./node_modules/css-loader/dist/runtime/getUrl.js \" ); \n /* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__); \n // Imports \n\n\n var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! bg.png */ \" ./src/bg.png \" ), __webpack_require__.b); \n var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]}); \n var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___); \n // Module \n ___CSS_LOADER_EXPORT___.push([module.id, \" body { \\ n background-image: url( \" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \" ); \\ n} \" , \"\" ]); \n // Exports \n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); \n\n\n //# sourceURL=webpack://npm-sample/./src/app.css?./node_modules/css-loader/dist/cjs.js " ) ; /***/ } ) , /***/ " ./node_modules/css-loader/dist/runtime/api.js " : /* !*****************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/api.js ***! \**************************************************** */ /***/ ( ( module ) => { eval ( " \n\n /* \n MIT License http://www.opensource.org/licenses/mit-license.php \n Author Tobias Koppers @sokra \n */ \n // css base code, injected by the css-loader \n // eslint-disable-next-line func-names \n module.exports = function (cssWithMappingToString) { \n var list = []; // return the list of modules as css string \n\n list.toString = function toString() { \n return this.map(function (item) { \n var content = cssWithMappingToString(item); \n\n if (item[2]) { \n return \" @media \" .concat(item[2], \" { \" ).concat(content, \" } \" ); \n } \n\n return content; \n }).join( \"\" ); \n }; // import a list of modules into the list \n // eslint-disable-next-line func-names \n\n\n list.i = function (modules, mediaQuery, dedupe) { \n if (typeof modules === \" string \" ) { \n // eslint-disable-next-line no-param-reassign \n modules = [[null, modules, \"\" ]]; \n } \n\n var alreadyImportedModules = {}; \n\n if (dedupe) { \n for (var i = 0; i < this.length; i++) { \n // eslint-disable-next-line prefer-destructuring \n var id = this[i][0]; \n\n if (id != null) { \n alreadyImportedModules[id] = true; \n } \n } \n } \n\n for (var _i = 0; _i < modules.length; _i++) { \n var item = [].concat(modules[_i]); \n\n if (dedupe && alreadyImportedModules[item[0]]) { \n // eslint-disable-next-line no-continue \n continue; \n } \n\n if (mediaQuery) { \n if (!item[2]) { \n item[2] = mediaQuery; \n } else { \n item[2] = \"\" .concat(mediaQuery, \" and \" ).concat(item[2]); \n } \n } \n\n list.push(item); \n } \n }; \n\n return list; \n }; \n\n //# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/api.js? " ) ; /***/ } ) , /***/ " ./node_modules/css-loader/dist/runtime/getUrl.js " : /* !********************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***! \******************************************************* */ /***/ ( ( module ) => { eval ( " \n\n module.exports = function (url, options) { \n if (!options) { \n // eslint-disable-next-line no-param-reassign \n options = {}; \n } \n\n if (!url) { \n return url; \n } // eslint-disable-next-line no-underscore-dangle, no-param-reassign \n\n\n url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them \n\n if (/^[' \" ].*[' \" ]$/.test(url)) { \n // eslint-disable-next-line no-param-reassign \n url = url.slice(1, -1); \n } \n\n if (options.hash) { \n // eslint-disable-next-line no-param-reassign \n url += options.hash; \n } // Should url be wrapped? \n // See https://drafts.csswg.org/css-values-3/#urls \n\n\n if (/[ \" '() \\ t \\ n]|(%20)/.test(url) || options.needQuotes) { \n return \"\\\"\" .concat(url.replace(/ \" /g, ' \\\\\" ').replace(/ \\ n/g, \"\\\\ n \" ), \"\\\"\" ); \n } \n\n return url; \n }; \n\n //# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/getUrl.js? " ) ; /***/ } ) , /***/ " ./src/bg.png " : /* !********************!*\ !*** ./src/bg.png ***! \******************* */ /***/ ( ( module , __unused_webpack_exports , __webpack_require__ ) => { eval ( " module.exports = __webpack_require__.p + \" 3d9f2814733b516c33db.png \" ; \n\n //# sourceURL=webpack://npm-sample/./src/bg.png? " ) ; /***/ } ) , /***/ " ./src/app.css " : /* !*********************!*\ !*** ./src/app.css ***! \******************** */ /***/ ( ( __unused_webpack_module , __webpack_exports__ , __webpack_require__ ) => { eval ( " __webpack_require__.r(__webpack_exports__); \n /* harmony export */ __webpack_require__.d(__webpack_exports__, { \n /* harmony export */ \" default \" : () => (__WEBPACK_DEFAULT_EXPORT__) \n /* harmony export */ }); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \" ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \" ./node_modules/style-loader/dist/runtime/styleDomAPI.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \" ./node_modules/style-loader/dist/runtime/insertBySelector.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \" ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \" ./node_modules/style-loader/dist/runtime/insertStyleElement.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \" ./node_modules/style-loader/dist/runtime/styleTagTransform.js \" ); \n /* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__); \n /* harmony import */ var _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./app.css */ \" ./node_modules/css-loader/dist/cjs.js!./src/app.css \" ); \n\n \n \n \n \n \n \n \n \n \n\n var options = {}; \n\n options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default()); \n options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default()); \n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \" head \" ); \n \n options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default()); \n options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default()); \n\n var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default, options); \n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined); \n\n\n //# sourceURL=webpack://npm-sample/./src/app.css? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js " : /* !****************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! \*************************************************************************** */ /***/ ( ( module ) => { eval ( " \n\n var stylesInDom = []; \n\n function getIndexByIdentifier(identifier) { \n var result = -1; \n\n for (var i = 0; i < stylesInDom.length; i++) { \n if (stylesInDom[i].identifier === identifier) { \n result = i; \n break; \n } \n } \n\n return result; \n } \n\n function modulesToDom(list, options) { \n var idCountMap = {}; \n var identifiers = []; \n\n for (var i = 0; i < list.length; i++) { \n var item = list[i]; \n var id = options.base ? item[0] + options.base : item[0]; \n var count = idCountMap[id] || 0; \n var identifier = \"\" .concat(id, \" \" ).concat(count); \n idCountMap[id] = count + 1; \n var index = getIndexByIdentifier(identifier); \n var obj = { \n css: item[1], \n media: item[2], \n sourceMap: item[3] \n }; \n\n if (index !== -1) { \n stylesInDom[index].references++; \n stylesInDom[index].updater(obj); \n } else { \n stylesInDom.push({ \n identifier: identifier, \n updater: addStyle(obj, options), \n references: 1 \n }); \n } \n\n identifiers.push(identifier); \n } \n\n return identifiers; \n } \n\n function addStyle(obj, options) { \n var api = options.domAPI(options); \n api.update(obj); \n return function updateStyle(newObj) { \n if (newObj) { \n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) { \n return; \n } \n\n api.update(obj = newObj); \n } else { \n api.remove(); \n } \n }; \n } \n\n module.exports = function (list, options) { \n options = options || {}; \n list = list || []; \n var lastIdentifiers = modulesToDom(list, options); \n return function update(newList) { \n newList = newList || []; \n\n for (var i = 0; i < lastIdentifiers.length; i++) { \n var identifier = lastIdentifiers[i]; \n var index = getIndexByIdentifier(identifier); \n stylesInDom[index].references--; \n } \n\n var newLastIdentifiers = modulesToDom(newList, options); \n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) { \n var _identifier = lastIdentifiers[_i]; \n\n var _index = getIndexByIdentifier(_identifier); \n\n if (stylesInDom[_index].references === 0) { \n stylesInDom[_index].updater(); \n\n stylesInDom.splice(_index, 1); \n } \n } \n\n lastIdentifiers = newLastIdentifiers; \n }; \n }; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/insertBySelector.js " : /* !********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! \******************************************************************* */ /***/ ( ( module ) => { eval ( " \n\n var memo = {}; \n /* istanbul ignore next */ \n\n function getTarget(target) { \n if (typeof memo[target] === \" undefined \" ) { \n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself \n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) { \n try { \n // This will throw an exception if access to iframe is blocked \n // due to cross-origin restrictions \n styleTarget = styleTarget.contentDocument.head; \n } catch (e) { \n // istanbul ignore next \n styleTarget = null; \n } \n } \n\n memo[target] = styleTarget; \n } \n\n return memo[target]; \n } \n /* istanbul ignore next */ \n\n\n function insertBySelector(insert, style) { \n var target = getTarget(insert); \n\n if (!target) { \n throw new Error( \" Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid. \" ); \n } \n\n target.appendChild(style); \n } \n\n module.exports = insertBySelector; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertBySelector.js? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/insertStyleElement.js " : /* !**********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! \********************************************************************* */ /***/ ( ( module ) => { eval ( " \n\n /* istanbul ignore next */ \n function insertStyleElement(options) { \n var style = document.createElement( \" style \" ); \n options.setAttributes(style, options.attributes); \n options.insert(style); \n return style; \n } \n\n module.exports = insertStyleElement; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertStyleElement.js? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js " : /* !**********************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! \********************************************************************************* */ /***/ ( ( module , __unused_webpack_exports , __webpack_require__ ) => { eval ( " \n\n /* istanbul ignore next */ \n function setAttributesWithoutAttributes(style) { \n var nonce = true ? __webpack_require__.nc : 0; \n\n if (nonce) { \n style.setAttribute( \" nonce \" , nonce); \n } \n } \n\n module.exports = setAttributesWithoutAttributes; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/styleDomAPI.js " : /* !***************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! \************************************************************** */ /***/ ( ( module ) => { eval ( " \n\n /* istanbul ignore next */ \n function apply(style, options, obj) { \n var css = obj.css; \n var media = obj.media; \n var sourceMap = obj.sourceMap; \n\n if (media) { \n style.setAttribute( \" media \" , media); \n } else { \n style.removeAttribute( \" media \" ); \n } \n\n if (sourceMap && typeof btoa !== \" undefined \" ) { \n css += \"\\ n/*# sourceMappingURL=data:application/json;base64, \" .concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */ \" ); \n } // For old IE \n\n /* istanbul ignore if */ \n\n\n options.styleTagTransform(css, style); \n } \n\n function removeStyleElement(style) { \n // istanbul ignore if \n if (style.parentNode === null) { \n return false; \n } \n\n style.parentNode.removeChild(style); \n } \n /* istanbul ignore next */ \n\n\n function domAPI(options) { \n var style = options.insertStyleElement(options); \n return { \n update: function update(obj) { \n apply(style, options, obj); \n }, \n remove: function remove() { \n removeStyleElement(style); \n } \n }; \n } \n\n module.exports = domAPI; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleDomAPI.js? " ) ; /***/ } ) , /***/ " ./node_modules/style-loader/dist/runtime/styleTagTransform.js " : /* !*********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! \******************************************************************** */ /***/ ( ( module ) => { eval ( " \n\n /* istanbul ignore next */ \n function styleTagTransform(css, style) { \n if (style.styleSheet) { \n style.styleSheet.cssText = css; \n } else { \n while (style.firstChild) { \n style.removeChild(style.firstChild); \n } \n\n style.appendChild(document.createTextNode(css)); \n } \n } \n\n module.exports = styleTagTransform; \n\n //# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleTagTransform.js? " ) ; /***/ } ) , /***/ " ./src/app.js " : /* !********************!*\ !*** ./src/app.js ***! \******************* */ /***/ ( ( __unused_webpack_module , __webpack_exports__ , __webpack_require__ ) => { eval ( " __webpack_require__.r(__webpack_exports__); \n /* harmony import */ var _math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math.js */ \" ./src/math.js \" ); \n /* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.css */ \" ./src/app.css \" ); \n\n\n\n console.log(_math_js__WEBPACK_IMPORTED_MODULE_0__.sum(1,2)); \n\n //# sourceURL=webpack://npm-sample/./src/app.js? " ) ; /***/ } ) , /***/ " ./src/math.js " : /* !*********************!*\ !*** ./src/math.js ***! \******************** */ /***/ ( ( __unused_webpack_module , __webpack_exports__ , __webpack_require__ ) => { eval ( " __webpack_require__.r(__webpack_exports__); \n /* harmony export */ __webpack_require__.d(__webpack_exports__, { \n /* harmony export */ \" sum \" : () => (/* binding */ sum) \n /* harmony export */ }); \n function sum(a,b) { \n return a+b; \n } \n\n //# sourceURL=webpack://npm-sample/./src/math.js? " ) ; /***/ } ) /** *** */ } ); /** ********************************************************************* */ /** *** */ // The module cache /** *** */ var __webpack_module_cache__ = {} ; /** *** */ /** *** */ // The require function /** *** */ function __webpack_require__ ( moduleId ) { /** *** */ // Check if module is in cache /** *** */ var cachedModule = __webpack_module_cache__ [ moduleId ]; /** *** */ if ( cachedModule !== undefined ) { /** *** */ return cachedModule . exports ; /** *** */ } /** *** */ // Create a new module (and put it into the cache) /** *** */ var module = __webpack_module_cache__ [ moduleId ] = { /** *** */ id : moduleId , /** *** */ // no module.loaded needed /** *** */ exports : {} /** *** */ } ; /** *** */ /** *** */ // Execute the module function /** *** */ __webpack_modules__ [ moduleId ]( module , module . exports , __webpack_require__ ); /** *** */ /** *** */ // Return the exports of the module /** *** */ return module . exports ; /** *** */ } /** *** */ /** *** */ // expose the modules object (__webpack_modules__) /** *** */ __webpack_require__ . m = __webpack_modules__ ; /** *** */ /** ********************************************************************* */ /** *** */ /* webpack/runtime/compat get default export */ /** *** */ ( () => { /** *** */ // getDefaultExport function for compatibility with non-harmony modules /** *** */ __webpack_require__ . n = ( module ) => { /** *** */ var getter = module && module . __esModule ? /** *** */ () => ( module [ ' default ' ]) : /** *** */ () => ( module ); /** *** */ __webpack_require__ . d ( getter , { a: getter }); /** *** */ return getter ; /** *** */ }; /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/define property getters */ /** *** */ ( () => { /** *** */ // define getter functions for harmony exports /** *** */ __webpack_require__ . d = ( exports , definition ) => { /** *** */ for ( var key in definition ) { /** *** */ if ( __webpack_require__ . o ( definition , key ) && ! __webpack_require__ . o ( exports , key )) { /** *** */ Object . defineProperty ( exports , key , { enumerable: true , get: definition [ key ] }); /** *** */ } /** *** */ } /** *** */ }; /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/global */ /** *** */ ( () => { /** *** */ __webpack_require__ . g = ( function () { /** *** */ if ( typeof globalThis === ' object ' ) return globalThis ; /** *** */ try { /** *** */ return this || new Function ( ' return this ' )(); /** *** */ } catch ( e ) { /** *** */ if ( typeof window === ' object ' ) return window ; /** *** */ } /** *** */ })(); /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/hasOwnProperty shorthand */ /** *** */ ( () => { /** *** */ __webpack_require__ . o = ( obj , prop ) => ( Object . prototype . hasOwnProperty . call ( obj , prop )) /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/make namespace object */ /** *** */ ( () => { /** *** */ // define __esModule on exports /** *** */ __webpack_require__ . r = ( exports ) => { /** *** */ if ( typeof Symbol !== ' undefined ' && Symbol . toStringTag ) { /** *** */ Object . defineProperty ( exports , Symbol . toStringTag , { value: ' Module ' }); /** *** */ } /** *** */ Object . defineProperty ( exports , ' __esModule ' , { value: true }); /** *** */ }; /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/publicPath */ /** *** */ ( () => { /** *** */ var scriptUrl ; /** *** */ if ( __webpack_require__ . g . importScripts ) scriptUrl = __webpack_require__ . g . location + "" ; /** *** */ var document = __webpack_require__ . g . document ; /** *** */ if ( ! scriptUrl && document ) { /** *** */ if ( document . currentScript ) /** *** */ scriptUrl = document . currentScript . src /** *** */ if ( ! scriptUrl ) { /** *** */ var scripts = document . getElementsByTagName ( " script " ); /** *** */ if ( scripts . length ) scriptUrl = scripts [ scripts . length - 1 ] . src /** *** */ } /** *** */ } /** *** */ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration /** *** */ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. /** *** */ if ( ! scriptUrl ) throw new Error ( " Automatic publicPath is not supported in this browser " ); /** *** */ scriptUrl = scriptUrl . replace ( / # . * $ / , "" ) . replace ( / \? . * $ / , "" ) . replace ( / \/ [ ^ \/ ] + $ / , " / " ); /** *** */ __webpack_require__ . p = scriptUrl ; /** *** */ })(); /** *** */ /** *** */ /* webpack/runtime/jsonp chunk loading */ /** *** */ ( () => { /** *** */ __webpack_require__ . b = document . baseURI || self . location . href ; /** *** */ /** *** */ // object to store loaded and loading chunks /** *** */ // undefined = chunk not loaded, null = chunk preloaded/prefetched /** *** */ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /** *** */ var installedChunks = { /** *** */ " main " : 0 /** *** */ } ; /** *** */ /** *** */ // no chunk on demand loading /** *** */ /** *** */ // no prefetching /** *** */ /** *** */ // no preloaded /** *** */ /** *** */ // no HMR /** *** */ /** *** */ // no HMR manifest /** *** */ /** *** */ // no on chunks loaded /** *** */ /** *** */ // no jsonp function /** *** */ })(); /** *** */ /** ********************************************************************* */ /** *** */ /** *** */ // startup /** *** */ // Load entry module and return exports /** *** */ // This entry module can't be inlined because the eval devtool is used. /** *** */ var __webpack_exports__ = __webpack_require__ ( " ./src/app.js " ); /** *** */ /** *** */ })() ;

  • 웹팩
  • nodejs
  • babel
  • eslint
hyesoo5115 댓글 5 좋아요 5 조회수 1600

버퍼 오버런 관련 질문 합니다.

미해결

홍정모의 따라하며 배우는 C++

강의에서는 생성자에서 다른 생성자를 호출하는식으로 코드를 작성하였습니다. 그런데, 호출되는 생성자의 코드를 똑같이 적어주는 방식으로하면 컴파일러가 버퍼오버런 경고를 띄어줍니다 그래서 std::vector, std::array, initializer_list, 정적배열 로 실험을 해보았는데, 벡터와 이니셜라이저리스트에서는 똑같은 경고를 띄어주더라구요.. 이런 경고를 띄어주는 이유와, 해결 방법에 대해 질문합니다. vs2019 , 디버그모드입니다.감사합니다 아래 코드를 첨부합니다. 코드를 긁어서 복사하시면 더 편하게 질문을 이해하실 수 있습니다. //강의에서 사용된 코드 #include <initializer_list> #include <vector> #include <array> class My_array { private: unsigned m_length = 0; int* m_ptr = nullptr; public: My_array() {} My_array(const unsigned& length) { m_length = length; m_ptr = new int[m_length]; } My_array(const std::initializer_list<int>& list) //:My_array(list.size()) { //생성자를 호출하지않고 생성자와 똑같은 코드를 적어줌 m_length = list.size(); m_ptr = new int[m_length]; unsigned i = 0; for (const auto& e : list) { m_ptr[i] = e; ++i; } } }; //여기서부터 실험 코드 void print(int* ptr); int main() { //동적 할당을 받은후 정적배열의 데이터들을 복사 int arr[]{ 1,2,3,4,5 }; const int length_arr = sizeof(arr) / sizeof(arr[0]); int* ptr_arr = new int[length_arr]; unsigned i = 0; for (const auto& e : arr) { ptr_arr[i] = e; ++i; } print(ptr_arr); //동적할당을 받은후 std::array의 데이터들을 복사 std::array<int, 5> stdArr {1, 2, 3, 4, 5, }; int* ptr_stdArr = new int[stdArr.size()]; i = 0; for (const auto& e : stdArr) { ptr_stdArr[i] = e; ++i; } print(ptr_stdArr); //동적할당을 받은후 initializer list의 데이터들을 복사 auto list={ 1,2,3,4,5 }; int* ptr_list = new int[list.size()]; i = 0; for (const auto& e : list) { ptr_list[i] = e; ++i; } print(ptr_list); //동적 할당을 받은후 벡터의 데이터들을 복사 std::vector<int> my_vec{ 1,2,3,4,5 }; int* ptr_vec = new int[my_vec.size()]; i = 0; for (const auto& e : my_vec) { ptr_vec[i] = e; ++i; } print(ptr_vec); return 0; } void print(int* ptr) { for (unsigned i = 0; i < 5 ;++i) { cout << ptr[i] << " "; } cout << endl; }

  • 4:40
  • C++
홍재윤 댓글 1 좋아요 0 조회수 1820

권한 요청드립니다.

미해결

Vue.js + TypeScript 완벽 가이드

안녕하세요 vue-advanced 권한 요청드립니다. email: microscope2017@naver.com name: MiGyeong Choi 확인부탁드립니다. 감사합니다.

  • typescript
  • vuejs
gpmobile 댓글 1 좋아요 1 조회수 178

message 처리 질문

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 제가 이번 강의를 듣고 제 토이 프로젝트에 메세지 처리를 추가 하고 싶어서 Bean Validation을 이용한 검증 코딩을 해봤는데요 @Getter @NoArgsConstructor (access = AccessLevel. PROTECTED ) public class LoginRequest { @NotBlank @Size (min = 2 ) @Email private String email ; @NotBlank @Size (min = 8 , max = 20 ) private String password ; } ------------------------------------------------------------------------------------------------- @Getter @NoArgsConstructor (access = AccessLevel. PROTECTED ) public class UserCreateRequest { @NotBlank @Size (min = 2 ) @Email private String email ; @NotBlank @Size (min = 8 , max = 20 ) private String password ; @NotBlank @Size (min = 2 ) private String name ; } 위와 같이 DTO를 만들고 @PostMapping ( "createUser" ) public Result<UserResponse> createUser ( @RequestBody @Valid UserCreateRequest request) throws NotFoundException { return Result. success ( userService .createUser(request)) ; } 컨트롤러에서 @Valid 어노테이션을 줘서 회원가입을 검증하도록 했습니다. 저는 LoginRequest와 UserCreateRequest의 fieldName이 같고 제약 조건도 거의 똑같다고 생각해서 message 처리를 범용성 있게 하면 좋겠다고 생각했고 그래서 validation-properties를 만들고 그 안에 errorCode + objectName + fieldName 보다는 errorCode + fieldName에 관한 메세지 처리를 했는데요 yml server : port : 8060 spring : application : name : potato-velog-user datasource : url : jdbc:h2:mem:testdb driver-class-name : org . h2 . Driver h2 : console : enabled : true settings : web-allow-others : true path : /h2-console messages : basename : validation encoding : UTF-8 eureka : client : register-with-eureka : true fetch-registry : true service-url : defaultZone : http://localhost:8761/eureka validation-properties NotBlank.email = 이메일을 입력해주세요 . NotBlank.password = 비밀번호를 입력해주세요 . NotBlank.name = 이름을 입력해주세요 Size.email = 이메일은 최소 {0} 글자 이상이어야 합니다 . Size.password = 비밀번호는 최소 {0} 글자 최대 {1} 글자 이하여야 합니다 . Size.name = 이름은 최소 {0} 글자 이상이어야 합니다 . Email = 이메일 형식이어야 합니다 . NotBlank = 공백 안돼요 Size = 사이즈 지키세요 그리고 나서 저는 postMan을 이용해 검증을 시도해 봤는데 { "email" : "aaa@naver.com" , "password" : "11111111" , "name" : "a" } 제가 예상했던건 UserCreateRequest의 name이 Size 조건을 만족하지 못헀기 때문에 Size.name에 관한 메세지(이름은 최소 2글자 이상이어야 합니다) 가 나올거라 생각했는데 Validation failed for argument [0] in public com.velog.veloguser.domain.utils.Result<com.velog.veloguser.domain.dto.response.UserResponse> com.velog.veloguser.controller.UserController.createUser(com.velog.veloguser.domain.dto.request.UserCreateRequest) throws javassist.NotFoundException: [Field error in object 'userCreateRequest' on field 'name': rejected value [a]; codes [Size.userCreateRequest.name,Size.name,Size.java.lang.String,Size]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [userCreateRequest.name,name]; arguments []; default message [name],2147483647,2]; default message [크기가 2에서 2147483647 사이여야 합니다]] 위와 같이 DefaultMessage가 ' 크기가 2에서 2147483647 사이여야 합니다' 라고 나옵니다. 저는 왜 메세지가 저렇게 나오는지 이해가 안가고 만약 Size.name에 관한 메세지를 찾지 못했더라도 Size = 사이즈 지키세요 라는 메세지가 validation-properties에 있기 때문에 '사이즈 지키세요' 라는 메세지가 출력되었어야 하는거 아닌가요?

  • MVC
  • spring
윤현식 댓글 4 좋아요 5 조회수 1920

annotation 제거하라고뜹니다...ㅜ

미해결

Do it! 자바 프로그래밍 입문 with 은종쌤

NoteBook 에 display메서드 만들면 annotation제거하라고 뜹니다 MyNoteBook 도 마찬가지로 제거하거나 , NoteBook 에 typing in super type 생성하라고 뜹니다.. DeskTop은 abstract 하지않았고 NoteBook 만 했습니다. ComputerTest 에서채 Computer c2 = DeskTop(); 하면 Computer로 캐스트하던지 DeskTop으로 타입을 바꿔라고 뜹니다.. 영상을 세번쨰 돌려보는중인데 왜그런지 잘 모르겠습니다. ㅜㅜㅜ

  • java
zeies 댓글 1 좋아요 0 조회수 257

span에 display: block줘서 text-align: right 된 부분 문의드려요

미해결

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

안녕하세요 쌤, 몇가지 문의드려요. .notice_list { width : 90% ; float : left ; padding-top : 98px ; overflow : hidden ;} .notice_list ul {} .notice_list ul li { float : left ; width : 33.3333% ; padding-right : 50px ; box-sizing : border-box ; } .notice_list .data { display : block ; text-align : right ;} .data가 span인데 text-align: right이 되려면 블럭요소가 되어야하는게 맞나요? 보통은 부모한테 주면 인라인 자식들이 움직이던데 이부분은 자식이다 적용되면 안되니까 .data만 오른쪽으로 보내려는데 블락요소도 text-align이 되나해서요. 그리고 overflow: hidden을 플롯한 자식의 부모에 주는데 header파트에서 부모에게 안줘도 아무일이 없던데 그런경우도 있는건가요? 그리고 하도 줄상황이 많으니까 cf클래서를 만들어서 부모마다 다 붙이는것도 봤는게 그렇게 하는게 일반적인가요? 감사드립니다~ 초보라 계속 헷갈리는 부분이 많네요.ㅜㅜ

  • jquery
  • 웹 디자인
  • 인터랙티브-웹
Jennifer oh 댓글 1 좋아요 0 조회수 896

div loading

해결됨

Vue.js 시작하기 - Age of Vue.js

loading div는 Vue인스턴스 생성할 때 el로 연결 안 해줬는데 v-if를 어떻게 사용할 수 있는지 궁금합니다. el로 연결해준 태그 안에서만 vue 기능을 사용할 수 있는 줄 알았는데 아닌가요?

  • vuejs
  • javascript
유진이 댓글 2 좋아요 2 조회수 325

header 와 body 사이에 margin이 생깁니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

위처럼 자동으로 마진이 생깁니다... 해결할수있는 방법이 있을까요?

  • 머신러닝 배워볼래요?
  • express
  • react
  • react-native
  • nodejs
  • tensorflow
  • javascript
  • HTML/CSS
psr 댓글 1 좋아요 1 조회수 402

노드 모듈스 파일 질문입니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

저번 강의까진 노드 모듈스 파일이 없었고 갑자기 생겨서 저도 다운받으려고 create-react-app .을 했는데 사진처럼 뜹니다. web이란 폴더 안에 market_web, marker_server 두개의 폴더가 있고 market_web에 깔려있다고 다른 파일인 marker_server에 깔 수 없는건가요?

  • javascript
  • react-native
  • react
  • HTML/CSS
  • express
  • nodejs
  • 머신러닝 배워볼래요?
  • tensorflow
gakaotalk 댓글 4 좋아요 1 조회수 509

Extension 문법

미해결

[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진

안녕하세요 해당 클래스 디자인 패턴??이 너무 신기해서 원리 구조가 궁굼해서 여쭈어 봅니다. 추측상 정적 특징과 + this의 기능이 합쳐져서 GameObject go; go.AddUIEvent( go(암시적) , Action, Define); 이렇게 된다는 것인데... 이게 좀 논리적으로 보았을 때, c#이 억지로 기능을 편의상 개조했다?? 이런 느낌을 받습니다.

  • C#
  • unity
ngh 댓글 2 좋아요 0 조회수 313

C 코드 for 구문 질문

미해결

설계독학맛비's 실전 Verilog HDL Season 1 (Clock부터 Internal Memory까지)

아래 C 코드에서 두 번째 for 구문에요. 변수 j에 대한 언급이 없는데 어떻게 이게 i 의 8승이 될까요? 이 강의가 C 강의가 아닌 거 잘 알고 있는데요.. 아무리 뒤져봐도 명확이 설명해주는데가 없어서 염치불구 하고 여쭤 봅니다. =========================== for (int i = 0; i<100; i++){ long result = 1; for(int j = 0; j < 8; j++) { result *= i; } =========================== 그럼 항상 좋은 강의 감사합니다.

  • fpga
  • verilog-hdl
  • 임베디드
Jeongwung Jeong 댓글 2 좋아요 1 조회수 264

이런 프로그램을 만들고 싶을때 어떤걸 배워야 하는지 궁금합니다.

미해결

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래 링크같은 형태의 견적프로그램을 제작해보고 싶습니다. 업무의 엄청난 도움이 될 상황이어서 배워보려 하는데, 어떤 언어와 어떤코스를 배워야 가능할지가 궁금합니다. http://estimate.ganpancall.co.kr/default.aspx?GIDX=1538154532262

pop-pro 댓글 1 좋아요 0 조회수 179

배열 함수 중 .max() 와 .min() 사용 시 오류가 발생됩니다. 해결 방안을 알고 싶습니다.

미해결

윤재성의 Google 공식 언어 Kotlin 프로그래밍 시작하기

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 배열 함수 중 .max() 와 .min() 사용 시 오류가 발생됩니다. 오류 문구는 다음과 같습니다. Kotlin 고수 선생님들 해결방법 부탁드립니다. 감사합니다. 아울러 아래에 42강 배열 강의 수강하며 작성한 Main.kt 내용 올려드립니다. /* Array - 배열은 그 크기가 늘어나지 않습니다. 1. Array() [형식] Array(개수, {식}) {예시 1} val array0 = Array(5, {100}) // => array0 : [100, 100, 100, 100, 100] {예시 2} 2. arrayOf() - 다양한 형태의 자료형을 저장할 수 있습니다. - 저장할 자료형을 제한하고 싶다면 자료형 + arrayOf() 형태의 함수를 사용합니다. : intArrayOf(), doubleArrayOf(), booleanArrayOf() ... - arrayof<Generic> 도 가능합니다. [형식] array(10, 20, 30 ...) array(10, 11.11, "문자열", true ...) 3. */ fun main() { val array1 = arrayOf(10, 20, 30, 40, 50) println("array1 : $array1") println("array1 : ${array1.contentToString()}") // => array1 : [10, 20, 30, 40, 50] val array2 = arrayOf(100,11.11, "문자열", true) println("array2 : ${array2.contentToString()}") // => array2 : [100, 11.11, 문자열, true] val array3 = intArrayOf(10, 20, 30, 40, 50) val array4 = doubleArrayOf(11.11, 22.22, 33.33, 44.44, 55.55) val array0 = booleanArrayOf(true, false, true, false) val array5 = arrayOf <String>("문자열1", "문자열2", "문자열3") println("array3 : ${array3.contentToString()}") println("array4 : ${array4.contentToString()}") println("array0 : ${array0.contentToString()}") println("array5 : ${array5.contentToString()}") val array6 = Array(5, {100}) println("array6 : ${array6.contentToString()}") val array7 = Array(5, {it * 2}) // it 내부에는 1부터 1씩 증가되는 값이 존재합니다. println("array7 : ${array7.contentToString()}") println("----- For -----") var count = 1 for (item in array1) { println("array1 ($count) : $item") count++ } println("----- Multi-Dimensional Array -----") val array8 = arrayOf(arrayOf(10,20,30), arrayOf(40,50,60), arrayOf(70,80,90)) println("array8 : $array8") println("array8 : ${array8.contentToString()}") // 다차원 배열 출력 방법 .contentDeepToString() println("array8 : ${array8.contentDeepToString()}") for (item1 in array8) { println("item1 : $item1") for (item2 in item1) { println("array8.item : $item2") } } println("----- 배열 출력 사용 방법 -----") println("array1 0 : ${array1[0]}") println("array1 1 : ${array1[1]}") println("array1 2 : ${array1.get(2)}") println("array1 3 : ${array1.get(3)}") println("----- 배열 요소 변경 -----") println("array1 : ${array1.contentToString()}") array1[0] = 100 println("array1 : ${array1.contentToString()}") println("----- 배열 크기 -----") println("array1 size : ${array1.size}") println("----- Kotlin 배열 제공 함수 -----") println("array1 : ${array1.contentToString()}") val array10 = array1.plus(60) println("array1 : ${array1.contentToString()}") // 변화 없습니다. println("array10 : ${array10.contentToString()}") // .plus 함수를 통해서 array10 이라는 새로운 배열을 생성해야 출력이 됩니다. val array11 = array1.sliceArray(1..3) // 배열 요소 추출 println("array11 : ${array11.contentToString()}") // => array11 : [200, 30, 40] println("첫 번째 값 : ${array1.first()}") // => 첫 번째 값 : 100 println("마지막 값 : ${array1.last()}") // => 마지막 값 : 50 println("30의 위치 : ${array1.indexOf(30)}") // => 30의 위치 : 2 println("평균 : ${array1.average()}") // => 평균 : 84.0 println("합 : ${array1.sum()}") // => 합 : 420 println("개수 : ${array1.count()}") // => 개수 : 5 println("개수 : ${array1.size}") // => 개수 : 5 (size Property) println("30을 포함하는가 : ${array1.contains(30)}") // => 30을 포함하는가 : true println("1000을 포함하는가 : ${array1.contains(1000)}") // => 1000을 포함하는가 : false println("30을 포함하는가 : ${30 in array1}") // => 30을 포함하는가 : true println("1000을 포함하는가 : ${1000 in array1}") // => 1000을 포함하는가 : false val array15 = arrayOf(100, 200, 300) // println("최대 : ${array15.max()}") // println("최소 : ${array1.min()}") val array12 = arrayOf(5, 1, 3, 7, 10, 8) val array13 = array12.sortedArray() val array14 = array12.sortedArrayDescending() println("array13 : ${array13.contentToString()}") // => array13 : [1, 3, 5, 7, 8, 10] println("array14 : ${array14.contentToString()}") // => array14 : [10, 8, 7, 5, 3, 1] }

  • 배열
  • android
  • array
  • .min()
  • kotlin
  • .max()
  • 42강
misgradu 댓글 1 좋아요 0 조회수 815

r_valid 신호의 역활

미해결

설계독학맛비's 실전 Verilog HDL Season 1 (Clock부터 Internal Memory까지)

항상 FPGA가 어떻게 하드웨어 가속에 도움이 될까 궁금 했는데 정말 피가 되고 살이 되는 귀중한 강의 였습니다. 코드작성에 r_valid 신호는 왜 쓰인 건가요? 그냥 인풋에 같이 동기화 되서 작동하는 그냥 잉여의 FF 체인 처럼 보이는데, 이름이 valid 인것 보면 중요한 검증 로직인 것 같기고 하구요. 현업에서도 이런식으로 많이 쓰이나요? 좋은 강의 항상 감사합니다.

  • verilog-hdl
  • 임베디드
  • fpga
Jeongwung Jeong 댓글 5 좋아요 2 조회수 901

강의자료 이미지 사용 관련

미해결

데브옵스(DevOps)를 위한 쿠버네티스 마스터

안녕하세요! 이 강의를 보면서 도커와 쿠버네티스를 공부하고 있습니다. 제가 velog를 만들면서, 강의 내용을 정리를 하려고 합니다. 그런데 도커 라이프사이클이라던지 이런 이미지가 필요한 부분들이 있는데요, 강사님의 PPT에서 이미지를 발췌해서 사용해도 될 지 궁금해 문의 드립니다. 살펴 보시고 답변 부탁드리겠습니다. 감사합니다!

  • kubernetes
  • docker
sh s 댓글 1 좋아요 0 조회수 212

ObjectId is not a function

미해결

mongoDB 기초부터 실무까지(feat. Node.js)

별도 선언 없이 ObjectId로 조회를 하려고 하는데 계속 에러가 납니다.. 혹시 다른 문제가 있는 걸까요?

  • javascript
  • mongodb
  • rest-api
  • nodejs
  • aws
  • DBMS/RDBMS
  • 데이터 엔지니어링
성실한 족제비 댓글 1 좋아요 0 조회수 253

후반부 강의자료 부탁드립니다.

미해결

머신러닝 엔지니어 실무

수강평 남겼고, 유익한 강의 잘 듣고 있습니다! 후반부 강의 공유 부탁드립니다 :D jjae0214@naver.com

  • 강의자료
  • 머신러닝 배워볼래요?
이정재 댓글 0 좋아요 0 조회수 225

docker commit에 대해서 궁금한 점이 있습니다

미해결

초보를 위한 도커 안내서

안녕하세요 실행 중인 도커 컨테이너에 대해서 도커 커밋을하려고 하는데, 실행중인 컨테이너의 똑같은 이미지 이름:태그로 해도 실행 중인 컨테이너에 문제가 되지 않나요?

  • docker
젓인 댓글 1 좋아요 1 조회수 246

인기 태그

인프런 TOP Writers

주간 인기글