Next.js 14 SEO(검색엔진 최적화) 도전기 / 웹 이력서
·
Side Project/기타
1. Why?SSAFY가 끝나고 나서 취업을 위해 그동안 진행한 프로젝트를 정리해서 웹 이력서 사이트를 만들었다. Next.js 14와 MongoDB를 사용했고, Vercel을 통해서 배포했다.  전체적인 UI는 이 분의 이력서를 참조했고, 내용은 내가 개발을 하면서 그 동안 고민한 부분과 알게 된 부분들을 보여주고자 했다. 이제 이렇게 열심히 만들었으니, 취업만 하면 된다. SEO를 통해서 내 이력서를 최대한 많은 사람이 볼 수 있도록 하게 하고싶다. 채용 담당자님들이 내 이력서를 볼 수 있도록!2. SEO란?먼저 SEO에 대해서 알아보자. SEO(Search Engine Optimization)란 검색엔진 최적화를 의미한다. 그렇다면 어떻게 해야 검색엔진 최적화를 할 수 있을까? Google의 검색엔..
쿠키와 세션 / 네트워크
·
Computer Science
HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 상태를 보존하지 않음 → 그런데 상태가 없다면 로그인같이 상태가 필요한 경우는? 쿠키 & 세션 HTTP의 무상태성 보완을 위해 등장한 기술들 쿠키 클라이언트에 저장되는 Key-Value 쌍의 작은 데이터 파일 사용자의 정보를 브라우저에 저장하기 위해서 등장 초창기에는 사용자의 정보를 서버가 보관하기에는 사양이 떨어졌음 그래서 쿠키를 클라이언트가 가지고 있다가 요청할 때 보내도록 함 최대 용량은 4KB, 개수는 20개(한 사이트 당) 동작 과정 클라이언트가 요청을 보내면 서버에서 쿠키를..
Firefox에서의 setInterval 문제 해결
·
Side Project/스타게이트
0.TL;DR타이머를 setinterval을 사용해 구현V8엔진을 사용하는 크롬/엣지 등에서는 문제가 없지만 Firefox에서는 오차 누적 이슈 발견userAgent를 사용해 접속환경에 따라 경고문을 출력하도록 함또한 Firefox라면 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현1. Why?에서는 setInterval 문제가 다 해결된줄 알았다. 그런데 "크롬에서는 setInterval  보정이 들어가지만, firefox에서는 보정이 들어가지 않는다"는 글을 보게 되었다.브라우저별로 실행 엔진이 다르니까 충분히 가능한 이야기인데 어째서 고려를 안했을까...🥲 혹시나 해서 chrome과 같은 V8 엔진을 사용하는 edge와 brave 브라우저에서도 실행해봤는데, 얘네는 보정이 들어..
🧑‍🍳토이 프로젝트 <아워홈 사전과제> 회고
·
Side Project/사이드 프로젝트 회고
그냥 혼자서 고민한거 아까워서 적으려는 거구요,, 혹시 문제가 될 부분이 있다면 연락주시면 바로 내리겠습니다. 1. Why? 12월 29일부터 1월 3일까지 아워홈의 사전과제를 진행했다. 아워홈 사전과제 프로덕트의 사이즈가 매우 작아 코드의 퀄리티를 어떻게 높일지에 많은 고민을 해야했고, 또 제출후에도 아쉬운 점이 있어 코드를 추가적으로 수정하기도 했다. 이렇게 고민한 부분들을 작성해보고자한다. 2. 기획 일단 과제 내용은 "이 화면을 따라서 만들어봐라."로 주어졌다. 기능 명세서 작성 상당히 러프하게 주어졌기 때문에, 우선 화면을 보고 어떤 기능이 있는지 파악 이를 Notion에 정리했고, 당장 화면에는 보여지지 않더라도 구현시에 필수적인 기능도 작성 ex)장바구니 버튼 그리고 추가적으로 있으면 좋겠다..