[직접 만들어 보기] 상남자의 데이터 관리법 (url에 저장하기)

상남자의 데이터 관리법

최근 개인 프로젝트로 open api를 이용해 뉴스 기사와 베스트셀러를 정리한 페이지를 제작해보고 있습니다. 개인적인 수요에 의해 시작했다가 재미있어서 이리저리 살을 붙이다보니 처음 구상한 내용에 추가된 기능이 있습니다. 그 중 하나가 디테일 페이지를 보는 것입니다. 여기에 필요한 내용을 어떻게 가져올까하다가 url에 데이터를 저장하면 쉽게 가져올 수 있겠다 다 생각해서 url에 데이터를 담아보기로 했습니다. url에 최대 6만자까지 넣을 수 있다고 들었기 때문에 충분히 가능할 것이라 생각했습니다. 참고로, 저의 개발환경은 next.js입니다.

 

우선 필요한 내용은 제목, 작가, 요약 등 내용 설명에 필요한 것들이었습니다. 데이터 베이스와 서버를 아직 만들지 않기도 했고, 어떻게 저장해야할지도 감이 잡히지 않았습니다. 상태 관리를 한다고 해도, url로 바로 접속하면 렌더링이 되지 않을 것 같아 고민을 좀 했습니다. 그러다가 querystring을 이용해 파싱해서 사용하자는 생각이 들었고 적용했습니다. a태그를 이용해 href을 주었고, useSearchParams를 이용해 데이터를 가져오기로 했습니다.

 

데이터 가져오기

import { useSearchParams } from "next/navigation";


// 중략

const searchParams = useSearchParams();
const title = searchParams.get('title');
const author = searchParams.get('author');
const description = searchParams.get('description');

 

후기

 

장점

• 편리합니다. 데이터베이스 없이 데이터를 가져올 수 있다는 건 엄청난 장점입니다.

 

단점

• url이 복잡해집니다.
• url이 훼손되면 잘못된 정보가 렌더링 된다는 단점도 있었습니다. (물론 이는 그건 다른 것들도 마찬가지일 것이라 생각합니다.)
• 개인 정보와 같은 중요한 것은 절대로 담지 말아야 합니다.

 

프로젝트를 완성하면 완성본을 가져오도록 하겠습니다!