본문 바로가기
반응형

Vue19

🏰 vue2 jest 환경세팅 🚁 Vue2 jest 환경세팅 하는 이유 이번에 회사 프로젝트에 테스트 코드 도입하기 앞서 환경세팅의 준비 필요성을 느껴서 블로그에 남기고자 한다. 항상 환경세팅이 오래걸리기도 했다. 환경세팅은 여기서 참고하였다. 환경은 아래와 같다. Node Version : 16.19.1 Npm Version : 8.19.3 ⚓️ 뷰 테스트 라이브러리 설치 npm install jest --save-dev npm install @vue/test-utils@1.3.6 --save-dev npm install vue-jest --save-dev npm install babel-jest --save-dev ⚓️ 뷰 테스트 라이브러리 설치 (수정본) npm install @vue/cli-plugin-unit-jest@5.0.. 2023. 8. 9.
props으로 함수 받기 🦞 props 으로 함수 받기 글을 쓰게 된 이유 개발을 하다보면 여러개의 모달을 만드는 경우가 있다. 그렇지만 대부분의 모달은 "예,아니오" 또는 경고성 모달을 만드는 경우가 많다. 그리고 한 화면에 3~4개의 모달이 필요한 경우도 있다. 그렇다면, 한 화면에 3~4개의 모달을 import해야 하는 경우도 발생하는데, 이러한 부분이 자원낭비라고 생각했다. 그리하여 만약 모달의 구조는 같으나, 선택된 버튼의 경우에 따라 동작 방식이 다르다면 props으로 Function으로 받으면 되지 않는가 라는 생각이 들어서 이번글을 적게 되었다. 아래 모달1,모달2는 구조는 같으나 🦎 Props으로 함수 받기 일단 props으로 closefunc으로 받도록 한다. 그리고 type을 Function으로 선언하고 기본.. 2023. 7. 23.
👀 vscode 에서 EditorConfig 쓰기 EditorConfig 일관된 코드의 작성 형태를 맞추기 위해 보통 사용된다. eslint(문법 검사), prettier(코드 포맷) 와 같이 비교 되고는 한다. 다만 현 회사에서 이미 EditorConfig이 존재하기 때문에 이번에 알아보기로 했다. Extension 설치 EditorConfig는 eslint,prettier와 달리 npm으로 설치 할 필요는 없다. 다만 Vscode 같은 경우 Extensions에 추가 설치가 필요하다. 🥼 Editorconfig 작성 EditorConfig는 어떻게 코드를 포맷 할것인가에 대해서 작성하는 곳이다. 예를 들어 들여쓰기 기준을 tab으로 잡을지 space 으로 잡을지 결정을 한다. 그리하는 나는 아래 처럼 작성하였다. root = true [*] # 모.. 2023. 6. 2.
Vue + jest + typescript 세팅 🎾 pacakge.json 설치 npm install --save-dev jest @vue/test-utils npm i @vue/vue3-jest npm install --save-dev @vue/test-utils npm install --save-dev ts-jest npm install --save-dev @types/jest npm install --save-dev @babel/core npm install --save-dev @babel/preset-env npm install --save-dev @babel/preset-typescript npm install --save-dev jest-environment-jsdom npm install --save-dev jest-transform-st.. 2023. 5. 1.
반응형