규로그

1. 패키지 설치공식 문서에 따라 사용하는 패키지 매니저로 playwright를 설치해 준다.npm init playwright@latest npm을 사용할 경우 위와 같이 실행해 준다.> create-playwright 패키지 설치 - Y> TypeScript와 JavaScript 중 선택 - JavaScript> E2E 테스트를 저장할 폴더 이름 지정 - src/tests> GitHub Actions workflow에 추가 여부 - N> Playwright browser 설치 여부 - Y 위와 같은 단계를 따라 설치하면 기본 config 파일과 샘플 테스트 코드가 같이 설치된다. 2. config 설정playwright 설치 완료 후 생성된 playwright.config.js 파일을 수정해 준다.2..

2024-06-26 eslint v8.46.0 기준1. 패키지 설치React가 아닌 Vue와 함께 사용할 것이므로 일반 패키지가 아닌 base 패키지를 설치한다.npm i -D eslint-config-airbnb-base 또한, 프로젝트에서 컴포넌트 및 모듈을 절대 경로를 이용해 import 하므로 이를 인식하기 위한 별도의 패키지를 추가로 설치해 준다.npm i -D eslint-import-resolver-alias eslint-plugin-import 2. eslint 설정eslintrc.json 파일에서 위에서 설치한 패키지를 적용해 준다. extends에 airbnb-base를 추가한다.// .eslintrc.json{ "extends": [ ... "airbnb-base" ]}..

이전 글: 2024.12.07 - [FE] - [vue-i18n] 1. 시작하기다음 글: - vue.js v3.4.25, vue-i18n v9.13.1 기준 작성 1. 리소스 파일 분리1절에서 작성한 것과 같이 번역 리소스는 messages에 들어간다. 가장 상위의 key는 locale 값, 그 아래로는 작성된 번역 리소스가 들어간다. 가장 간단하게 사용하려면 messages에 리소스를 직접 작성한다. 아래는 1절의 예제에서 사용했던 코드다.messages: { en: { message: 'hello world', }, ko: { message: '안녕, 세계', }, ja: { message: 'こんにちは、世界', },} 하지만, 번역해야 될 텍스트가 많아질수록 위의 방법은 관리하기가 힘들어지니 ..

다음 글: 2024.12.07 - [FE] - [vue-i18n] 2. 번역 리소스vue.js v3.4.25, vue-i18n v9.13.1 기준 작성1. 설치사용하는 패키지 매니저에 따라 설치를 진행한다.# npmnpm install vue-i18n@9# yarnyarn add vue-i18n@9 2. 플러그인 등록vue에서 사용하기 위해 app에 명시적으로 설치해줘야 한다. main.js에 다음과 같이 작성한다.// src/main.jsimport { createApp } from 'vue'import App from './App.vue'import { createI18n } from 'vue-i18n'const app = createApp(App)const i18n = createI18n({ lo..

1. Storybook이란Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. 프론트엔드 UI 컴포넌트 개발을 위한 도구로, 컴포넌트들을 개별적으로 개발, 시각화, 테스트할 수 있는 환경을 제공하는 오픈 소스 도구 2. Storybook의 장점컴포넌트 카탈로그각각의 UI 컴포넌트를 별도의 스토리로 생성하여 시각화된 카탈로그 형태로 확인할 수 있음. 이는 컴포넌트의 다양한 상태와 변형을 시각적으로 파악할 수 있어 개발과 디자인 간의 ..