수민's 개발 이야기

회사에서 백엔드 서버를 실행했더니 성공 표시와 함께 단 2초 만에 프로세스가 종료되어 버리는 현상을 겪었다. 원인은 애플리케이션 버그나 코드 로직 에러가 아니라, Flyway가 DB의 마이그레이션 이력과 로컬 SQL 파일이 서로 같다고 신뢰하지 못했기 때문이다. 에러 로그에는 대략 다음과 같은 메시지가 출력된다. Migration checksum mismatch for migration version 2-> Applied to database : 654703994-> Resolved locally : -861715602Either revert the changes to the migration, or run repair ...이번 글에서는 Flyway의 "체크섬 불일치"가 무엇인지, 왜 발생하며, ..

🔫Trouble Shooting 2026. 8. 9. 23:17

인턴을 진행하면서 스크래핑을 통해 데이터를 수집할 일이 있어서 네이버 카페 데이터를 Selenium으로 안전하게 수집하고, FastAPI 기반 어드민 UI를 구축했다. 1. 프로젝트 배경 및 아키텍처특정 네이버 카페의 게시글 데이터를 수집하고, 이를 시각화 및 분석하기 위한 도구가 필요했다. 하지만 다음과 같은 제약사항이 존재했다.네이버의 강력한 매크로 및 봇 감지 서버리스 환경의 Chrome 실행 불가 제약데이터 손실 방지를 위한 실시간 증분 저장 필요성이를 해결하기 위해 시스템을 스크래퍼와 어드민 UI(FastAPI / Vercel) 두 부분으로 완전히 분리하는 아키텍처를 설계했다.2. Selenium 기반 스크래퍼 설계 2.1 봇 감지 회피: 쿠키 기반 세션 복원 및 오프스크린 브라우저네이버는 자동..

카테고리 없음 2026. 7. 26. 23:13

프론트엔드 개발자로서 서비스의 화려한 애니메이션과 UI를 최적화하는 것도 즐겁지만, 최근 프로젝트를 진행하며 깊게 깨달은 바가 있다. 바로 "우리가 만든 서비스는 모든 유저에게 평등한가?"라는 질문이었다.특히 마우스와 모니터 없이 스크린 리더에 의존하여 웹을 탐색하는 시각 장애인 유저들을 위한 웹 접근성은 '후순위'라는 핑계로 뒷순위로 밀리곤 한다. 이번 글에서는 무심코 썼던 태그를 반성하고, 시각 장애를 가진 유저도 쇼핑이나 서비스 이용에 불편함이 없도록 시멘틱 HTML과 React 환경에서의 실시간 상태 알림 경험을 공유하고자 한다.1. 문제의 시작: 스크린 리더는 에서 길을 잃는다처음 코드를 작성할 때, 화면 레이아웃을 잡기 위해 습관적으로 와 을 남발했다.//시각 장애인 유저에게는 아무런 의미..

👩🏻‍💻frontend개발자로 성장해나가기 2026. 7. 12. 23:35

#418이란?React error #418은 하이드레이션 실패이다. 이번 끼움 프로젝트를 진행하면서 AWS S3로 정적배포를 진행했는데 이로 인해 발생하는 렌더 분기 현상이 발생했다. 처음에는 React error이기에 UI 코드 관련해서만 계속 수정했었는데 정적 배포와 관련된 layout을 수정했어야 하는 것이다. 서버(또는 정적 빌드)에서 만든 HTML과, 브라우저에서 React가 첫 렌더로 그리려는 트리가 다를 때 발생한다. 증상콘솔에 #418 반복홈 /, 지원 /apply/, 경험 /experience/ 등 대부분 라우트레이아웃·콘텐츠 깨짐, 빈 화면로그인·OAuth는 예전에 일부만, 이번엔 공통 셸 영향 근본 원인1. AppShell의 canRender + return nulllayout.tsx..

🔫Trouble Shooting 2026. 6. 28. 14:14

Stackclass Stack { constructor() { this.items = []; } push(value) { this.items.push(value); } pop() { if (this.items.length === 0) return null; return this.items.pop(); } peek() { if (this.items.length === 0) return null; return this.items[this.items.length - 1]; } size() { return this.items.length; } isEmpty() { return this.items.length === 0; }} Queueclass Q..

🙏 프론트엔드 개발자의 코딩테스트 뿌수기/자기주도 스터디 2026. 6. 15. 00:17

이번 프로젝트를 진행하면서 AWS 인프라(S3 + CloudFront + CodePipeline + CodeBuild + Lambda) 기반으로 전환하면서 정리한 무중단 배포 및 아키텍처 구축을 경험해보았다. 웹 트래픽이 실제로 어떻게 흐르는지, CI/CD 시점에 어떤 일들이 일어나는지, 그리고 프론트엔드 배포 시 가장 많이 만나는 AccessDenied를 비롯한 트러블 슈팅까지 정리해보았다.1. 배포 아키텍처 & 핵심 메커니즘1.1 전체 아키텍처Source: GitHub CI/CD 오케스트레이터: CodePipelineBuild: CodeBuild (pnpm 환경)정적 파일 스토리지: Amazon S3 CDN / HTTPS 엔드포인트: Amazon CloudFront자동 캐시 무효화: S3 Event ..

카테고리 없음 2026. 5. 23. 02:29

2025년 7월 15일 이후 AWS 프리티어 정책이 변경되었다는 이야기는 들었는데 이게 내 발목을 잡을 것이라고는 생각도 못했다.. 프리티어 무료 플랜은 Code Deploy 사용제한이 생겨 CICD 배포 연습을 하는데 유료 플랜으로 업그레이드하는 것은 무리가 있을 것 같아 다른 방법을 고민해봐야겠다.

카테고리 없음 2026. 5. 21. 14:17

새로운 프로젝트의 파이프라인을 짤 때 젠킨스는 항상 후보군에 오르내리고 자료도 젤 많다.(멘토님 왈 이건 대한민국이 자바공화국이라서 그런거라고 하셨다) 하지만 백엔드와 달리 프론트엔드는 빌드 결과물이 대개 정적 파일이기 때문에 배포 환경을 선택할 때 조금 다른 접근이 필요하다.그래서 젠킨스를 사용하지 않더라도 젠킨스가 무엇인지 알아보고 싶어졌다. 젠킨스 장단점 [젠킨스 장점]• 강력한 커스터마이징: 플러그인이 정말 많아서 원하는 형태의 파이프라인은 거의 다 구현할 수 있다.• 인프라 비용 절감: 자체 서버(On-Premise)에 올리면 빌드 횟수나 시간에 제한 없이 무제한으로 쓸 수 있다.• 보안 및 폐쇄망 환경: 사내 인프라 내부에서만 돌려야 하는 프로젝트라면 선택이 아닌 필수다.[젠킨스 단점]• 막..

👩🏻‍💻frontend개발자로 성장해나가기 2026. 5. 17. 17:07