44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
List Component 구현 2 에서 index.html 부분
type === 'keyword' 가 그대로 있어야 할것 같은데 맞나요? ''' <span v-if="type === 'keyword'" class="number">{{index + 1}} {{item.keyword}} <span v-if="type === 'history'" class="date">{{item.date}} <button v-if="type === 'history'" class="btn-remove" > '''
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
app.vue와 각각의 단일컴포넌트들의 메소드 구분은 어떤식으로 하면좋을까요
3번정도 돌려보고 계속 따라하니 오타도 줄어들고 각각 수업의 흐름이 이해 되기시작하네요!그런데 app.js에서 정의되는 메소드와 단일 컴포넌트에서 정의되는 메소드는 어떤식으로구분하면 좋을까요?? 예를들어 todoList를 만든다고치면 이벤트가 발생해서 어떤 로직이 실행될때 app.vue에 메소드를 넣을것인지 컴포넌트에 메소드를 넣을것인지 판단하는 기준같은게 있는지 궁금합니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
v-bind가 잘이해가 안됩니다 ㅠ
<tabs v-bind:tabs="tabs" v-bind:selected-tab="selectedTab" v-on:@change="onClickTab">위처럼 코드가있다고할때 tabs라는 템플릿에 v-bind를 할당하는데 tabs=tabs다 여기서 말하는 첫번째tabs는 속성의 이름이고 뒤에나오는 tabs는 new Vue()에 data{} 오브젝트에 써있는 tabs값인거같은데 tabs="tabs"가 될수있다는게 잘 이해가안됩니다..ㅜ예를들어 v-bind:class="tabs" 라고한다면 class명으로 new Vue()안에있는 data값중 tabs를 바인딩하는구나 라고 생각되는데 엘레멘트 속성중에 tabs라는게 없을것같고.. data-set으로 tabs를 주게되는건가요?? 실제 html의 모습은<tabs data-tabs="tabs"> 이런모습이 되는건가요??
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
const ResultView = Object.create(View); 하는이유
view.js에 있는 내용을 import로 가져와서const ResultView = view 로사용하지않고const ResultView = Object.create(View); 로 사용하는이유가혹시 참조가 아닌 복제를 하기위해 새오브젝트로 만들어서 ResultView로 만드는건가요??제가 Object.create는 그냥 { } 리터럴을 이용해 객체를 만드는것과 거의같다고 이해해도될까요??
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
질문드립니다.
FormView.bindEvents = function () {this.inputEl.addEventListener('keyup', () => this.onKeyup())}저는 e를 제외하고 실행했는데, 굳이 e를 넣어주는 이유가 있을까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
lite-server: command not found
계속 이런식으로 터미널에서 lite-server가 실행이안되는데 왜이러죠..?ㅠㅠㅠㅠ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
-bash: lite-server: command not found
-bash: lite-server: command not found이렇게 실행이 안되는데...어떻게 해결해야할까요ㅠㅠ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
[Window 유저] 질문 드립니다.
브랜치를 가져오면서부터 {{item.name}}{{query}} 검색어로 찾을수 없습니다위와 같이 나옵니다.제 생각에는 js 파일 로딩이 잘 안되는 것 같습니다만...에러코드는Failed to load resource: the server responded with a status of 404 (Not Found):3000/js/models/SearchModel.js:1 위와 같이 뜨구요,다만 해결책을 잘 모르겠습니다.1-vanilla 폴더에 있는 models 폴더를 통째로 복사해서 2-vue의 js 폴더 안에 넣은다음 import 시켜도 같은 에러가 나옵니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
안녕하세요~
안녕하세요~ 수업 잘 듣고 있습니다!수업중에 li 태그에 v-on 으로 클릭 이벤트를 만들어주신것을 보았습니다.비록 마크업 수업은 아니지만, li 태그 안에 앵커나 버튼 태그를 넣어서 그 요소에 클릭 이벤트를 넣는게 웹표준과 웹 접근성을 지키는것이 아닐까 생각합니다. 의견 부탁드립니다 :)
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
메서드가 호출된 후에 정의되도 상관 없나요?
안녕하세요. 좋은 강좌 잘 듣고 있습니다. 종종 메서드가 호출이 되고, 그다음 정의되는 부분이 있습니다.예를들어 아래의 코드에서는SearchModel.list(query).then(data =>{this.onSearchResult(data)})부분에서 onSearchResult가 먼저 호출되고, 정의 되는 것은 코드의 마지막 부분입니다. 이런식으로 사용해도 되는 이유가 export와 관계가 있는 건가요?아니면 hosting과 관계가 있는 건가요?이도 저도 아니라면 뭐때문에 가능한건지 알고 싶습니다. export default { init() { FormView.setup(document.querySelector('form')) .on('@submit', e => this.onSubmit(e.detail.input)) .on('@reset', e => this.onResetForm()) ResultView.setup(document.querySelector('#search-result')) }, search(query){ //search api를 사용. console.log(tag, 'search()', query); SearchModel.list(query).then(data =>{ this.onSearchResult(data) })}, onSubmit(input){ console.log(tag, 'onSubmit()', input); this.search(input) }, onResetForm(){ console.log(tag, 'onResetForm()'); }, onSearchResult(data){ ResultView.render(data) //이 부분이 나중에 정의 되어도 상관 없는지? }}
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
Tag 와 Promise, 그리고 add() 펑션에 관한 질문입니다.
안녕하세요. 너무 좋은 강의 잘 듣고 있습니다.공부하다가 막히는 부분이 있어서 질문 올립니다. MainController.js 파일의 시작 부분을 보면 다음과 같은 부분이 있습니다"const tag = '[MainController]' "위와 같이 스트링으로 MainController 값을 집어 넣는 것을 처음 보는데, 이 부분은 어떤 명령어가 어떻게 처리하는 건가요?마찬가지로, View.js 파일의 시작 부분에서도 "const tag = '[View]' " 부분이 있는데요, 이유와 쓰임세가 궁금합니다. KeywordModel.js 파일 안을 보면 Promise가 변수에 담기지 않고 바로 "new Promise" 식으로 구현이 되었습니다. 그럼 이 Promise의 instance는 무엇이 되는 건가요?이하는 코드 부분입니다. list() {return new Promise(res => { // 변수에다가 담지 않고 바로 new Promise를 했는데, // 이경우 그럼 Promise의 instance는무엇인가요? setTimeout(() => { res(this.data) }, 200)})}}HistoryModel.js 파일에서 add() 펑션 관련 질문입니다.아래 코드를 보면 궁금한 점이 두가지 있습니다.a) const date = '12.31'이 부분은 이렇게 해 버리면 나중에 수정이 안되지 않나요?근데 바로 아래줄에 this.data =[{keyword, date}, ...this.data] 이런식으로 나오면저 자료를 계속 활용한다는 이야기인데.굳이 const 와 스트링 조합으로 한 이유가 있나요?b) some(item=> item.keyword == keyword)) 에서 item이 뜻하는게 뭔지 궁금합니다. add(keyword = '') { keyword = keyword.trim() if (!keyword) return if (this.data.some(item => item.keyword === keyword)) { this.remove(keyword) } const date = '12.31' this.data = [{keyword, date}, ...this.data] }
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
css 연동이 안됩니다.
1-vanilla2-vue3-component세 개의 소스가 첫번째 1-vanilla의 style.css.를 가져오는걸로 알고있습니다만...'[css] { expected' 메세지와 함께 로딩이 되지 않더군요...../1-vanilla/style.css <-이제까지는 직접 옮겨서 공부하고 있었는데, 이것도 이제 해결해야할거 같아서 질문남겨요 ㅠㅠ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
v-on 디렉티브 관련해서 질문입니다!
저희 예제에선 v-on:@submit="onSubmit" 와 같이 v-on을 사용하는데 공식홈페이지에선 저 submit 앞에 @를 빼고 v-on:submit="onSubmit"로 사용하더라구요.그래서 짐작컨데 App.vue 에 작성된 DOM구조에서 다른 컴포넌트로 보내고 그 컴포넌트 내 메소드에서 처리하게 되면 v-on:@submit="onSubmit"과 같이 @를 붙이고 App.vue 내 메소드에서 처리하게 되면 @를 붙이지 않는 것으로 이해를 했습니다. 제가 맞게 이해를 한건가요? ㅎㅎ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
const tag 문의
const tag '[HistoryView]' 대괄호는무슨의미인가요 꼭써줘야하는지요 그리고 상수로 선언된 tag 는 HistoryView내의 어디서 쓰이나요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
이벤트에 @를 붙이는 이유?
emit에전달하는이벤트명에@는꼭붙여야하는지요
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
vue에서는 어떻게 디버깅하나요?
드디어 완강했습니다. ㅋ 정말 많이 공부가 되었습니다.좋은 강의 올려주셔서 감사합니다!한가지 궁금한점이 있다면,Vue로 개발을 할 경우 디버깅 같은 경우는 어떻게 하시나요?웹팩으로 빌드되기 때문에 브라우저에서 디버깅 할 경우 내가 작성한 코드와 달라서불편하지 않을까? 라는 생각이 들었습니다.그리고 앞으로 vue advenced? 같은 고급강좌는 계획이 없으신지...뷰의 원리나, 가상돔의 원리 같은것도 배우고 싶습니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
this에 대해 질문이 있습니다.
선생님 this에 관해 두가지 질문이 있습니다.View.js 파일에서 모든 함수마다 return this 로 'this'를 반환하고 있는데 어떤이유에서 반환하는 건가요?browser에서나 nodejs 에서는 가장 상위의 this 는 window, global 객체로 알고 있습니다. 하지만 view.js 나 다른 모듈로 사용되는 파일들에서 멤버층에서 this를 확인해보니 undefined 라고 나오더라구요. module 같은 경우는 상위 객체가 없는 건가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
this.resetEl.addEventListener("click", e => this.reset()) 에서 event 를 넘겨 주는 이유가 있나요??
event 인자 값은 사용 안하는데 아래와 같이 해줘야 하는게 아닌가요?아니면 다른 이유가 있나요?this.resetEl.addEventListener("click", ()=> this.reset());
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
getSearchResultsHTML VS getKeywordsHtml
안녕하세요, 제목에 있는 2개 함수의 구현이 유사한데요,전자는 데이터가 바인딩된 html 문자열을 다시 메소드로 분리하여 리턴하였고,후자는 문자리터럴 그대로 html변수에 담아 리턴하였는데요, 어떤 이유가 있나요?더 나은 코드는 무엇이며 왜 더 나은 지 알 수 있을까요?MVC모델로 뭔가 작업하는 게 처음이라서,, 뭔가 잘게잘게 쪼개서 함수의 역할을 분리하는 것 같은데어떤 기준으로 그렇게 되는 것인지 모르겠어서 질문 올립니다.getSearchResultsHTMLResultView.getSearchResultsHTML = function (data) { return data.reduce((html, item) => { html += this.getSearchItemHtml(item) return html }, '<ul>') + '</ul>'}ResultView.getSearchItemHtml = function (item) { return `<li> <img src="${item.image}" /> <p>${item.name}</p> </li>`}getKeywordsHtmlKeywordView.getKeywordsHtml = function (data) { return data.reduce((html, item, index) => { html += `<li data-keyword="${item.keyword}"><span class="number">${index + 1}</span>${item.keyword}</li>` return html }, '<ul class="list">') + "</ul>"}
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
단일파일 컴포넌트2 강의 중 <template>안의 header영역이 나오지 않습니다.
그 전 부분 Vue 웹팩 설치하고 Vue 페이지까지 확인했습니다만,template 부분에 header부분을 복사하여 넣고 확인해 보니아예 그 부분은 dom에서도 렌더되지 않았습니다.참고로 콘솔 로그 부분에 아래와 같은 메시지가 나왔습니다.Refused to execute script from 'http://localhost:3000/dist/build.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.