일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- TSDoc
- 개발콘텐츠
- React.js
- utilty type
- 타입스크립트
- 2022
- 커스텀
- javascript
- 리액트
- typescript
- 타입선언
- 성능최적화
- 반복줄이기
- react
- vue.js
- returnType
- reactjs
- 누구나 자료구조와 알고리즘
- CSS
- 제네릭
- const 단언문
- 공통컴포넌트
- NonNullable
- JS console
- 폰트적용하기
- click and drag
- 타입좁히기
- 티스토리꾸미기
- 레이아웃쪼개기
- Chart.js
- Today
- Total
목록Development/Vue.js (69)
몽땅뚝딱 개발자
새삼 생각나는 코딩테스트 때 watch 남발했다가 '왜 이렇게 쓰신거예요?'라는 물음에 놀라고 제대로 개념 잡힌 기억..(🥲) watch는 어떤 때에 쓰는 것이며, 성능에 어떤 영향을 미치는지 매우 친절히 설명해주셔서 그 뒤로는 plan B로 사용하게 됐다. 예전에 내가 짠 코드를 보면 왜 그렇게, 왜 그곳에서 써야하는지 명확한 이유도 없이 마구잡이로 사용했었다. 물론 지금도 100% 적절하게 쓴다고 확신할 수는 없지만 그래도 함수 하나, 데이터 하나를 선언할 때도 과연 적절한 옵션에서 사용하고있는건지 고민해보고 판단하는 단계까지는 왔다. ◽ computed 계산해야하는 목표데이터를 정의하는 방식으로, 선언적 프로그래밍 방식이다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 실행되며 캐..
서론 ◽ Vuex가 나온 이유 Vue는 단방향 데이터 흐름이다. state(=data), view(=template), actions(=methods)이 단방향으로 흘러간다. 하지만 공통의 state, 즉 data를 공유하는 여러 컴포넌트가 있는 경우 이 단순함이 깨질 수 있다. 1. 여러 view들은 동일한 state에 의존한다. == 그래서 아주 많은 중첩으로 이루어진 경우 props를 사용하면 더 복잡해질 수도 있다. == 형제 컴포넌트에서는 이 해결방법이 작동하지 않을 수도 있다. 2. 다른 view에서 작업하더라도 동일한 state에 반영해야 할 수도 있다. == 따라서 반영하기위해서는 직접 부모-자식 인스턴스를 참조해야한다. == 여러 state의 복사본을 변경하거나 동기화하는 방법을 사용해야..
Vue의 Built-In Components ◽ 애니메이션 처리에 필요한 빌트인 컴포넌트이다.진입 전, 벗어나기 전, 진입했을 때 등등의 타이밍을 설정하여 맞는 CSS나 Javascript 훅을 사용하여 표현할 수 있다. ◽ 의 사용 아래는 커스텀 모달을 띄웠을 때 모달 뒤를 dim 처리하기위한 이다. v-show로 출력되거나 사라질 때 css가 적용된다. 📄 HTML 📄 CSS /* dim의 css */ .cover { background-color: rgba(0, 0, 0, 0.4); overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } /* 출력되기 전, 사라지기 전에 적용할 CSS ..
두번째 포스팅은.. 내가 한번도 사용해 본적이 없는 Directive이기 때문에 직접 사용해보고 올리는 사용기이다. v-slot은 설명을 읽어도 이해가되지않아서 이 포스팅이 굉장히 미뤄지고 있었는데, 직접 프로젝트를 구현해서 사용해보다 망치로 머리를 맞은 듯 깨달았다. '그냥 컴포넌트로 쓰지 왜 슬롯을 쓰는거야?' 하다가 '슬롯 진짜 편하다!'로 끝난 여정이었다. ◽ v-slot 슬롯을 여러개 사용하는 경우 슬롯의 이름을 지정해주면 각각의 위치에 들어간다. 추천 신규 테마 달력/다이어리 더 보기 ◽ v-pre 이 엘리먼트와 모든 하위 엘리먼트에 대한 컴파일을 건너 뛴다. 컴파일의 속도를 높이기 위해 사용한다. {{ 이 곳은 컴파일을 건너 뛴다. }} ◽ v-cloak { display: none }의 규..
쿼리 한 줄을 짤 때에도 성능에 어떤 영향을 미칠 지 고민하고 짠다는 서비스회사의 얘기를 처음 들었을 때 꽤나 충격을 받았다. 그 뒤로 늘 일정에 쫓겨 '돌아가기만 하면 되는 코드'만 만들어오던 모습에서 이제는 '좋은 코드'에 가까워지기 위해 노력하고 있다. 이번에 Vue.js로 클론코딩을 진행하며 전혀 사용하지않았던 새로운 방식으로 컴포넌트를 쪼개어보았다. 그러자 컴포넌트의 depth가 많아졌고 필요한 곳마다 같은 파일을, 같은 변수를 Import하는 내 모습을 깨닫고 이건 아니다 싶어 몽땅 지워버리고 적절한 통신방법에 대해 고민하기 시작했다. 내가 알고있는 컴포넌트간의 통신방법은 3가지로 추려볼 수 있다. 1. props & emit 2. eventbus 3. Vuex 지금까지는 eventbus를 제..
먼저, 네비게이션 가드에 대한 지식이 선행되어야 한다. [Vue.js] vue-router의 네비게이션 가드 ◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 be-a-weapon.tistory.com ◽ meta 라우터에서 네비게이션 가드를 통해 라우터 이동 시 권한이나 정해진 상태값에 따라 이동에 제약을 걸 수 있다. 예를 들어, 유저가 로그인이 꼭 필요한 페이지에 접근할 때 비로그인 상태라면 로그인 페이지로 redirect 시켜야하고, 로그인이 되어있는 상태일 경우 그대로 이동시키면 된다. 이처럼 '로그인 여부'를 필수로 알..
📄 JS // camelCase로 작성하지 않고 kebab-case로 작성한다. this.$emit(‘my-event’) 📄 HTML 커스텀 이벤트를 지정할 때, 이벤트 이름을 camelCase로 작성하고 위와같이 호출하면 아무런 동작을 하지 않는다. myEvent로 작성 시에 v-on 이벤트리스너는 항상 자동으로 소문자 변환을 하기때문에 myEvent가 아닌 myevent로 변환되기 때문이다. 따라서 이벤트 이름은 kebab-case로 작성하는 것이 좋다. 출처 https://v3.ko.vuejs.org/guide/component-custom-events.html 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
클론코딩에 필요하여 이것저것 미리 만들어보는 중! 원래는 빈 별, 채워진 별 이미지로 구현하지만... 우선 급한대로 이모티콘으로 구현했다. 🍎 🍏 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ 설치하기 npm i vue-debounce ◽ debounce란? 연이어 함수가 호출될 때 가장 마지막이나 가장 처음의 1회만 이벤트가 발생하도록 하는 기술이다. 예를 들어, 검색어를 입력할 때 하나의 모음/자음을 입력할 때 마다 API를 호출하는 것은 비효율적이고 과도한 비용을 들게 한다. 따라서 사용자가 타이핑을 마쳤다고 생각하는 지점에서 호출해야한다. 기존에 발생한 이벤트(=사용자가 검색어를 입력할 때 발생한 이벤트)를 하나로 묶은 상태에서 가장 마지막으로 호출된 시점에서 API를 호출하면 되는 것이다. ◽ 예제 📄 main.js import vueDebounce from "vue-debounce"; Vue.use(vueDebounce); 📄 test.vue - HTML 영역 📄 test.vue..
◽ Nprogress란? 로딩표시를 위한 라이브러리이다. ◽ 설치하기 1) npm $ npm install vue-nprogress 2) CDN 방식 nprogress - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Simple slim progress bars - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each mon..