이 글은 개인 블로그에 최초로 업로드 되었습니다. (해당 글 가기) 2025년 12월 3일, 팀원이 전해 준 소식으로 React 서버 컴포넌트의 보안 이슈를 접하게 됐습니다. 보안 취약점 점수 10.0 만점으로, 반드시 즉시 대응이 필요한 취약점이라는 사실에 놀랐습니다.핵심은 '인증 없는 원격 코드 실행(RCE)'이 가능하다는 것이었습니다. 처음에는 의문이 들었습니다. "우리 프로젝트는 Server Actions를 적극적으로 사용하지 않는데, 그래도 위험한가?"결론부터 말씀드리자면, 위험합니다. `Server Actions`를 직접 구현하지 않았더라도, Next.js의 App Router와 같이 RSC를 지원하는 프레임워크를 사용하고 있다면 공격에 노출되어 있습니다.RSC에 무슨 문제가 있었던 것일까요?..
블로그 링크개인 블로그를 만들려는 계획을 계속 가지고 있었는데, 미루고 미루다 결국 AI의 도움을 받아 빠르게 해치웠다. 완벽하고 완성도 높은 블로그를 만들려고 하다 보니 시작이 어려웠던 것 같은데, 힘을 빼고 기본적인 기능만 만들어 두고 사용하면서 고쳐 나갈 생각을 하니 생각보다 쉽게 완성할 수. 있었다. 구글 AI 스튜디오를 사용했고, 큰 틀을 잡아 배포하는 데까지 3시간이 채 걸리지 않았다.전에도 AI를 활용해 사이드 프로젝트를 시도한 적이 있었다. 그때는 stitch로 디자인을 잡고, 커서 ide에 이미지를 넣은 뒤 "이 이미지를 이용해 만들어줘"라고 요청하는 방식이었다. 그때도 나름대로 생산성이 높았다고 생각했지만, 이미지를 코드로 변환하고 다시 수정해서 '쓸만한 코드'로 만드는 데는 반나절이 ..
우리 프로젝트에서는 @suspensive/react-query의 SuspenseQueries를 도입해서 프로젝트의 여러 컴포넌트에서 사용하고 있다.주로 SuspenseQuery 컴포넌트를 사용해 로딩 상태를 관리하고 있었는데, 최근 여러 쿼리를 한번에 다루는 SuspensiveQueries 컴포넌트를 사용했다가 곤란한 에러를 만났다.로컬에서 작업하는 데는 아무 문제가 없었는데, 갑자기 CI 환경에서 타입 에러가 발생했다.SuspenseQueries에서 넘긴 UseQueryOptions 객체가 UseSuspenseQueryOptions과 호환되지 않는다는 에러였다.문제 파악의 시작문제 파악을 위해 패키지 내부 구조를 좀 뜯어 봤다. Suspensive에서 사용하는 Tanstack react-query의 S..
최근 프론트엔드 테스트코드를 작성하는 작업을 하고 있다. 한번도 실무에서 테스트코드를 작성해본 적이 없기에 그야말로 맨땅에 헤딩하는 식으로 작업을 진행 중이다. 그중 가장 최근에 MSW를 도입하게 되면서 여러 시행착오를 겪으며 배운 것이 있어 정리해 보려고 한다.왜 MSW를 도입했나?처음엔 단순히 API 응답을 단순 객체로 만들어 react-query 모킹에 data로 주입하는 식으로 코드를 작성했다. 그러나 이렇게 하니 간단한 요청과 응답이 있는 컴포넌트는 괜찮지만 복잡한 요청과 응답, 그에 따른 조건부 렌더링과 추가적인 요청이 이뤄져야 하는 컴포넌트에서는 엄청나게 복잡하고 유지보수가 어려운 모킹이 줄줄이 붙게 되었다.또, mock data를 테스트 코드 안에 그대로 두고 있어 테스트 코드 파일이 길어..
Next.js와 Supabase로 이벤트 초대장 애플리케이션 만들기이벤트를 생성하면 그 이벤트에 대한 초대장을 만들어주고 공유할 수 있는 서비스를 개인 프로젝트로 진행하고 있다. 단순 초대장 생성 기능뿐 아니라 내 위치 기반으로 주변의 이벤트들을 확인하고 참가할 수 있는 기능도 차차 추가해 보려고 한다. 이벤트 생성 기능과 관련 이미지를 업로드할 수 있는 기능을 구현했다. 프론트엔드에는 Next.js, 백엔드에는 Supabase를 사용하면서 S3와 CloudFront로 이미지를 호스팅하는 방식을 적용해봤다. 이 과정에 대해서 기록해 보려고 한다.Supabase에서 이벤트 테이블 만들기먼저, 이벤트 데이터를 저장할 event 테이블을 Supabase에서 만들었다. 테이블은 간단히, 이벤트 제목, 날짜 및 ..
최근 새로운 프로젝트 본격 진행에 앞서 커밋 린트(commit lint)를 설정하는 작업을 진행했다. 처음에는 간단히 끝날 줄 알았지만, 예상치 못한 문제들이 발생하며 생각보다 많은 시간을 소모하게 되었다. 하지만 배운 점들도 많아 기록해두려 한다.커밋 린트의 필요성 커밋 린트는 커밋 메시지의 형식을 검증하여 일관성을 유지하는 도구다. 이번 프로젝트에서는 하나의 레포에 프론트엔드와 백엔드 코드를 공유하면서 사용하기로 했는데, 이에 따라 커밋 메시지에 (front)와 같은 구분을 추가해야 했다. 그런데 이 규칙을 자주 잊어버리는 일이 발생했다. 이런 문제를 해결하기 위해 커밋 메시지의 형식을 강제할 필요성을 느끼고, commitlint를 도입하기로 결정했다.패키지 설치 및 초기 설정프로젝트의 package..
마지막 업데이트: 2024-10-18 지난 10개월을 돌아보며프론트엔드 개발자로 일을 시작한 지 이제 곧 10개월이 된다. 그동안 여러 일을 맡아서 해 보면서 장애물을 만나기도 하고, 한가지 문제로 며칠동안 고민하고 토론하면서 답을 찾아나가기도 했다. 그 과정이 유익했고 배운 것이 많았기에 중간 기록을 해두려 한다. 물론 단순 구현을 하거나 큰 어려움을 겪지 않았던 작업들도 있었기 때문에 모든 일의 내용을 적지는 않을 것이고, 특별히 기록할 만하고 기억에 남는 것들을 위주로 적어 보려 한다.(본문에 첨부된 코드는 실제와 다르며 이해를 돕기 위해 간소화 및 변형되었다.)서비스 소개지난 10개월간 일한 회사는 모듈화된 애플리케이션을 사용자의 필요에 따라 선택해 통합적으로 이용할 수 있는 플랫폼을 제공했다. ..
한줄 요약 웹서버와 WAS는 클라이언트로부터 온 요청을 처리하는 데서 서로 다른 역할을 한다. 웹서버와 WAS를 분리하면 자원 이용의 효율성 및 장애 극복, 배포 및 유지 보수의 편의성 등의 장점이 있다. 웹서버 하드웨어: 웹 서버의 소프트웨어와 웹사이트의 컴포넌트 파일(html, css, javascript, 이미지)을 저장하는 컴퓨터 소프트웨어: 클라이언트로부터 http 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램 ➡️ 웹 서버의 종류: 아파치, NginX 등 WAS(Web Application Server) WAS는 웹서버와 웹 컨테이너가 합쳐진 개념이다. 정적인 컨텐츠 외에 DB 조회와 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해서 만들어졌다. http 프로토콜을 기반으로 ..
