VUE8 [Vue] 2. 스토리북에서 목킹하는 법 (module) 외부 패키지에서 가져오거나 내부의 모듈을 모의하여 동작을 제어하고 싶을 수 있습니다. 모의하기 위해서는 원래 모듈을 대체하기 위해 모의 파일을 만들어야 합니다. 모듈과 같은 이름과 같은 디렉터리에 파일을 만들어야 합니다. util.js 라면 util.mock.js|ts를 만듭니다. 1. 내부 모듈상대적 경로로 import 해서 원본 모듈을 가져와야 하고 원본 모듈에서 내보낸 모든 내용을 export 해야 합니다. fn은 원래 모듈에서 필요한 기능을 모의하면 됩니다. import { fn } from "@storybook/test";import * as actual from "./util";export * from "./util";export const getNativeData = fn(actual.g.. 2025. 1. 24. [Vue] 1. 스토리북에서 목킹하는 법 (router, provide/inject) 라우터 목킹하는 법스토리북에서 라우터를 목킹해야 할 때가 있을 수도 있다. 예를 들어 query 또는 params에 따라 페이지가 보여야 하는 게 달라야 할 때가 있습니다. 먼저 아래의 명령어를 실행해 설치를 합니다. npm install storybook-vue3-router query 또는 params 값이 mock이 되기 위해 간단하게 mockRouter만 사용하면 됩니다. mockRouter에 query와 params을 설정하고 args에 값을 설정합니다. 여기서 args 값은 IndexView에 v-bind를 하지 않아야 합니다. 만약에 v-bind를 하게 되면 props로 전달되어 콘솔에 경고가 나옵니다. import { mockRouter } from 'storybook-vue3-route.. 2025. 1. 18. [Vue] Storybook 사용하는 법 Storybook은 UI 컴포넌트와 페이지를 개발, 테스트, 문서화하기 위한 도구입니다. Vue로 복잡한 UI를 간단한 컴포넌트로 분해하는 데는 도움이 되지만 프로젝트가 커짐에 따라 컴포넌트가 수가 늘어나고, 시간이 지남에 따라 어떻게 개발했는지 점점 잊히면서 문제가 발생합니다. 또한 어떤 컴포넌트에서 문제가 발생했을 때 해당 페이지로 이동해서 확인해야 합니다. (만약 특정 타입의 회원만 가능하다면 좀 더 골치가 아파집니다ㅎㅎ) 그래서 저는 프로젝트를 시작하면 다른 건 몰라도 Storybook 세팅은 반드시 하는 편입니다. 컴포넌트 문서화도 자동으로 되며 props를 전달하거나, 데이터를 mock 하거나, 이벤트를 위조하여 특정 변형을 격리하여 렌더링 할 수 있습니다. 테스트 코드를 추가해 시각적으로 .. 2025. 1. 15. [Vue] 타이머 구현하기 본인인증, 계좌인증 등에서 화면에 타이머를 보여줄 때가 있습니다. 보통 setInterval()을 사용해 1초가 지나가면 숫자를 카운드 다운하고 해당 숫자를 화면에 표시하는 방법으로 구현합니다. setInterval(func, delay, arg0, arg1, * … , argN)여기서 setInterval()은 고정된 시간마다 함수를 반복적으로 호출하는 메서드입니다. 반환 값 interval ID(숫자)로 타이머를 식별할 때 사용합니다. clearInterval()에 전달하면 타이머를 제거할 수 있습니다. - func : delay마다 실행되는 함수- delay : 지연해야 하는 밀리초(1/1000)- arg, ..., argN : fuc 함수로 전달되는 인수 ** 비슷한 메서드로 setTimeou.. 2025. 1. 8. [Vue] 이메일 유효성 검사 회원가입 플로우에 보통 이메일이 있는 경우가 많습니다. 이메일 입력에 대한 정규식을 넣어 유효성을 실시간으로 유효성 검사를 하곤 합니다. 그때 구글에서 검색해 의미는 모르지만 아래와 같은 코드를 사용합니다. const regex = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;regex.test("a@domain.co.kr") // trueregex.test("a@a.a"); // true 이렇게 유효성 검사를 하고 이메일 인증을 한다면 다행이지만 인증이 없이 DB에 저장이 된다면 나중에 사용자에게 이메일을 보내야 할 때 보낼 수 없을 수도 있습니다. 이메일 형식을 알아보고 그에 맞는 정규 표현식을 만드는 과정을 공유하고자 합니다. 이메일 형식 이메일은 .. 2024. 12. 21. [Vue] 웹뷰에서 중요정보 노출 방지 (+ 메모리 덤프 확인하는 법) 앱 보안 취약점 점검을 했을 때 [메모리 내 중요정보 노출 방지] 항목이 있습니다. 해당 항목은 중요 정보를 입력 또는 처리 과정 등에서 메모리 내 평문 노출 여부를 점검하는 것입니다. 이런 문제가 일어나지 않기 위해서는 불필요하게 중요 정보를 노출하지 않거나 입력 또는 과정에서 즉시 암호화가 필요합니다. 여기서 중요 정보는 주민등록번호, 운전면허번호, 핀번호(간편 결제번호), 비밀번호 등이 있습니다. 웹 보안 취약점 점검에서도 동일하게 웹 영역 내 노출 방지 부분이 있습니다. 해당 항목은 HTML, JS, DOM 등 웹을 표현하기 위한 영역 내 평문이 노출 여부를 점검하는 것입니다. 중요정보 노출 방지하기 위해서 메모리 덤프를 수도 없이 수집하고 테스트한 결과를 공유하고자 합니다. 메모리 덤프 확인.. 2024. 12. 14. [Vue] 중복 클릭 방지 방법 버튼을 클릭하면 서버에 요청이 한 번만 들어가야 합니다. 물론 서버에서도 여러 번의 요청이 오더라도 1번 처리하도록 해야 하지만 프론트에서 처리하는 방법도 있습니다. 1. 클릭 시 disabled 처리중복 클릭을 막는 방법으로 제일 처음 생각하게 되는 것은 disabled 처리일 것입니다. 클릭을 하면 버튼에 disabled 처리를 해 비활성화를 시키고 서버에서의 응답을 받은 후에 버튼을 다시 활성화시키는 것이다. 처음에는 저 또한 이러한 방법으로 처리했습니다. 하지만 버튼이 비활성화되는 것보다 더 빠르게 중복 클릭이 되어 2번 요청이 들어와 시스템 상에 오류가 발생하는 일이 있었습니다. 2. 디바운싱 처리이러한 오류를 해결하기 위해 디바운싱을 이용하기로 했습니다. 디바운싱이랑 연이어 호출되는 함수들 .. 2024. 12. 7. [Vue] Vue3, Storybook8 프로젝트 설정 프로젝트에 Vue3 + Vite 설치합니다. npm create vue 라우터 설정, ESLint, Prettier는 필요할 것 같아 Yes로 선택하고, 테스트 작성은 storybook에 컴포넌트 테스트를 사용할 거라 NO를 선택했습니다. ✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add an End-to-End Testing .. 2024. 11. 28. 이전 1 다음
