메로그

레거시라고 하기에는 민망하지만, 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 './..

야무지게 Axios 사용하기클라이언트와 서버가 통신하기 위해 사용되는 대표적인 라이브러리 중 하나입니다.Axios 인스턴스를 사용하여 API 클라이언트 설정하기우선 야무지게 axios 를 사용할라면, 그냥 쓰지 말고 axios.create를 사용하여 axios 에 대한 커스텀 셋팅을 해줍시다.요청에 대한 baseURL 과 요청마다 자동으로 인증 코드를 추가하는 인터셉터, 타임 아웃 기능을 추가해줍시다.Axios 인스턴스 생성우선, axios.create를 사용하여 기본 설정을 가진 Axios 인스턴스를 생성합니다. 이 인스턴스는 기본 URL과 헤더를 설정하여 모든 요청에서 일관된 설정을 유지할 수 있게 해줍니다.import axios from 'axios'const apiClient = axios.cre..

리액트 프로젝트를 진행하다 보면, 여러 리액트 프로젝트 구조를 상상하게 된다.가장 우리가 기본적으로 나열하는 components 와 pages 폴더를 만들어서 나열하는 구조가 있지만, 이러한 구조는조금만 규모가 커지거나 훅, 상태 관리 등이 들어오게 되면 가독성이 확연하게 떨어지게 된다. 그래서 features 기반으로 그룹화(페이지, 컴포넌트, 훅, 스토어 등)하여 사용하게 되는데, 이를 기반으로 React 프로젝트 구조를 아래와 같이 구축해보자. Vue 도 마찬가지로 다를게 없다고 생각한다. 리액트 프로젝트 구조 구축하기기본적으로 요즘 유행하는 vite 기반의 react 프로젝트를 만들어서 프로젝트를 먼저 구조화 해보자.먼저 yarn create vite 를 이용해서 react 프로젝트를 생성해줍니다..