설문조사 실습에서 for (var j = 0; j < list[i].options.length; j++) // 이 부분에서 에러가 나타납니다.Uncaught TypeError: Cannot read property 'length' of undefined at survey.html:23뭐가 문제일까요...?

안녕하세요? 강의 재밌게 잘 들었습니다. 호이스팅 관련된 질문이 있습니다. 강의를 보고나니 호이스팅, 즉 스코프 내에서 선언과 할당을 분리하는 방식이 언어 설계 상에 어떤 의도가 있는지 의문이 생겼는데요. 열심히 구글링을 해보니 1.  JS 엔진이 코드를 실행하기 앞서서 컴파일 과정을 거치고 이 컴파일 과정에서 먼저 선언문을 처리함으로써 각 선언문의 렉시컬 스코프를 결정해주기 위해서라는 결론에 도달했습니다. 그런데 어차피 실행 하기 전에 컴파일 되는 방식이라면요.  굳이 선언을 올리는 방식이 아니라 다른 언어들처럼 컴파일러가 알아서(죄송하지만 구체적으로 표현을 못하겠습니다) 최적화된 기계어를 뽑아낸 다음에 그걸 실행시키면 되는게 아닌가? 라는 의문이 생겼습니다. 다시 구글링을 열심히 해보니  2. JS는 브라우저에 렌더링 하기 직전 짧은 시간에 컴파일을 해줘야 하기 때문에 위와 같은 방식이 불가 하고 컴파일과 인터프리팅을 한 번에 top-down으로 쭉 해줘야 한다는 내용을 알게되었습니다. 저는 1과 2를 합해서 3. 현재 스코프의 모든 선언문이 어디서 나타나든 실행 전에 컴파일 과정을 지나게 해야한다. 그래야 top-down으로 컴파일->인터프리팅이 가능하기 때문이다. 그래서 호이스팅으로 현재 스코프의 선언문을 먼저 올려야 한다. 라는 결론을 내렸는데요. 1과 2에 대한 정보는 많은데 3에 대한 자세한 잘 못찾겠어서 이곳에 질문을 남깁니다. 3의 내용에 잘못된 부분이 있는지 알려주신다면 감사하겠습니다. 긴 질문 읽어주셔서 감사합니다. 답변 기다리도록 하겠습니다.

cli이전 html 작성코드를 Open with Live Server로 실행했을때는 개발자코드에 vue탭이 보였는데요. localhost:8080에서 개발자코드를 열면 vue탭이 안보입니다.

강의대로 input 태그 중 radio를 이용해 성별을 선택할 수 있도록 했을때 중복선택이 가능하고 한번 누르면 취소가 안됩니다. 중복을 허용하지 않도록 하는 방법이 있을까요?

https://codepen.io/mikilll94/pen/RwbYrpz 간단한 예제인데요. 데이터가 많을때 v-model 바인딩을 하면 속도가 엄청느려지는데 이유가 뭔가요 v-model 동작방식과 관련이 있을까요??..  그리고 해결방안이 있을까요 

이미지 경로의 문제가 있는건가요???

안녕하세요. 강의중 소개된 fxsql과 관련하여 질문이 있어서 남기게 되었습니다. - fxsql의 ASSOCIATE 를 사용시 서로다른 테이블들을 각각 select하여 데이터를 가져오는것으로 확인하였는데 join을 사용하여 쿼리를 날리는 방법은 없는것일까요? - fxsql로 구성된 서버를 local, staging, production과 같은 서로다른 환경으로 분리하여 사용 시 데이터베이스 테이블이나 필드같은 부분은 어떤식으로 동기화하여 사용하는것이 best practice일까요? 좋은강의 정말감사드리며 다음 강의가나오길 기대하고 있습니다!

많은 분들이 헷갈려 하시는 것이 첫번째로 로그인할때 headers 에 Authorization 부분이 비어 있는 부분이 강의에 나오지 않아 헷갈려하시는것 같습니다. 현재 강의에서는 강사님도 로그인을 첫번째로 하시고 토큰값을 받아온 뒤 로그아웃 이후 다시 로그인을 하셔서 토큰값을 서버에 보내신것같습니다. 첫번째 로그인할때는 당연히 토큰을 받아온게 없으므로 없는게 정상인것같습니다.

검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? case 3: // 가로, 세로 모두 100%로 채우기 위한 세팅(계산 필요) const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { // 브라우저 width < 캔버스 width인 경우 canvasScaleRatio = heightRatio; } else { // 브라우저 height < 캔버스 height 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.drawImage(objs.images[0], 0, 0); // 캔버스 사이즈에 맞춰 가정한 innerWdth와 innerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY) { // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; // 좌우 화이트박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); break;

todolist에 propsdata를 this.$store.state.todoItems로 변경시켜줬더니 페이지에 아무것도 뜨지않습니다 F5 리플래쉬하면 데이터는 화면에 반영됩니다만 화면에서 액션일으킬때 실시간으로 반영이 안됩니다....

버블정렬 함수를 구현하실 때 2번째 for 문에서 result.length에서 1을 안 빼는 이유가 있나요??

vue create vue-todo와 vue init webpack-simple vue-todo 차이가 있습니다. vue create vue-todo는 (자신이 생성한 프로젝트) vue-todo/public/index.html를 수정해야하고, vue init webpack-simple vue-todo는 (강의 속 생성한 프로젝트) vue-todo/index.html를 수정하는 것입니다. 그래서 즉 vue create vue-todo로 사용하시는 분들은 vue-todo/public/index.html를 수정하시면 됩니다.

지금까지 수업했듯 npm run serve 로 서버를 실행시켜서 state 적용된 것을 체크해보려고 했으나,  위와 같은 에러 메세지가 발생했고, 여기서 제시한 npm install --save core-js/modules/es.array.splice 명령어를 실행하였으나, 이런 메세지가 또 발생합니다. 이 메세지 내용을 보고, 구글링을 해본 결과  package-lock.json을 삭제하고 다시 실행시키거나 npm cache verify 명령어를 실행하거나 등등 여러가지 답변이 있었으나 전부 실행되지 않습니ㄷㅏ.최종 에러 메세지 상에는 Could not install from "core-js/modules/es.array.splice" as it does not contain a package.json file. 이렇게 적혀 있어서, 이부분을 보완하면 될 듯한데... 전혀 진행되지 않아서요...

제로초님이 하신대로 gcp 컴퓨트엔진으로 생성해서초기설정(apt-get update, npm 설치등등)하고 express-generator로 express 제일 기본앱을 만들었는데외부아이피로 3000포트 붙여서 접속해도 계속 로딩만 돌고 접속이 안되어서 질문드립니다. 혹시 방화벽 문제인가 싶어서 방화벽도 수신,송신을 3000을 다 열어놨는데도 안되고그래서 bin/www열어서 3000포트를 80번 포트로 바꿨더니`Port 80 requires elevated privileges`라는 에러가 뜨네요어떻게 해결하면 좋을지 조언을 구합니다.강의 감사히 보고있습니다~!!

객체에서의 this는 자기자신을 가르킵니다. 근데 es6 화살표함수를 사용하면 window를 가르키던데 제가 알기론 일반 함수가 실행되면 함수 컨텍스트가 만들어지고 그 안에 this, 변수객체, scopeChain가 정의되어져 있는걸로 알고 있습니다. 근데 es6 화살표 함수가 실행되면 함수 컨텍스트안에 this라는 것이 없고 변수객체에 this를 변수로서 상위 scope의 this를 가져오는게 맞을까요? 그래서 es6 화살표함수에는 bind()가 먹히지 않는지 궁금합니다..

payload 인자를 객체화 시켜서 한번에 넘겨주지 않고 이렇게 넘겨주어도 작동은 하는데 방법은 상관이 없을까요? removeOneItem(state, todoItem, index) { localStorage.removeItem(todoItem.item); state.todoItems.splice(index, 1); },

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만 출력이 됩니다. 버튼이나 배경 모달창은 뜨지 않습니다. 어떻게 해결해야되나요?

7:00 분 경에 splice가 원래 있던 배열을 변경해서 새로운 배열을 반환해주신다고 하셨는데 새로운 배열을 반환해주는게 아닌 그냥 해당 배열을 변경만 해주는걸로 이해해도 될까요?

<!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를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?

템플릿 문법 이라는 단어에서 템플릿이란 template:'<div></div>' 이렇게 사용되는 속성으로 알고 있습니다. 근데 이 속성을 사용하지 않고 <div id="app"></div> 안에서 사용되는 태그에 템플릿 문법을 사용하고 있는데 뷰의 템플릿 문법은 템플릿 속성에 한정해서 사용하는 것이 아니라 그냥 뷰로 화면을 조작하는 방법이라고 받아들이면 될까요?