URL 4

[Vanilla JS] State와 Router로 원활한 뒤로가기 및 페이지 이동 구축 (디자인 마켓플레이스 프로젝트)

리액트와 같은 프레임워크를 안쓰고 사이트를 구축해보려고하니가장 부딪혔던 부분이 바로 주소창 URL과 내 화면 간의 일치 작업이 매우 힘들다는 부분이었다.그 작업이 복잡해지다보니 자꾸 뒤로가기를 눌렀을 때 두번 뒤로가기를 하면 인덱스로 가버리는 현상이 발생했다. 사실 이 부분의 경우 지난번 프로젝트때 Vanilla JS 기반으로 해결해보는걸 시도는 했었으나 그땐 실패했었다.결국 이번 프로젝트 어드민 구축에 있어서 그런 문제가 또 발생했고이번에 풀지 않으면 계속해서 발생하겠다고 판단이 되어서 커서와 함께 다시 이 문제를 해결해보았다. 화면에 맞는 주소반영, 원활한 뒤로가기, 페이지 관리 등이 중요했고이를 해결하는 방법으로 State와 Router 파일을 구축해서 사용하게 되었다.(리액트를 안썼지만 결국 작업..

URL 경로에 맞게 함수 실행시켜서 경로에 따라 페이지 변화시키기

상품 상세나 카트가 추가되면서 경로가 꽤 많아졌다.효과적인 js파일들 관리를 위해 index.html이라는 하나의 html파일의 콘텐츠 컨네이너 안에서 상품 콘텐츠나 카트 콘텐츠 같은 것들이 바뀌도록 구성을 했는데, 이렇게하다보니 문제가 해당 경로로 갔을 때 새로고침을 하면 에러가 발생했다. 경로를 다시 불러들이면서 발생한 에러인듯했다. 따라서 해당 경로를 다시 불러들일 때 거기에 맞는 해당 경로에 맞는 함수를 실행시켜서 문제가 안생기도록 세팅을 했다. 일단 public파일들의 라우팅 처리를 해주는 코드 경로 설정을 추가해주었다.여기서 product/* 라고 설정되어있으면 product 다음에 어떤 경로가 더 있든 index.html로 보내준다는 뜻이다.//상품 페이지apiRouter.get('/pro..

페이지네이션 기능 - URL에 query string 붙여서 요청과 응답 해보기

검색 기능에 이어서 queryString으로 페이지 정보를 api로 주고 받아서 페이지네이션 기능을 구현하는 작업을 진행해보았다.지난번에 페이지네이션 구현을 한번 해보았는데 너무 복잡하고 어렵게 구축이 되어서 좀 더 편한 방법을 찾아보려고 페이지네이션 라이브러리들을 많이 찾아보았는데 나만 그런건지 뭐가 문제인진 몰라도 계속해서 에러가 발생했다 ㅜㅜ;; (시간만 엄청 날림)결국 우여곡절 끝에 그냥 기본 자바스크립트로 구현되었는데  그래도 페이지네이션 치고? 생각보다 많이 복잡한 로직은 아니게 구현되었다. 일단 페이지네이션을 위한 프론트엔드 코드이다. currentPage라는 변수는 최초 1로 설정되어있으며 이따가 나오는 changePage라는 함수에 의해 값이 변한다.원래 구성되어있었던 getProduct..

검색 기능 - URL에 query string 붙여서 요청과 응답 해보기

상품 목록에 대해 원하는 상품 목록만 나오도록 할 수 있는 검색 기능을 진행해보았다.특히 url 주소에 검색어를 넣어서 get 요청을하고 거기에 대한 응답을 할 수 있도록 만들어서 프론트엔드 백엔드 간 api를 통해 검색결과가 보여지도록 구현해보았다. 이번에도 gpt와 함께 코드를 짜서 모르는 개념들도 많이 나왔는데 새롭게 알게 된 개념들 위주로 정리해본다.아래 코드가 url을 통한 검색을 구현한 프론트엔드 코드이다. // 검색 기능을 수행하는 함수function searchProducts(searchQuery) { if (searchQuery) { // 검색어가 있을 경우 해당 검색어로 검색 요청 fetch(`${URI}/api/product?name=${encodeURIComponent(searchQ..