Next 12 en_US인가 en-US인가 그것이 문제로다(feat. i18n) 들어가며이번 글에서는 다국어 지원을 도입한 프로젝트에서 겪은 표준 에러에 대해 설명한다. 이 글은 에러의 식별, 원인 분석, 그리고 문제 해결 과정을 다루며, 동일한 문제를 겪을 수 있는 개발자들에게 유용한 정보를 제공한다.에러 식별9월을 앞두고 이번 분기에 진행한 개발 작업을 정리하던 중, Sentry에서 특정 에러가 발생한 것을 확인했다. 해당 에러는 다국어 지원을 위해 사용한 locale 파일과 관련이 있었다.우선 일차적으로 locale 파일을 가져와서 json 형태로 만들고 이를 타입을 추론하여 사용하기 때문에 만약 없는 locale key라면 빌드단계에서 막혀야한다. (프로젝트 빌드시에 타입체크를 하도록 강제해두었기 때문에)원인분석1. locale key가 없다?그런데도 에러가 발생했고 소스맵을.. 2024. 8. 27. [Next.js] NextAuth와 Prisma로 인증 기능 구현하기 들어가며 이번 글에서는 NextAuth와 Prisma 그리고 PostgreSQL를 이용하여 인증 기능을 구현하는 글입니다. Prisma와 PostgreSQL의 세팅이 완료된 시점을 기준으로 하고 Google 로그인을 예제로 합니다. 사전 준비 Google 로그인을 하기 위해선 구글 로그인의 clientId와 clientSecret 키가 필요합니다. 이것을 발급받는거부터 빠르게 시작하겠습니다. 키 발급 구글 소셜 로그인 Client ID와 Client Secret Key 설정방법 구글에서 제공하는 소셜 로그인에 사용되는 Client ID와 Client Secret Key를 발급받는 과정을 설명합니다. medipress.co.kr 해당 글을 읽은 다음에 두 개의 값을 가져오면 되겠습니다. 그 외에 설정해야할.. 2023. 11. 27. [Next.js] 분리된 음원을 다시 하나로 (Web Assembly, web worker) 들어가며 만드는 서비스 중에 AI를 통해 음원을 분리해주는 "Source Separation"이 있습니다. 음원을 분리하여 유저에게 분리된 음원소스를 다운로드하는 기능을 제공하고 있습니다. 최근 유저 피드백 중에 분리된 음원을 합쳐서 하나의 파일로 다운로드 하는 기능이 들어와 개발을 하게 되었습니다. 이번 글에서는 간단하게 라이브러리를 이용해 기능을 만들어보았습니다. 이후 속도 개선을 위해 Web Assembly 기반의 FFmepg wasm을 사용하고, UI Block를 방지하기 위해 변환 기능을 Web Worker 상에서 동작하는 방법에 대해 알아보겠습니다. 결론부터 말하자면 웹어셈블리는 매우 짱짱이었고 테스트 데이터 결과 15~30배의 성능개선이 이뤄졌습니다. 대상 독자 브라우저에서 오디오파일을 다루.. 2023. 2. 1. [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교하고 zustand의 장점부터 사용법에 대해 설명하도록 하겠습니다 대상독자 간단하고 직관적인 상태관리 라이브러리에 대한 기초 지식이 필요한 개발자 zustand와 recoil 사이에서 고민하는 개발자 본문 들어가기 전에 잠깐 살펴본 npm Trend입니다. recoil의 0.7.6의 버전, 가장 많은 zustand의 star수와 압도적으로 작은 사이즈가 눈에 뜹니다. 그럼 이제 편리한 zustand의 세상으로 떠나보시죠. Zustand 독일어로 ‘상태’라는 뜻을 가진 라이브러리입니다. Jotai를 .. 2023. 1. 24. 이전 1 2 3 다음
