BbaGyun's Portfolio

2026.03.059 min

왜 대기업은 API를 프론트 도메인 뒤에 숨길까? (CORS부터 BFF 아키텍처의 완성까지)

개발을 하다 보면 수도 없이 마주하는 에러, CORS(Cross-Origin Resource Sharing). 초기에는 이를 단순히 "서버가 내 요청을 튕겨내는 귀찮은 에러" 정도로 여겼습니다. 하지만 브라우저의 보안 모델과 쿠키의 동작 원리를 파고들면서, 실무에서 왜 그토록 복잡하게 프록시(Proxy)를 설정하고 BFF(Backend For Frontend) 구조를 가져가는지 명확한 해답을 얻게 되었습니다.

ArchitectureSecurityBFFCORSNetwork

2026.03.0310 min

코드 한 줄 없이 포트폴리오 완성하기: 100% 바이브 코딩(Vibe Coding) 도입기와 아키텍트의 역할

최근 개발 생태계의 뜨거운 감자인 '바이브 코딩(Vibe Coding, 자연어 지시만으로 AI가 코드를 작성하게 하는 개발 방식)'. 실무에서 복잡한 트랜잭션을 다루던 백엔드 개발자인 저는, 상대적으로 도메인 로직이 가벼운 개인 포트폴리오 웹사이트 구축을 기회 삼아 '단 한 줄의 코드도 직접 타이핑하지 않는 100% 바이브 코딩' 을 기획하고 실행해 보았습니다. 이 실험을 통해 깨달은 AI 시대 개발자의 진짜 역할과, 아키텍처 설계의 중요성에 대한 회고입니다.

AI-Driven DevelopmentClean ArchitectureAntigravity

2026.03.016 min

구글과 네이버는 왜 비밀번호를 평문으로 보낼까? (개발자 도구의 착시와 HTTPS의 진실)

"클라이언트에서 비밀번호를 평문으로 보내면 해킹당하는 거 아냐?" 웹 개발자라면 누구나 한 번쯤 크롬 개발자 도구의 Network 탭을 열어보고 식겁한 경험이 있을 것입니다. 저 역시 로그인 API를 만들며 프론트엔드에서 비밀번호를 암호화하여 서버로 보내는 치밀한(?) 계획을 세웠던 적이 있습니다. 하지만 브라우저와 네트워크 구간의 암호화 원리를 깊이 이해하면서, 이것이 얼마나 거대한 오해에서 비롯된 헛수고였는지 깨닫게 되었습니다.

BackendArchitectureSecurity

2026.03.017 min

[Next.js x NestJS] 프론트엔드와 백엔드의 도메인 분리, 깨부순 아키텍처 오해들

"프론트엔드와 백엔드를 물리적으로 분리하자." 현대 웹 개발의 기본처럼 여겨지지만, Next.js와 NestJS를 각각 다른 최상위 도메인(A.com, B.com)으로 배포하고 연동하는 과정은 단순히 API만 연결하는 것으로 끝나지 않았습니다. 인증(Auth), 쿠키(Cookie), 네트워크 보안이라는 거대한 벽을 마주하며 깨부순 과거의 오해들과 아키텍처 개선기를 공유합니다.

ArchitectureSecurityBFF

2026.03.015 min

[NestJS] Guard가 정답일까? (Middleware와 Guard의 트레이드오프 회고)

NestJS 생태계에서 "인증은 Guard로 처리하라"는 것은 일종의 국룰처럼 여겨집니다. 하지만 저는 통합 예약 플랫폼을 설계하며 관리자 권한 제어에 Guard 대신 Middleware를 선택했고, 나중에도 그 구조를 유지했습니다. 프레임워크의 권장 사항을 따르지 않은 이 결정의 배경과 트레이드오프에 대한 회고록입니다.

BackendArchitectureAuthentication

2026.02.286 min

Context API 지옥에서 벗어나 라우터 레벨 캡슐화 달성하기

복잡한 예약 플로우에서 발생하는 전역 상태의 비대화와 Props Drilling 문제를 해결하기 위해, 도메인 단위로 Context를 분리하고 Custom Hook으로 상태를 은닉화한 프론트엔드 최적화 했습니다.

ReactFrontendContext API

2026.02.285 min

Config-driven 아키텍처로 React 프로젝트 파편화 막기

SI 방식의 프로젝트 복제 구조에서 벗어나, 기능을 설정으로 제어하는 아키텍처를 도입하여 프론트엔드 파편화를 막고 유지보수성을 극대화한 경험을 공유합니다.

ArchitectureReactFrontend

2026.02.276 min

1500ms에서 400ms로 RDBMS 환경에서 77만 자 대용량 텍스트 검색 최적화기

전문 검색 엔진(Elasticsearch)을 즉각 도입하기 어려운 현실적인 제약 속에서, MySQL의 FULLTEXT 인덱스와 Node.js 레벨의 쿼리 라우팅을 결합하여 검색 성능을 73% 향상시킨 하이브리드 검색 구현기.

BackendPerformanceMySQL

2026.02.275 min

외부 연동 시스템에서의 로깅 분리와 버퍼링 전략

외부 API 의존도가 높은 시스템에서 DB 병목을 해결하고, 인메모리 버퍼링을 통해 시스템 안정성을 확보한 아키텍처 개선기.

BackendArchitecturePHP

2026.02.267 min

실시간 통신의 트래픽 폭주를 막고 신뢰성을 보장하는 아키텍처 구상

B2B 화훼 플랫폼 '하이패스'를 개발하며, Polling 방식의 비효율을 걷어내기 위해 Socket.io를 도입해 실시간 주문 상태 동기화를 구현했습니다. 화면이 즉각적으로 갱신되는 마법 같은 경험에 처음에는 기뻤지만, 운영 환경을 모니터링하고 트래픽 증가를 시뮬레이션하면서 현재 아키텍처가 가진 '메시지 유실 리스크' 와 '트래픽 관리의 맹점' 을 뼈저리게 인지하게 되었습니다.

ArchitectureSocket.io

2026.02.266 min

JSON 파일을 활용한 간이 Outbox 패턴으로 정산 데이터 지키기

외부 API 연동 시 발생하는 트랜잭션 유실과 장애를 방어하기 위해, 물리적 JSON 파일을 Fallback으로 활용하여 간이 Outbox 패턴을 구현하고 금융 데이터의 무결성을 지켜낸 백엔드 설계기입니다.

BackendArchitectureNode.js

2026.02.266 min

분산 환경에서의 SSO 통합과 Soft FK 활용기

파편화된 사내 서비스들의 인증 체계를 NestJS 기반의 중앙 집중형 플랫폼으로 통합하고, 물리적으로 분리된 DB 환경에서 Soft FK와 JWT Payload를 활용해 느슨한 결합과 신뢰 모델을 구축한 아키텍처 설계기입니다.