들어가며 어느 정도 프론트엔드 개발에 익숙해지다 보니, 신규 기능 개발은 이제 크게 어렵지 않습니다.사실상 가장 힘든 일은 이해하기 어렵게 짜여진 코드의 맥락을 추적하고, 파편화되어 흩어져 있는 코드를 유지 보수하는 일입니다. 오늘은 이런 어려움을 해소할 수 있는 방법 중 하나인 Feature-Sliced Design (FSD) 아키텍처 방법론을 소개합니다. 😀 보통 리액트 프로젝트의 폴더구조 우리에게 익숙한 간단하고 대중적인 폴더 구조입니다.파일의 역할에 따라 폴더를 나눕니다. 계층형 구조 혹은 역할 기반 구조라고 부르기도 합니다. 소규모 앱에는 이런 구조로도 충분하지만, 프로젝트 규모가 커질수록 다소 불편한 점들이 보이기 시작합니다.이 폴더 구조는 앱이 거대해졌을 때 어떤 고민이 생길 수 있을까요?..

들어가며클로드 코드를 처음 사용하고 3달이 지난 2026년 현재, 개발하는 방식이 또 완전히 달라졌습니다.챗GPT에게 질문하고 답변을 받아 직접 코딩하던 ‘AI 어시스턴트’ 방식에서커서나 클로드 코드 같이 스스로 판단하고 행동하며 작업을 자율적으로 수행하는 ‘AI 에이전트 방식’으로 발전했습니다. 많은 기업과 개발자들이 AI 에이전트에 관심을 갖고, 실제 업무에 적극적으로 도입하고 있습니다.실제로 AI를 잘 다루는 개발자와 그렇지 않은 개발자의 생산성 차이는 매우 큽니다. 저는 앞으로 “코딩을 얼마나 잘하는가?”보다, “AI 에이전트를 얼마나 더 잘 다루고 활용할 수 있는가?”가중요한 핵심 역량이 될 것이라고 생각합니다. 최근 Vercel에서 React/Next.js 개발 10년의 노하우가 담긴 reac..

1. 문제 상황로컬 개발 환경에서 SSO(Single Sign-On) 로직을 구현하고 있었습니다.여러 서비스가 동일한 서브도메인 형태로 분리된 구조고, 인증은 하나의 인증 서버에서 담당합니다. 흐름(A 사이트) 로그인 -> (B 사이트 SSO 담당) 로그인 페이지 -> 로그인 및 쿠키 저장 -> (A 사이트) 쿠키 기반 인증 처리 개발 환경프론트엔드: HTTP (로컬)인증 서버: HTTPS인증 쿠키 옵션: Secure=true SameSite=None서브도메인 기반 SSO 구조 문제 현상로그인은 성공쿠키는 저장된 것처럼 보임다른 서브도메인에서는 쿠키가 전달되지 않음결과적으로 SSO 실패문제의 원인은 쿠키의 Secure 옵션입니다.브라우저 보안 정책상 이 옵션이 설정된 쿠키는 HTTPS에서만 동작하며,HT..

안녕하세요 😀오늘은 프론트엔드 생태계를 이끌고 있는 Vercel에서출시한 흥미로운 서비스인 v0에 대해서 소개해드리려고 합니다. v0는 우리가 잘 아는 ChatGPT나 제미나이처럼 프롬프트를 입력하면,그 결과물로 즉시 사용 가능한 UI 컴포넌트 코드를 생성해 주는 도구입니다. 살짝 찍어먹어 본 후기를 공유하고자 합니다.함께 알아봅시다. 😎 📝 v0이란?https://v0.app/docs/introduction What is v0? | v0 Docsv0 is an AI-powered development platform that turns ideas into production-ready, full-stack web apps.v0.app ⦁개요v0은 아이디어를 실제 사용 가능한 풀스택 웹 애플리케이션..

https://hyunki99.tistory.com/131 [AI] 클로드 코드 설치 방법 + 가격 정보 (feat. 인텔리제이에서 실행하기)요즘 생성형 AI를 활용한 바이브 코딩이 뜨거운 주제인 것 같습니다. 저는 시간이 날 때마다 IT 칼럼을 즐겨보는데,클로드 코드에 대해서 아주 많은 칼럼들이 보입니다. 운이 좋게도 회사에서 클hyunki99.tistory.com 지난 글에서 클로드 코드를 설치하고 IDE에 통합까지 완료했습니다. 😀이제 직접 사용해봐야겠죠? 어디에 먼저 사용해볼까 고민하다가예전에 만들어두고 방치한 제 개인 보일러플레이트 프로젝트인🔗nextjs-shadcn-boilerplate에 적용해보기로 했습니다. 클로드 코드 사용하는 방법 함께 알아봅시다. 😎 📝 프로젝트 정보 저장하기 ..

요즘 생성형 AI를 활용한 바이브 코딩이 뜨거운 주제인 것 같습니다. 저는 시간이 날 때마다 IT 칼럼을 즐겨보는데,클로드 코드에 대해서 아주 많은 칼럼들이 보입니다. 운이 좋게도 회사에서 클로드 코드 연간 구독권을 지원받아직접 한번 사용해 봤습니다.(이 녀석 아주 물건입니다.)함께 알아봅시다. 😀 📝 클로드 코드 가격https://www.claude.com/pricing Pricing | ClaudeExplore Claude pricing plans and API costs. Choose from Free, Pro, Max, Team, or Enterprise options to get started with Claude.www.claude.com ⦁개인* Free : $0- 사용량이 금방 부족해짐..

📝 문제 상황Next.js 14버전을 사용하던 중router.back() 함수에서 이슈가 발생했습니다. { router.back(); // 문제 코드 ! }}>router.back()은 그냥 사용하면 문제없이 동작하지만새로고침 후 실행되면 RSC가 무한히 pending 되면서 결국 웹사이트가 터져버렸습니다. 🤔 router.back()을 계속 사용하면서,해결할 수 있는 방법은 없나 찾아봤지만 마땅한 방법을 찾지 못했습니다.저희 프로젝트만 그런가요?? 댓글로 알려주세요 그래서 결국 세션 스토리지에 히스토리를 직접 저장하고goBack() 함수를 구현하기로 했습니다. 😀 📝 해결 방법 ⦁1. 히스토리 저장을 위한 HistoryTracker 컴포넌트const STORAGE_KEY = 'pageH..

사내 백오피스 프로젝트에서 숫자의 단위가 같은데폰트의 크기가 달라 가독성이 떨어진다는 요구사항을 받았습니다. 이 프로젝트는 특성상 가격 데이터를 많이 다루기 때문에숫자의 가독성이 중요했습니다.해결방법 함께 알아봅시다. 😀 📝 문제 상황 ⦁가변폭 폰트 vs 고정폭 폰트해당 현상이 발생한 이유는 사용중인 Pretendard 폰트가 가변폭 폰트이기 때문입니다.⦁ 가변폭 폰트 (Proportional Font)글자마다 너비가 서로 다르게 설정된 폰트입니다. 예를 들어 i는 좁고, m은 넓게 표시됩니다.- 일반적인 본문에 사용⦁ 고정폭 폰트 (monospaced font, fixed-pitch, fixed-width, non-proportional font)모든 글자와 기호가 동일한 너비를 가지는 폰트입니다...