-
[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.01.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.01.18
-
[Vue] Storybook 사용하는 법
Storybook은 UI 컴포넌트와 페이지를 개발, 테스트, 문서화하기 위한 도구입니다. Vue로 복잡한 UI를 간단한 컴포넌트로 분해하는 데는 도움이 되지만 프로젝트가 커짐에 따라 컴포넌트가 수가 늘어나고, 시간이 지남에 따라 어떻게 개발했는지 점점 잊히면서 문제가 발생합니다. 또한 어떤 컴포넌트에서 문제가 발생했을 때 해당 페이지로 이동해서 확인해야 합니다. (만약 특정 타입의 회원만 가능하다면 좀 더 골치가 아파집니다ㅎㅎ) 그래서 저는 프로젝트를 시작하면 다른 건 몰라도 Storybook 세팅은 반드시 하는 편입니다. 컴포넌트 문서화도 자동으로 되며 props를 전달하거나, 데이터를 mock 하거나, 이벤트를 위조하여 특정 변형을 격리하여 렌더링 할 수 있습니다. 테스트 코드를 추가해 시각적으로 ..
2025.01.15
-
[Vue] 타이머 구현하기
본인인증, 계좌인증 등에서 화면에 타이머를 보여줄 때가 있습니다. 보통 setInterval()을 사용해 1초가 지나가면 숫자를 카운드 다운하고 해당 숫자를 화면에 표시하는 방법으로 구현합니다. setInterval(func, delay, arg0, arg1, * … , argN)여기서 setInterval()은 고정된 시간마다 함수를 반복적으로 호출하는 메서드입니다. 반환 값 interval ID(숫자)로 타이머를 식별할 때 사용합니다. clearInterval()에 전달하면 타이머를 제거할 수 있습니다. - func : delay마다 실행되는 함수- delay : 지연해야 하는 밀리초(1/1000)- arg, ..., argN : fuc 함수로 전달되는 인수 ** 비슷한 메서드로 setTimeou..
2025.01.08
-
[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
