본문 바로가기

전체 글42

Web Worker로 백그라운드에서 타이머 작동시키기 0.TL;DR 기존의 타이머 수정방안 3가지 모두 서버 리소스와 UX측면에서 약간의 손해를 감수해야 했기에 아쉬웠음 JavaScript의 비동기 처리 브라우저의 멀티 스레드 동작, 그리고 백그라운드 스레드에서 동작하는 Web Worker 학습 이후 Web Worker를 사용해서 background에서 타이머가 동작하도록 해 문제 해결 1. Why? 스타게이트에서 타이머를 동작시키는 과정에서, 백그라운드로 탭이 넘어갈 시 1000ms에 한 번 동작해야 할 타이머가 60000ms에 한 번 동작하게 되는 문제점이 있었다. 이를 해결하기 위해 Page Visibility API로 타이머가 정상적인 값을 보내주도록 처리했었다. setInterval과 Page Visibility API로 정확한 대기시간 알려주기 .. 2024. 3. 19.
Next.js에서 MongoDB Data 가져오기 / 웹 이력서 1. Why?최근에 취업을 위해서 Web으로 이력서를 만들었다. 회사에 지원할때 제출할 용도로 만들었기에 최대한 빠르게 구현하고자 했고, Project와 Experience등의 사용되는 Data를 src/data 폴더에 넣어두고 가져와서 쓰고 있었다. 하지만 이런 방식으로 구현하다 보니 여러 문제점이 생겼다.내용을 조금 바꿀때마다 새로 commit 하는것이 불편함다른 사람들이 변경 전의 내용을 모두 볼 수 있다는 점마침 Next.js를 사용하는 김에 DB에서 직접 데이터를 가져와서 사용해보고 싶었기에, MongoDB를 사용해서 data를 가져와 사용하는 방식으로 변경하기로 결정했다.MongoDB를 선택한 이유몽고DB는 구글에 검색만 해도 연관검색어 맨 위에 쓰지말라는 말이 뜨는 아주 놀라운 DB이다. 그.. 2024. 3. 3.
Next.js 14 SEO(검색엔진 최적화) 도전기 / 웹 이력서 1. Why?SSAFY가 끝나고 나서 취업을 위해 그동안 진행한 프로젝트를 정리해서 웹 이력서 사이트를 만들었다. Next.js 14와 MongoDB를 사용했고, Vercel을 통해서 배포했다.  전체적인 UI는 이 분의 이력서를 참조했고, 내용은 내가 개발을 하면서 그 동안 고민한 부분과 알게 된 부분들을 보여주고자 했다. 이제 이렇게 열심히 만들었으니, 취업만 하면 된다. SEO를 통해서 내 이력서를 최대한 많은 사람이 볼 수 있도록 하게 하고싶다. 채용 담당자님들이 내 이력서를 볼 수 있도록!2. SEO란?먼저 SEO에 대해서 알아보자. SEO(Search Engine Optimization)란 검색엔진 최적화를 의미한다. 그렇다면 어떻게 해야 검색엔진 최적화를 할 수 있을까? Google의 검색엔.. 2024. 3. 1.
쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 상태를 보존하지 않음 → 그런데 상태가 없다면 로그인같이 상태가 필요한 경우는? 쿠키 & 세션 HTTP의 무상태성 보완을 위해 등장한 기술들 쿠키 클라이언트에 저장되는 Key-Value 쌍의 작은 데이터 파일 사용자의 정보를 브라우저에 저장하기 위해서 등장 초창기에는 사용자의 정보를 서버가 보관하기에는 사양이 떨어졌음 그래서 쿠키를 클라이언트가 가지고 있다가 요청할 때 보내도록 함 최대 용량은 4KB, 개수는 20개(한 사이트 당) 동작 과정 클라이언트가 요청을 보내면 서버에서 쿠키를.. 2024. 2. 23.

티스토리툴바