dev
-
싱글톤 패턴 단위 테스트를 작성하는 3가지 방법
Backgrounds싱글톤 패턴(Singleton Pattern)이란?싱글톤 패턴은 애플리케이션 내에서 특정 클래스의 인스턴스가 단 하나만 생성되도록 보장하는 디자인 패턴입니다. 데이터베이스 연결, 설정값 관리, 공통 서비스 제공 등 애플리케이션 전역에서 공유되어야 하는 리소스를 관리할 때 자주 사용됩니다.class Singleton { private static instance: Singleton | null = null; private constructor() {} static getInstance(): Singleton { if (!this.instance) { this.instance = new Singleton(); } return this.instance; }}..
2024.11.19
-
server action으로 cookie 설정 시, server component reload 버그
Backgrounds회원가입 후, 백엔드에서 반환한 access, refresh 토큰을 cookie에 저장해야 했습니다.// SignUpFormconst SignUpForm = () => { const handleSubmit = async () => { try { // 회원가입 성공 시 AT, RT 반환 const { accessToken, refreshToken } = await signUpApi(form); setAuthCookies(accessToken, refreshToken) router.replace("/") } catch (e) { setErrors(e); } }; return (...)} 위 코드에서처럼..
2024.11.15
-
You Might Not Need a Dispatch Type.
BackgroundsFE 개발자 단톡방에 이런 질문이 올라왔습니다.결론부터 말하자면...You Might Not Need a Dispatch Type.해당 타입 사용을 선호하지 않는다기 보다, 사용할 필요가 없다 란 답이 가장 적절하다고 생각했습니다. 그 이유가 무엇일까요?언제 사용되는가?Dispatch은 React에서 useState 훅을 사용할 때 반환되는 상태 업데이트 함수의 타입입니다. 상태 값을 업데이트할 때 사용하는 setState 함수의 타입을 정의하며, React 상태 관리에서 매우 일반적으로 사용되죠. 그렇다면, 해당 타입 정의가 왜 필요할까요? 가장 대표적인 예시는 자식 컴포넌트에 Props로 전달할 때입니다. 부모 컴포넌트에서 useState로 상태를 관리한 뒤, 자식 컴포넌트에서 상..
2024.10.29
-
지속 가능한 프론트엔드 단위 테스트 작성법
1. 프론트엔드는 테스트가 필요 없다?!프론트엔드 단위 테스트는 항상 논쟁의 중심에 있습니다. 프론트엔드 애플리케이션의 복잡성과 중요성이 증가하면서 단위 테스트의 필요성을 주장하는 목소리가 점점 늘어나고 있습니다. 하지만 자주 변경되는 UI와 그로 인해 쉽게 깨져버리는 테스트 코드들을 보며 프론트엔드에서의 단위 테스트가 불필요하고 비효율적이라는 비판도 여전히 거셉니다. 저는 여러 프론트엔드 프로젝트 경험을 바탕으로 단위 테스트는 반드시 필요하다는 결론에 도달했습니다. 단위 테스트는 코드를 안전하게 리팩토링하고, 코드 품질을 유지하며, 오류를 사전에 예방할 수 있는 중요한 수단입니다. 코드베이스가 커지고 협업 인원이 늘어날수록 단위 테스트를 통해 코드 수정 시 발생할 수 있는 문제를 사전에 방지해야만 하며..
2024.10.09
-
next.js에 FSD 폴더 구조 패턴 적용하기
Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충..
2024.09.24
-
FrontEnd 개발자가 가장 빠르게 서비스를 구축하는 방법
Introduction웹 애플리케이션을 구축하는 것은 복잡한 작업이 될 수 있지만, 최근 몇 년간 등장한 기술 스택 덕분에 개발 속도를 크게 향상할 수 있는 방법들이 많아졌습니다. 프론트엔드 개발자들은 주로 JavaScript 또는 TypeScript에 익숙한데, 최근에는 서버와 클라이언트 모두 JavaScript로 통합할 수 있는 환경이 마련되면서 프론트엔드 개발자가 웹 전체를 빠르게 구축할 수 있는 강점을 갖추게 되었습니다. 실제로 얼마 전, 저는 부산 지역의 사설 도서관들의 도서 관리 서비스를 구축해야 했습니다. 각 사용자 별 계정을 생성하고, 해당 계정이 속한 도서관에 접근해 도서를 추가하고 삭제할 수 있어야 했으며, 사용자들이 저장된 도서 정보들을 검색할 수 있어야 했죠. 즉 웹 애플리케이션의 ..
2024.09.08
-
VCP를 통해 Next.js ↔ AWS RDS 안전하게 연결하기
BackgroundsNext.js를 사용하여 애플리케이션을 개발한 후, AWS Amplify를 통해 배포하는 과정을 진행했습니다. 이 과정에서 RDS(Relational Database Service)를 사용하여 데이터베이스를 설정하고, Next.js의 서버 컴포넌트에서 데이터를 조회하고 생성하는 기능을 구현했습니다. import React from 'react'; import { Pool } from 'pg'; const pool = new Pool({ user: process.env.DB_USER, host: process.env.DB_HOST, database: process.env.DB_DATABASE, password: process.env.DB_PASSWORD, port: process.env..
2024.08.25
-
[chrome extension] 이미지 파일 안전하게 불러오기
Backgrounds일반적인 웹개발 환경에서는, 아래와 같이 이미지를 불러올 수 있습니다.import someImg from "./some-img.png";만약 이 상황에서 해당 경로에 파일이 존재하지 않는다면, 빌드 시 Module not found 발생합니다.대부분의 번들러들은 소스코드를 분석할 때 require, import로 참조된 모든 모듈과 자원을 탐지하며,이 덕분에 존재하지 않는 파일을 불러오는 등의 실수를 미연에 방지할 수 있습니다. chrome extension에서는 이미지를 불러오기 위해 조금 다른 방법을 사용해야 합니다.익스텐션의 content_scripts는 현재 실행되는 웹페이지를 기본 context로 가지기 때문에위와 같이 작성할 경우, 현재 웹페이지/some-img.png 경로..
2024.08.09
-
[next js] app directory에서 token 저장하기 - (2)
Backgrounds2024.02.13 - [source-code/Next JS] - [next js] app directory에서 token 저장하기 [next js] app directory에서 token 저장하기next js 13 버전에서 app directory가 등장하면서, app directory내 모든 컴포넌트들은 기본적으로 server component로 동작하게 되었습니다. https://nextjs.org/docs/app/building-your-application/rendering/server-components Renderi23life.tistory.com결론적으로, 아래 방법을 사용해 app directory에서 token을 관리하기로 했습니다.1) server action을 통..
2024.08.05
-
Feature-Sliced Design(FSD) 도입기
최근 사내 core-package의 FE 파트 폴더 아키텍처에 Feature-Sliced Design(FSD)를 도입했습니다. 해당 FE 서비스는 1) 전통적인 React 폴더 구조 → 2) 클린 아키텍처(헥사고날 아키텍처) → 3) FSD 지금까지 이렇게 총 3번의 구조 변경을 겪었으며, 각 단계에서 느꼈던 문제점과 해결 방안을 공유하고자 합니다. 1. 전통적 폴더 구조처음 프로젝트를 구성할 당시, 가장 일반적이고 전통적인 폴더 구조 형태를 따랐습니다.src/├── api/│ ├── userApi.ts│ └── productApi.ts├── components/│ ├── Header.tsx│ ├── Footer.tsx│ ├── UserProfile.tsx│ └── ProductLi..
2024.08.03
-
Drag&Drop 컴포넌트에서 클릭 이벤트와 드래그 이벤트 분리하기
BackgroundDrag&Drop이 가능한 div 컴포넌트를 구현해야 했습니다. Drag&Drop의 기본 로직은 단순합니다.해당 요소의 위치 상태를 관리하면서요소를 누르면 Drag가 시작되고, 마우스를 움직이면 위치 상태를 변경하고, 마우스를 떼면 Drag를 멈추면 되겠죠.import { useState, useEffect, useRef } from 'react';interface Props { initialTop: number;}const useVerticalDrag = ({ initialTop }: Props) => { const [isDragging, setIsDragging] = useState(false); const [top, setTop] = useState(initialTop); /..
2024.08.01
-
[chrome extension] dynamic import시 Cannot find module 에러 해결하기
Backgroundchrome extension의 content script에서, 다른 모듈을 동적으로 import하고자 했습니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import import() - JavaScript | MDNThe import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.developer.mozilla...
2024.07.26
