본문 바로가기

전체 글41

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.
Firefox에서의 setInterval 문제 해결 0.TL;DR타이머를 setinterval을 사용해 구현V8엔진을 사용하는 크롬/엣지 등에서는 문제가 없지만 Firefox에서는 오차 누적 이슈 발견userAgent를 사용해 접속환경에 따라 경고문을 출력하도록 함또한 Firefox라면 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현1. Why?에서는 setInterval 문제가 다 해결된줄 알았다. 그런데 "크롬에서는 setInterval  보정이 들어가지만, firefox에서는 보정이 들어가지 않는다"는 글을 보게 되었다.브라우저별로 실행 엔진이 다르니까 충분히 가능한 이야기인데 어째서 고려를 안했을까...🥲 혹시나 해서 chrome과 같은 V8 엔진을 사용하는 edge와 brave 브라우저에서도 실행해봤는데, 얘네는 보정이 들어.. 2024. 2. 7.

티스토리툴바