profile
사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자
post-thumbnail

HTTP 헤더 토큰 설정 & axios 인터셉터

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

4일 전
·
0개의 댓글

Vue 조건부 렌더링, Vuex getters

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

5일 전
·
0개의 댓글
post-thumbnail

Vuex, 애플리케이션 로그인 로직

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

2021년 1월 13일
·
0개의 댓글

뷰 에러 핸들링 & 폼 유효성 검사

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

2021년 1월 12일
·
0개의 댓글

Vue axios 라이브러리 사용 및 설정

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

2021년 1월 11일
·
0개의 댓글

커스텀 비디오 플레이어 만들기

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

2021년 1월 11일
·
0개의 댓글

뷰 라우터와 코드 스플리팅

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

2021년 1월 6일
·
0개의 댓글

뷰 프로젝트 생성과 프로젝트 환경설정

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

2021년 1월 5일
·
0개의 댓글

01/04

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

2021년 1월 4일
·
0개의 댓글

12/23

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

2020년 12월 23일
·
0개의 댓글

12/21

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

2020년 12월 21일
·
0개의 댓글

12/14

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

2020년 12월 15일
·
0개의 댓글

12/08 ~ 09

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

2020년 12월 8일
·
1개의 댓글

12/07

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

2020년 12월 7일
·
0개의 댓글

12/05

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

2020년 12월 5일
·
0개의 댓글

12/02

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

2020년 12월 2일
·
0개의 댓글

11/27

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

2020년 11월 29일
·
0개의 댓글
post-thumbnail

11/23

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

2020년 11월 23일
·
0개의 댓글

11/17

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

2020년 11월 17일
·
0개의 댓글

11/11

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

2020년 11월 11일
·
0개의 댓글