본문 바로가기

전체 글

 (77)
Component-Driven Development(CDD): 효율적인 UI 개발의 핵심 Component-Driven Development(CDD)란?Component-Driven Development(CDD)는 UI 개발에서 컴포넌트를 중심으로 개발하는 방식을 말합니다. CDD의 핵심은 UI를 독립적이고 재사용 가능한 단위로 나누고, 각 컴포넌트가 명확한 기능과 책임을 갖도록 개발하는 것입니다. 이를 통해 유지보수와 확장이 쉬운 코드를 만들 수 있습니다.  CDD와 기존 방식의 차이 기존 방식: 전통적인 UI 개발 방식에서는 페이지나 화면 단위로 개발이 이루어집니다. 이 방식은 각 페이지가 완성된 이후 수정이 필요할 때, 코드 중복이 많아 재사용성이 떨어지고 유지보수가 어렵습니다.CDD 적용 전 (비포):CDD를 적용하기 전에는 여러 페이지에서 동일한 버튼을 복사해 사용했을 수 있습니다...
[React] 서버와 통신하며 임시저장 기능 구현하기 저는 영상 자막 편집에 대해 임시저장을 하는 기능을 구현했습니다. 그때 발생한 이슈에 대해 공유하려고 합니다. 이 전에 사용했던 코드이전에는 setInterval 사용한 방식이었습니다.//useEffect (30초마다 임시 저장)useEffect(() => { const interval = setInterval(saveTemporary, 10000); // 10초마다 호출 return () => clearInterval(interval); // 페이지 나갈 때 정리 // eslint-disable-next-line react-hooks/exhaustive-deps}, [inputText, testImageTextIdx, saveTemporary]); 이 부분은 10초마다 saveTemporary 함..
[React] React에서의 실시간 검색 기능 최적화: Debounce 기법 적용 경험 프로젝트에서 실시간 검색 기능을 구현하면서 생긴 이슈에 대해 글을 작성해보겠습니다. 문제 상황프로젝트에서 실시간 검색 기능을 구현하면서 몇 가지 문제에 직면했습니다.사용자 입력마다 API 요청이 발생하여 불필요한 네트워크 트래픽 증가과도한 요청으로 인한 성능 저하데이터가 즉시 반영되어 사용자 인터페이스가 불안정해 보이는 현상 Debounce란?이러한 문제를 해결하기 위해 Debounce 기법을 적용했습니다. Debounce는 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 방식입니다. 검색 기능에 적용하면, 사용자의 타이핑이 일정 시간 동안 멈춘 후에만 검색 요청을 보내도록 할 수 있습니다. 프로젝트 적용 사례 및 성능 개선 결과1. Debounce 기법 적용커스텀 Debounce 훅을 ..
프론트엔드 개발자가 백엔드를 고민하게 된 이유: MERN 스택과 Node.js, Nest.js의 차이점 개발자 지인과의 커피챗 이후, "프론트엔드만으로는 충분하지 않은 시대가 왔구나"라는 사실을 깨닫게 되었습니다. 처음에는 나 자신이 프론트엔드에만 집중하려는 욕심을 가지고 있다는 생각이 들었고, 이제는 백엔드도 공부해야 할 때가 되었음을 느꼈습니다. 그러면, 어디서부터 시작해야 할까? 제가 최종적으로 입사하고 싶은 회사들을 살펴보니 MERN 스택을 많이 사용한다는 사실을 알게 되었습니다. React는 이미 익숙하게 사용 중이었기 때문에, 백엔드에서 더 쉽게 접근할 수 있는 기술로 Node.js를 선택하게 되었습니다. 그러나 여기서 끝이 아니었습니다. 단순히 Node.js만으로는 충분하지 않았습니다. 특히 요즘 많은 개발자들이 사용하는 Nest.js라는 프레임워크에 대해 궁금증이 생겼습니다. "왜 사람들이 ..
[TypeScript] TypeScript와 Zod를 활용한 효율적인 폼 관리: React Hook Form 도입기 TypeScript를 사용하면서 폼 관리를 더욱 효율적으로 하기 위해 고민하던 중, Zod와 함께 React Hook Form을 사용하는 방법을 알게 되었습니다. 이번 포스팅에서는 두 라이브러리를 도입하면서 제 코드가 어떻게 변화했는지, 그리고 이 과정에서 느낀 점들을 정리해 보겠습니다. 1. React-Hook-Form과 Zod를 사용하지 않은 예시import React, { useState } from 'react';const ContactForm = () => { const [formData, setFormData] = useState({ name: '', email: '', message: '', }); const [errors, setErrors] = useState({})..
[NextJs] Next.js 13 도입으로 인한 이미지 최적화 경험: Next/Image 컴포넌트의 강력한 기능들 프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다. Next/Image 컴포넌트의 기능Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다. 각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.lazy loadinglazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 ..
[NextJs] 서버 vs 클라이언트 컴포넌트: 최적의 선택을 위한 가이드 Next.js에서 App Router를 자주 사용하다 보면, 때때로 라이브러리 지원 문제나 프로젝트 마감 기한 때문에 서버 사이드 렌더링(Server-Side Rendering, SSR)을 고려하지 않고 'use client'를 무작정 사용하는 경우가 있습니다. 이러한 경험은 많은 개발자들이 공감할 수 있는 부분일 것입니다. 이번 글에서는 제가 서버 컴포넌트와 클라이언트 컴포넌트를 선택할 때 어떤 기준을 두고 사용하는지, 그리고 왜 서버 사이드를 우선적으로 고려해야 하는지에 대해 정리해 보려고 합니다. 각 컴포넌트의 특성과 장단점을 명확히 이해함으로써, 보다 효과적으로 Next.js의 기능을 활용할 수 있는 방법을 함께 살펴보겠습니다. 서버 사이드란 무엇일까요?서버 사이드는 웹 애플리케이션의 비즈니스 로..
글또 10기 합격 얼마 전, 글또 10기에 지원하며 작성했던 '삶의 지도'가 큰 힘이 되어 드디어 글또에 합격하게 되었습니다.  제가 글을 쓰게 된 이유와 목표를 담은 그 글을 통해 저를 되돌아보고 앞으로의 방향을 정리하는 소중한 시간이었습니다. 글을 쓰는 과정은 항상 제게 배움과 성찰의 기회를 주었고, 이번 글또 활동을 통해 그 배움을 더 넓은 세상에 나눌 수 있는 기회가 주어져 정말 기쁩니다. 앞으로 글또 활동을 통해 꾸준히 글을 쓰는 습관을 기르며, 개발자로서의 경험과 배움을 기록하겠습니다. 저 혼자만의 성장에 그치지 않고, 다른 사람들에게도 유익한 정보를 제공하는 사람이 되고 싶습니다. 또한, 제 경험을 나누면서 누군가가 더 나은 길을 찾는 데 도움이 될 수 있기를 바랍니다. 특히 5년 후에는, 저처럼 신입 개발자..

티스토리툴바