메로그

레거시라고 하기에는 민망하지만, nuxt2 가 EOL 이 되었기 때문에 레거시 프로젝트라고 지칭하겠습니다.기존 사용했던 nuxt2 프로젝트는 node@16 기반으로 프로젝트가 진행되었고 그 이후로 특별한 버전 업데이트틀 진행하지 않았습니다.하지만, 계속해서 프로젝트는 진행되며 보안, 성능, 최신 기술, 호환성 등의 문제가 발생할 수 있다 판단하여 node 버전을 최신 LTS (20.17.0) 으로 올리는 판단을 진행하였습니다.노드 버전 업데이트 후... 문제 발생우선 node 버전을 최신 LTS 에 상향 시킨 후, 호환성 문제와 OpenSSL 에러 문제(Node 17 부터 OpenSSL 3 을 기본적으로 사용하는데 구버전의 API 에서는 사용하지 않아)가 발생하기 시작하였습니다.OpenSSL 해결방법일단..

FullCalendarFullCalenar 는 자바스크립트로 작성된 오픈 소스 캘린더 라이브러리 입니다.해당 라이브러리는 다양한 기능과 여러 프레임워크를 지원하기 때문에 가장 인기가 많은 캘린더 오픈소스 라이브러리 입니다.설치yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid컴포넌트 만들기import { useState } from 'react'import FullCalendar from '@fullcalendar/react'import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!const CalendarTemplate = () => { const [events] = useS..

해당 글에서는 vitest 와 React Testing Library 를 이용하여 테스트 케이스를 만드는 방법을 소개합니다.vitest 는 실행속도와 vite 와 통합이 간편하며, RTL 은 리액트 컴포넌트를 테스트 하기 위한 도구 입니다.리액트 프로젝트 설치npm create vite@latest패키지 설치npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdomvite.config.ts 셋팅globals: true이 설정은 테스트 파일에서 전역 함수(예: describe, it, test 등)를 import 없이 사용할 수 있게 합니다.true로 설정하면 이러..

우선 모킹 서비스를 이용하는 경우는 프론트엔드가 백엔드의 api 가 개발될 때 까지 계속 기다려야하는 문제들이 발생하였고 프론트엔드가 먼저 백엔드의 api 를 설계 또는 개발하여 선작업을 할 수 있도록 합니다. vite 기반의 React 프로젝트이며, msw(mock service worker) 를 적용하여 모킹 서비스를 만드는 과정을 단계별로 설명하겠습니다.시작1. msw 설치npm install msw --save-dev 2. msw 서비스 워커 생성하기npx msw init public/ --save 3. browser mock 생성하기// src/mocks/browser.jsimport { setupWorker } from 'msw/browser'import { handlers } from './..

도입 이유아래와 같이 개발 프로세스를 짠 이유는 스프린트 진행시, 개발팀은 기획 또는 디자인을 기다려야하고, 프론트엔드는 백엔드를 기다려야 하는 문제들이 다수 발생되기 시작했습니다.그래서 기다릴 필요가 있나?? 라는 생각을 하게 되었고 디자인은 기다리지 않고 와이어 프레임시 MVP 만 개발하고 프론트엔드에서 API 설계를 진행하면 동시 다발적으로 업무를 진행할 수 있다고 판단하였습니다. 그래서 정리된 것은 아래와 같습니다. 실제 시작은 초기 기획 및 와이어 프레임 제작부터 이며, 선택에 맞춰 생략하여 진행하여도 됩니다. 브레인 스토밍 (선택)핵심 도메인 기준에 브레인 스토밍 → 지식 공유 라는 도메인을 가지고 가자.프로덕트 초기 기획 (실 - 기획자)사업 목표 및 요구 사항 정의주요 기능 및 사용자 요구..

애자일 도입 템플릿애자일을 도입하게 되면, 어떤 식으로 진행하면 좋을지 고민을 하게 된다.여러 경험을 통해 효율적인 애자일 템플릿을 아래와 같이 만들어보았다.일정 산정 및 스프린트 계획스프린트 주기스프린트 목표 설정스프린트 플래닝 미팅스토리 포인트 및 작업 산정스토리 포인트: 스프린트 내에서 진행할 업무에 대한 볼륨 측정작업 추정: 1, 2, 3, 5 까지 정하며 스프린트가 15일이면 15일 중에 작업이 진행되는게 몇일 정도인지만 적으면 됨. (언제부터 언제까지 일정x, 워킹 데이 기준, (교육, 휴가 등)에 대한 일정은 빼줌.)백로그 관리백로그에서 → 스프린트 백로그 이동해서 진행합니다.프로덕트 백로그: 제품의 모든 요구사항과 기능을 포함한 리스트입니다. 프로덕트 오너가 우선순위를 정하고 유지 관리합니..