묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
미들웨어 관련 질문입니다.
조현영님 강좌를 보던 중 express와 미들웨어 관련된 강좌를 보고 express를 사용해 서버를 만들던 도중에 막히는 부분이 있어서 질문해봅니다. (단순 에러 해결 질문은 아닙니다.) const axios = require("axios"); const express = require("express"); const path = require("path"); const morgan = require("morgan"); const app = express(); const hostName = "127.0.0.1"; const port = process.env.PORT || 5147; require("./productServer1"); app.use(morgan("dev")); function getInfoWithAxios(key) { if (key === "1") { res.sendFile(path.join(__dirname, "./productOne.html")); } else if (key === "2") { res.sendFile(path.join(__dirname, "./productTwo.html")); } else { res.sendFile(path.join(__dirname, "./productThree.html")); } } app.set("func", getInfoWithAxios()); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "./expressAPI.html")); }); app.use("/product/:addr", (req, res, next) => { console.log(`you connect on ${req.params.addr}}`); next(); }); app.get("/product", (req, res) => { res.write("<h1>Here is product information</h1>"); res.send(); }); app.get("/product/product1", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[0].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.get("/product/product2", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[1].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.get("/product/product3", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[2].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.use((err, req, res, next) => { console.error(err); res.status(401).send(err.message); }); app.listen(port, () => { console.log(`server is running at http://${hostName}:${port}`); }); 위에 코드를 실행시키면 우선 코드 본문의 내용이 실행됨과 동시에 require()로 productServer1이라는 express를 사용한 상품 데이터 서버가 실행됩니다. (localhost를 사용하고 상품 데이터 서버 포트는 3257)입니다. /product/product(1~3)으로 get메서드를 보내면 같이 실행되는 상품 데이터 서버에서 id값을 받아오고 id값을 getInfoWithAxios(key)함수에 넣어서 html페이지를 id값에 맞게 상품별로 분기하게 됩니다. 이떄 문제는 getInfoWithAxios()함수에 res객체가 없어서 id에 맞게 html페이지를 분기 할 수가 없다는 것입니다. 미들웨어로 처리를 하고 싶지만 방법을 모르겠어서 질문해봅니다. 그리고 app.get() 함수에 있는 각각의 productID를 어떻게 하면 매개변수로 대입 할 수 있는지도 궁금합니다. 요약하자면 함수를 미들웨어로 만들려면 어떻게 작성해야 하고 만든 함수를 접근할때 매개변수는 어떻게 대입할수 있을까요? 조현영님의 이해를 돕기 위해서 전체 프로젝트에 대한 깃 주소를 남겨드리겠습니다. https://github.com/shere1765/node_server/tree/main/small_project 전체 프로젝트에 있는 expressAPI는 문제없이 잘 실행될겁니다. 하지만 제가 원하는 코드는 아닙니다. 그 밖에 문제점이 있다면 피드백 부탁드립니다.
-
미해결함수형 프로그래밍과 JavaScript ES6+
(res.push(a),res).length;
(res.push(a),res).length; 이부분은 어떻게 평가되는건가요..?? 같은 질문하신분의 답변을 봐도 이해가 안됩니다 ㅠ.
-
미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
바닐라
처음 설계하는게 어렵지 기능구현은 쉬운 것 같은데 스케폴딩 하는 부분에서 머리 터질 것 같네요. 그래도 바닐라 자바스크립트 부분은 신경써야 하겠죠?
-
해결됨함수형 프로그래밍과 JavaScript ES6+
infinity
`for(const i of infinity(1)) log(i)`를 하게되면 무한히 값이 생성되서 브라우저가 멈춰버리는데요. odds안에 저렇게 무한히 생성되는 아이를 for문에 조건문으로 적어주었을때 이미 값은 내부적으로 다 만들어져있는 상태인가요?
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
저도 loop함수만 실행하면 오류가떠요!
안녕하세요! 저도 스크립트에서 loop(); 만 실행하면 스크롤 하게되면 강아지있는 사진이 붕 뜨는데 뭐가 문제일까요ㅠㅠ 혹시 코드 봐주실수 있나요!! let x = 0; let y = 0; let mx = 0; let my = 0; let speed = 0.03; let scrollTop = 0; let parallax_0, parallax_1, parallax_2, parallax_3, parallax_4, parallax_5, parallax_6; window.onload = function () { progressBar = document.getElementsByClassName("progressBar")[0]; parallax_0 = document.getElementById("parallax_0"); parallax_1 = document.getElementById("parallax_1"); parallax_2 = document.getElementById("parallax_2"); parallax_3 = document.getElementById("parallax_3"); parallax_4 = document.getElementById("parallax_4"); parallax_5 = document.getElementById("parallax_5"); parallax_6 = document.getElementById("parallax_6"); window.addEventListener('resize', stageResize, false); window.addEventListener('mousemove', mouseMove, false); window.addEventListener('scroll', scrollFunc, false); stageResize(); loop(); } function scrollFunc(e) { scrollTop = document.documentElement.scrollTop; let per = Math.ceil(scrollTop / (_documentHum - _windowHNum) * 100); progressBar.style.width = per + '%'; parallax_0.style.transform = "translate3d(0px," + scrollTop * .03 + "px, 0px)"; parallax_1.style.transform = "translate3d(0px," + -scrollTop * .03 + "px, 0px)"; parallax_2.style.transform = "translate3d(0px," + -scrollTop * .12 + "px, 0px)"; parallax_3.style.transform = "translate3d(0px," + -scrollTop * .16 + "px, 0px)"; parallax_4.style.transform = "translate3d(0px," + -scrollTop * .22 + "px, 0px)"; parallax_5.style.transform = "translate3d(0px," + -scrollTop * .25 + "px, 0px)"; } function stageResize(){ _documentHum = document.body.offsetHeight; _windowHNum = window.outerHeight; } function loop(){ mx += (x - mx) * speed; my += (y - my) * speed; parallax_4.style.transform = "translate3d(" + mx / 140 + "px ," + -scrollTop * 22 + "px, 0px)"; parallax_5.style.transform = "scale(1.1) translate(" + mx / 50 + "px," + -scrollTop * 25 + "px)"; parallax_6.style.transform = "scale(1.2) translate(" + -mx / 20 + "px," + -my / 20 + "px)"; window.requestAnimationFrame(loop); } function mouseMove(e){ x = (e.clientX - window.innerWidth / 2); y = (e.clientY - window.innerHeight / 2); }
-
해결됨타입스크립트 입문 - 기초부터 실전까지
인터페이스 함수 파라미터
안녕하세요, 기효님 함수의 인터페이스를 정의 후 아래와 같이 파라미터를 하나만 적어보았는데 에러를 발생시키진 않더라고요. 정작 sum을 사용할 때는 파라미터를 하나만 넘기지 못하게 에러가 발생합니다. 왜 파라미터의 개수에 대해서는 에러 표시를 내지 않는가요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
여러분 Math.min 써도 된다고 합니다~!
.
-
미해결
2명의 클라이언트가 접속했을 때 카운트 시작하는 시스템을 만들고 싶은데 어떤 코드를 사용해야 할까요?
일부분만 발췌해서 가져왔습니다. 2명의 클라이언트가 접속했을 때 index.js에서 접속자 수를 받아오고, html 내 script에서 카운트 실행 코드를 작성했는데 2명 이상이 접속해야 카운트가 실행되는 코드는 어떻게 작성해야 하는지 모르겠네요. 어떤 방법이 있을까요 ?? //index.js io.sockets.on("connection",(socket)=>{ const req=socket.request; const ip=req.headers['x-forwarded-for']||req.connection.remoteAddress; console.log("새로운 클라이언트 접속",ip,socket.id, req.ip); user_count++; io.emit('users.count',user_count); //client.html <script> let socket=io(); socket.on('users.count', function(number) { document.getElementById('users-count').innerHTML=number; let user_count = document.getElementById('users-count').value; if(number==2){ var count=10; var counter=setInterval(function(){ if(count<=0){ clearInterval(counter); document.getElementById("timer").innerHTML="Finished"; } else { document.getElementById("timer").innerHTML=count+"초 남았습니다"; } count-=1; },1000); } }); </script>
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm start가 안됩니다 꼭 좀 확인해주세요ㅜㅜ
creat-react-app은 다 설치가 되었는데 npm start가 안됩니다ㅜ cmd에서도 터미널에서도 안되는데 어떻게 해야 좋을까요? react를 겨우 설치하고 나니 또 이런 문제가 생겨서 너무 마음이 속상합니다ㅡㅜㅜ
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
24:53 spacebar 예외처리
addTodo 함수 내부에 if문 예외처리 시 연속된 space bar를 누르면 추가가 되는 부분이 있습니다, js로직으로 어떻게 예외처리가 가능할 지 답변 가능할까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
4:56 새로운 객체를 반환
판교님, 질문있습니다. data는 function()에 다시 새 객체를 반환하는데, methods는 바로 객체를 열어서 addTodo: ... 로 작성하는 이유를 알 수 있을까요?
-
미해결
npm i error
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.ㅣ이러한 에러가 뜨는데 해결법좀 부탁드립니다..
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
선생님 하이오더 컴포넌트를 사용하는 이유는 무엇인가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 선생님 하이오더 컴포넌트가 CreateListView.js이잖아요. 이걸 쓰는 이유가 중복되는 코드의 재사용이라고 하셨는데요. NewsView, JobsView, AskView에서 List로 뿌려주는 부분이 공통적이기 ListView.vue라는 공통 컴포넌트를 만들어 줬잖아요. 그렇다면 데이터를 불러오는 부분이 공통적이면 ListView.vue처럼 공통적인 소스코드를 넣을 컴포넌트를 만들면 되지 않나요? js파일이라는 하이오더 컴포넌트랑 공통부분을 따로 뺀 vue 파일이랑 어떤 부분이 차이점이 있는지 잘 이해가 되지 않습니다.
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
선생님 cli 4.5이상은 default Vue2로 설치하면 test내용이 없습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 강의 아래 이미지에 vue cli 4.5x는 default vue2를 선택해서 프로젝트를 생성하라고 나왔는데요. 그럼 관련된 test는 안깔립니다. npm i -g jest로 설치했는데요. jest외에 더 설치해야 하는게 있나요?
-
미해결Vue.js 시작하기 - Age of Vue.js
vue cli 설치 오류
- (base) mac@Macui-MacBookPro learn-vue-js-master % npm install -g @vue/cli npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/ npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address' npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead changed 944 packages, and audited 945 packages in 24s 65 packages are looking for funding run `npm fund` for details 23 vulnerabilities (4 moderate, 19 high) To address issues that do not require attention, run: npm audit fix Some issues need review, and may require choosing a different dependency. Run `npm audit` for details. npm 최신 안정버전설치, 전부 삭제 후 그냥 최신 버전 설치 다 해봤는데 cli 설치가 안되네요. npm audit fix하면 (base) mac@Macui-MacBookPro learn-vue-js-master % npm audit fix npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli added 245 packages, and audited 246 packages in 2s 7 packages are looking for funding run `npm fund` for details # npm audit report ansi-regex >2.1.1 <5.0.1 Severity: moderate Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw fix available via `npm audit fix` node_modules/inquirer/node_modules/ansi-regex node_modules/string-width/node_modules/ansi-regex strip-ansi 4.0.0 - 5.2.0 Depends on vulnerable versions of ansi-regex node_modules/inquirer/node_modules/strip-ansi node_modules/string-width/node_modules/strip-ansi inquirer 3.2.0 - 7.0.4 Depends on vulnerable versions of string-width Depends on vulnerable versions of strip-ansi node_modules/inquirer vue-cli >=2.9.0 Depends on vulnerable versions of inquirer node_modules/vue-cli string-width 2.1.0 - 4.1.0 Depends on vulnerable versions of strip-ansi node_modules/string-width 5 moderate severity vulnerabilities To address all issues, run: npm audit fix 이렇게 나와서 npm audit fix 하면 또 위에 상황 반복이구요... 전에 vue 잘 설치해서 공부하다가 잠깐 쉬고 지금 다시 설치하는건데 계속 안되서 진행을 못하고 있습니다....ㅠ
-
미해결코어 자바스크립트
메모리의 주소와 데이터 확인 방법에 관한 질문입니다!
강사님 안녕하세요.좋은 강의 감사합니다.제가 선언한 변수들이 어떤 주소에 어떤 데이터로 저장되어 있는지 강의 3분 30초에 나오는 것 처럼 실제로 확인해보고 싶은데 개발자 도구나 소스로 확인 할 수 있는 방법이 있을까요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
numOne을 음수로 시작하기
numOne을 음수로 설정하기 위해서 아래와 같이 else if문을 추가해 보았습니다. 추가한 위치와 방법이 옳바른지 알고싶습니다. const onClickOperator = (op) => () => { ... if (numOne) { operator = op; $operator.value = op; } else if (!numOne && op === '-') { operator = op; $operator.value = op; } else { alert('숫자를 먼저 입력해주세요.'); } };
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
answer 여러 개 나옵니다.
아무 선택지나 누른 후 새로고침을 하고 다시 시작하기 버튼을 누르면 answer가 여러개가 나옵니다. 크게 불편함은 없지만 신경이 쓰이는데 없애는 방법은 없을까요?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문드립니다 ㅠㅠ
안녕하세요 , 수업 제공 정말 감사합니다! 따라하던중 버튼을 누르면 index파일에서 begin을 정의하지않았다며 오류가 뜨네요 ㅠㅠ start.js const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); function begin(){ main.style.display = "none"; qna.style.display = "block"; } index button~~html부분 <button type="button" class="btn btn-danger mt-3" onclick="js:begin()"> 시작하기 </button> </section> <section id="qna"> <p>test!</p> </section> <section id="result"> </section> <script scr="./js/start.js" charset="utf-8"></script>
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
Object type의 toString에 대해서
안녕하세요 강의를 듣다가 궁금증이 생겨서 질문 드리게 되었습니다. Built-in Object타입의 toString의 경우 어떤식으로 사용 할 수 있나요? 제가 테스트 해본 코드는 var object = {1: 123}; console.writeline(object.toString()); 이었습니다만 그 결과가 [object object]로 나왔습니다. 예상으로는 property의 이름이나 값을 출력해줄 것이라 생각했는데 단지 []괄호와 object만 출력이 되어 내부가 어떻게 돌아가는지 잘 이해가 가지 않아 질문드리게 되었습니다. 감사합니다.