수민's 개발 이야기

웹소켓 웹소켓 말만 들어보고 한번도 안해봐서 개발인생 한번쯤은 해보고 싶다는 마음으로 들어갔던 모각작.. 역대급 커밋수를 이룰 만큼 개발 난도가 높았던 프로젝트였는데 시연때 몇몇 오류와 프엔 멘토님이 마주했다는 몇몇 빨간화면들이.. 아직도 머리속에 아른거리는 것 같다.. 만약 정말 출시하게 된다면 거부기린이 쓴 일렉트론..? 그리고 백그라운드 재생에 대해서도 알게되어 좋았다.. (몰랐던 나..) (큐스팅때문에 급하게 올렸는데 금방 다 채워둘게요…🫶)

😃 프로젝트를 마치며.... 2025. 11. 30. 22:57

출시하기로 한 프로젝트에서 계속해서 reissue 문제가 발생해 수정에 수정에 수정을 거듭했다. 하지만 그래도 계속해서 해결이 안되었고 특히 CSR로 연결한 API로직은 상관이 없는데 SSR에 연결한 로직에서 reissue가 해결이 안되고 있었다. 문제가 발생했던 토큰 이용 로직 - 로그인 완료 후 /oidc-callback에서 API 호출 → SSR에서 accessToken, refreshToken이 undefined인 문제 지속적으로 발생 - 토큰 전달이 안된 상태에서 /auth/reissue 호출이 반복되어 401/500 - 토큰이 없으니 프리패치에서 axios가 실패 진입 자체가 막힘 에러 엄청 발생.. - OIDC 콜백이 백엔드 API /auth/login을 직접 호출해서 쿠키가..

🔫Trouble Shooting 2025. 11. 12. 23:57

웨딩의 메인은 돈이기 때문에 웨딩 기반의 프로젝트를 하면서 가격추이의 변화를 그래프로 표현하도록 했다. 가격은 매년 정부에서 공개해주기 때문에 고정된 값을 프론트에서 가지고 있는 방향으로 가기로 했다. 그리고 이번 큐시즘 OB데이일 때 Recharts.js에 대해 들어보고 D3.js 기반이라고 해서 사용해보면 좋겠다고 생각해 선택했다. Recharts는 React 전용 데이터 시각화 라이브러리로 D3.js 위에서 동작하지만 React 컴포넌트 기반 API를 제공하는 라이브러리다. 컴포넌트 호출만으로 차트를 그릴 수 있는 엄청난 라이브러리.. React 친화적 컴포넌트 구조 (, )SVG 기반으로 가볍 + 커스텀 용이 반응형Tooltip, Legend, Grid처럼 유용한 부가 컴포넌트도 탑재 되어있음...

👩🏻‍💻frontend개발자로 성장해나가기 2025. 10. 31. 21:51

다양한 프로젝트에서 Test를 고려하게 되면서 E2E Test를 공부하게 되었다. E2E 테스트란?E2E(End-to-End) 테스트는 실제 사용자가 애플리케이션을 사용하는 것처럼 전체 흐름을 검증하는 테스트를 말한다. 단위 테스트는 하나의 함수나 컴포넌트를 검증하는 것이 끝이었다. E2E 테스트는 사용자가 버튼을 클릭했을 때 화면이 전환되고, API 요청이 제대로 동작하며, 결과가 표시되는지 같은 전체 시나리오를 테스트합니다.우리 앱이 실제 사용자 입장에서 잘 작동하느냐를 테스트하는 가장 상위 레벨의 테스트이다. E2E 테스트의 목적과 장점[POINT]- UI부터 API 까지 동작을 검증함. - 배포 전 기능이 깨졌는지 자동으로 검증.- 단위 테스트로는 체크하기 힘든 통합적으로 발생하는 이슈도 체킹이 ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 10. 17. 16:17

프로젝트를 하면서 자막을 이미지 형태로 생성해 업로드하기로 로직을 정했다. 또한 사용자가 영상 구간에 맞춰 자막을 편집할 수 있도록 타임라인 에디터도 필요해 자막을 이미지 변환 후 Presigned URL 업로드하고 타임라인 UI를 구현했다. 자막 이미지를 어떻게 만들까? 처음에는 단순히 텍스트만 서버에 저장하면 되는 것 아닌가? 했지만 리소스와 영상 병합 로직을 고려하니 서버에서 바로 사용할 수 있는 PNG 이미지 형태로 자막을 만들어야겠다고 생각했다.Presigned URL 요청 → 서버에서 S3 업로드용 URL 발급Canvas API로 텍스트 → PNG 변환PNG Blob을 Presigned URL로 업로드최종 fileUrl 반환여기서 핵심 POINT는 Canvas로 텍스트를 PNG로 그리는 방..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 10. 3. 23:13

이번 해커톤 프로젝트 Wedit을 하며 고난이 많았지만 이 뒤집히는 티켓을 만드는데에도 굉장히 많은 힘이 들었다. 이게 백엔드에서는 원본 이미지만 받아오고 티켓에 넣는건 프론트에서 알아서 해야해서 어떻게 해야할지 고민이 많았다. 또한 보시다 싶이 3d 티켓 처럼 빙글빙글 돌아가야해서 내 머리도 빙글빙글 돌았다.. 🤯🤯🤯🤯하나의 카드에서 날짜, 위치(정면)과 사진(후면) 두 모드를 제공이미지가 있으면 기본값은 ‘photo’, 없으면 ‘color’ (이미지가 없으면 카드가 돌아가지 않도록 했다. 카드를 돌리면 이상해질테니..)카드를 클릭하면 3D 회전으로 앞/뒤 전환정면(: /ticketColor.svg 위에 SVG 텍스트로 날짜/시간/장소 오버레이후면: 티켓 실루엣 clipPath 안에 사진을 마스..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 9. 19. 23:48

이번 해커톤을 준비하며 백엔드에서 Presigned URL을 발급받고, 프론트는 해당 URL로 이미지를 PUT 요청을 해서 S3에 직접 업로드하는 로직을 구현해보았다. Next.js + TypeScript + Tailwind 환경에서 파일 업로드 검증 , 동시 파일 업로드까지 진행했다. 왜 프론트에서 직접 S3에 올려야 할까? ?대용량 파일을 백엔드를 경유하지 않고 S3로 직행 → 서버 부하/비용 절감할 수 있다. 클라이언트에서 S3로 바로 직결하기 때문에 속도가 빠르다. 업로드 권한을 가진 장기 키를 프론트에 노출하지 않고 짧은 수명(30분)의 Presigned URL만 사용해 보안이 좋다. 아키텍처 한 눈에 보기1. User가 파일을 선택한다. 2. 백엔드에게 파일명 , 파일 형태, 파일 길이 등..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 9. 5. 02:22

프론트엔드에서 API 요청/응답을 다룰 때 가장 중요한 부분 중 하나는 데이터의 신뢰성입니다.서버에서 내려오는 데이터가 언제나 올바르다고 보장할 수 없기 때문에, 클라이언트에서 스키마를 정의하고 런타임에 검증하는 과정이 필요합니다. 클라이언트에서 1차적으로 한번 체크를 하고 그 이후에 API를 요청하거나 응답을 받는 것입니다. 이번 베타테스터 모집 프로젝트는 엄청나게 방대한 양의 데이터를 보내 테스트를 만드는 테스트 등록 로직을 맡이 진행했습니다. 그 만큼 필수 , 선택에 대한 분류도 필요했고 데이터의 이동도 엄청나게 필요했습니다. Zod란?TypeScript 친화적인 런타임 타입 검증 라이브러리스키마를 정의해서 런타임에 실제 값이 올바른지 검사 / 동시에 TypeScript 타입(z.infer)을 추론..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 8. 24. 19:48