묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
Strings must use singlequote quotes 해결방법
어떤 방법을 써도 위 오류가 사라지지 않습니다.overflow에 나온 방법도, setting.json에 들어가서 "prettier": { "singleQuote": true, "semi": false },를 쓰라는 것도, 위 사진처럼 설정에 들어가 prettier를 싱글쿼터로 바꾸는 것도 다 해봤는데 해결이 되지 않습니다. 혹시 해결방법 아시는 분 계실까요..?
-
미해결프로젝트로 배우는 Vue.js 3
25강 json-server 설치 질문드립니다.
json-server 설치 후 강의처럼 입력했는데강의처럼 localhost:3000/todos 가 아닌 다른 링크들이 만들어져서 강의처럼 안보이는데 이런경우는 어떻게 해결하나요?http://localhost:3000/todos 를 직접 쳐서 들어가면 이런 식으로 404에러가 떠서 강의 예제처럼 보여지지 않습니다
-
미해결Nuxt.js 시작하기
'TypeError: this.oprions.parse is not a function'오류
vue 파일에서 eslint 오류가 나는데 구글링 하여 따라해봐도 오류가 사라지지 않습니다ㅜ
-
미해결Vue.js 시작하기 - Age of Vue.js
vue-cli 설치 오류
안녕하세요 말씀 하신대로 진행하다가 vue-cli설치에서 막혀 질문드립니다.무엇때문에 오류가 나는건지 모르겠습니다 ㅠ
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
설치 이후 npm run serve 화면 안나옴
제작 후 npm run serve 하면 아래와 같은 경고문구가 계속 뜨는데 왜 이러는 걸까요??
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
vue cli 문제
npm install -g @vue/cli를 붙이면 아래처럼 많은 것이 뜨는데 왜 이럴까요ㅜㅜ??
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Router 문의
- Router 작성시에 컴포넌트를 임포트 해서 사용하고 있는데 Lazy Load를 하지 않고 전부 임포트를 사용하는 이유가 따로 있는 것인지요?
-
미해결Vue.js 시작하기 - Age of Vue.js
vue와 router cdn 사용시 에러
안녕하세요 vue랑 router cdn으로 사용하고있는데 계속 버전이 업데이트되어서 그런지 에러가 나네요. vue, router 이 주소로 끌어오고있고, 에러는 router.html:15 Uncaught TypeError: VueRouter is not a constructor <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@4"></script> 구글링해보니.. vue버전 낮추래서 2.6.12로 낮췃는데, 그럼 또 다른에러가 생기더라구요... Uncaught TypeError: vue.defineComponent is not a function
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
15강.조회화면 저장실습 - params안됨
5:28분에 있는 const params가 먹질 않습니다. 처음부터 다시들어보며 몇번을 반목해도 이렇게 나오는데 뭐가 문제일까요??ㅜㅜ
-
미해결
v-if="isOpen" 관한 질문드립니다.
안녕하세요 공부하는 학생입니다. 공부하다 궁금한게 있어서 메일로 질문드려요 바쁘시겠지만 도움부탁드릴께요 https://codepen.io/goodpublisher/pen/QWmypLy --- 작업 예제 입니다. 메뉴 about 과 contact 에 각각 하위메뉴가 있는데요 위에 작업된 예제에서는 about 메뉴를 클릭하면 contact 메뉴까지 같이 보여집니다. v-if="isOpen" 이부분을 v-if="is(현재선택된name)Open " 이렇게 바꾸면 되는건가요? is(현재선택된name)Open ? 현재 선택된 name은 어떻게 넣어주면 되는건가요? 아니면 어떻게 해줘야 각각 about 과 contact 에 각각 하위메뉴 따로 보여질수 있을까요? 초보 프론트엔드 공부하는 학생입니다. 도움이 필요합니다. 제발 도와주세요 감사합니다. 좋은 동영상 강좌 올려주셔서 다시 한번 더 감사합니다. 습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
대부분 파일에서 첫번째 단어에 붉은 밑줄이 생기며 오류가 뜹니다.
ESLint 에러가 화면에 표시되지 않게 하는 방법 까지 했는데 저렇게 오류가 나서 진도를 못나가고 있어요 ㅠㅠ
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
저 처럼 강사님 말 안듣고 Vue3하다 dispatch error 난 경우 해결
잘 따라 하다가 또잉 이런 애러가 계속 나서 1시간 해매다가 바보같이 main.js import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router, store).mount('#app') 이렇게 했다가 import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router).use(store).mount('#app') 이렇게 고쳤더니 store를 잘 인식하네요..수업 초반에 히힛 난 vue3 써야지~ 하고 강사님말 안듣고 여기까지 오다보니 다시 Vue2로 돌아갈 자신이 없어 돌아가지 못하네요
-
미해결
lecture-vue-trello-server 폴더 위치
안녕하세요! vue-trello 듣고 있는 중인데 https://github.com/jeonghwan-kim/lecture-vue-trello-server 이 폴더를 복사해서 서버 띄우는거 까지는 성공했습니다. 근데 폴더 위치가 사진처럼 있어도 되는건가요? 아니면 client 랑 별개로 server폴더가 생성되어야 하나요??
-
미해결
vue npm run serve 오류
몇번을 다시해보고 찾아봐도 이렇게만 나오는데 무엇이 문제일까요??ㅜㅜ 라우터랑 vue가 호환이 안되서 그렇다는데 이해가 하나도 되지 않습니다...
-
미해결Vue로 Nodebird SNS 만들기
선생님 처음 환경 셋팅 관련 문의드립니다.
강의를 처음 시작할때 실무 전용 강의이다보니 node 및 vue의 가장 기본 설치 부분은 패스되어 있는 것 같은데 혹시 이 부분은 기초 무료강의를 먼저 선행으로 보면 해결되는 걸까요 ?? YouTube 에 있는 vue 무료강의(웹게임) 을 선행으로 보고와야할까요 ??
-
미해결Vue.js 시작하기 - Age of Vue.js
index.html <script src''/> 사용관련
안녕하세요 강사님 ! 수업 감사히 듣고 있습니다. ES6 import, export를 학습하며 어려움을 겪고있습니다..ㅠ.. public폴더의 index.html는 싱글페이지어플리케이션(SPA)의 첫 페이지로써,, 이 위에 vue 컴포넌트들을 뿌려주는걸로 알고 있습니다. 왜 index.html에 <script src''/>를 사용하여 js를 가져와 이 js안의 함수들을 어디에서나(ex. vue파일들) 전역함수처럼 쓸수없는지요....! <질문정리> 1. <script src=''/>를 index.html에서 써도 되는지 ! 2. <script src=''/>를 쓰면 안된다면, js, vue 파일마다 필요한 함수,변수를 import, export구문 작성하며 써야하는건지? 3. vue.js는 ES6문법으로 js를 작성해야 하는것이 관례인지. 4. 옛날 ES6문법이 아닌 js는 당연 import, export를 사용하지 않았습니다. vue파일에 기존 js를 import하여 쓰고 싶은데 <script src=''/>처럼 파일 전체를 가져와, 안의 함수나 변수들을 vue파일의 script태그에서 사용할수 있는 scope를 가진 export, import문을 알고싶습니다. import "module-name"; 이걸까요..?
-
미해결Vue.js 시작하기 - Age of Vue.js
자바스크립트 모듈의 js파일을 import하여 그안의 함수(메소드)를 .vue에서 쓰는 방법
안녕하세요 선생님 강의 잘 듣고 있습니다. 현재 기존 자바스크립트로 개발한 모듈을 vue에 적용해보는 공부를 해보고 있습니다. 이 과정에서,, 기존 jsp를 vue로 전환하는데 어려움을 겪고 있습니다. 막힌 부분은 다음과 같습니다. 1. 기존 js파일을 vue파일에 import하여 해당 js의 함수를 쓸수있는 방법을 알고 싶습니다. 2. 강의에서 처럼 vue파일은 components폴더에 모아두는게 정석?관례? 인가요? 3. 강의를 보니 Vue의 개발하는 방법이 2가지 인거 같습니다. 1)html로 화면단을 구성하는 방법(강의 초반 playground) 2)html파일 거의 없이 vue파일로 화면단을 컴포넌트화 하여 구성하는 방법(강의 후반 VueCLI) 최근 추세는 vue-cli의 구조로 vue파일로 개발하는 추세인가요?? 좋은 강의 감사하고 엔드게임 완주하고 싶습니다 !ㅎㅎㅎ
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
router url
첫번째 질문 ) 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.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue cli? vue?
안녕하세요. 설치관련해서 궁금한게 있어서 질문드려요. vue cli는 아래의 명령어를 이용해서 3.0버전을 설치하잔아요.. vue create vue-cli3 근데, 이 다음에 옵션을 선택할때는 왜 Vue 2를 선택하는 것인가요? Vue Cli랑 위의 Vue 2?3?은 관련이 없는 것인가요? 답변부탁드리겠습니다. 감사합니다.