평문으로 공유되던 환경변수를 AWS Parameter Store로
디스코드와 노션에 API 키와 DB 접속 정보를 공유하면 기록이 영구히 남고 권한을 나눌 수 없다는 점을 짚었습니다. 노출 위험도에 따라 String과 SecureString(KMS)을 나눠 쓰고, 팀원이 바뀌어도 유지되도록 개인별 대신 그룹 IAM 정책을 골랐습니다.
선박의 심장을 다루던 손으로,서비스를 만듭니다.
컨테이너선 기관사로 장시간 무중단 운항 환경의 모니터링·안전 체계를 운용했습니다. 지금은 React·Next.js·TypeScript로 화면을, Express·Prisma로 서버를 만들고, 인증·캐시·배포 구조처럼 눈에 보이지 않는 부분까지 근거를 남기며 설계하는 풀스택 개발자입니다.
Scroll
About
백엔드와 프론트엔드를 모두 다루는 풀스택 개발자입니다.
기능을 구현하는 데서 멈추지 않고, 인증 토큰 저장 방식, 캐시 전략, 환경변수 관리 구조 같은 선택지를 비교하고 근거를 남겨 판단합니다. 작은 판단 착오가 큰 사고로 이어지는 배 위에서 절차를 지키고 기록하던 습관이 지금도 코드에 그대로 남아 있습니다.
Languages
JavaScriptTypeScript
Frontend
ReactNext.js (App Router)TanStack QueryTailwind CSSFramer Motion
Backend
Express.jsPrisma ORMZodPostgreSQLMongoDB
Infra / Security
AWS IAMAWS Systems Manager Parameter Store (SecureString / KMS)
Tools & Collaboration
GitSwaggerDBeaverFigmaCodeRabbitVercelRenderAWSSupabaseCloudflare
- Codeit 부트캠프 풀스택 과정React/Next.js 프론트엔드와 Express/Prisma 백엔드를 함께 다루는 커리큘럼. TanStack Query 기반 서버 상태관리를 배워 미션 프로젝트에 적용
- 컨테이너선 기관사장시간 무중단 운항 환경에서 엔진 모니터링·알람 체계 운용, 24시간 교대 근무 체제의 안전 절차와 실시간 상태 판단
- Oil/Chemical선 실습위험물 운반 선박 환경의 안전 프로토콜 실습
- 부산해사고등학교 졸업
Selected Works
Engineering Notes
결과보다 어떤 근거로 선택했는지를 남깁니다.
경고를 숨기지 않고 hydration mismatch의 원인을 찾기
반응형 훅 같은 의심 원인부터 하나씩 배제한 끝에, Math.sin과 Math.cos 결과가 Node와 브라우저에서 마지막 소수점 자리가 달라진다는 걸 확인했습니다. suppressHydrationWarning 대신 양쪽 값을 소수점 6자리로 반올림해 맞췄고, 이미지 용량이 늘어나는 비용도 함께 기록했습니다.
결제 승인 API에서 클라이언트 값을 믿지 않기
토스 결제 성공 URL의 금액과 주문 정보는 주소창에서 바꿀 수 있어서, 승인 전에 서버가 계산한 기준 금액과 주문번호 규칙으로 먼저 비교해 틀린 요청이 토스에 닿지 않게 했습니다. 이중 결제는 상태 조건을 건 updateMany의 갱신 행 수로 막았습니다. 키가 없는 로컬 편의 모드에서 가짜 paymentKey가 결제 완료로 통과하는 사고도 직접 겪었고, 이를 배포 전 위험으로 기록했습니다.
SSE로 채팅을 만들고, 신호만 보내기
알림에 쓰던 SSE 연결 하나를 채팅과 함께 쓰도록 넓혔습니다. 서버는 본문 대신 새 메시지가 있다는 신호만 보내고, 브라우저가 API로 내용을 다시 받습니다. 알림 문구를 조회 때 조립하는 규칙이 두 곳으로 갈라지는 걸 피하고, 신호가 유실돼도 재조회로 맞춰지게 하려는 선택이었습니다. 신호는 트랜잭션이 커밋된 뒤에만 발행해 롤백된 알림이 클라이언트에 나가지 않게 했고, 서버 1대 전제라는 한계도 문서에 남겼습니다.
로그인 봇 검증을 rate limit보다 앞에 두기
계정별 rate limit만으로는 계정을 바꿔 가며 시도하는 요청을 막지 못해 Cloudflare Turnstile을 도입했습니다. 검증을 rate limit 앞에 둔 이유는 뒤에 두면 봇이 남의 계정 시도 횟수를 먼저 소진시켜 정상 사용자를 잠글 수 있기 때문입니다. 서버는 검증 호출이 실패하면 막는 fail-closed로 두었고, 요청 자체를 못 받게 하지는 못한다는 한계도 함께 적었습니다.
클라이언트 훅 가드를 서버 컴포넌트 가드로
useEffect 안에서 하는 route guard는 화면이 그려진 뒤에 판정해서 보호된 화면이 잠깐 보이고, 캐시된 상태가 낡으면 잘못 보낼 수도 있습니다. 그래서 판정은 서버 레이아웃에서 redirect()로 하고, 진짜 방어선은 BE의 requireAuth와 requireRole에 두었습니다. FE 가드는 어디까지가 안내용인지 먼저 정한 셈입니다.
AI 리뷰를 그대로 받아들이지 않기
직접 도입한 CodeRabbit이 IP 기반 rate limiting에 인증이 없다고 지적했을 때, 그 라우트의 유일한 비로그인 경로가 배포 전에 삭제될 쇼케이스 페이지라는 근거로 반박하고 이후 제시된 대안을 검토했습니다.
Interests
AI를 개발 워크플로우에 녹이는 방식
CodeRabbit을 코드리뷰에 도입한 경험에서 출발해, Claude Code 같은 에이전트를 기획·문서화·개발 단계에 쓰며 생산성이 어떻게 달라지는지 지켜보고 있습니다.
제약 속에서의 기술적 선택
무료 티어 호스팅, 짧은 개발 기간, 협업 툴의 보안 한계처럼 이상적이지 않은 조건에서 왜 이 선택을 했는지 설명할 수 있는 과정을 중요하게 여깁니다.