묻고 답해요

post

미해결

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

post 형식의 body인데 어떻게 name부터 imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app . post ( " /products " , ( req , res ) => { const body = req . body ; const { name , description , price , seller , imageUrl } = body ; models . Product . create ( { name , description , price , seller , imageUrl , } ) . then ( ( result ) => { console . log ( " 상품 생성 결과 : " , result ) ; res . send ( { result , } ) ; } )

• react-native
• 머신러닝 배워볼래요?
• tensorflow
• HTML/CSS
• nodejs
• react
• javascript
• express

실무에서 styled-components 업무

미해결

[리뉴얼] React로 NodeBird SNS 만들기

제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면 기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.

• redux
• react
• express
• nodejs
• Next.js

패스포트 없이 로그인 기능

미해결

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지

안녕하세요 제로초님. 패스포트 사용이 너무 번거로워, 기본적인 쿠키와 세션만을 이용해서 로그인 기능을 구현해보려 하는데, 이럴 경우 프론트에서 게시글이나 댓글 요청을 보낼 때 매번 쿠키를 담아서 보낸뒤 인가(?)를 받는 식으로 하면 되나요? 그리고 실제로 실무에서도 로그인 기능 만들 때에도 패스포트를 많이 사용하는지 궁금합니다.

• nodejs
• nodejs
• passport
• mysql
• mongodb
• Sequelize

프론트 코드는 어디서 받나요?

해결됨

탄탄한 백엔드 NestJS, 기초부터 심화까지

https://github.com/amamov/teaching-nestjs-a-to-z 에 있는 frontend 디렉토리가 프론트코드인가요?

• nodejs
• express
• mongodb
• ssr
• NestJS

analyze 질문이여

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??

• nodejs
• redux
• express
• react
• Next.js

map undefined 오류 질문드립니다

미해결

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

코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import " ./index.css "; import axios from " axios "; import React from " react "; import { API_URL } from " ../config/config.js "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( `${ API_URL } /products ` ) . then ( function ( result ) { console . log ( " RESULT값: " , result ) ; const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . log ( " error발생 " ) ; } ) ; }, []) ; return ( < div > < div id = " banner " > < img src = " images/banners/banner1.png " /> </ div > < h1 > 판매되는 상품들 </ h1 > < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < div > < div className = " product-contents " > < span className = " product-name " >{ product . name }</ span > < span className = " product-price " >{ product . price } 원 </ span > < div classNmae = " product-footer " > < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " /> < span >{ product . seller }</ span > </ div > </ div > </ div > </ div > </ div > ) ; } ) } </ div > </ div > ) ; } ####App.js export default MainPage ; import " ./App.css "; import MainPageComponent from " ./main "; function App () { return < MainPageComponent /> ; } export default App ; ##server const express = require ( " express " ) ; const cors = require ( " cors " ) ; const app = express () ; const port = 7070 ; const models = require ( " ./models " ) ; app . use ( express . json ()) ; app . use ( cors ()) ; app . get ( " /products " , ( req , res ) => { models . Product . findAll ( { attributes : [ " id " , " name " , " price " , " imageUrl " , " seller " , " createdAt " ] , } ) . then ( ( result ) => { console . log ( " RESULT값 : " , result ) ; res . send ( { product : result , } ) ; } ) . catch ( ( error ) => { console . error ( " ERROR가 발생하였습니다: " , error ) ; } ) ; } ) ; app . listen (port , () => { console . log ( " 그랩 마켓의 서버가 돌아가고 있습니다. " ) ; models . sequelize . sync () . then ( () => { console . log ( " ✓ DB 연결 성공 " ) ; } ) . catch ( function ( err ) { console . error ( err ) ; console . log ( " ✗ DB 연결 에러 " ) ; process . exit () ; } ) ; } ) ;

• 머신러닝 배워볼래요?
• react-native
• javascript
• react
• HTML/CSS
• express
• nodejs
• tensorflow

[MAC] create-react-app에서 permission 에러 해결책

미해결

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

질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/

• nodejs
• javascript
• 머신러닝 배워볼래요?
• react
• HTML/CSS
• react-native
• tensorflow
• express

age가 숫자인지 다시 체크하는 이유

해결됨

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

안녕하세요! 좋은 강의 잘 듣고 있습니다. 다름이 아니라 질문이 있어 글을 남깁니다. 이미 User.js에서 age: Number로 설정해두었기 때문에 숫자 외의 것이 들어온다면 catch문에서 제대로 에러 처리가 될 것 같은데, 따로 라우트 내에서 age가 숫자인지 아닌지를 다시 체크하는 이유가 궁금합니다. 감사합니다!

• 데이터 엔지니어링
• rest-api
• mongodb
• DBMS/RDBMS
• javascript
• aws
• nodejs

Filter도 결국 middleware에서 처리할 수 있을거 같은데 나누는 이유가 있을까요?

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

Filter도 결국 middleware에서 처리할 수 있을거 같은데 나누는 이유가 있을까요?

• express
• nodejs
• mongodb
• NestJS
• ssr

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

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

미해결

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

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

• javascript
• react-native
• react
• HTML/CSS
• express
• nodejs
• 머신러닝 배워볼래요?
• tensorflow

프로필 페이지에서 새로고침 시 오류

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??

• nodejs
• react
• redux
• express
• Next.js

404 오류

미해결

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

product array에 설정한 값이 다 있는 걸 보면 서버가 정상적으로 돌아가는 것 같은데 위에 404에러가 뜨는 이유가 뭘까요.?

• 머신러닝 배워볼래요?
• HTML/CSS
• nodejs
• react
• react-native
• express
• tensorflow
• javascript

리액트 service workers

미해결

예전 리액트에서는 앱 인스톨만해도 서비스 워커스라는 파일이 있던데 요즘은 업데이트 되면서 사라진건가요??

• 리액트
• nodejs
• 리액트js
• react

next.js에서 swr 서버사이드 렌더링 질문드립니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps : GetServerSideProps = async function ({ req }) { const cookie : string = req ? req . headers . cookie : '' ; if ( cookie ) { const data = await fetcher . get ( '/user' , { cookie }); if ( data ) { return { props : { userProps : data }, }; } } return { props : { userProps : null }, }; }; function Index ({ userProps }: InferGetServerSidePropsType < typeof getServerSideProps >) { const { data : user } = useSWR < IUser >( '/user' , fetcher . get , { initialData : userProps }); return < AppLayout > { user ? user . nickname : '로그인해주세요' } </ AppLayout > ; } components/AppLayout.tsx function AppLayout () { const { data : user } = useSWR < IUser >( '/user' , fetcher . get ); return ( < div css = { userNavStyle } > { user ? ( <> < Profile image = { user . profile } size = '40px' /> </> ) : ( < Link href = '/login' > < a href = '' className = 'login' > 로그인 </ a > </ Link > ) } </ div > ); }

• Next.js
• express
• redux
• nodejs
• react

이거 좀 너무 "코드보고 따라치세요" 식 아닌가요?

미해결

코로나맵 개발자와 함께하는 지도서비스 만들기 2

제가 이 강의의 기초강의인 코로나맵1을 안듣고 바로 2를 들어서 그런지 모르겠지만.. 아직 만들지도 않은 tag들에 CSS를 적용 하고 API들의 기능들에 이런저런 설명도 하나 없고~ 너무 따라치세요~ 식 강의 아닌가요? 이 강의 5분 들으면 공식문서 뒤져서 id네임은 꼭 저렇게 쓰라고 정해진건지~ map div에 style은 꼭 인라인으로 써야하는 건지 Event는 뭔지, 왜 addEventListener가 아니고 addListener인지 이거저거 하나하나 뒤져가면서 진도를 나가고 있습니다. 이거 강의가 5만원가까이 되는걸로 기억하는데 결과물은 어떨지 모르겠으나 강의 내용이 너무너무 부실하네요!!

• mongoose
• mongodb
• nodejs
• express
• 웹앱

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: 에러

미해결

안녕하세요? 보시는 것 처럼, react(프론트)/nodejs(서버) 로 간단한 앱을 만들고 heroku에 배포했더니 Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. Refused to load the font 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 이런 오류 메세지가 계속 뜹니다. 많은 구글 결과 아래와 같이 메타태그를 넣어줘도 동일한 에러가 발생합니다. <meta http-equiv= "Content-Security-Policy" content= "default-src 'self' ; style-src 'self' 'unsafe-inline' https://fonts.gstatic.com/* data:; font-src 'self' data:; " > 정말 몇일 동안 ...이것만 붙들고 있는데도 해결이 안되네요 ㅠㅠ 아시는 분 부탁드립니다.

• react
• heroku
• nodejs
• deploy
• csp

그대로 따라한것 같은데 에러가 뜨는데 확인 부탁드립니다.

미해결

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

Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS D:\learn-all-with-javascript\grab-market-web> npm install -g create-react-app C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app -> C:\Users\motiongrapher\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@4.0.3 added 67 packages from 25 contributors in 5.659s PS D:\learn-all-with-javascript\grab-market-web> create -react-app . 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create -react-app . + ~~~~~~ + CategoryInfo : ObjectNotFound: (create:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app . 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app. 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web> create-react-app . create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> npm create-react-app. Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, clean-install, clean-install-test, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, fund, get, help, help-search, hook, i, init, install, install-ci-test, install-test, it, link, list, ln, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, uninstall, unpublish, unstar, up, update, v, version, view, whoami npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\motiongrapher\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@6.14.13 C:\Program Files\nodejs\node_modules\npm PS D:\learn-all-with-javascript\grab-market-web> create-react-app. create-react-app. : 'create-react-app.' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web>

• nodejs
• express
• react-native
• react
• HTML/CSS
• javascript
• tensorflow
• 머신러닝 배워볼래요?

npm run start 시 cannot find module 에러

미해결

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

강의 내용 중 npm run start하는 과정에서 자꾸 에러가 뜹니다 .. 다음 영상으로의 진도를 못나가는 상황이라 질문 올려봅니다 ㅠㅠ npm run start > chatbot-app@1.0.0 start > node index.js C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js:57 throw e; ^ Error: Cannot find module 'C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\node\extension_binary\node-v93-win32-x64-unknown\grpc_node.node' Require stack: - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\client_interceptors.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\client.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\google-gax\build\src\grpc.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\google-gax\build\src\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\v2\agents_client.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\v2\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\index.js - C:\Users\ddffs\Desktop\chatbot-starter\server\routes\dialogflow.js - C:\Users\ddffs\Desktop\chatbot-starter\index.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:927:15) at Function.Module._load (node:internal/modules/cjs/loader:772:27) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:93:18) at Object.<anonymous> (C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js:32:13) at Module._compile (node:internal/modules/cjs/loader:1095:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:816:12) at Module.require (node:internal/modules/cjs/loader:999:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\grpc_extension.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\client_interceptors.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\client.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\google-gax\\build\\src\\grpc.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\google-gax\\build\\src\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\v2\\agents_client.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\v2\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\server\\routes\\dialogflow.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\index.js' ] }

• nodejs
• react

상품 세부설명페이지에서 데이터 값 통신이 안되네요

미해결

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

main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요

• javascript
• nodejs
• react-native
• tensorflow
• HTML/CSS
• 머신러닝 배워볼래요?
• express
• react