44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
index 페이지에서 main.js 관련 질문입니다
안녕하세요 강사님~ 어느덧 강의도 완강을 향해 달려가고 있습니다! 강의를 들으면서 이해가 가지 않는 부분이 있어서 질문이 있습니다. vue cli 를 활용하여 프로젝트를 구성하지 않았던 3-component 시간에는 index 페이지에 app.js 모듈을 불러와서 vue 인스턴스를 시작하였는데요. 그런데 이번에 vue cli 를 활용하면서 생성한 프로젝트에서는 index 파일에 vue 인스턴스를 초기화하는 main.js 모듈을 포함하지 않아도 vue 인스턴스가 시작하는 것을 볼수가 있는데 어떠한 과정에서 그렇게 동작하는지 잘 이해가 안갑니다. 혹시 index 파일에서 명시한 /dist/build.js 모듈을 포함시키는 것을 볼 수 있는데 이 부분과 연관성이 있는걸까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
학습내용 정리 관련 질문입니다!
안녕하세요 강사님! 좋은 강의 감사드리며 너무나도 잘 수강하고있습니다. 현재 제가 강의를 진행하면서 실습한 코드들을 제 개인 github public repo에 올려 따로 정리하고있습니다 혹시 실습한 코드들을 제 개인 저장소에 따로 올려도 괜찮을까요? 만약 문제가 된다면 바로 삭제하도록 하겠습니다.
- 해결됨실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
lite-server로 구현해야하는 이유는 무엇인가요~?
왜 index.html파일로 열면 안되고.. lite-server로 실행시키면 되는건지.. 흐름이 이해가 안되네요 ㅠㅠ 답변부탁드립니다..!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
에러가 나는데 무슨 에러인지 모르겠어요.
따라하다 보니 에러가 나는데 어떤 에러인지 알 수가 없네요.. 동영상이랑 소스 비교를 해봐도 틀린건 못찾겠습니다. 어떤 에러인가요? View.js:5 Uncaught null init @ View.js:5 ResultView.setup @ ResultView.js:9 init @ MainController.js:14 (anonymous) @ app.js:4 MainController.js:31 [MainController] onSubmit() 6578678678 MainController.js:19 [MainController] search() 6578678678 ResultView.js:15 [ResultView] render() (2) [{…}, {…}] ResultView.js:16 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of undefined at Object.ResultView.render (ResultView.js:16) at Object.onSearchResult (MainController.js:42) at MainController.js:23 ResultView.render @ ResultView.js:16 onSearchResult @ MainController.js:42 (anonymous) @ MainController.js:23 Promise.then (async) search @ MainController.js:21 onSubmit @ MainController.js:32 (anonymous) @ MainController.js:11 emit @ View.js:17 FormView.onKeyup @ FormView.js:31 (anonymous) @ FormView.js:22
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
깃에 올라와있는 수업자료 질문내용
안녕하세요. 현재 올라와있는 강의에서 깃허브로 들어가서 깃허브에 있는 강의 자료를 전부 다운 받았습니다. 근데 강의에서 나온것처럼 기능이 안되더라구요;;혹시 서버환경으로 만들어주어야 강의에서 나오는 것처럼 똑같이 실행이 되는건가요??
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
vuex에 관한 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 현재 JS 그리고 Vue 실습 강좌를 수강 완료하고 다음 트렐로 강의를 막 수강 시작한 상태입니다. 현재까지 완료한 프로젝트에서 vuex와 localstorage를 활용하고 싶은데 궁금한 점이 있어 질문 드립니다. 추천 검색어와 검색 기록 부분은 localstorage에 넣고 그리고 vuex를 활용하여 컴포넌트 간 데이터 전달보다 관리를 쉽게 하기 위해 그리고 vuex라는 것을 연습해보기 위해 사용하고 싶습니다. 이러한 경우에는 설계(?)를 어떻게 해야할지 감이 안 와서 질문 드립니다. App.vue에 있는 추천 검색어와 최근 검색어 부분을 담고 있는 데이터들을 제외한 data 변수를 모두 vuex에 넣어주고 this.$store.state.~~ 형식으로 주고받으면 되는 것인가요? 어떻게 vuex를 활용을 하고 실무에서는 어떤 변수들을 위주로 vuex를 이용하여 활용하는지 알려주시면 감사하겠습니다. 항상 감사합니다. 많은 도움이 됐습니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
this.renderView() 호출
안녕하세요, 강사님. 강의 잘 듣고 있습니다^^ 4분 50초 경 onRemoveHistory 함수 내부에서 this.renderView 함수를 호출하셨는데요, onRemoveHistory함수에서는 HistoryView만 재 렌더링 해주면 될 것 같은데 this.fetchSearchHistory() 가 아닌 this.renderView()로 호출하신 이유가 있으신지 궁금합니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
컴포넌트 제작시 글로벌 css와 Scoped css
프로젝트에서 주로 글로벌하게 css를 사용하고 있는데 scoped하게 사용하거나 둘을 적절하게 사용하는게 더 좋은가? 라는 생각을 하고 있는데 어떤것이 더 나은지 모르겠고 둘을 섞어 쓴다면 그 기준을 잘 정하지 못하겠는데 어떻게 하는것이 좋다고 생각하시는지 궁금합니다.
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
이벤트 등록 및 해제 관련해서 질문드립니다.
1. View.js에 있는 on 메서드로 이벤트 등록하는데, 혹시 이벤트 해제는 어떻게 관리해야할까요? 똑같이 해제(예 : remove()) 메서즈 하나 만들어서 관리하면 괜찮을 것 같은데, 혹시, 이럴 경우, unload라는 웹 페이지 라이프 사이클에 선언해주면 되나요? 2. 또한, 커스텀 이벤트인 경우에 따로 해제 관리는 안해도 되나요??
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
controller 관련해서 질문있습니다.
강의에서 controller를 1개만 구현하셨는데, page가 1개 뿐이라서 그런가요? 강의 듣고 프로젝트에 MVC 적용시킬려는데, 페이지마다 controller를 넣어보려고 하는데, 이렇게 해도 괜찮은지 의문이 들어서요ㅎㅎ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
실제 현업에서의 요구사항 분석
각 구현 항목에 대해 세세하게 요구사항을 짜놓으셨는데, 실제 프론트엔드 개발 현업에서도 이와 같은 형태로 요구사항을 먼저 다 작성한 후에 구현을 시작하나요? 물론 현업과 스케일이 다르겠지만, 혼자 프로젝트 할 때 저도 이처럼 구체적인 요구사항을 먼저 작성해놓고 구현 시작해야할지 궁금하여 질문합니다. 좋은 강의 감사합니다. ㅎㅎ
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
'[type=reset' 오타
FormView.js에서 '[type=reset' 으로 오타가 났는데 작동은 잘하네요.. querySelector 함수에서 못 찾아서 this.resetEl에 null이 들어가야 정상일 것 같은데 왜 잘 작동 할까요..?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
DOM 처리 책임 관련해서 궁금한 점이 있습니다.ㅎㅎ
DOM 처리 책임를 Vue 맡김으로써, 개발자는 다른 부분에 집중할 수 있다고 하셨는데, 이렇게 할 수 있는 이유가 MVVM 패턴이 주는 이점 때문인가요? 아니면 Vue가 주는 이점 때문이가요?그리고, DOM 처리라는게 render 함수 호출 부분을 말씀하시는건가요? 이 함수를 만들 필요가 없게 되고, render함수를 어디서 호출할지 고민 안해도 되어, 개발자가 다른 부분에 집중할 수 있다로 이해해도 괜찮을까요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
debugger 용도 관련 궁금한 점이 있어서 질문드립니다!ㅎㅎ
강의 보다보면 debugger를 디버깅을 위해 쓰시는게 아니라, 다음에 구현할 위치를 체크하기 위한 용도로 쓰시던대.정환님만의 개발 습관이신건가용? 아니면 다른 개발자분들도 다들 그렇게 쓰시나용?ㅎㅎ굉장히 유용해보여서용!!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
emit 함수 사용 이유 관련해서 궁금한 점이 있습니다.
view 에서 controller로 이벤트 처리(?)를 위임하기 위해 emit 함수를 사용하시는데, 이렇게 했을 때의 장점은 무엇인지 궁금합니다!ㅎㅎ 혹시, View의 경우, 모델에 따라 그려주거나 사용자의 인터렉션을 감지하는 것만 담당하고,그 감지에 따른 변화는 controller의 역할이라서 그런건가요?
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
FormView.onClickReset 함수 관련해서 질문있습니다!
혹시, FormView.onClickReset 함수에서 this.inputEl.value 의 값을 초기화 하는 코드가 없는 이유가x 버튼의 경우, e.preventDefault()를 추가 안해줘서, 기본 이벤트가 발생하여 자동으로 초기화 되기 때문인가요?저 같은 경우, 아래 코드처럼 FormView.onClickReset 함수에서 this.inputEl.value 의 값을 초기화 하는 코드를 추가해줬는데, 불필요한 코드였는지 궁금해서 여쭤봅니다!ㅎ FormView.onClickReset = function () { this.showResetBtn(false); this.inputEl.value = ''; this.emit('@reset'); }
- 해결됨실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
요구사항분석 구글독스 링크 요청
준비세션 세번째 강의 요구사항분석에 첨부해두신 구글독스 링크에대한 확인이 필요합니다. https://docs.google.com/document/d/1_aHxP3c8Nyi1ZyRYy1DVIDcuKmavJHo04XFQuuybyfA/edit?usp=sharing 파일이 삭제되어 페이지를 찾을수 없습니다. 확인부탁드립니다. 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 해결됨실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
[실습결과] 이벤트 detail 활용 측면의 확장성과 관련된 질문입니다
안녕하세요 김정환 강사님!`꿀`보이스이셔서 귀 호강하며 잘 듣고있습니다.강의를 1년전에 들었다면 수많은 시행착오를 안겪지 않았까 싶을 정도로 너무나 알찬 강의 감사드립니다. 다름이 아니라,강의에는 없지만, 실습 과제 진행중에 잘 하고 있는건지, 확인을 받아보고 싶은 마음에 질문을 하게 되었습니다.약간의 고도화? 를 거쳐 확장성을 부여하기 위해 고심끝에 아래와 같이 작성해 보았습니다.대략적인 설명과 소스 코드의 일부분입니다.이외는 강의 대용과 동일 합니다 FormView.js - `Esc`키를 눌렀을떄 `취소`버튼과 동일하게 작동합니다.- 내부 핸들러 onXxx 는 Event 객체와 둘째 인자로 detail 객체를 받아 View.emit(e, data) 메서드의 `data` 파라미터로 전달 합니다.- detail .type | .key 속성은 각각 `Enter` `Esc` 키 와 `Button` 등으로 이벤트 발생지 Type 구분을 위해 쓰입니다.- bindEvent() 에서 전달되는 detail 객체의 .content 속성은 사용자의 입력된 값을 담습니다. bindEvent( ) { const detail = { type: null, key: null, content: null } this.on('submit', e => e.preventDefault()) this.inputEl.addEventListener('keyup', (e) => { detail.type = 'key' detail.key = e.key this.onKeyUp(e, detail) }) this.resetEl.addEventListener('click', (e) => { detail.type = 'button' this.onClickReset(e, detail) }) } onKeyUp( event , detail ) { this.showResetBtn(this.inputEl.value.length) const isValidText = this.inputEl.value.length; if (!isValidText && event.key !== KEY_ENTER) { this.onClickReset(event, detail) return } detail.content = this.inputEl.value.trim() switch (event.key) { case KEY_ENTER: isValidText && this.onSubmit(event,detail) break case KEY_ESC: this.onClickReset(event,detail) break } } onClickReset(event , detail ) { this.showResetBtn(false) this.inputEl.value = '' this.inputEl.focus() detail.content = '' this.emit(EVENT_RESET, detail) } onSubmit( event , detail ) { this.emit(EVENT_SUBMIT, detail) } MainController.js : 넘겨받은 CustomEvent. detail 속성으로 세부 조건 로직 작성이 가능합니다. export default { ... ... onSubmit(event) { const { type, key, content } = event.detail console.log(tag, `onSubmit() type=${ type } key=${ key }`, content) }, onResetForm(event) { const { type, key, content } = event.detail console.log(tag, `onReset() type=${ type } key=${ key }`, content) },} 이런 식으로 FormView 외부에서 작동할 것을 대비해서이벤트 디테일 객체를 외부로 전달하는 것이 맞는것인지, 혹은 더나은 방식과,고쳐야 될 부분 에 대한 , 김정환 강사님의 조언을 구하고자 질문하게 되었습니다. 읽어주셔서 감사합니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
이벤트 등록에 대해서 질문 드립니다.
안녕하세요! 강의 정말 잘 듣고 있습니다. 지난 Tab Change 구현에서도 궁금했던 부분인데 비슷한 내용이 또 나와서 질문드립니다. Tab li 목록에 이벤트를 등록할 때와 이번 강좌에서 remove 버튼에 이벤트를 등록할 때 유사 배열을 가져와 배열로 변경해 이벤트가 필요한 모든 객체마다 이벤트를 등록해 주는 방법을 사용하셨는데요. 이벤트를 상위 객체에 한 번만 등록해두면 이벤트 버블링을 통해 상위 객체에 전달될 테고 거기서 이벤트를 처리하는 것이 이벤트를 일일이 등록하는 것보다 비용이 적게 들어갈 것으로 생각되는데요. (HistoryView의 경우 HistoryView.el에 클릭 이벤트를 등록하고 핸들러 함수에서 이벤트 발생이 remove 버튼에서 시작됐는지 아닌지 판단하여 서로 다른 emit 호출하는 식으로) 혹시 이벤트를 일일이 등록하신 이유가 있으신지 질문드립니다. 답변 부탁드립니다. 감사합니다!
- 미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
브랜치 이름이 잘못 입력되었네요:)
TabView2가 아니라 Tab2입니다. 혹 브랜치가 없다고 나오는 분들은 참고하시라고 올려드려요 ㅎㅎ