DevYoon

1️⃣ HOME : 영화 목록 조회 페이지 TMDB API에 popular로 요청 보내서 상위 40개의 영화를 보여준다. 🎞️ Vue LifeCycle Hook mounted를 활용해 따로 어떤 버튼을 클릭하지 않아도 요청 후 영화 목록 데이터를 가져와 화면에 보여주었다. 🎞️ API에서 받아온 데이터 안에 id값이 있길래, for문의 key로 사용했다. 2️⃣ Random : 영화 추천 페이지 과제는 랜덤으로 영화를 하나 뽑아서 보여주는 거였는데, 좀 더 실존하는 서비스 느낌을 내보고 싶어서 문구를 추가해봤다. 오늘 뭐 보지? 버튼을 클릭하면 🔽 이렇게 변한다. 뭘 봐야 할지 모르겠다면, 저희가 대신 골라드릴게요! 오늘 뭐 보지? 오늘은 {{pick.title}} 어때요? {{pick.overview}..

깔끔하고 귀여운 아이콘이 많아 가끔 썼던 Font Awesome 💫 Vue에서도 사용하고 싶은데 방법을 몰라서 한 번 찾아봤다. 1️⃣ Step 01 Font Awesome에 접속해 CDN 코드를 복사한다. https://fontawesome.com/account/cdn Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2️⃣ Step 02 복사한 CDN을 Vue ➡️ main.js의 head 안에 넣어준다. 3️⃣ Step 03 마음에 드는 아이콘을 골라 코드를 복사한 후, 넣고 싶은 곳에 넣어주면 끝!

1️⃣ Store import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ plugins:[ createPersistedState() ], state: { todos:[ ] }, getters: { isdone(state){ return state.todos.filter(todo => { return todo.done === true }).length }, isnotyet(state){ return state.todos.filter(todo => { return todo.done === false })..

Vuex 1️⃣ Vuex란? Vue 상태관리 라이브러리 state(상태)를 전역 저장소로 관리할 수 있도록 지원 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 상태가 예측 가능한 방식으로만 변경 컴포넌트의 공유된 상태를 추출 ➡️ 전역에서 관리 컴포넌트는 커다란 view가 되며, 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있음 2️⃣ Props&Emit VS Vuex Props&Emit props&Emit은 단반향 흐름, 부모 ➡️ 자식 간의 전달만 가능 장점 : 데이터의 흐름 직관적으로 파악 가능 단점 : 컴포넌트 중첩이 깊어지면 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 데이터 전달이 매우 복잡해짐 단방향 데이터 흐름 state : 앱을 작동하는 원본 소..

🔥 주요 Keypoint ❕ 상위 컴포넌트 - 하위 컴포넌트 연결 / props & emit 1️⃣ App App.vue 💫 searchBar로부터 이벤트 청취 ➡️ 입력값과 API KEY로 params 구성 ➡️ axios로 요청 💫 요청 결과 전달 받은 영상들을 videos 배열에 넣어주기 ➡️ 하위 컴포넌트인 VideoList에 props로 전달 💫 VideoList로부터 이벤트 청취 ➡️ 선택한 비디오 props로 VideoDetail에 전달 2️⃣ searchBar 검색 💫 input 박스에 작성 후 엔터 ➡️ 부모 컴포넌트(App)에게 이벤트로 입력한 값 전달 3️⃣ VideoList VideoList 💫 VideoListItem의 이벤트 청취 ➡️ App으로 이벤트 전달 💫 하위 컴포넌트인 ..

1️⃣ App.vue 라우터 경로 설정 Lunch | Lotto 🔥 router-link to = '/lunch' 🔥 router-link :to = '{name:'lunch'}' ➡️ Named Routes 2️⃣ index.js routes 설정 const routes = [ { path: '/lunch', name: 'lunch', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: lunch }, { path:'/lotto/:lottoNum', name: 'lotto..