- 전체보기(125)
- vue(13)
- algorithm(8)
- vue-flix(8)
- vue router(5)
- TIL(4)
- vuex(4)
- JavaScript(3)
- vue3(2)
- Vue Store(2)
- axios cache(2)
- Vue watch(2)
- Vue props(2)
- vue slot(2)
- Vue 컴포넌트(1)
- 동적 라우트 매칭(1)
- Vue 동적 클래스(1)
- 폼 유효성 검사(1)
- dimmed image(1)
- Vue event trigger(1)
- vue cli(1)
- vue scss(1)
- 스켈레톤(1)
- vue component(1)
- vue sass(1)
- getBoundingClientRect(1)
- vue transition(1)
- html5 video(1)
- 알고리즘(1)
- vue3 sfc(1)
- vuex modules(1)
- vue 트랜지션(1)
- sessionStorage(1)
- skeleton(1)
- NavigationDuplicated 에러(1)
- axios config(1)
- scss media query mixin(1)
- 백준 알고리즘(1)
- js(1)
- node.js(1)
- Element.childNodes(1)
- axios interceptors(1)
- tmdb api(1)
- 이미지 확장자 검사(1)
- FullCalendar(1)
- vuex actions(1)
- Vue 프로젝트 생성(1)
- Node.contains(1)
- scss boilerplate(1)
- afterEach(1)
- 이벤트 생성 및 트리거(1)
- Vue Modal(1)
- fileApi(1)
- swiper/vue(1)
- html(1)
- 정렬(1)
- Vue Bootstrap(1)
- 가계부(1)
- IR 기법(1)
- cookie(1)
- 에러 핸들링(1)
- vue 코드 스플리팅(1)
- TMDb(1)
- 컴포넌트 가드(1)
- Axios.all(1)
- axios.post(1)
- boj(1)
- slot(1)
- vue router 에러(1)
- vue3 vue-router(1)
- typescript(1)
- 정규표현식(1)
- 중첩라우팅(1)
- element offset(1)
Vue3 SFC + 타입스크립트로 컴포넌트 만들면서 느낀점 총 정리 - 작성중
이번에 회사에서 진행하는 프로젝트에 vue3와 타입스크립트를 도입했습니다.화면에 사용할 UI 컴포넌트를 만드는 작업을 담당했는데, 그 중에서 테이블을 만들면서 vue와 타입스크립트에 대한 이해도를 높이는 좋은 경험을 했습니다. 작업하면서 느꼈던 점을 정리하려고 합니다.
Vue 인피니티 스크롤 컴포넌트 만들어보기
: 프로젝트에 사용하려고 했던 vue 인피니티 스크롤 컴포넌트가 vue3에서 지원을 하지 않아서 형태를 참고해서 직접 컴포넌트를 구현해 보았다.: 정말 간단하게 만들어서 그런지 컴포넌트가 유연하지 않다..부모 자식 컴포넌트간 통신하는 새로운 방법에 대해서 알게되었다기존
2021.07.01 ~ 2021.07.02
: https://positiveko.netlify.app/enabling-css-and-properties: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_eve
2021.06.30
: 만약 브라우저가 src 속성을 가지면, src 속성에 있는 이미지를 무조건 로드한다.=> 레이지 로딩은 이를 이용한다. src에 값을 넣지 않고 있다가, 뷰포트에 보이면 src에 값을 넣어서 이미지를 로딩하는 기법.: https://stackoverflow
Node.js 백준 알고리즘 - 1152
문자열 앞 뒤의 공백을 trim을 이용해서 제거했다.입력이 ''(빈 문자열)로 들어오는 케이스가 있어서 계속 실패했다. input.length를 체크해서 예외처리를 해서 정답을 맞출 수 있었다.
2021.06.28 vue3 swiper/vue 적용하기
: 'vue-awesome-swiper' 라이브러리를 사용하려고 했지만, 현재 프로젝트에 사용하고 있는 vue3는 지원하지 않아서 swiper 공식 사이트에 있는 'swiper/vue'를 사용했다.swiper/vue 컴포넌트 import 하기swiper/vue 라이브러
2021.06.28
사용 배경: 베스트 상품 목록을 보여주는 페이지에서 '카테고리 ID'값을 파라미터로 넘겨서 상품 목록을 조회하고 있었다.axios의 어댑터를 사용하면 쉽게 캐싱을 사용할 수 있지만 현재 커스터마이징되어있는 'request 함수'를 사용하고 있어서 페이지 내부적으로 캐싱
Node.js 백준 알고리즘 9
참고✨ String.prototype.charCodeAt(index)는 index에 해당하는 문자의 아스키코드값을 반환하는 함수이다.반대되는 함수로 String.fromCharCode()가 있다.처음 풀이최종 제출
2021.06.15
✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.✨ vuetify 연동✨ stylelint 연동이미지 레이지 로딩 및 에러 처리'tmdb/configuration'을 최초에 호출해서 기본 세팅하기uetify 연동 => 간단한 UI 사용하
2021.06.09 ~ 14
✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.✨ vuetify 연동✨ stylelint 연동SearchPage, MoviePage, HomePage vue, scss파일 생성 및 라우터에 추가 ✔메인 페이지 마크업빌보드 영역 마크업(
TMDB API 연동
: https://ji-gwang.tistory.com/542.1 tmdb API의 구조 분석https://api.themoviedb.org/3/movie/{movie_id}?api_key=5c641d77de2e4b7554d8ebbf14934986&l
2021.06.08 ~ 10
top: 0; bottom: 0;을 통해 height: 100%와 같은 효과를 적용했다.변경 사항infinite-loading에 identifire props 추가기존에 우리가 사용한대로 infiniteHandler에서 $state를 인자를 받아서 $state.rese
Node.js 백준 알고리즘 8
1 ~ 10000 자리까지 배열을 생성, 모두 false로 초기화반복문을 통해서 1 ~ 10000 까지 d(i)를 실행하고 해당 배열의 인덱스를 true로 만든다.마지막으로 생성한 배열을 순회하면서 false인 애들만 console.logjavascript에서 배열을
Node.js 백준 알고리즘 7
참고: https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array참고2: https://stackoverflow.com/questions/35370222/array
2021.05.31 Vue3 vue-router 연동
: vue-router 4버전 이상을 설치한다.Webpack의 코드 스플리팅을 이용해서 현재 라우트에 해당하는 컴포넌트를 동적 로딩한다. 이를 통해서 페이지의 초기 로딩 속도를 줄일 수 있다.window history 모드를 적용 (vue-router 이전 버전에서는
2021.05.31
: scss 파일 명 앞에 '\_'(언더바)를 붙여서 별도의 css파일로 컴파일되는 것을 방지할 수 있다. '\_mixins.css' 파일의 경우 별도의 css파일로 컴파일될 필요가 없기 때문에 파일 명 앞에 '\_'(언더바)를 붙여서 작성했다.데스크탑 퍼스트로 작성
2021.05.31
: IE에서 element.remove() 메소드를 지원하지 않아 에러가 발생했다.따라서, 모든 브라우저에서 지원하는 로직으로 수정했다.: document.querySelectorAll()을 통해 얻은 NodeList에서는 forEach는 존재하지만, map 메소드는