44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
이미지 파일 업데이트가 안돼있는 거 같습니다
const data = [ { id: 1, name: '[키친르쎌] 홈메이드 칠리소스 포크립 650g', image: 'https://cdn.bmf.kr/_data/product/H1821/5a4ed4e8a6751cb1cc089535c000f331.jpg' }, { id: 2, name: '[키친르쎌] 이탈리아 파티 세트 3~4인분', image: 'https://cdn.bmf.kr/_data/product/H503E/300d931e3b8252ed628b6a3c2f56936b.jpg' }] 링크 파일 오류 뜨네요
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
git사용법을 잘 모르겠습니다..
강의를 새로 들을때마다 lite-server가 구동되지 않는데, 제가 git을 잘못 다루고 있는거 같습니다...강의 열릴때 visual스튜디오 코드 연다음에 git bash에다가git checkout -f 1-vanilla/scafoldingcd 1-vanillalite-server을 했거든요....! 어떻게 해야 이전 강의와 연결되서 lite-server구동할수 있을까요?
- 해결됨실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
@event 질문입니다.
안녕하세요. 선생님 강의를 듣는 수강생입니다. javascript MVC 패턴을 공부하는 과정 중에 js 파일에서 이벤트를 만들고 전달(emit)할 때 여쭤보고 싶은 내용이 있습니다.emit(‘@click’) ~~ 이 부분에서 @click 처럼 이벤트명 앞에 @가 들어간 게 어떤 걸 의미하는 걸까요.? 이벤트를 파라미터로 집어넣을 때에 @를 넣으면 특별히 기능하는 무언가가 있는 걸까요.?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
return 문자열이 여러줄은 어떻게 설정하나요?
ResultView.getSearchItemHtml = function (item) { return '<li>. <== 여기서 에러가 납니다 (종결되지 않은 문자열 리터럴입니다.ts(1002))) 셋팅의 문제인듯 합니다만... </li>' }
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
탭뷰에서 이벤트를 받아서 메인컨트롤러에게 전달만해주는 방식도 괜찮나요?
탭뷰에서 이벤트를 받은 후 탭을 변경해주는 것 까지 처리 후 메인에게 이벤트가 발생했다라는 사실만 전달해주는 것 같은데 이벤트만 컨트롤러에게 전달해주고 컨트롤러가 다시 TabView.setActiveTab 함수를 호출해주는 방식도 괜찮을까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
ResultComponent.vue 에러?
37~38초 쯤 ResultComponent.vue 의 4번째 줄에 에러가 난것으로 나오는데 강의에서는 문제없이 컴파일이 됩니다. 하지만 따라서 작성해보니 저는 저 줄에서 에러가 떠서 컴파일이 안되는데 혹시 이유가 뭔지 알수있을까요? ㅠ 오타인가 싶어서 찾아봤는데 잘 안찾아지네요.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
선생님 안녕하세요!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 감사히 잘 듣고있습니당. 혹시 개인적으로 과외를 받을 수 있는 방법이 없을까해서요 ㅠㅠ.. 늦깍이 학생인데 도움을 받고 싶습니당
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
return new Promise 와 return Promise.resolve
안녕하세요 강의 정말 잘 듣고 있습니다! 코드를 보다보니 궁금한 점이 있는데요, HistoryModel.js 에서의 list 함수는 Promise.resolve 를 통해 Fulfilled 된 프로미스 객체를 반환하고 있습니다. 그런데 KeywordModel.js 에서의 list 함수는 new Promise 를 통해 프로미스 객체를 반환해주고 계신데 두 방법의 차이는 뭘까요?? 또한 Promise.resolve에서는 바로 data를 반환하고 있지만, KeywordModel.js 의 Promise data는 0.2초 뒤에 반환하도록 한 이유가 있을까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
바닐라
처음 설계하는게 어렵지 기능구현은 쉬운 것 같은데 스케폴딩 하는 부분에서 머리 터질 것 같네요. 그래도 바닐라 자바스크립트 부분은 신경써야 하겠죠?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
실습 관련 질무
안녕하세요 강사님. 지난 실습을 onClickTab() { this.tabs.reverse() } 위와 같이 작성했는데, 괜찮은가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
event.preventDefault() 문의
안녕하세요. 잘 듣고있습니다. 강의 내용대로 Submit을 하는 순간 Refresh가 발생하는데, 제가 이해한 내용이 맞다면 Form view에서 emit을 발생시켯고, 이것은 MainController에서 수신하여, onSubmit 을 실행합니다. 그러면 새로고침이 일어나는게 onSubmit 단계에서 발생하는것 같은데, 여기서 preventDefault를 입력해도 멈추질 않습니다. 제가 잘못 이해한 것인지 설명을 요청드립니다. 감사합니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
컴퍼넌트 질문이 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 컴퍼넌트 관련 질문이 있어서요. 1. 하나의 컴퍼넌트를 a라고 한다면 페이지 디자인 나온것중에 컴퍼넌트 a에서 약간의 모양이 변경된 형태라면 컴퍼넌트 a에 다중클래스를 써도 될까요? 아님 또다른 컴퍼넌트를 만들어야 되는건가요? 2. 컴퍼넌트 a에서 형태는 동일하나 추가된 마크업이 있을시에는 다른 컴퍼넌트로 만들어야 되는건가요? 답변 주시면 감사하겠습니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
return this에 대해서 (재업로드)
1-vanilla 폴더에서 View.js / FormView.js / TabView.js / KeywordView.js (상속 받는 HistoryView.js) 등이 갖고 있는 메서드 중에서 return this를 하는 메서드가 있는데요, return this를 하는 이유는 무엇이고, return this를 함으로써 어떻게 사용되는 것인지, 만약 return this를 하지 않는다면 어느 부분에서 어떤 에러가 발생하게 되는 것인지 명쾌하게 이해가 되지 않습니다. ResultView에서는 return this를 하지 않는 것은 또 왜인가요? 추가) 각 메서드 내부에서 console.log를 찍어보기는 했는데요, View.js의 init() 메서드 안에서 찍어본 console.log(this)는 Form, Tab, Keyword 등의 View객체를 가리키는 것 같긴 해요. 다른 ...View.js 파일에서 this를 쓰는 메서드마다 전부 console.log를 찍어보더라도 this에 대한 개념이 잘 와닿지가 않습니다. 답변 부탁드리겠습니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
return this에 대해서 이해가 잘 되지 않아요
1-vanilla 폴더에서 View.js / FormView.js / TabView.js / KeywordView.js (상속 받는 HistoryView.js) 등이 갖고 있는 메서드 중에서 return this를 하는 메서드가 있는데요, return this를 하는 이유는 무엇이고, return this를 함으로써 어떻게 사용되는 것인지, 만약 return this를 하지 않는다면 어느 부분에서 어떤 에러가 발생하게 되는 것인지 명쾌하게 이해가 되지 않습니다. ResultView에서는 return this를 하지 않는 것은 또 왜인가요? 추가) 각 메서드 내부에서 console.log를 찍어보기는 했는데요, View.js의 init() 메서드 안에서 찍어본 console.log(this)는 Form, Tab, Keyword 등의 View객체를 가리키는 것 같긴 해요. 다른 ...View.js 파일에서 this를 쓰는 메서드마다 전부 console.log를 찍어보더라도 this에 대한 개념이 잘 와닿지가 않습니다. 답변 부탁드리겠습니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
강의 내용을 따라 했는데도 안되는 문제
예를 들어, 검색값을 입력하고 엔터를 누를 때 콘솔에 출력하는 것이나, x버튼을 누르거나 검색 결과를 완전히 지우고 난 뒤에 콘솔에 출력하는 기능을 만들 때, 분명히 강의에서 해주시는 내용대로 따라하면 콘솔에 출력되지 않는 문제가 발생하네요. 브랜치를 이동해가면서 비교해보아도 뭐를 빼먹은 것 같지는 않은데, 기능이 구현된 브랜치에서는 잘 되던 것이 기능 구현 전 브랜치에서 강의 내용을 따라 치면 안 되는 이유가 무엇인지 알 수 있을까요? 아래는 FormView3 브랜치에서 실습 내용을 따라 적은 코드 입니다. FormView.js import View from './View.js' const tag = '[FormView]' const FormView = Object.create(View) FormView.setup = function (el) { this.init(el) this.inputEl = el.querySelector('[type=text]') this.resetEl = el.querySelector('[type=reset') this.showResetBtn(false) this.bindEvents() return this } FormView.showResetBtn = function (show = true) { this.resetEl.style.display = show ? 'block' : 'none' } FormView.bindEvents = function () { this.on('submit', e => e.preventDefault()) this.inputEl.addEventListener('keyup', e => this.onKeyup(e)) } FormView.onKeyup = function (e) { const enter = 13 this.showResetBtn(this.inputEl.value.length) if (e.keyCode !== enter) return this.emit('@submit', { input: this.inputEl.value }) } export default FormView MainControllers.js import FormView from "../views/FormView.js"; const tag = "[MainController]"; export default { init() { FormView.setup(document.querySelector("form")) .on('@submit', e => this.onSubmit(e.detail.input)) .on('@reset', e => this.onResetForm()) }, onSubmit(input) { console.log(tag, 'onSubmit()', input) }, onResetForm() { console.log(tag, 'onResetForm()') } };
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
크롬으로 로컬 띄었더니 에러가나네요
안녕하세요, 현재 소스에 console.log 사용에 찍은 로그가 크롬에서 수행이 되지 않습니다. 이거에 대한 처리를 따로 해줘야하는건가요? 크롬은 가장 최신 버전입니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
에러가 나네요
안녕하세요, 크롬 사용해 로컬 띄우고 있는데, console.log로 찍은 소스가 크롬 console창에 안찍히고 에러가나네요. 이거 해결할수 있는 방법 있을까요? 크롬은 최신버전입니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
git checkout 중에 질문드립니다.
안녕하세요. 이번에 vue 프로젝트를 체크아웃을 받는데 models폴더하고 style.css는 아래와같이 파일과 폴더 그대로 체크아웃이 되지않는데 , 'git checkout -f 2-vue/install' 명령어 중에 혹시 추가해야할 것이 있을까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
bindEvent 메소드를 왜추가하는지 궁금해서 질문드립니다.
이전 강의에서 FormView.js는 Object.create를 통해 똑같은 view 객체를 복사해서 이어서 작성중인데 여기서 View.js에서 on이라는 이벤트를 공통적으로 추가하는 메소드가 있는데 왜 bindEvent를 정의하신 이유가 궁금합니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
안녕하세요 vue.js 처음 입문하는데 강사님 강의로 시작하게 되었습니다.
학습은 마쳤는데 다른 문제로 자문을 구하고자 글 남깁니다 ㅠㅠ Vue.js 로 restful api 를 연동시킨 게시판을 구현하라는 과제를 받았는데, api 를 따로 주시지 않고 제가 임의로 정하라고 하셨거든요.. 샘플 코드를 가져다 쓰는 방법이 있을까요? 아니면 제가 만들어야 하는걸까요 ㅜㅜ 이제 Vue 공부 시작한지 일주일된 새내기라 감이 안잡힙니다.. postman 을 통해 가상 api를 만드는 방법도 있을까요?