git checkout -f(force): -f 옵션을 사용하면 기존의 코드를 모두 덮어쓰게된다.HTTP 401 코드 : 권한이 없음을 나타내는 코드(unAuthroized)토큰 : 사용자가 인증되었을 경우 발급하는 데이터, 이 값을 통해 인증 여부를 판단한다.jwt(

vuex getters: computed 처럼 state값이 변경될때 특정 상태를 계산할 수 있도록 사용하는 속성.로그인 후 헤더 영역 분기 처리: 로그인 후 나타날 영역과 사라질 영역을 <template> 태그를 이용해서 조건부 렌더링한다.: 로그인 후 Logi

Scoped속성을 가진 style 태그 <style scoped>: style태그에 선언된 CSS의 범위를 현재 컴포넌트로 제한한다.: https://vue-loader-v14.vuejs.org/kr/features/scoped-css.htmlrouter

axios response에서 api 요청 결과는 data 속성 안에 담겨져 있다.ES6의 해체 문법(destructuring)을 통해서 axios response의 data속성에 쉽게 접근할 수 있다.✨✨✨ API 요청 시 에러 처리 방법 ( async/await의

axios 인스턴스 생성과 api URL 공통화: ✨✨ 배포 시 API URL과 프로토타이핑 할 때 URL이 다를 수 있기 때문에, URL을 공통화하고, 환경 변수 파일에 저장해 주어야 한다.api 공통화 및 인스턴스 생성을 통해 코드를 간결하게 작성할 수 있다.axi

참고: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIsHTMLMediaElement: 오디오와 비디오 엘리먼트를 포함하는 미디어

Vue.use(): 플러그인을 실행하고, 초기화하기 위해서 필요한 코드뷰 라우터 인스턴스와 routes 배열routes 배열은 라우팅 정보를 담는 속성라우터 경로와 해당 경로에 접속할 경우 그려지는 페이지(컴포넌트)를 정의router-view & router-linkr

postman : Api 테스트 도구vue-cli 버전 확인 : vue --versionvue 프로젝트 시작: vue create 프로젝트 명Preset : 플러그인들의 집합을 의미unit testing, 테스트 도구 Jestdedicated config files :

select.selectedIndex : select 태그의 현재 선택된 값의 인덱스를 가져올 수 있다.select.selectedIndex = 3 이렇게 값을 줘서 원하는 아이템을 선택할 수도 있다.=> 만약 인덱스에 아이템이 없을 경우, 아무것도 선택되지 않는다.s

😎 12/23 TIL 1. CSS word-break > ** keep-all break-all 2. Form Validator > - ✨ 영어 문자열 제일 앞 글자 대문자로 만들기 > - ✨ 이메일 체크 정규식 String("문자열") : 문자열을 생

배우 검색 페이지 영화 그리드 컴포넌트 생성 이전 라우트와 현재 라우트를 비교해서 특정 파라미터 값이 변했을 때만 데이터를 로드하기이전 값이 존재하지 않을 경우가 있으므로, 이전 값이 있는지 여부를 체크각 li태그의 높이 값을 정해주지 않았더니, float을 통해서

Sticky 헤더 만들기 MovieItem CSS 수정 0) ✨ position: fixed 적용어디에 position: fixed를 적용해야 할까?현재 프로젝트 구조는 header와 content영역을 겹치게하기 위해서 .content에 음수 마진을 이용해서 겹치

메인 페이지에 보여지는 영화, 백그라운드 비디오 Idea랜덤하게 영화를 하나 가져온다. => api에서 랜덤 데이터를 가져오는 방법이 있는지 찾아보기 => 데이터 바인딩영화 예고편 가져오는 방법 => api에서 영화 예고편 가져오는 방법 찾아보기백그라운드에 비디오?

무한 스크롤 : https://css-tricks.com/storing-and-using-the-last-known-route-in-vue/1) 모든 페이지에 detailView를 적용할때 문제 발생 특시 search페이지에서 문제 발생문제점 1) searc

무한 스크롤 무한 스크롤을 이용해서 this.page값을 1씩 증가시킨다.쿼리스트링을 만들어서 api를 호출한다.watch를 통해 page의 증가를 감시해서 데이터를 호출?아니면 page를 증가시키고 따로 함수를 호출?1) queryString 만드는 방식을 함수에서

sort_by쿼리를 이용해서 필터링 무한 스크롤 적용 및 페이지네이션? 넷플릭스의 경우 필터링을 선택할 경우 https://www.netflix.com/browse/genre/5685?bc=34399&so=su 와 같은 식으로 뒤에 so=su로 쿼리스트링이

✔ 마이리스트 마크업 ✔ 마이리스트 데이터 바인딩 ✔ detailView 로딩 컴포넌트 수정 1) width의 경우 그냥 %를 주면 부모 태그의 width값에 따라 변한다.2) 하지만 height의 경우 width의 값에따라 변하게 만들고 싶으면 padding을 이용해

✔ 타이틀 이미지 타이틀 텍스트로 변경 ✔ 이미지 영역 테두리 뿌옇게 처리 ✔ 좋아요 싫어요 마이리스트 기능 및 로컬스토리지 연동 user-select 속성을 사용해서 드래그를 방지할 수 있다.비슷한 속성으로 모바일에서 확대를 방지하는 user-scalable이 있다.

✔ 상세 정보 라우터 설정 및 컴포넌트 생성(모달 컴포넌트, 중첩된 라우트) ✔ Show.vue에서 각 영화 이미지 태그 클릭 시 링크 이동하도록 변경 1\. 라우터 경로 설정 : BrowseHome, Search, Latest, genre 경로에 children 속성

✔ searchResult는 state에서 전역 상태로 관리한다. O✔ SearchInput에서 actions를 호출, SearchResult의 상태를 변경한다. O✔ 👀 무한 스크롤은 어떻게?! page값은 어떻게 관리? X관리할 데이터 : 현재 page값, 영화