묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Node.js 교과서 - 기본부터 프로젝트 실습까지
GCP관련질문입니다.
제로초님이 하신대로 gcp 컴퓨트엔진으로 생성해서초기설정(apt-get update, npm 설치등등)하고 express-generator로 express 제일 기본앱을 만들었는데외부아이피로 3000포트 붙여서 접속해도 계속 로딩만 돌고 접속이 안되어서 질문드립니다. 혹시 방화벽 문제인가 싶어서 방화벽도 수신,송신을 3000을 다 열어놨는데도 안되고그래서 bin/www열어서 3000포트를 80번 포트로 바꿨더니`Port 80 requires elevated privileges`라는 에러가 뜨네요어떻게 해결하면 좋을지 조언을 구합니다.강의 감사히 보고있습니다~!!
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
this에 관한 질문
객체에서의 this는 자기자신을 가르킵니다. 근데 es6 화살표함수를 사용하면 window를 가르키던데 제가 알기론 일반 함수가 실행되면 함수 컨텍스트가 만들어지고 그 안에 this, 변수객체, scopeChain가 정의되어져 있는걸로 알고 있습니다. 근데 es6 화살표 함수가 실행되면 함수 컨텍스트안에 this라는 것이 없고 변수객체에 this를 변수로서 상위 scope의 this를 가져오는게 맞을까요? 그래서 es6 화살표함수에는 bind()가 먹히지 않는지 궁금합니다..
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
mutations 의 인자 갯수
payload 인자를 객체화 시켜서 한번에 넘겨주지 않고 이렇게 넘겨주어도 작동은 하는데 방법은 상관이 없을까요? removeOneItem(state, todoItem, index) { localStorage.removeItem(todoItem.item); state.todoItems.splice(index, 1); },
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
오류
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Mdoal> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <TodoInput> <App> at src/App.vue <Root> slot으로 만들어준 cusotm header만 출력이 됩니다. 버튼이나 배경 모달창은 뜨지 않습니다. 어떻게 해결해야되나요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
splice
7:00 분 경에 splice가 원래 있던 배열을 변경해서 새로운 배열을 반환해주신다고 하셨는데 새로운 배열을 반환해주는게 아닌 그냥 해당 배열을 변경만 해주는걸로 이해해도 될까요?
-
해결됨Vue.js 시작하기 - Age of Vue.js
데이터 바인딩 관련 질문입니다..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app"></div> <script> // 대부분의 오픈소스 라이브러리들은 IIFE를 활용한다. (function () { function init() { var div = document.querySelector("#app"); var viewModel = {}; Object.defineProperty(viewModel, "str", { get: function () { console.log("접근"); }, set: function (newValue) { console.log("할당", newValue); render(newValue); }, }); } function render(value) { div.innerHTML = value; } init(); })(); </script> </body> </html> 질문이 있습니다. 데이터 바인딩이라는 것이 viewModel을 Object.defineProperty(viewModel) 하는 것까지이고 set이라는 속성을 통해 데이터값에 변화가 있다면 화면에 재랜더링 하는 것을 Reactivity 라고 생각하면 될까요? 아니면 데이터 바인딩라는 개념에 Reactivity를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?
-
해결됨Vue.js 시작하기 - Age of Vue.js
템플릿
템플릿 문법 이라는 단어에서 템플릿이란 template:'<div></div>' 이렇게 사용되는 속성으로 알고 있습니다. 근데 이 속성을 사용하지 않고 <div id="app"></div> 안에서 사용되는 태그에 템플릿 문법을 사용하고 있는데 뷰의 템플릿 문법은 템플릿 속성에 한정해서 사용하는 것이 아니라 그냥 뷰로 화면을 조작하는 방법이라고 받아들이면 될까요?
-
해결됨Vue.js 시작하기 - Age of Vue.js
라우터와 라우팅의 차이.
라우팅이라는 것은 각 url에 따른 정보 처리를 의미하면 라우터의 의미는 무엇인가요?
-
해결됨Vue.js 시작하기 - Age of Vue.js
질문
데이터바인딩이라는 문법에서는 Object.defineProperty 라는 api를 사용하는데 이 api가 props에 도 적용되어있다고 강의에서 말씀하셨습니다. 이 부분이 이해는 가는데 Vue라는 생성자 함수에서 Object.defineProperty가 Vue라는 생성자함수에서 어떤식으로 사용되고 있는지와 Vue 생성자함수가 어떻게 구현되어있는지에 대해서 알 필요가 있을까요? 너무 깊게 들어가는것이 아닌 그냥 쓰는 방법에 익숙해지는게 맞는지 궁금합니다.
-
미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
퍼포먼스/가독성
초보적인 질문입니다 ㅠㅠ 1.지연 평가/즉시 평가 예제에서 L.map과 L.filter그리고 reduce를 조합해서 써주셨는데요 이전 강의부터 궁금했던 건데 지연 평가를 한다고 해도, reduce의 경우 takeAll처럼 결국 이터러블/이터레이터를 모두 평가를 해야되기 때문에 지연 평가나 즉시 평가나 시간복잡도/퍼포먼스적인 부분에서 차이가 없는 것이 아닌가 생각되는데 이것이 맞나요? 제 생각에 지연 평가는 take(작은 수)로 이터러블의 모든 요소를 순회/평가하지 않아도 되는 경우에만 의미가 있는 것 같은데, 뭔가 놓친 부분이 있는 것은 아닌지 궁금합니다 2.reduce only / reduce + map + filter 강의에서 말씀해주신 부분에서만 추측해보자면, 함수 합성으로 하시는 이유가 추상화/재사용성/가독성 등의 이유가 주된 이유인 것 같습니다. 그런데, map, filter, reduce의 조합이면 일단 순회를 3차례 돌아야 하는 것이고, reduce만 쓰면 순회는 1차례에서 끝날 텐데, 혹시 퍼포먼스적인 부분에서는 차이가 없나요? 1번 질문이랑 연결해서 (이터러블의 모든 요소를 순회해야 한다면) 지연 평가를 한다고 해도 평가를 그때 그때 필요한 시점에 하는 것일 뿐, 평가를 덜해도 되는 것이 아니기 때문에 제 생각에는 최종 평가까지 걸리는 시간이 더 들 것 같은데... (console.time을 찍어봤지만 간단한 예제라서 그런지 실행 시간에는 별 차이를 느끼지 못했습니다...)
-
미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
ws.has(arr) 문의 입니다.
arr = null을 했다고 하더라도, 가비지 컬렉터 입장에서 보면 ws에서 참조 중이기 때문에 가비지 컬렉견 대상으로는 되지 않을 것 같습니다. 가비지 컬렉션 대상으로 인식한다는 근거로 제시하신 것이 ws.has(arr) 인데, arr에 null값을 넣고 하였으니... ws.has(null)이니 당연 false나오는 거 아닌가요? 답변바랍니다
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
import에 { } 가 들어가는 이유가 뭔가요??
1:40 헬퍼의 사용법에서 import { mapState } from 'vuex'로 import 문에 전부 중괄호가 들어가 있는데요. 왜 여기는 중괄호가 들어가야 하나요? 규칙같은건가요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
getters의 parameter 관련 질문
안녕하세요. 강의를 보다 궁금한점이 있어서 질문드립니다. getters를 이리저리 사용해 보다가 getters에 parameter를 넣어야 할 경우가 생겨서 검색해보니, Vuex 공식 문서에서 다음과 같이 사용하라고 안내가 되어 있습니다. getters: { getNumber: state => num => { return num * 2; } } 여기서 첫 번째로 궁금한 점은 저 문법이 단순히 Vuex의 함수 정의 문법인지, ES6 문법인지 궁금합니다. 추가로 궁금한 부분은 저 표기 외에 다른 방식으로 parameter를 받을 수 있는 방법이 있는지도 궁금합니다. Vue 와 ES6 모두 초보라 아직 함수 리터럴에 대해 익숙지 않아 질문 드려봅니다 ^^;
-
미해결React로 NodeBird SNS 만들기
react-helmet
6버전 이상부턴 default export가 없어서 import {Helmet} from 'react-helmet'; 이렇게 받아와야 하는거 같아요 버전 업데이트를 하면서 default export를 안쓰고 {}로 감싸고 import 해와야 하는데, 질문) 패키지에 어떤 기능추가를 위해서 저렇게 default export를 안쓰고 바꾸는 건가요?? 보통 어떤경우에 패키지 개발자가 저렇게 바꾸는지 궁금합니다.
-
미해결페이스북 클론 - full stack 웹 개발
직접 따라하기 전에 완성된 페이지 구동시켜보고 싶습니다.
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
-
미해결React로 NodeBird SNS 만들기
미들웨어 이렇게 추가하는거 맞나요..??
middleware.js exports.postExist = async(req,res,next)=>{ const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send("해당 페이지가 존재하지 않습니다"); } next(); } post.js router.delete('/:id', isLoggedIn, postExist, async(req,res,next)=>{ try{ await db.Post.destroy({ where: {id: req.params.id}}); res.send(req.params.id); }catch(e){ console.error(e); next(e); } }) next()만 추가해서 다음 동작으로 갈수있게 해주었는데 더 추가할게 있는지 궁금합니다..!
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
$router $route
$router 는 이해가 되는데.. $route 이것은 어디에서 설정되었는지요.. 그리고 하나 더 궁금한 것이 있는데... 다른 vue 연습때문에 router/index.js path가 너무 많아서 store 모듈처럼 여러 파일로 쪼개고 싶은데 구글링 해보면.... 예제처럼 하면 에러가 나던데..ㅠ.ㅠ 그것도 좀 구현 사례나 github 예제좀 알려주세요... 강의 고맙습니다.....
-
미해결React로 NodeBird SNS 만들기
질문있습니다
1. 프론트에서 넥스트와 익스프레스를 연결했는데, 그러면 프론트에서도 익스프레스로 서버를 돌리고 백엔드에서도 익스프레스로 서버를 돌리면, 각각의 익스프레스로 프론트,백 서버를 돌리는것이 맞나요?? 2. 프론트에서 넥스트와 익스프레스를 연결한건 동적라우팅을 쓰려하는데, 넥스트에서 안되니 그저 익스프레스를 동적라우팅을 쓰기위한 수단으로 사용하는 건가요??
-
해결됨모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
도움될까 해서 올립니다.
const SETTING = { name: "LOTTO", count: 6, maxNum: 45 } function getRandomNum() { const arrRanNum = new Set(); const {count, maxNum} = SETTING; while(arrRanNum.size < count){ const num = Math.floor(Math.random() * maxNum) + 1; console.log(num); // 랜덤 확인 arrRanNum.add(num); } return Array.from(arrRanNum); } console.log(getRandomNum()); 더 좋은 방법이 있을까 궁금하네요
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
렌더링시 두번씩 반복 됩니다.
shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다. 확인부탁드리겠습니다. 감사합니다.
