후니후니

프로젝트 환경이 모노레포로 구성되어 있다면 root에 위치한 eslint + prettier 설정 파일로 모든 프로젝트에 포맷팅을 맞춰줄 수 있다. eslint, prettier는 모노레포라고 해서 별 다를 게 없고 설정해주면 되는데, React와 달리 Vue 같은 경우 settings.json에서 속성을 추가 하지 않으면 prettier 적용이 되지 않는 문제가 있어 조금 삽질을 많이 했었다. { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, } jsx, tsx는 위 값이 없어도 포매팅이 잘 적용되던데...

Pinia Actions 이번 포스팅에서는 Pinia의 Actions에 대해서 다룰 예정이다. 공식문서에 나와 있는 예제는 아래와 같다. 예제 코드를 먼저 보자. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // since we rely on `this`, we cannot use an arrow function increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random()) }, }, }) defineStore 함수 내부에 actions를 통해서 함수를 등록할 수 있다...

Pinia란? Vue 버전 2를 사용할 때는 주로 상태 관리를 Vuex로 처리했는데, Vue3 or Composition API이 출시되면서 Pinia라는 상태 관리 모듈이 추가되었다. Vuex의 단점으로는 TS와 같이 설계하기가 어려움이 있었는데 (문법이나 Type 등에서), 이 점이 많이 개선되었다고 한다. 그 외에도 장점이 꽤 많은 것 같은데, 공식 문서를 기반으로 Pinia의 장점은 무엇이 있는지 알아보자. 공식 문서 소개 페이지에 있는 내용이다. 직관적이고, 안전하고, Devtools 지원에, 확장, 모듈식, 가벼움 등등의 장점이 적혀있다. 이 내용만 보고서는 Vuex와 비교 했을 때 정확히 어떤 차이가 있고 어느 정도 더 좋은지 알기 어려운듯 싶다. 직접 사용해보면서 겪어보자! // npm i..

실무에서 스토리북을 도입하기 전에는 노션 문서에 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..

요즘은 배포 자동화로 편리하게 배포를 하는 것 같아서 Github Action에 대해 알아보았다. 우선 AWS 계정이 있어야 하고, 배포할 Git Repository가 있어야 한다. 우선 S3 버킷을 생성해야 하는데, 특별한 설정은 없고 모든 퍼블릭 엑세스 차단만 해제하여 버킷을 하나 만든다. 그리고 해당 버킷 속성에서, 버킷 정책을 들어간다. 정책을 만들기 위해 정책 생성기를 누른다. 위와 같이 설정한 후, Amozon Resource Name은 정책 생성기 버튼을 누른 페이지에 있는 버킷 ARN을 복사한 후 뒤에 /*을 붙여준다. 예시: arn:aws:s3:::hoon-github-action/* 정책을 만들었다면, 복사하여 붙여넣고 저장한다. 그리고 사용자를 추가해야한다. AWS에 IAM을 검색하여..

Cypress를 이용한 회원가입 폼 테스트 이전 1탄에서는 설치 후 간단한 테스트를 통해 Cypress를 살짝 맛보았다. 이번 2탄에서는 Cypress를 이용해 간단한 회원가입 폼을 테스트해보려고 한다. // Form.vue submit {{ email }} {{ password }} 디자인 프레임워크인 Vuetify를 사용중이며, Cypress에서 쉽게 가져오기 위해 data-cy 속성을 지정했다. 해당 속성을 통해 cy.get()으로 해당 요소를 가져올 수 있다. // form.spec.js describe('Form Test', () => { beforeEach(() => { cy.visit('/signup'); }); it('회원가입 폼 작성', () => { cy.get('[data-cy=ema..

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$..

✏️ Vuetify란 무엇일까? Vuetify는 UI Components로 편리하게 UI 셋팅을 할 수 있게 해준다. 원래 예전에는 Element UI를 종종 사용했었는데, UI Components의 장점은 편리하지만 단점은 커스텀하기가 조금 까다로울 수 있다는 것이다. Vuetify는 사용했다하기 민망할 정도로 잠깐 사용했기에, 이번에 사용해보며 경험해보려고 한다. ✏️ 설치 우선 Vue3 버전은 2021 3분기에 릴리즈될 예정이라고 하여, 현재는 Vue3 버전 이하에서 사용할 수 있다. 나는 Vue Cli로 Vue2 버전에서 설치를 진행했다. 문서에 기재된 설치 방법 (링크) vue add vuetify 위 명령어를 통해 설치를 진행하게 되면 프리셋을 선택하라는 게 나온다. 나는 Default로 진행..

✏️Nuxt에 빌드/배포 분기를 여러곳으로 나눠보자. 실무에서는 여러 개발자가 함께 개발하기 때문에 코드를 합쳐야 하는 순간이 온다. 내가 있는 곳은 각각 개발한 코드를 합쳐서 테스트 해볼 수 있는 개발 서버와, 실제 배포되는 리얼 서버와 동일한 환경에서, 실제 서버에 배포 나가기 직전에 테스트를 진행해볼 수 있는 스테이징 서버, 그리고 실제 유저가 사용하는 리얼 서버로 운영이 되고있다. 이를 위해 환경 변수를 development, stage, production에 맞춰서 따로 처리를 해줘야 하는데, 넉스트에 적용해야 되기도 하고, 알아보는 과정에서 많이 헤맸기 때문에 (Nuxt는 문서가 잘 정리되어 있긴 한데...) 다른 분들도 혹시 나와 같은 상황에 겪지 않도록 오늘 헤맸던 내용을 공유해보려고 한다..