블로그 포스트

[Typescript로 설계하는 프로젝트] "원래 있던 기능이니 금방 하시죠?" 당하지 않는 Service Layer 설계 전략

## 들어가며 > 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. > > [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" > > [나]: "네 아직 마무리 안 했어요. 수정 사항이 뭔가요?" > > [기획자]: ...

더 읽기 →

[Typescript로 설계하는 프로젝트] "원래 있던 기능이니 금방 하시죠?" 당하지 않는 Service Layer 설계 전략 With Di

## 들어가며 > 겨우 백엔드의 요청을 쳐내고 다시 피곤함에전 모습으로 테스크를 마무리하려는 순간 이번엔 제 슬랙이 울립니다. > > [기획자]: "급하게 기획이 바뀌어서요. 이거 프론트에서 추가로 수정해 주셔야 할 것 같아요. 아직 마무리 다 안 하신 거 맞죠?" > > [나]: "네 아직 마무리 안 했어요. 수정 사항이 뭔가요?" > > [기획자]: ...

더 읽기 →

[Typescript로 설계하는 프로젝트] 🥉 "같은 로직 또 복사했어요?" Domain 모델로 책임 분리하기

## 들어가며 > **오후 4시, 또 다시 울리는 슬랙 알림...** > > **[기획자]**: "저번에 만든 사용자 상태 로직 잘 쓰고 있어요! 그런데 이번엔 사용자가 특정 액션을 할 수 있는지 검증하는 로직도 추가해 주세요." > > **[나]**: "네, 어떤 검증 로직인가요?" > > **[기획자]**: "사용자가 글을 작성할 수 있는지, 댓글을 ...

더 읽기 →

[Typescript로 설계하는 프로젝트] Type 설계의 시작: 견고한 서버 API Type 설계하기

## 들어가며 > 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. > **"죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다."** > **"User로 정의한 스키마 중에 name이 빠질 것 같아요."** > 순간 머릿속에서 여기저기 대강 흩어져 있는 User 비스무리한 것들이 떠오릅...

더 읽기 →

[Typescript로 설계하는 프로젝트] Type 설계의 시작: 견고한 서버 API Type 설계하기 With DI

## 들어가며 > 피곤에 쩔은 모습으로 하나의 테스크를 마무리 하는 순간 백엔드 개발자가 다가옵니다. > **"죄송하지만 이번에 만든 api 중에 하나의 리스폰스가 변동 될 것 같습니다."** > **"User로 정의한 스키마 중에 name이 빠질 것 같아요."** > 순간 머릿속에서 여기저기 대강 흩어져 있는 User 비스무리한 것들이 떠오릅...

더 읽기 →

[Typescript로 설계하는 프로젝트] 당신의 Type, 어디까지 연결되어 있나요?

# [타입으로 설계하는 프로젝트] 당신의 Type, 어디까지 연결되어 있나요? ### 들어가며 > 플래닝이 끝나고 난 뒤 저에게 주어진 테스크를 살펴 봅니다. **"뭐시기 뭐시기 기능 수정 및 삭제"** 큰 기능 아니니 그냥 지워도 될거라는 저의 생각은 조만간 큰 버그를 가져왔습니다. > 테스트 서버에 올려보니 직접 페이지를 가야만 터지는 수많은 에...

더 읽기 →

🚨3분만에 Next.js 서비스 장애 대응 대응하기: GitHub Actions + AWS ECS + CodeDeploy 롤백 시스템

## 0. 프롤로그 > 이번글에서는 지난번까지 구축한 ECS 환경에서, 오류 발생 시 애플리케이션을 안정적으로 롤백하는 방법에 대해 다뤄보겠습니다. > 특히 GitHub Actions, AWS CodeDeploy를 활용하여 자동화된 배포 및 롤백 프로세스를 구현하는 방법을 중심으로 설명드릴 예정입니다. ### 문제 설명 > 평화로운 정기 배포의 날, ...

더 읽기 →

ecs와 code deploy를 활용한 next.js 배포하기

# 0. 프롤로그 > 이전에는 next.js의 standalone과 turborepo의 --docker 옵션을 활용한 도커라이징 하는 방법을 정리하였습니다. > 이번에는 aws의 ecs를 통해 컨테이너관리를 하고 code deploy를 통해 배포 하는 방법에 대해서 정리 해보겠습니다. --- # 1. [AWS ECS란?](https://docs.aws...

더 읽기 →

FSD 간단하게 시작해보기

![](https://velog.velcdn.com/images/rewq5991/post/4710be4e-18f1-40dc-b7dd-dc5783900a0e/image.png) > [공식홈피](https://feature-sliced.design/kr/)를 기반 했지만 제 입맛에 따라 해석 했음을 알려드립니다. # 프롤로그 때는 바야흐로 2024년 5월...

더 읽기 →

javascript로 우아하게 에러 핸들링하기

## 프롤로그 > 이번 글은 JavaScript에서 동기 및 비동기 상황 모두에 대해 에러를 어떻게 처리할 수 있는지에 대해 다룹니다. 에러 처리는 코드의 안정성과 유지보수성에 큰 영향을 미치므로, 명확하고 일관된 패턴을 적용하는 것이 중요합니다. 이 글에서는 기본적인 try-catch 패턴부터, async/await 환경에서의 에러 처리, 그리고 여러 ...

더 읽기 →

Next.js로 우하하게 에러 핸들링하기

## 0. 프롤로그 > 이전까지는 javascript의 try catch과 React의 ErrorBoundary로 error 객체의 전파와 핸들링하는 방법에 대해 알아 보았습니다. > <br/>이번글에서는 Next.js의 error.js와 동작 방법에 대해 알아보겠습니다. --- ## 1. Next.js error.js란? [공식홈피](https://...

더 읽기 →

Panda CSS 1년 사용기

# 프롤로그 > 프로젝트에서 Panda CSS를 도입해 사용해 보면서, 기존의 styled-components나 Tailwind CSS와는 다른 독특한 스타일 작성 방식을 체감할 수 있었습니다. 특히 TypeScript 기반의 타입 안전성, 빌드 타임에 CSS를 정적으로 추출하여 런타임 오버헤드를 줄이는 점, 그리고 CSS‑in‑JS 스타일 작성과 표준 ...

더 읽기 →

React로 우아하게 에러 핸들링 하기

## 0. 프롤로그 > React 애플리케이션에서 예기치 않은 에러는 사용자 경험에 치명적인 영향을 미칠 수 있습니다. > 이 글에서는 **ErrorBoundary**와 같은 에러 관리 기법을 바탕으로, 비동기 코드에서 발생하는 에러를 어떻게 처리하고, 의도적인 에러와 의도하지 않은 에러를 구분하여 > 다루는지 살펴봅니다. > 에러를 명확히 구분하고, 이...

더 읽기 →

Turborepo 에서 next.js 도커라이징 하기

## 0. 프롤로그 > 이 글은 뮤즈라이브에서 웹 서비스 3개를 모노레포 구조에서 Turborepo의 공식 문서를 참조하여 Next.js의 standalone 모드와 Docker를 활용한 모노레포 환경 설정 및 최적화 방법을 설명합니다. ### 목표 - Next.js standalone 모드 설명 - Turborepo를 활용한 모노레포 구성 이해 - ...

더 읽기 →

개발자에서 기여자로: 기술 블로그와 오픈소스가 바꾼 나의 2025년 상반기

## 들어가며 > 2025년 상반기를 돌아보니, 가장 크게 변화한 것은 "나만 알고 있던 지식을 세상과 나누기 시작 했다"는 점이다. > 그동안 개발자로서 쌓아온 경험들과 고민을 글로 정리하고, 오픈소스에 기여 하면서 진정한 의미의 성장을 경험한 상반기였다. --- ### 🌟 기술 블로그: 지식 공유의 시작 2024년 12월 23일, 한 해를 마무...

더 읽기 →

도전과 성장, 그리고 배움으로 가득 찬 2024년 회고

# 도전, 성장, 배움: 2024년 회고 --- ## 1분기 (1~3월): 변화의 시작, 역할의 확장 ### Keep 2024년 초, 팀 내부적으로 큰 변화가 있었습니다. 예상치 못한 시점에 중요한 동료들이 떠나며 공백이 발생했고, 이에 따라 저에게 더 많은 책임과 역할이 주어졌습니다. 이러한 변화 속에서도 팀의 안정성을 회복하기 위해 최선을 다했습...

더 읽기 →

디자인 시스템 시작해보기

# 프롤로그 ### 디자인 시스템: 우리가 꼭 필요한 이유 새롭게 시작하는 거대한 프로젝트 속에는 또 다른 거대한 과제가 숨어 있었다. 바로 **디자인 시스템 구축**이었습니다. 이번 프로젝트는 단순히 두 개의 프로젝트를 하나로 합치는 것을 넘어, 디자인 요소 간 불일치로 인해 UX가 저하되고, 개발 및 유지보수 과정에서도 비효율성이 발생하는 문제를 해...

더 읽기 →

미들웨어에서 auth 적용하기

## 프롤로그 > 이번 글에서는 Next.js의 Middleware를 사용하여 사용자 인증 및 역할 기반 라우팅을 구현한 경험을 공유합니다. --- ## 1. 요구 사항 - Next.js App Route를 사용할 것 - 최상단에서 인증을 처리할 것 - 다른 코드를 수정하지 않을 것 - 캐싱 기능을 사용할 것 - 되도록이면 tanstack-que...

더 읽기 →

서버 의존성을 줄여보자 (Feat : 클린 아키텍처)

텍스트> **기존 클린 아키텍처에서 많이 벗어난 내용이 많습니다. 감안하고 봐주시면 감사하겠습니다.** # 프롤로그 #### 백엔드 개발자로 시작했지만, 프론트엔드에서 아키텍처 고민을 시작하게 된 이유 저는 자바/스프링으로 커리어를 시작 했습니다. 처음 만든 포트폴리오도 스프링mvc를 사용한 웹사이트 였습니다. 그 다음은 백엔드 서비스인 파이어베이스를...

더 읽기 →

오픈소스 기여, 환경 구축부터 디버깅까지

# 오픈소스 밥상차리기: 환경설정과 디버깅편 ## 목표 청중 - 처음으로 오픈 소스에 기여를 해보고 싶은 프론트엔드 개발자 - 시도는 해보았지만 환경 구축과 디버깅에 어려움을 느낀 개발자 - 평소 오픈소스 코드로 학습을 해보고 싶은 개발자 ## 발표 목표 - 오픈 소스 코드를 읽는 것이 왜 유익한지 알린다. - 오픈 소스 코드를 읽는 구체적이고 실용...

더 읽기 →

오픈소스 첫 발걸음: Mantine PR 기여 후기

## 0. 프롤로그 > **"내가 자주 사용하는 오픈 소스에 기여 해보고 싶다."** 늘 마음 한켠에 있었지만, 다른 사람의 기여 후기를 보거나 기여 방법을 보아도 막막 했습니다. > 그러던 중, 회사 프로젝트에서 Slider를 구현해야 할 일이 생겼습니다. 디자이너님께서 전달해주신 피그마 시안을 보자마자 든 생각은 **"아... 망했다 저 기능 없는...

더 읽기 →

컴포넌트에 인터렉션 레이어 이쁘게 씌우기

# 프롤로그 > **디자인 시스템**에서 중요한 목표 중 하나는 **일관된 사용자 경험(UX)**을 제공하는 것입니다. > UI 컴포넌트(버튼, 카드 등)마다 **hover, focus, press**와 같은 다양한 인터랙션 상태가 있고, 각 상태에서 색상이 어떻게 변화하는지가 사용성에 큰 영향을 미칩니다. > 이번 글에서는 디자인 요구사항에 맞춰, **...

더 읽기 →