실무에서 스토리북을 도입하기 전에는 노션 문서에 UI 컴포넌트들의 사용 방법이나 스크린 샷등으로 어떤 컴포넌트인지 알 수 있도록 문서를 작성했다. 글로벌로 재사용하는 UI 컴포넌트의 개수가 엄청나게 많은 건 아니지만, 다른 사람이 만든 UI 컴포넌트를 사용할 때 문서를 보고 한눈에 파악하기가 쉽지 않다. 스토리북을 예전에 사용해보긴 했지만, 워낙 바쁜 상황이어서 도입은 미뤘었는데, 시간될 때마다 스토리북을 설정해서 마침내 스토리북을 도입했다. 다만 스토리북을 도입할 때까지 쉽지는 않았는데, 기존에 사용하고 있던 Composition API, Vuetify, 기타 라이브러리 등에서 충돌이 발생했기 때문이다. 스토리북은 별개의 빌드를 구성하기 때문에 그에 따라 설정을 해줘야 한다. 아래 명령어를 통해 우선 ..
Vuetify를 사용하다 보니 Pagination도 v-pagination을 사용하다가, 원하던 기능이나 디자인이 커스텀되지 않는 부분이 있어서 새롭게 제작하게 됐다. v-pagination이나 구글링하면 나오는 소스들과는 조금 다른 점이 있어서 직접 개발을 하게 됐는데, 조금 특이한 점이 있다면 이전과 다음 버튼을 누르면 보통 한 페이지씩 이동하고, 다음 페이지 그룹으로 넘어갈 때 (1,2,3,4,5에서 6,7,8,910) 조건이 5에서 다음 버튼을 누르면 6으로 가거나 그러는데 구현해야 하는 기능은 이전, 다음 버튼을 누르면 5개씩 페이지가 넘어가고, 1페이지에서 다음을 누르든, 2든, 3,4,5 페이지에서 다음을 누르면 무조건 6으로 가고, 마찬가지로 6,7,8,9,10 페이지에서 다음을 누르면 1..
Vuex Store 모듈을 쉽게 관리하는 방법 예전에는 Store를 하나 추가한다고 하면, modules 폴더 안에 store.js 파일을 추가하고, store 폴더 안에 있는 index.js에 추가한 스토어.js를 추가해줘야했다. 어려운 작업은 아니나, 귀찮은 작업임은 맞고 언젠가 이런 부분에 대해 리팩토링이 필요하다 생각했다. 그래서 알아보니, 이미 아래와 같이 사용하는 코드가 있었다. // modules 폴더 안에 index.js import camelCase from 'lodash/camelCase'; // 현재 폴더안에 js 파일을 모두 찾는다. // 하위 폴더는 없기 때문에 false로 설정. const requireModule = require.context('.', false, /\.js$..
- Total
- Today
- Yesterday
- Cypress
- Front
- react native
- react query
- 퍼블리셔
- pinia
- pagination
- Store
- vue3
- vuetify
- composition
- NUXT
- backend
- 타입스크립트
- Redux
- typescript
- CORS
- react-query
- Core Components
- vue.js
- frontend
- vuex
- three.js
- react
- 자바스크립트
- 포트폴리오
- JS
- e2e
- vue
- 호이스팅
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |