첫번째 질문 ) index.js에서 { path : '/login', component : LoginPage } 이런식으로 쓰고   App.vue페이지에서 <router-link to="/login">로그인</router-link>   로 써주셨는데 path에 들어가는 내용과 router-link의 to 들어가는 내용이 일치해야 하나요?   ===================================== 두번째 질문 ) 한 페이지 내에서 링크가 여러개 있는 경우가 있는데 그런 경우 router-link와 router-view를 어떤식으로 배치해야하는지 궁금합니다.   ===================================== 세번째 질문 ) 이때까지 배운 내용으로만 보면 router-link가 일반 HTML의 a태그의 대용으로 쓰이는것 같습니다. 만약 이 router-link태그의 스타일을 주려면 router-link에 다른 속성을 추가해서 주나요 아니면 다른 방법이 있는건가요?                        

지금 16강 수강중이구요 스크롤 애니메이션을 vue에서 따라 작성해보고있는데 .. 값이 다르게 찍히는게 있어서 혹시나 해결방법을 아시는지 궁금해서 여쭤봅니다. ㅠㅠ 다른 부분들은 나름 어거지로??어떻게 따라와서 텍스트 하나를 나타나고 사라지게 하는게 되긴하는데 ... 추후 강의를 똑같이 따라갈 수 있을런지...   제 이슈는 이렇습니다. value값이 동일하게 찍히질않습니다. 강의에서는 아래처럼 values.length값이 배열로 잘 나오는데..   저는 value값을 콘솔로 찍었을 때는 이렇게나오고 values[0]은 undefined로 나와버려서 length값 체크도못하고 calcValue함수 내에서도 이런식으로 작성하면서 따라했거든요 .. object name을 콕 찝어서 데려와야만 배열값을 얻어요.. 배열로얻어오지못하니 강의와 똑같이 구현해보려고 calcvalue함수를 copy해서 하나는 in 하나는 out으로하는 무지막지한 코드를 작성해놨어요🤯🤯   같은 자바스크립트인데 환경좀 다르다고 이렇게 value값이 다를일인가요........... value의 배열값을 강의처럼 얻을수없다면 제 vue 스크롤연습은 여기서 접어야하는걸까요..?........ 이후 강의는 따라해볼 엄두가 안나네요 ..ㅜ 이틀 삽질하다 슬퍼서 질문올려봅니다... full code남기며 ... 질문마무리하겠습니다🥺   <template> <div class="main" ref="scrollWrap"> <section class="scroll-section" id="scroll-section-0" ref="scrollSection0"> <div class="hero" :style="`background-image: url(${이미지})`"> <div class="text-test">소환사 여러분</div> <div class="sticky-elem hero-message a" ref="message1"> <div class="year">10th ANNIVERSARY</div> </div> <!-- <div class="sticky-elem hero-message b" ref="message2"> <div class="thanks">THANK YOU SUMMONERS</div> </div> <div class="sticky-elem hero-message c" ref="message3"> <div class="greeting">리그오브레전드와 10년간 함께 해주신 소환사 여러분, 감사합니다!</div> <div class="greeting">THANK YOU, SUMMONERS!</div> </div> --> </div> </section> <section class="scroll-section" id="scroll-section-1" ref="scrollSection1"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda<br> </p> </section> <button @click="setLayout">레이아웃d</button> <div> <input type="text" @input="setSearch($event.target.value)" /> <button @click="searchForPlayer(e)">serach</button> <div v-if="playerData" class="box"> <p>{{playerData.name}}</p> <p>{{playerData.summonerLevel}}</p> <p>{{playerData.profileIconId}}</p> <p><img width="100" height="100" :src="`http://ddragon.leagueoflegends.com/cdn/12.7.1/img/profileicon/${playerData.profileIconId}.png`"></p> </div> <div v-else class="box2"> <p>{{noPlayer}}</p> <p>데이터가없습니다</p> </div> </div> <router-view></router-view> <router-link to="/JH">링크</router-link> </div> </template> <script> import { onMounted, ref} from 'vue' import axios from 'axios' //씬을나눈다 //씬의 높이를 세팅한다 //활성화 시킬 씬을 결정한다 //this.prevScrollHeight = this.prevScrollHeight + this.sceneInfo[i].scrollHeight; //얘네는같은거임 this.prevScrollHeight += this.sceneInfo[i].scrollHeight; export default { name: 'App', components: { }, data() { return { errorText: "존재하지않는 데이터입니다", 이미지: "https://universe.leagueoflegends.com/images/championsBackground.jpg", sceneInfo: [ { type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { // container: document.querySelector('scroll-section-0') container : this.$refs.scrollSection0, massageA : this.$refs.message1, massageB : this.$refs.message2, massageC : this.$refs.message3, }, values: { messageA_opacity_in: [0,1, {start: 0.1, end: 0.2}], messageA_opacity_out: [1,0, {start: 0.25, end: 0.3}], } }, { type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: this.$refs.scrollSection1 } }, ], //window.pageYOffset 갱신 yOffset : 0, //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 prevScrollHeight : 0, //현재 활성화된 scene currentScene : 0, totalScrollHeight: 0, messageA_opacity_in: '', messageA_opacity_out: '', currentYOffset: 0, rv: 0, scrollRatio: 0, outerScrollRatio:0, enterNewScene: false, scrollHeight: 0, partSCrollStart: 0, partScrollEnd: 0, partScrollHeight: 0, currentSceneValues: '', infoCurretScene: 0, } }, setup() { let searchText = ref(""); let playerData = ref(); let noPlayer = ref(); let deleteMessage = ("존재하지않음"); let playerId = ref([]); let apiKey = "RGAPI-62f8907f-eab8-4333-bc43-94d32a09be28"; const setSearch = (검색어) => { searchText = 검색어 } const searchForPlayer = () => { playerData.value = null noPlayer.value = null //Handle the API call axios.get(`https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/${searchText}?api_key=${apiKey}`) .then((response) => { playerData.value = response.data }).catch(error => { playerData.value = null noPlayer.value = deleteMessage; }); } return { searchText, playerData, playerId, setSearch, searchForPlayer, }; }, methods: { init() { this.setLayout(); this.scrollLoop(); }, setLayout() { // Sticky Conainer 의 높이를 설정함. // for( let i = 0; i < this.sceneInfo.length; i++ ){ // this.sceneInfo[i].scrollHeight = this.sceneInfo[i].heightNum + window.innerHeight; // this.sceneInfo[i].objs.container.style.height = `${this.sceneInfo[i].scrollHeight}px`; // } this.sceneInfo[0].scrollHeight = this.sceneInfo[0].heightNum + window.innerHeight; this.$refs.scrollSection0.style.height = `${this.sceneInfo[0].scrollHeight}px`; this.sceneInfo[1].scrollHeight = this.sceneInfo[1].heightNum + window.innerHeight; this.$refs.scrollSection1.style.height = `${this.sceneInfo[1].scrollHeight}px`; this.yOffset = window.pageYOffset; this.totalScrollHeight = 0; for( let i = 0; i < this.sceneInfo.length; i++ ){ this.totalScrollHeight += this.sceneInfo[i].scrollHeight; if(this.totalScrollHeight >= this.yOffset){ this.currentScene = i; break; } } }, calcValues(values, currentYOffset){ this.rv; this.scrollHeight = this.sceneInfo[this.currentScene].scrollHeight; //현재 scene에서 스크롤된 범위를 비율로 구하기 this.scrollRatio = this.currentYOffset / this.scrollHeight; this.outerScrollRatio = (this.yOffset - this.prevScrollHeight) / this.scrollHeight; this.infoCurretScene = this.sceneInfo[this.currentScene]; this.currentSceneValues = this.sceneInfo[this.currentScene].values; if(this.currentSceneValues.messageA_opacity_in.length === 3){ //start ~ end 사이에 애니메이션 실행 this.partSCrollStart = this.currentSceneValues.messageA_opacity_in[2].start * this.scrollHeight; this.partScrollEnd = this.currentSceneValues.messageA_opacity_in[2].end * this.scrollHeight; this.partScrollHeight = this.partScrollEnd - this.partSCrollStart; if(this.currentYOffset >= this.partSCrollStart && this.currentYOffset <= this.partScrollEnd){ this.rv = (this.currentYOffset - this.partSCrollStart) / this.partScrollHeight * ( this.currentSceneValues.messageA_opacity_in[1] - this.currentSceneValues.messageA_opacity_in[0]) + this.currentSceneValues.messageA_opacity_in[0]; }else if(this.currentYOffset < this.partSCrollStart){ this.rv = this.currentSceneValues.messageA_opacity_in[0]; }else if(this.currentYOffset > this.partScrollEnd){ this.rv = this.currentSceneValues.messageA_opacity_in[1]; } }else { this.rv = this.scrollRatio * ( this.currentSceneValues.messageA_opacity_in[1] - this.currentSceneValues.messageA_opacity_in[0]) + this.currentSceneValues.messageA_opacity_in[0]; } return this.rv; }, calcValues2(values, currentYOffset){ this.rv; this.scrollHeight = this.sceneInfo[this.currentScene].scrollHeight; //현재 scene에서 스크롤된 범위를 비율로 구하기 this.scrollRatio = this.currentYOffset / this.scrollHeight; this.outerScrollRatio = (this.yOffset - this.prevScrollHeight) / this.scrollHeight; this.infoCurretScene = this.sceneInfo[this.currentScene]; this.currentSceneValues = this.sceneInfo[this.currentScene].values; if(this.currentSceneValues.messageA_opacity_out.length === 3){ //start ~ end 사이에 애니메이션 실행 this.partSCrollStart = this.currentSceneValues.messageA_opacity_out[2].start * this.scrollHeight; this.partScrollEnd = this.currentSceneValues.messageA_opacity_out[2].end * this.scrollHeight; this.partScrollHeight = this.partScrollEnd - this.partSCrollStart; if(this.currentYOffset >= this.partSCrollStart && this.currentYOffset <= this.partScrollEnd){ this.rv = (this.currentYOffset - this.partSCrollStart) / this.partScrollHeight * ( this.currentSceneValues.messageA_opacity_out[1] - this.currentSceneValues.messageA_opacity_out[0]) + this.currentSceneValues.messageA_opacity_out[0]; }else if(this.currentYOffset < this.partSCrollStart){ this.rv = this.currentSceneValues.messageA_opacity_out[0]; }else if(this.currentYOffset > this.partScrollEnd){ this.rv = this.currentSceneValues.messageA_opacity_out[1]; } }else { this.rv = this.scrollRatio * ( this.currentSceneValues.messageA_opacity_out[1] - this.currentSceneValues.messageA_opacity_out[0]) + this.currentSceneValues.messageA_opacity_out[0]; } return this.rv; }, playAnimation(){ // const values = this.sceneInfo[this.currentScene].objs; // const values = this.sceneInfo[this.currentScene].values; this.currentYOffset = this.yOffset - this.prevScrollHeight; console.log(this.currentSceneValues[0]); switch (this.currentScene) { case 0: this.messageA_opacity_in = this.calcValues(this.sceneInfo[0].values.messageA_opacity_in, this.currentYOffset); this.messageA_opacity_out = this.calcValues2(this.sceneInfo[0].values.messageA_opacity_out, this.currentYOffset); if(this.outerScrollRatio <= 0.22){ //in this.$refs.message1.style.opacity = this.messageA_opacity_in; } else { //out this.$refs.message1.style.opacity = this.messageA_opacity_out; } break; case 1: break; } }, scrollLoop(){ this.enterNewScene = false; //scrollHeight값 누적되지않도록 0으로 this.prevScrollHeight = 0; for(let i = 0; i< this.currentScene; i++){ this.prevScrollHeight += this.sceneInfo[i].scrollHeight; } if(this.yOffset > this.prevScrollHeight + this.sceneInfo[this.currentScene].scrollHeight){ this.enterNewScene = true; this.currentScene++; // this.$refs.scrollWrap.setAttribute('id', `show-scene-${this.currentScene}`); } if(this.yOffset < this.prevScrollHeight){ if(this.currentScene === 0) return; this.enterNewScene = true; this.currentScene--; // this.$refs.scrollWrap.setAttribute('id', `show-scene-${this.currentScene}`); } this.$refs.scrollWrap.setAttribute('id', `show-scene-${this.currentScene}`); if(this.enterNewScene) return; this.playAnimation(); }, }, mounted() { this.init(); window.addEventListener('DOMContentLoaded',this.setLayout); window.addEventListener('resize', this.setLayout); window.addEventListener('scroll', () =>{ //스크롤이 일어날 때 yOffset 의 값을 window.pageYOffset 값으로 갱신 this.yOffset = window.pageYOffset; this.scrollLoop(); }); }, } </script> <style lang="scss"> body { margin: 0; } .scroll-section { border: 1px solid red } .text-test { position: relative; padding: 20px; z-index: 1; color: red; } </style>  

안녕하세요. 설치관련해서 궁금한게 있어서 질문드려요. vue cli는 아래의 명령어를 이용해서 3.0버전을 설치하잔아요.. vue create vue-cli3   근데, 이 다음에 옵션을 선택할때는 왜 Vue 2를 선택하는 것인가요? Vue Cli랑 위의 Vue 2?3?은 관련이 없는 것인가요?   답변부탁드리겠습니다. 감사합니다.

.

인프런 아이디: shjoo526@diquest.com 인프런 이메일:  shjoo526@diquest.com 깃헙 아이디 : popman526 깃헙 Username : 주상호

vue-advanced 리포지터리 권한요청합니다   바뀌었나요? 혹시 몰라 질문 답변에 남깁니다.  Github ID : popman526 인프런 ID : shjoo526@diquest.com

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요, vue 강의를 들으면서 프로젝트를 진행하고 있는 예비개발자입니다. 두가지 질문이 있어 질문드립니다!   상단에 캠핑장 필터를 선택해 화면에 띄워주는 과정입니다. 1. 우선 컴포넌트를 나누는 기준을 잘 모르겠습니다. 1번에 해당하는 CampsiteFilter.vue와 부모 컴포넌트인 Campsite.vue로 구성되어 있습니다. 하지만, 기존에 다른 사람들이 제작해놓은 사이트의 경우 코드를 보니, 정말 세세하게 컴포넌트를 구성해놨더라구요. 어떤 상화에서 컴포넌트를 나누어야하는지 궁금합니다.   2. 컴포넌트간의 vuex와 emit사용 시 차이입니다. 그림의 왼쪽 필터 부분에서 먼저, vuex의 store를 활용해 데이터를 주고받으면 필터링을 선택하고 적용을 눌러 데이터를 받아오고자하면 데이터가 화면에서 랜더링 되지가 않습니다. 하지만, 자식컴포넌트에서 emit을 활용해 데이터를 보내주면 화면에 랜더링이 됩니다. 원인이 무엇일까요?   바쁘신 와중에 긴 내용 읽어주시고 답변해주시면 정말 감사하겠습니다!

nuxt가 확실히 숙련되면 vue로 만드는것보다 편할것같은데 굳이 검색엔진최적화가 요구되는 프로젝트가 아니더라도 그냥 모든 프로젝트를 nuxt로 만들어도 되는건가요? 아니라면 vue로 해야만하는 프로젝트가 따로 있는걸까요? 궁급합니다!

깃허브로 프로젝트 파일을 받아서 npm run serve를 사용해서 파일을 열어보려고 하는데요 node_modules 설치를 위해서 npm install을 한 후 node_modules  설치 후  npm run serve를 하면    Conflict: Multiple assets emit different content to the same filename index.html ERROR in Conflict: Multiple assets emit different content to the same filename index.html'' 이런 에러가 떠버립니다.. 구글링을 해봐도 다 무슨 소리인지 모르겠어서 질문드립니다..  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 강사님 실습을 하는 도중에 다음과 같은 에러가 발생해서 문의 드립니다. 위와 같은 에러가 발생하는데 구글링을 해도 javascript 생태계에 익숙하지 않아서 그런지 원인을 찾지 못하겠습니다.   babel.config.js 파일을 찾지 못해서 발생하는 문제인 것 같은데 다음과 같이 프로젝트 파일 구조상으로는 존재합니다. babel.config.js 파일의 내용은 다음과 같습니다. module.exports = {   presets: [     '@vue/cli-plugin-babel/preset'   ] }   설치된 @vue/cli version은 5.0.1입니다. 도대체 무엇이 문제인 것일까요? 아무리봐도 원인을 잘 모르겠습니다. 강사님께서 도와주시면 감사하겠습니다          

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 강사님 강의 잘 듣고 있습니다. 다름아니라 Vetur 플러그인 외에 강사님이 vscode상에서 Vue관련 코딩을 위해 Vue 관련 다른 플러그인 깔아서 쓰시는 거 있으면 추천좀 부탁드려도 될까요?   일단 저같은 경우는 예전 부터 vscode로 spring이나 파이썬 자바 개발도 다 하고 있는 터라 강사님이 추천해 주신 플러그인 대다수는 미리 깔렸는데 이왕 Vue 공부 할 거 좀더 쾌적한 환경에서 강사님이랑 비슷한 세팅해서 하고 싶어서요.  

  안녕하세요 선생님! 외부패키지 연결 관련하여 문의드립니다   말씀해주신 방법으로 외부패키지를 설치하고 연결하였는데요 터미널에 이런 오류가 뜨더라구요ㅠㅠㅠ 왜 이런 현상이 일어나는지 궁금합니다~        

vue.js devtools를 잘 사용하고 있었는데요 어제부터 갑자기 이벤트 탭이 안 보여요 크롬 확장 프로그램 사이트에 가서 보니까 2022.02.12일에 업데이트를 했던데.. 이제 event 탭은 못 보는걸까요? components 부분을 클릭해 봐도 다른 탭들은 보이지가 않네요.. (확장 프로그램이 업데이트 된 거라 이런 질문을 해도 되는 건지 모르겠지만 도움을 요청할 곳이 여기밖에 없어 질문 드립니다.)

안녕하세요? 기효님께서는 vue-cli 폴더 안에 public, node_modules, src 이렇게 3개의 폴더가 있으신데요 저는 public이라는 폴더는 없고 아래와 같이 node_modules와 src 폴더만 있습니다. 왜 그런걸까요? 제가 @vue/cli를 설치했더니  installed "@vue/cli@4.5.15" 라고 떴었어요 그런데 막상 vue --version을 해보면 2.9.6이 떠요 그래서 기효님처럼 vue create vue-cli가 아니라 vue init webpack-simple vue-cli를 했어요 그래서 그런걸까요? 그리고 vue-cli 4.x라는데 왜 2.x라는건지도 이해가 안 갑니다. 이유를 알려주실 수 있나요? 그리고 vue-CLI 4.x인 경우 vue init webpack-simple vue-cli 로 만드는거 맞나요? 답변 주시면 감사하겠습니다.

처음에 fetch 함수를 작성하신 storage 객체를 생성하셔서 저는 그 객체에 localstorage 관련 처리 함수를 모두 정의하고 그 함수을 mutations에서 호출하여 localstorage에 대한 기능을 분리하는 것이 구현하였습니다.   저는 초기에 storage 객체를 생성하시고 fetch 함수를 만드셔서 당연히 storage 객체에 localstorage 관련 로직을 처리하는 역할을 부여하셨다고 생각했는데, 혹시 이렇게 하시지 않은 이유가 있으신지 궁금합니다.

안녕하세요, 김석훈 강사님의 강의 두가지를 들었습니다. 첨에는 내용이 너무 어려워서 중간에 포기도 했었는데 시간이 지나니 이해가 안가는 부분은 없더라구요 다만 제가 대시보드를 개발해야 하는 상황인데, vue.js로 만들어진 대시보드 템플릿들은 vue CLI?를 이용해서 만들어져있다보니 App.vue 파일로 되어있는경우가 많았습니다. 이러한 파일들은 django와 어떻게 연동해야하는지 아무리 검색해봐도 자료도 잘 나오지않더라구요... webpack? 이라는 것을 이용하면 가능한것처럼 보이는데 공식자료같은것들이 거의 전무한것을보면 잘 안쓰는 방식인것같기도 한데...  혹시 어떤식으로 연동을 하나요? 그냥 이 강의영상처럼 html파일에 vue 스크립트를 넣어 구현하는것이 보편적인 방법인가요?      

강의를 따라 9-1 까지 따라서 진행중입니다. 좋은 강의 감사드립니다.    제가 여태까지 잘 따라왔는데 vue 라우터에서 막히는 부분이 있어서 질문드립니다.  1. routes.js 에서 컴포넌트를 추가할때, import할때 NumberBaseball.vue 가 경로에서 안보이는 점이나  (vue파일을 컴포넌트로 따로 설정해야 하는건가요 ?)   vue 라우터 네비게이션에서 vue를 불러왔을때, 데이터나 데이터에 정의해둔 값들을 못가져오는거같습니다. 제가 빼먹은 부분이 있을까요 ?      2. 뷰 라우터의<router-view></router-view>로   .vue 파일을 불러오면 불러온 vue의 app.js도 같이 가져오게 되나요 ?  VueRouter.html의     <script src="./dist/app.js"></script> app.js는 9장에서 만든 뷰라우터 폴더의 app.js 같은데 헤깔리네요       

안녕하세요 현재 서로 믿을 수 있는 스타트업 멤버 구축 되었고 추가로 능력있고 참하신 개발자 팀원 두분 더 찾습니다. 관심있으신분 연락 부탁드립니다   1. 주제소개: 반려동물 서비스 중 현재 시장에 없는 서비스. 2. 현재 진행 단계: 시장분석 및 주제와 명확한 방향성까지 잡은 상태 3. 모집분야 및 주요업무: 앱 개발자-하이브리드 앱 (웹앱을 네이티브 형태로 감싼 형태) 유사사이트: https://www.pet-friends.co.kr/main/tab/2 4. 모집경력 및 필요스킬: 앱개발 관련하여 경력이 있거나, 최소 스프링을 자유롭게 다룰 수 있는 스킬 필요 vue.js 옵션 등 5. 참고기타사항: 기획/디자인/개발/마케팅 포지션 다 구성되어 있으나, 추가 개발자가 두분 정도 더 필요한 상황 6. 문의/연락: 010-4590-4917 배대근 카카오:antoniobae1 참고url:IT 웹 앱 마케팅 개발 창업모임 파랑새(Since 2021.10.02 : 네이버 카페  - http://naver.me/FIgA4x8x

안녕하세요! 캡틴판교님 router에 대해 궁금한 점이 있어서 글 남깁니다. 글을 많이 작성한 사람 순위 리스트에서 글작성자를 클릭하면 글목록을 보여주는 게시판에서 작성자를 검색하여 보여주는 기능을 구현중입니다.  작성자를 누르면 해당 작성자에 대한 글 목록만 새로고침을 하면게시판에 있는 목록을 다 가져오고 싶습니다. router query를 통해 작성자를 전달하면 새로고침할 경우 똑같이 작성자를 세팅하여 검색합니다. 제가 원하는 기능을 구현하기 위해서 새로고침은 어떻게 처리해야 하나요?

안녕하세요! 부끄럽지만 저의 이해가 맞는지 여쭤보고 싶습니다.   그럼 <router>의 최종형태..? 모습은 자바스크립트의 <div><a href="/login"></div>   인걸까요?   좋은 강의 감사합니다!