실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

(40개의 수강평)

896명의 수강생
44,000원
지식공유자 · 김정환
59회 수업 · 총 3시간 57분 수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 '초급, 중급'
bbonggu92 프로필

정환님! 브랜치에 바닐라js파일이 누락된것같습니다. bbonggu92 1달 전

바닐라 js 폴더가 없어서 그런지

css랑 model부분이 import되지 않네요!

../../1-vanilla/js/models

이 부분이요!

0
Hea Song 프로필

vue를 MPA로 사용하는 방법은 없나요? Hea Song 1달 전

안녕하세요.

선생님 덕분에 vue 기초를 쌓을 수 있었습니다.

다름이 아니라 vue로 여러가지 실습 및 적용을 더 해보고 있는데요, vue와 springboot를 연동해서 웹페이지를 만드는 작업을 해보고 있습니다.

SPA방식으로는 될 것 같지 않아서 router를 이용해 MPA방식으로 작업하고 있는데요. get방식으로 url에 직접 접근할 때 vue의 화면이 아닌 controller의 return 결과만 나오게 됩니다. 예를 들면 posts/1 로 접근하면 id가 1인 게시물을 보이고 싶은데 컨트롤러에서 해당 메서드를 통해 생성된 정보만 나옵니다.  두가지 궁금증이 있습니다.

1. 페이지의 직접 접근으로도 vue 페이지를 유지하는 방법

2. 컨트롤러에서 만든 정보를 vue 페이지로 전달하는 방법

배달의 민족 페이지를 가보니까 #을 이용하여 router처리를 해주신 것 같은데, 여러 reference들을 보고 적용해봐도 어떤 방식인지 잘 이해도 되지 않고, 문제가 해결도 안되어 마지막 방법으로 질문드리러 찾아왔습니다.

0
임찬수 프로필

TabView setup 정의할때 마지막에 return this를 하는 이유에 대해서 조금만 설명을 해주실수있을까요..? 임찬수 1달 전

정확히 이해가 되지 않아서 질문 올립니다.

1
최장훈 프로필

안녕하세요 총 두 가지 질문사항이 있습니다. 최장훈 1달 전

안녕하세요 총 두 가지 질문사항이 있습니다.

1. 매 영상마다 브랜치를 바꾸셔서 하는데 이렇게 작업을 하시는 이유가 궁금합니다.

2. 2-vue 수강시, 브랜치를 바꿔서 작업할 때마다, 

2-vue의 models 폴더가 파일로 인식되고 , 그 내용은 ../../1-vanilla/js/models 라고 적혀져 있습니다.

또한,

2-vue의 style.css도 위와 같이 1-vanilla의 css파일 위치만 적혀져 있어서 늘 복사와 붙여넣기로 해결중입니다.

크게 불편함이 있는 것은 아니지만, 

개발환경설치도 모두 완수했음에도 이런 차이가 나는 것이 궁금합니다.

ps. 저는 git clone 을 통해서 파일들을 받았습니다.

3
임찬수 프로필

watch 부분에서요 임찬수 2달 전

props 이름이 'value' 이기 때문에

watch 에서 정의 한 

함수 이름이 value() 로 맞춘건가요?

아니면 함수이름을 달리해도 상관이 없는것인지요?

또 value(newVal, oldVal) 에서

oldVal는 어떨때 쓰이는 인자값이기에 쓴것인가요?

1
motion74 프로필

강의대로 따라했는데요..404 오류가.. motion74 2달 전

http://localhost:3002/js/controllers/MainController net::ERR_ABORTED 404 (Not Found)

이렇게 나옵니다. 구조는 재차 확인했는데  정확하게 같은 구조로 처리했습니다.

어떻게 해결해야 할지 몰라 질문 남깁니다.

------------lite-server 내용 카피해 드립니다.----------

19.10.01 22:55:23 304 GET /index.html

19.10.01 22:55:23 304 GET /style.css

19.10.01 22:55:23 304 GET /js/app.js

19.10.01 22:55:23 404 GET /js/controllers/MainController

19.10.01 22:55:26 304 GET /style.css

19.10.01 22:55:40 200 GET /index.html

19.10.01 22:55:40 404 GET /js/controllers/js/app.js

19.10.01 22:55:40 404 GET /js/controllers/style.css

19.10.01 22:55:40 404 GET /js/controllers/js/app.js

19.10.01 22:55:46 404 GET /js/controllers/style.css

19.10.01 23:00:39 304 GET /index.html

19.10.01 23:00:39 304 GET /style.css

19.10.01 23:00:39 304 GET /js/app.js

19.10.01 23:00:39 404 GET /js/controllers/MainController

19.10.01 23:06:21 304 GET /index.html

19.10.01 23:06:21 304 GET /style.css

19.10.01 23:06:21 304 GET /js/app.js

19.10.01 23:06:21 404 GET /js/controllers/MainController

3
조형규 프로필

홈페이지 개발에서 vue.js 사용 조형규 3달 전

홈페이지 구축에 vue.js 적용 전에 궁금한 점이 있습니다.

- vue.js 가 웹접근성(장애인)지원에 문제가 없을까요?

- 선생님의 경험상 html coder 역할을 하는 작업자가 vue.js에 대한 지식이 없을 경우 협업방식의 아이디어가 무엇이 있을까요?

강의와 직접관련이 작은 문의 드려 송구합니다. 

구글링해서 정보를 획득하기 어려워 죄송한 마음을 가지고 질문 드립니다.

1
최종호 프로필

검색폼 구현 시 한글을 입력하면 onReset이 호출됩니다 최종호 4달 전

안녕하세요

강의 잘 듣고 있습니다

다른 강의보다 머리에 잘들어와 재밌게 듣고있습니다 ^^

vue에서 검색폼 (구현)을 듣고 있는데 영어로 입력하면 아무문제가 없지만

한글로 입력하면 onReset method가 호출 됩니다

확인부탁드립니다

감사합니다

0
hack4569 프로필

form태그 > input태그 속성에서 v-model값을 'query'로 사용할 수도 있나요? hack4569 5달 전

app.js에서 query값을 가지고 있기 때문에 굳이 FormComponent안에 query값을 inputValue 값으로 안바꿔도 되지 않을까요? app.js에서 받은 value값을 그대로 사용해도 되지 않나요?

0
최종호 프로필

자바스크립트 뒤에 세미콜론(;)을 안붙여도 되나요?? 최종호 5달 전

안녕하세요

선생님

강의 잘보고 있습니다 ^^

 

자바스크립트 뒤에 세미콜론(;)을 안붙여도 되나요??

1
아이티티티 프로필

질문있습니다. 아이티티티 6달 전

실제 검색폼 부분에 해당하는 태그를 없애주는 게 아니라,

 

그냥 hide로 숨겨주는데, 굳이 해당 부분 태그를 없애주지 않아도 상관없나요?

0
김동혁 프로필

tabs에서 v-bind 질문 김동혁 6달 전

<tabs v-bind:tabs="tabs" v-bind:selected-tab="selectedTab" v-on:@change="onClickTab"></tabs>

위와 같이 코드 작성했는데

그러면 TabComponent.js에서

props을 selected-Tab으로 해야되는 것 아닌가요??

 

1
최주희 프로필

처음 vue를 접하다보니 로직 흐름이 잘 이해가 안됩니다..ㅠㅠ 최주희 7달 전

처음 vue를 배우는데 강좌를 계속 듣다보니 의아한게 있어서 질문드립니다..

로직 흐름이 어려워서 이런 문의를 드리게 됬습니다..ㅠㅠ

 

예를들어 말씀드리면,

1. 검색창 input태그(HTML)로 작성한 부분을 템플릿(#search-form) 으로 바꾸고 , 기존에 검색창 input(html)이 있던 자리에 디렉토리(search-form)를 만드셨는데 왜 이렇게 하신건가요?

 

2.템플릿(#search-form)에 검색창에 필요한 기능들이 있는데,  아래 예시와 같이 디렉토리(search-form)에 추가 기능을 넣는 이유가 먼가요?

ex. <search-form v-bind:value="query" v-on:@submit="onSubmit"

        v-on:@reset="onReset"></search-form>

 

3. app.js만 작성하다가 개발이 완료된 후,  컴포넌트 작성이 추가됬는데요. 왜 컴포넌트 작성을 추가하신건가요? 그리고 인스턴스와 컴포넌트 무슨 관계라고 생각하면 될까요?

 

 

0
지능정보화연구실 프로필

DB접근 관련 질문 지능정보화연구실 7달 전

DB에 직접 접근하지 않고 api를 통해 접근하는것이 장점이 되나요? 장점이 되는거라면 이유가 뭘까요..

1도 몰라서 여쭤보는거라서 죄송해요..

0
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스