designer DK의 블로그

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

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

이번 서울시 유치원 정보 사이트 프로젝트 대망의 마지막 기능 구현은 페이지네이션이었다. 페이지네이션은 목록의 양이 많아졌을 때 페이지로 정리해서 나눠담는 기능인데 이 기능의 경우 개발 초보인 나에겐 너무 어려운 기능이어서 이번 구현은 사실상 거의 gpt에게 맡겼었다. 하지만 이번 프로젝트는 단순히 기능 구현 보다는 개발 공부에 더 큰 의미가 있기 때문에 비록 gpt를 이용해서 만든 코드이지만 내가 이해할 수 있는 선까지는 최대한 분석해보기로 했다. list.js 페이지에서 몇가지 전역변수를 지정하고 시작했다.let currentPage = 1; // 현재 페이지 번호const itemsPerPage = 10; // 페이지당 표시할 항목 수let currentList = []; // 현재 목록을 저장할 배..

웹컴포넌트 활용 테스트를 마치고 본 프로젝트인 '서울시 유치원 정보 사이트 프로젝트'에 착수하려고한다. 기획에 앞서 혹시 내가 해보려고하는 유치원 정보 조회 사이트가 있는지 검색해보았는데 역시나 있었다... 이 방대한 api 자료를 가지고도 그걸 활용한 사이트가 없는게 이상하다고 생각되긴 했다만;; 내가 최초를 못찍었다는 부분에서 좀 아쉽긴 했다. 더군다나 거의 같은 api 정보를 활용해서 만들어서 그런지 내가 구상했던 사이트 구조와 거의 일치했다 ㅜㅜ  이런 부분들이 아쉽긴 했지만 그래도 만들어보는게 의미있다고 판단해서 실행해보기로 했다. 어차피 지금 제작의 목적은 반짝이는 기획력을 보여주려는 목적이라기보단 나의 개발력을 향상하려는 목적이 가장 크기 때문에 유사한 사이트가 하나 더 나온다고해서 크게 문..