SSR 2

[next.js/typescript] bootstrap에서 scrollSpy 적용시키기

내가 선택한 개인 웹사이트 디자인에는 scrollSpy 기능이 적용되어있는 디자인이었다 https://getbootstrap.kr/docs/5.0/components/scrollspy/ 스크롤스파이스크롤 위치에 따라 Bootstrap 내비게이션 또는 목록 그룹 컴포넌트를 자동으로 갱신하여 뷰포트 내에서 현재 어떤 링크가 활성화 된지를 나타냅니다.getbootstrap.kr 간단하게 설명하자면 웹사이트를 들어갔을 때 내가 스크롤을 내릴때마다 옆에 있는 sideBar의 메뉴들이 내 스크롤 위치에 따라 변경되는 그런 웹 사이트들을 많이 봤을 것이다 그런 기능을 하는 것이 scrollSpy다 물론 직접 코드로 구현할 수도 있지만 bootstrap에서 아주 간단하게 제공하고 있기 때문에 그 친구를 써주기로 했다n..

기술/웹 개발 2024.08.06

[웹개발/개인홈페이지 개발] next.js 설치 및 시작하기

이전부터 늘 해보고 싶었던개인 홈페이지 만들기 프로젝트 .. 너무너무너무 귀찮아서지금까지 미루고 미루다가 이젠 정말 남는 시간마다개발을 해보기로 했다 지금까지 내가 해본 웹 개발은백엔드 spring + 프론트 vanillaJS로정말 간단한 회사의 업무툴을두 번정도 만들어 보았고 회사 다닐 때spring으로 백엔드 작업 해본게전부이긴하다 그래도 웹개발하면 가장 많이쓰는node.js나 react를 한 번 접해보고싶었고이전부터 늘 개인 홈페이지를 만들어보고 싶었어서시작하게 된 프로젝트-!NextJS란?next.js는 웹 어플리케이션 무료로 배포로 유명한vercel이라는 회사에서 개발했다 Next.js는 react 기반의웹 개발 프레임워크이다 흔히 주로 비교되는 node.js와의가장 큰 차이점은 바로Server..

기술/웹 개발 2024.08.03