chaesunbak 님의 블로그
github: @https://github.com/chaesunbak
문제점웹 요청을 연달아 보내는 경우, 이전 요청들이 아직 처리 중인 상태에서 새로운 요청들이 계속 쌓이면서 병목 현상, 즉, 흐름이 막히는 현상이 발생할 수 있습니다. 경우에 따라, 사용자는 마지막 요청이 완료될 때까지 로딩을 기다려야 할수도 있습니다. 이는 매우 부정적인 사용자 경험으로 이어집니다. 예를 들어, 사용자는 서비스가 느리다고 느끼거나, 응답이 없다고 오해하여 페이지를 이탈할 수 있습니다.해결 방법1. HTTP/2 프로토콜을 사용하세요.HTTP/2 프로토콜이란?크롬 브라우저는 HTTP/1.1 프로토콜로 동일한 출처에 대해 동시에 6개의 TCP 연결만을 허용합니다. HTTP/2 는 브라우저에서 동시 요청에 제한이 없으므로 병목현상이 줄어듭니다. 이는 더 빠른 웹 통신을 위해 2015년에 도입..
배경유튜브에 나온 인플루언서들의 맛집을 조회할수 있는 맛집지도 웹앱 먹튜브를 개발하면서, MVP 개발이 가장 큰 목표였습니다. 갑자기 떠올린 사이드 프로젝트 아이디어인 만큼 짧은 시간안에 중요한 기능만 개발하고 싶었습니다. 이를 위해서, 구글 시트를 DB로 사용하기도 했습니다. 또한, 일단 비효율적이라도 구현하고, 최적화는 필요한 경우에만 나중에 하기로 했습니다.관련 포스팅 : 구글 시트 CORS 에러 삽질기문제상황앱 접속시 모든 데이터를 AJAX로 받아와 이를 리스트와 마커로 띄워주는 로직이였습니다. 추후에는 데이터가 더 많아질수 있는 상황에서, 초기에는 데이터가 약 100개 정도 있는 상황이었습니다. 그런데 리스트에서 렌더링이 제대로 되지 않는 현상이 발생하였습니다. 문제를 정확히 파악하기 위해 개발..
문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었습니다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신합니다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있습니다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)우리가 코드를 import 문법이나 requ..
배경전국 수영인들을 위한 수영장 정보 사이트 어푸! 개발을 시작하면서, 이번 프로젝트로를 진행하면서 얻을 수 있는 것이 무엇인지 고민했습니다. 저는 다음과 같은 목표를 설정할 수 있었습니다.(1) 빠르게 프로덕트를 만들어 검증하고 보완하며 애자일 방법론을 적용한다.(2) 첫 Next.js 프로젝트이므로 Next.js에서 사용되는 개념과 문법 학습에 집중한다.(3) 앱 설계와 태스크 관리에 집중해 팀의 협업을 돕는다.이러한 목표에 따라서, 개별 컴포넌트 구현 작업에 시간을 투입하기보다는 컴포넌트 라이브러리를 사용해 빠른 개발을 하는 것을 고려하게 되었습니다. 또한, 멘토님께서 컴포넌트 라이브러리를 사용해보면서, 재사용 가능한 컴포넌트를 어떻게 설계할 수 있는지를 배울수 있다며 조언해주셨습니다. 이러한 점을..
배경음악 인기도 맞추기 게임 스포티게서를 개발하면서, DB에서 랜덤한 요소를 가져올 필요가 있었습니다. 게임의 진행방식이 두가지 랜덤한 요소 중 인기도가 높은 요소를 맞추는 게임이었기 때문입니다. 단순해 보이는 "랜덤"이라는 개념 뒤에 숨겨진 기술적 고민과 해결 과정을 공유하고자 합니다. 스포티게서는 NoSQL DB인 파이어베이스의 파이어스토어를 사용했기에 컬렉션과 문서라는 용어를 사용하지만, 관계형 DB의 테이블과 행으로 이해하셔도 무방합니다.가장 쉬운 방법, 하지만…컬렉션의 총 문서갯수 가져오기 (예 : 350개)총 문서갯수 내에서 랜덤한 숫자 생성하기 (예 : 1~350중에 아무 숫자 → 53)해당 번호의 문서 가져오기 (예 : 53번째 문서 불러오기)가장 직관적으로 떠올릴 수 있는 방법이지만, 심..
