전체 글241

• Next.js 16: 핵심 변경 사항 및 추가 기능 정리 Next.js 16: 핵심 변경 사항 및 추가 기능Next.js 16의 가장 중요한 변화는 Turbopack 기본 번들러 채택과 React 19 및 React Compiler 지원으로 요약할 수 있습니다.성능 및 개발 경험(DX) 향상구분주요 내용설명기본 번들러Turbopack 기본 채택 (Stable)Rust 기반의 Turbopack이 이제 모든 앱의 기본 번들러로 사용됩니다. 기존 Webpack 대비 최대 4배 빠른 로컬 개발 및 2~5배 빠른 프로덕션 빌드 속도를 제공합니다.컴파일러React Compiler (Stable) 지원자동 컴포넌트 메모이제이션을 기본으로 지원하여, 수동으로 useMemo, useCallback 등을 사용할 필요 없이 불필요한 리렌더링을 줄여 성능을 향상시킵니다.캐싱Turb.. Framework/Nextjs 2025. 12. 5.

• React Native (RN) 앱에서 로컬로 빌드하고 Android 및 iOS 시뮬레이터에서 테스트하는 방법 필수 환경 설정 확인먼저, 빌드를 진행하기 위해 필요한 환경이 모두 설정되어 있는지 확인해야 합니다.Node.js 및 Watchman: 설치되어 있어야 합니다.React Native CLI: 프로젝트가 초기화된 상태여야 합니다.Android 개발 환경:Android Studio 설치.Android SDK 및 Platform Tools 설치.ANDROID_HOME 환경 변수 설정.Android 가상 장치(AVD) 생성.iOS 개발 환경 (macOS 필수):Xcode 설치 (App Store에서 가능).Xcode Command Line Tools 설치 (xcode-select --install).CocoaPods 설치 (iOS 종속성 관리): sudo gem install cocoapods팁: 환경 설정에 .. Framework/React & RN 2025. 12. 4.

• 2025 데브콘 후기 및 내용정리 요약 및 정리Session 2. 퍼스널 브랜딩 - 박상권왜 하냐?세상 살기 더 편해진다.외주, 면접 등 쉽다.창업하기 좋은 환경에 놓임.“무엇을 원하든 원하는 것을 얻을 수 있다.”나의 비전과 연결할 수 있을까?퍼스널 브랜딩퍼스널 브랜딩내가 해볼 수 있는 일들개발자 커뮤니티 : Node.js 쪽 유용한 정보들을 전달할 수 있어야 함.블로그 포스팅개발자 행사 발표자로 지식 나누기개발과 상관 없는 잡일도 해보고 행사 기획도 해보고워크샵 TF, 연말 송년회 사회 등액션 아이템결국, 퍼스널 브랜딩을 하려면 ROI가 높은 일들을 잘 해봐야 한다.현재 업무와 관련된 오픈소스는 무엇이 있을까?하나 잡고 파보자.검색 가능한 나 만들기이름과 내용들블로그 프로필 업데이트 & 링크드인 업데이트이력 관리하기 → Github에.. 카테고리 없음 2025. 11. 1.

• 백엔드 개발자를 위한 데이터 엔지니어링 첫걸음: ETL부터 Dagster+DBT까지 1. 기술 개요 요약데이터 엔지니어링은 데이터를 수집, 저장, 변환, 전달하는 전 과정을 시스템적으로 관리하는 기술 영역입니다.이 문서는 백엔드 개발자가 데이터 파이프라인을 이해하고 직접 구축할 수 있도록,ETL/ELT 개념부터 데이터 저장소 구조, 그리고 현대적 파이프라인 관리 도구인 DBT와 Dagster의 역할을 흐름 중심으로 정리합니다.2. 핵심 개념 정리구분개념설명대표 예시데이터 엔지니어링인프라 구축데이터가 흐를 수 있는 수집·저장·처리 시스템 전체 설계 및 운영Airflow, Dagster데이터 전처리원시 데이터 정제결측치, 오류를 제거하고 분석 가능한 형태로 변환Pandas, Spark데이터 마트주제별 데이터 저장소특정 부서나 목적에 맞게 데이터를 구성한 소규모 웨어하우스PostgreSQL,.. 카테고리 없음 2025. 10. 10.

• npm i (npm install)와 npm ci (npm clean-install) npm ci와 npm i는 모두 Node.js 프로젝트의 의존성 패키지를 설치하는 명령어이지만, 사용 목적과 동작 방식에 명확한 차이가 있습니다. 결론부터 말하면, 개발 환경에서는 npm i를, 배포나 협업 환경에서는 npm ci를 사용하는 것이 일반적입니다.주요 차이점구분npm i (npm install)npm ci (npm clean-install)기준 파일package.jsonpackage-lock.jsonpackage-lock.json의존성 변경 시 업데이트수정하지 않음 (불일치 시 오류)node_modules기존 폴더에 추가/변경항상 기존 폴더를 삭제 후 새로 설치속도상대적으로 느릴 수 있음일반적으로 더 빠름주요 용도개발 중 새로운 패키지 추가/업데이트CI/CD 파이프라인, 팀원 간 동일 환경 .. Language/JS(Node.js) 2025. 9. 23.

• 

  Nest에서 Cron 서비스가 갑자기 돌지 않는다면? 1. 배경: 코드 구조 리팩토링과 QueryBuilder의 도입NestJS로 백엔드 서비스를 운영하다 보면, 엔티티(Entity) 클래스가 점점 비대해지는 문제가 생깁니다.예를 들어 특정 엔티티 안에 “날짜 범위 검색”, “OO별 필터링” 같은 쿼리 매핑 메서드를 static으로 붙여두면, 어느 순간 엔티티가 데이터 모델링과 쿼리 빌더 역할을 동시에 하게 됩니다.이를 해결하기 위해 팀에선 전용 QueryBuilder 클래스를 도입했습니다.// src/purchase/query-builders/Sample-query.builder.ts@Injectable({ scope: Scope.REQUEST })export class SampleQueryBuilder { private filters: FilterQu.. Framework/NestJS 2025. 9. 22.

• 

  TanStack Query v5로 GraphQL과 REST API 통합 관리하기 요약TanStack Query v5는 React Query의 후속 버전으로, GraphQL과 REST API를 하나의 통합된 인터페이스로 관리할 수 있는 강력한 서버 상태 관리 라이브러리입니다. 기존 버전 대비 개선된 TypeScript 지원, 더욱 직관적인 API, 그리고 프레임워크 독립적인 구조를 제공합니다. 특히 현재 Wisely 구조 상 BigCommerce Storefront GraphQL API와 자체 구축한 REST API를 동시에 사용하는 이커머스 환경에서, 일관된 캐싱 전략과 낙관적 업데이트를 통해 최적의 사용자 경험을 제공할 수 있습니다.핵심 기능/개념 정리TanStack Query v5 주요 변화점항목v4 (React Query)v5 (TanStack Query)패키지명react-qu.. Framework/React & RN 2025. 8. 24.

• 

  백엔드 개발자가 다시 프론트엔드로: 2024년 생태계 변화 총정리 요약2021-2022년과 비교했을 때, 2024년 프론트엔드 생태계는 서버 중심 사고로의 회귀, 타입 안전성 강화, 그리고 개발자 경험(DX) 개선을 중심으로 급격한 변화를 겪었습니다. React 18의 Concurrent Features, Next.js App Router의 Server Components, 그리고 TanStack Query의 서버 상태 관리 패러다임은 백엔드 개발자에게 친숙한 개념들로 프론트엔드와 백엔드의 경계를 모호하게 만들고 있습니다. 이러한 변화는 특히 풀스택 개발 경험이 있는 개발자들에게는 오히려 더 직관적이고 이해하기 쉬운 환경을 제공합니다.핵심 기능/개념 정리주요 기술 스택 변화 타임라인연도기술/패턴변화 내용백엔드 개발자 관점2021React 17, SWRCSR 중심, 클라.. Framework/Nextjs 2025. 8. 24.

• 

  FSD 아키텍처로 대규모 Next.js 프로젝트 구조 설계하기: 실무 적용 가이드 요약Feature-Sliced Design(FSD)은 대규모 프론트엔드 애플리케이션의 구조를 체계적으로 관리하기 위한 아키텍처 방법론입니다. 전통적인 기능별 폴더 구조나 Atomic Design의 한계를 극복하고, 비즈니스 로직의 응집도를 높이면서 계층 간의 의존성을 명확히 관리할 수 있습니다. Next.js App Router와 결합했을 때, Server Components와 Client Components의 역할을 명확히 분리하고, 코드 재사용성과 유지보수성을 극대화할 수 있는 현대적인 프론트엔드 아키텍처 패턴입니다.핵심 기능/개념 정리FSD 계층 구조계층명역할의존성 방향Next.js 적용 예시app전역 설정, 프로바이더모든 계층 의존layout.tsx, providers.tsxpages라우팅, 페이.. Framework/Nextjs 2025. 8. 24.

• 

  파티셔닝의 정의와 예시, 고려해야 하는 시점 파티셔닝 예시파티셔닝은 하나의 도메인(카카오톡 발송 내역)을 여러 테이블에 나누어 저장하는 것을 말합니다.카카오톡 발송 내역 파티셔닝 예시1. 파티셔닝 전 (단일 테이블)-- 파티셔닝 전: 모든 발송 내역이 하나의 테이블에 저장CREATE TABLE kakao_messages ( id BIGINT PRIMARY KEY, user_id BIGINT, template_id VARCHAR(50), phone_number VARCHAR(20), content TEXT, status VARCHAR(20), sent_at TIMESTAMP, delivered_at TIMESTAMP, created_at TIMESTAMP);2. 파티셔닝 후 (여러 테이블로 분할)시간 .. DB 2025. 8. 2.

• 

  스플릿 브레인의 정의와 발생 시나리오 정리 스플릿 브레인(Split Brain)이란?스플릿 브레인은 분산 시스템에서 네트워크 분할이나 노드 장애로 인해 두 개 이상의 노드가 각각 자신이 리더라고 인식하는 상황을 말합니다.발생 시나리오1. 네트워크 분할(Network Partition) 시나리오[데이터센터 A] ←→ [데이터센터 B] ↑ ↑ 리더 A 팔로워 B시나리오 1: 네트워크 연결 끊김[데이터센터 A] X [데이터센터 B] ↑ ↑ 리더 A 팔로워 B발생 과정:초기 상태: A가 리더, B가 팔로워네트워크 분할: A와 B 간 통신 불가타임아웃 발생:A는 B의 응답을 받지 못해 B가 죽었다고 판단B는 A의 .. DB 2025. 8. 2.

• 

  [데이터 중심 어플리케이션 설계하기] 2과. 데이터 모델과 질의 언어 2과. 데이터 모델과 질의 언어참고문서 : 데이터 중심 애플리케이션 설계(마틴 클레프만, 위키북스)1. 데이터 모델이란 무엇인가?데이터 모델은 우리가 어떤 문제를 어떻게 해결할지, 그리고 소프트웨어가 할 수 있는 일과 없는 일에까지 영향을 미친다.예를 들어, 어떤 연산은 빠르고, 어떤 연산은 느릴 수 있다.데이터 모델을 이해하는 것은 단순히 저장 구조를 아는 것 이상으로, 시스템의 한계와 가능성을 파악하는 데 중요하다.데이터 모델의 큰 범주관계형 모델문서 모델그래프 모델2. 관계형 모델과 문서 모델2-1. 관계형 모델데이터를 관계(relation, 테이블)로 구성각 관계는 순서 없는 튜플(tuple, 행)의 모음SQL을 통해 정규화된 구조로 데이터를 저장하고 질의정규화와 조인(join)을 통해 데이터 중.. DB 2025. 7. 13.