Project/기타6 Next.js 14 다크모드 구현하기 / 웹 이력서(작성 중) 0. TL;DR 웹 이력서에 다크모드를 적용할 필요성을 느낌 일관적인 경험을 위해 system값을 기본값으로 사용하고, 이후에는 dark / light모드를 토글로 변환하도록 결정 'system 값 사용'과 'load 시 flickering 이슈' 해결에 장점이 있는 next-themes 라이브러리를 사용해서 구현 1. Why? 이력서의 경우 많은 사람들에게 피드백을 받아보는 것이 좋다고 생각한다. 그래서 어느정도 완성된 이력서 사이트를 친구에게 보여줬더니 개발자를 위한 다크모드는 없냐고 불평을 했다. 난 사실 화이트모드를 더 좋아하지만, 상당수의 개발자들이 다크모드를 선호하는 것은 사실이다. 내 이력서 보는 사람들도 어두운 화면을 보다가 갑자기 밝은 화면을 보면 불쾌할 수도 있고, 눈 아프다고 그냥 끄.. 2024. 4. 2. 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. LCP 개선하기 / 아워홈 사전과제 1. Why? 아워홈 과제는 상품 리스트 + 장바구니 페이지 만들기. 도메인 특성을 고려했을 때, 클라이언트 단에서 어떤 부분을 고려해서 개발해야할까 고민했다. 쇼핑몰 사이트니까 이미지가 미친듯이 쏟아진다는 특성이 있다는 것을 떠올리고 Lighthouse로 랜더링 시간을 측정해보았다. 측정해보니까 LCP(Largest Contentful Paint)시간이 지나치게 길어서 점수가 낮게 나왔다. 점수를 올려보자. 2. How? Font 바꾸기 font 형식을 ttf에서 woff2로 변경. 호환성이 낮은 woff2보다는 용량이 30%정도 크더라도 호환성이 높은(물론 ttf만큼은 아니지만)woff로 하고 싶었으나, suit가 woff가 없어서 woff2로 설정. 폰트 파일 사이즈가 570, 578kb에서 166.. 2024. 1. 15. 이전 1 2 다음
