designer DK의 블로그

  • 홈
  • 태그
  • 방명록

라우팅 1

프론트엔드 페이지 라우팅 정리 - window.addEventListener("DOMContentLoaded"), window.addEventListener("popstate")

인덱스 페이지(메인 홈 화면) 한 html 안에서 여러 함수를 통해서 페이지 변화를 보여주는 SPA 방식을 구현하려다보니 그 페이지가 늘어남에 따라 url주소와 페이지 간의 매칭이 점점 엉키게 되었다. 예를들어 버튼으로 페이지는 띄울 수 있지만 url주소를 새로고침하면 전혀 다른 곳으로 간다거나, 뒤로가기나 앞으로가기 시 에러가 발생하는 등 여러모로 url주소와 페이지 간의 라우팅 처리가 필요했다. 이 부분은 생각보다 굉장히 난해했고gpt랑도 감정소모?를 많이 했다...그래도 씨름끝에 나름 내 방식 안에서 최적화 된 방법을 찾았고 일단 이 방식으로 구현해보았다.// 주소 정보에 맞게 페이지를 반영하는 함수function handleRoute() { const path = window.location.pa..

나의 개발 일지 2024.11.10
이전
1
다음
더보기
프로필사진

designer DK의 블로그

designer DK의 블로그 입니다.

250x250
  • 분류 전체보기 (69) N
    • 나의 개발 일지 (55) N
    • UX UI 포트폴리오 (1)
    • 생활 팁 (3)
    • 일상 (2)
    • 생각 (1)
    • 블렌더 팁 (2)

Tag

cloudtype, 자바스크립트, CSS, node.js, 페이지네이션, 풀스택, 서울시유치원, 몽고디비, javascript, 백엔드, URL, 개발, nodejs, mongoDB, 웹컴포넌트, netlify, API, 배포, 쇼핑몰, 프론트엔드,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • MY 유튜브 채널

티스토리툴바