이번에 회사에서 진행하는 프로젝트에 vue3와 타입스크립트를 도입했습니다.화면에 사용할 UI 컴포넌트를 만드는 작업을 담당했는데, 그 중에서 테이블을 만들면서 vue와 타입스크립트에 대한 이해도를 높이는 좋은 경험을 했습니다. 작업하면서 느꼈던 점을 정리하려고 합니다.
: 프로젝트에 사용하려고 했던 vue 인피니티 스크롤 컴포넌트가 vue3에서 지원을 하지 않아서 형태를 참고해서 직접 컴포넌트를 구현해 보았다.: 정말 간단하게 만들어서 그런지 컴포넌트가 유연하지 않다..부모 자식 컴포넌트간 통신하는 새로운 방법에 대해서 알게되었다기존
: https://positiveko.netlify.app/enabling-css-and-properties: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_eve
: 만약 브라우저가 src 속성을 가지면, src 속성에 있는 이미지를 무조건 로드한다.=> 레이지 로딩은 이를 이용한다. src에 값을 넣지 않고 있다가, 뷰포트에 보이면 src에 값을 넣어서 이미지를 로딩하는 기법.: https://stackoverflow
문자열 앞 뒤의 공백을 trim을 이용해서 제거했다.입력이 ''(빈 문자열)로 들어오는 케이스가 있어서 계속 실패했다. input.length를 체크해서 예외처리를 해서 정답을 맞출 수 있었다.
: 'vue-awesome-swiper' 라이브러리를 사용하려고 했지만, 현재 프로젝트에 사용하고 있는 vue3는 지원하지 않아서 swiper 공식 사이트에 있는 'swiper/vue'를 사용했다.swiper/vue 컴포넌트 import 하기swiper/vue 라이브러
사용 배경: 베스트 상품 목록을 보여주는 페이지에서 '카테고리 ID'값을 파라미터로 넘겨서 상품 목록을 조회하고 있었다.axios의 어댑터를 사용하면 쉽게 캐싱을 사용할 수 있지만 현재 커스터마이징되어있는 'request 함수'를 사용하고 있어서 페이지 내부적으로 캐싱
참고✨ String.prototype.charCodeAt(index)는 index에 해당하는 문자의 아스키코드값을 반환하는 함수이다.반대되는 함수로 String.fromCharCode()가 있다.처음 풀이최종 제출
✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.✨ vuetify 연동✨ stylelint 연동이미지 레이지 로딩 및 에러 처리'tmdb/configuration'을 최초에 호출해서 기본 세팅하기uetify 연동 => 간단한 UI 사용하
✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.✨ vuetify 연동✨ stylelint 연동SearchPage, MoviePage, HomePage vue, scss파일 생성 및 라우터에 추가 ✔메인 페이지 마크업빌보드 영역 마크업(
: https://ji-gwang.tistory.com/542.1 tmdb API의 구조 분석https://api.themoviedb.org/3/movie/{movie_id}?api_key=5c641d77de2e4b7554d8ebbf14934986&l
top: 0; bottom: 0;을 통해 height: 100%와 같은 효과를 적용했다.변경 사항infinite-loading에 identifire props 추가기존에 우리가 사용한대로 infiniteHandler에서 $state를 인자를 받아서 $state.rese
1 ~ 10000 자리까지 배열을 생성, 모두 false로 초기화반복문을 통해서 1 ~ 10000 까지 d(i)를 실행하고 해당 배열의 인덱스를 true로 만든다.마지막으로 생성한 배열을 순회하면서 false인 애들만 console.logjavascript에서 배열을
참고: https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array참고2: https://stackoverflow.com/questions/35370222/array
: vue-router 4버전 이상을 설치한다.Webpack의 코드 스플리팅을 이용해서 현재 라우트에 해당하는 컴포넌트를 동적 로딩한다. 이를 통해서 페이지의 초기 로딩 속도를 줄일 수 있다.window history 모드를 적용 (vue-router 이전 버전에서는
: scss 파일 명 앞에 '\_'(언더바)를 붙여서 별도의 css파일로 컴파일되는 것을 방지할 수 있다. '\_mixins.css' 파일의 경우 별도의 css파일로 컴파일될 필요가 없기 때문에 파일 명 앞에 '\_'(언더바)를 붙여서 작성했다.데스크탑 퍼스트로 작성
: IE에서 element.remove() 메소드를 지원하지 않아 에러가 발생했다.따라서, 모든 브라우저에서 지원하는 로직으로 수정했다.: document.querySelectorAll()을 통해 얻은 NodeList에서는 forEach는 존재하지만, map 메소드는