규로그

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. 국제화(i18n)와 지역화(L10n)란?출판물이나 하드웨어 또는 소프트웨어 등의 제품을 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것을 의미한다.[1]국제화 (internationlization, i18n) : 제품 자체가 여러 환경을 지원할 수 있도록 제품을 설계하는 것을 의미지역화 (localization, L10n) : 제품을 각 환경에 대해 지원(개발)하는 것을 의미국제화와 지역화를 모두 포함하여 세계화(globalization, g11n)라고 부르기도 한다.대표적으로 문자 모음 (유니코드), 측정 단위 (통화, °C/°F, km/miles 등), 시간 및 날짜 형식, 키보드 레이아웃, 텍스트 방향 등을 지원해야한다.[2]Locale (로케일) : 특정 언어와 지..

2024-05-10 tailwind v3.4.3 기준 Vite와 함께 사용할 것이므로 Installation에 "Using PostCSS"를 참고한다. 1. Tailwind 패키지 설치> npm install -D tailwindcss postcss autoprefixer> npx tailwindcss init -p 2. PostCSS 설정 추가root 위치에 postcss.config.js 파일을 추가한다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }}⚠️ 'module' is not defined...eslint 오류인데, 코드상으로는 문제가 없다.파일 확장자를 cjs로 바꿔주거나 ES Modules 구조로 바꿔주..

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 컴포넌트를 별도의 스토리로 생성하여 시각화된 카탈로그 형태로 확인할 수 있음. 이는 컴포넌트의 다양한 상태와 변형을 시각적으로 파악할 수 있어 개발과 디자인 간의 ..