January 15, 2025
"DOM 조작은 느려요" 라는 말은, 프론트엔드 개발자 사이에서는 당연한 것처럼 받아들여지고 있습니다. 이러한 인식 때문에 React와 같은 Virtual DOM 기반 라이브러리 / 프레임워크들이 등장했고, 이 신기술들을 채택하는 주요 근거로 활용되기도 합니다. 하지만, Virtual DOM도 결국 Native DOM에서 파생된 것일텐데, 어떻게 Nati…
August 20, 2024
서론 서로 다른 기술들을 활용하다보면, 기술들의 원리를 정확히 이해하지 못해 발생하게 되는 이슈가 종종 있습니다. 저는 Next.js 환경에서 소켓을 활용하면서 소켓과 클라이언트의 상태가 동기화되지 않던 문제를 마주쳤는데요, 결론부터 말하자면 이 이슈는 클로저 문제였습니다. 처음 문제를 마주쳤을 때, 와 키워드를 연결해 검색을 해보았는데, 해결방법을 전…
June 02, 2024
서버 없이 클라이언트만으로 구축되어 있는 토이프로젝트를 진행하고 있습니다. 이 때, 네이버의 백과사전 API 기능을 활용하고 있는데, 서버 없이 클라이언트에서 바로 API 콜을 하게 되면 악명 높은 CORS 에러를 마주하게 됩니다. 잘 알려진 cors-anywhere와 같은 기능을 사용할 수도 있지만, 이는 배포 환경에서는 동작하지 않고 근본적인 해결책이…
March 29, 2024
1. 개요 프로젝트를 진행하면서, 로그인 상태에 따른 페이지 접근을 제한해야 하는 경우가 있습니다. 제가 진행하고 있는 프로젝트는 다음과 같은 서비스 플로우를 가지고 있습니다. 로그인 상태가 아닐 경우 접근 제한: 로그인 상태일 경우 접근 제한: 이 글에서는 Next.js 환경에서 어떻게 접근 제한을 구현하였는지에 대한 방법에 대해 공유하려고 합니다…
February 14, 2024
현재 프로젝트에서 사용자가 챗봇 생성에 필요한 데이터를 업로드 하는 기능이 있다. 업로드를 구현하기 위해, 프론트엔드에서 AWS S3 SDK를 사용하여 업로드하기로 했다. 작은 파일의 경우는 단일 객체 업로드를 사용하여 업로드하면 간단하게 구현할 수 있다. 단일 객체 업로드의 경우 AWS 측에서 5GB 자료까지만 지원하며, 100MB 이상의 파일일 경우 …
December 31, 2023
토이프로젝트로 WORDLE 게임을 만들었다. 게임링크, 소스코드링크 데스크탑 브라우저 환경에서는 잘 동작하지만, 내 핸드폰 브라우저 환경(iOS, Safari)에서는 버튼을 빠르게 눌렀을 경우, 예를들어 'P','O'를 빠르게 입력할 경우 'PO' 대신 'PP'가 입력되는 경우가 발생했다. 처음에는 이 오류가 발생하는 원인을 데스크탑 환경과 모바일 환경…