react

[Next.js] 국제화(i18n) 자동화 시스템 구축하기

올해 초 OKR을 작성하면서 빠르게 이루고 싶었던 목표 중 하나가 사내 서비스 국제화(i18n) 자동화 시스템을 구축하는 것이었다. 지난 번 프로덕트 런칭을 준비하면서 i18n 관련 노가다 작업(복붙이나 json 컨플릭트 해결 등...)이 너무 비효율적이라는 생각이 들었기 때문이다. 자동화 시스템을 구축하면서는 Toast UI 유동식님의 자동화 가이드 포스트를 많이 참고했다. 한 번 시스템을 설정해두니 번역할 키를 하나씩 추가하지 않아도 되어 만족도가 높은 작업이었다. 👍 본 포스팅에서는 국제화 자동화 가이드를 따르면서 헷갈렸던 부분이나 보완한 부분 등을 위주로 설명을 덧붙여보려고 한다. package.json & Dockerfile 업데이트 scan:i18n - 번역할 키 값을 스캔해서 스캔한 키 값을..

[React] Web API를 활용한 영상 녹화 구현하기

🏃‍♀️ 들어가며 최근 웹 사이트 상에서의 영상 녹화를 구현할 일이 있었다. 1. 사용자가 웹 사이트 상에서 녹화되는 영상을 실시간으로 확인할 수 있어야 하고 2. 녹화된 영상을 서버에 업로드하거나 다운로드할 수 있어야 했다. '웹캠 녹화'라는 키워드로 검색하면 웹캠으로 영상을 녹화할 수 있는 사이트들이 몇 개 나오는데 Web API를 활용하면 정말 쉽고 간단하게 그런 사이트들에서 제공하는 기능을 거의 그대로 구현할 수 있다. 이번 글에서는 이 사이트에서의 영상 녹화 기능을 비슷하게 따라 만들어 보면서 영상 녹화를 어떻게 구현했는지 기록해두려고 한다. 🛠️ 구현하기 API(Application Programming Interface)란 개발자가 복잡한 기능을 더 쉽게 만들 수 있도록 프로그래밍 언어로 제..

multer로 AWS S3에 파일 업로드하기

진행 중인 Next.js 프로젝트에서 AWS S3 버킷에 이미지를 업로드하는 기능을 구현할 일이 있었다. Next.js에서 multer를 사용하면서 발생했던 몇 가지 문제점과 해결 방안을 공유하고자 글을 작성하게 되었다. 🧩 사전 준비 - S3 버킷 생성 및 ACL 권한 설정 - IAM 관리자 권한 생성 🎨 파일 업로드를 위한 UI 제작 피그마 뒤적거려서 옛날에 만든 프로필 카드를 끄집어내왔다. 나머지는 다 생략하고 이 프로필 카드에서 이미지 업로드 하는 부분만 만들어보자! 카드 중앙의 버튼 영역을 클릭할 경우 이미지를 업로드할 수 있게 만들어볼 것이다. import { useState, useRef } from 'react'; import { FileImageOutlined } from '@ant-de..

[Next.js] "window is not defined" 에러 해결

🚑 문제 상황 pages 내에서 로그인 유저 정보를 로컬 스토리지로부터 받아와야하는 상황이 있었는데 해당 에러를 마주하게 되었다. 서버사이드 렌더링(SSR)에 대한 이해가 부족했기 때문에 발생한 문제였다. SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식으로, 서버에서 웹 페이지를 렌더링할 때 window나 document 같은 객체가 존재하지 않기 때문에 발생하는 에러이다. 🔧 해결 방법 1. typeof 사용 해결 방법은 여러 가지가 있지만 typeof를 사용해서 간단하게 해결할 수 있었다. // 사용 예 1. const [loginUser, setLoginUser] = useState( typeof window !== 'undefined' ? JSON.pa..