수민's 개발 이야기

프로젝트를 하면서 자막을 이미지 형태로 생성해 업로드하기로 로직을 정했다. 또한 사용자가 영상 구간에 맞춰 자막을 편집할 수 있도록 타임라인 에디터도 필요해 자막을 이미지 변환 후 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

React Native는 앱스토어(Play Store, App Store)에 배포해야 하므로 심사 및 업데이트 과정이 번거롭다. 네이티브 어플리케이션의 특징이긴 하지만 회사에서만 사용하는 어플의 특성상 URL로 공유해서 어플을 깔 수 있게 하는 것도 훨씬 편리할 것이라는 생각이 들었다. 또한 설치 없이 브라우저에서도 바로 접속 가능하며 웹 배포만으로도 최신 기능 반영 가능해 테스트가 매우 쉽다는 장점이 있다. 또한 Next도 안써보긴했지만 더 어색한 ReactNative보다는 나을 것 같다는 판단을 하고 PWA로 진행해야겠다고 생각했다. 또한 react native가 플랫폼별 이슈나 빌드 환경 설정 부담가 많아서 빠른 피처 추가 및 버그 수정 가능하다고 판단했다.PWA란?: 프로그레시브 웹 앱으로 브라우..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 25. 16:02

역시 개발의 킥은 성능개선이라고 할 수 있다. 다양한 성능을 개선하는 방법이 있지만 메일메일에서 받은 메일을 기반으로 메모이제이션이 무엇인지 알아보고자 한다.메모이제이션이란?: 기억되어야하는 것이라는 뜻의 라틴어에서 파생된 단어로 동일한 계산을 반복적으로 해야할 때 이전에 계산한 값을 메모리에 저장해 중복적인 계산을 제거해 전반적인 실행 속도를 빠르게 만들어줄 수 있다. 보통 애플리케이션의 최적화를 위해 사용된다.리액트에서 메모이제이션을 사용하는 법1) useMemo: useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다고 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. 메모이즈 된 값을 return하는 Hook이다.const memoiz..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 22. 18:00

나는 원래 tailwind-css가 아닌 styled-component를 사용하고 있었다. 근데 styled-compoent의 고도화가 중지되고 이제 사라지는 스타일링 도구가 되지 않을까 하기도 하고 디자이너들이랑 협업을 하다보니 디자인 시스템을 등록해놓고 개발하는게 필수라는 생각이 들었다. (특히 나는 구분 못하지만 미묘하게 바뀌게 된 컬러를 바로 적용하기에는 무조건이다. )tailwind-css란?Tailwind CSS는 Utility-First 컨셉*을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.*Utility-First 컨셉 : 클래스를 미리 정의된 스타일 조각처럼 써서 직접..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 21. 13:17

STACK스택이란? : 나중에 넣은 데이터가 먼저 나오는 자료구조 (LIFO*)*LIFO : Last In First Out / 후입선출 주요연산연산 설명시간복잡도push(요소)요소를 맨 위에 넣기 O(1)pop()맨위의 요소를 제거하고 반환 O(1)peek() [/ top()]스택의 맨 위 요소를 확인O(1)isEmpty()스택이 비어있는지 확인O(1)size()스택에 들어 있는 요소의 개수 반환- 사용예시 웹 브라우저 뒤로 가기 기능 (페이지 방문 순서 저장)재귀 함수 호출 스택 (함수 호출 순서 저장)문자열 괄호 짝 검사DFS자바스크립트에서 사용하는 방법 const stack = [];// pushstack.push(10);stack.push(20);stack.push(30); // popcon..

🙏 프론트엔드 개발자의 코딩테스트 뿌수기 2025. 7. 18. 14:51