경로 페이지Pages Router.├── src│ ├── pages│ │ ├── _app.tsx│ │ ├── _document.tsx│ │ ├── index.tsx│ │ └── search│ │ └── index.tsx // '/search'│ │ └── search.tsx // '/search/settiㅍng' App Router.├── src│ ├── app│ │ ├──layout.tsx│ │ ├── page.tsx│ │ └── search│ │ └── page.tsx // '/search' 쿼리 스트링'/search?q=쿼리스트링' Pages Routerimport { useRouter } fro..

문제 상황프로젝트를 진행하던 중 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다.이 문제는 사용자 경험을 저하시키는 상황이기때문에 반드시 개선이 필요했다.원인 분석팔로우 버튼을 클릭하면 팔로우 상태를 변경하는 함수가 Sanity의 데이터를 업데이트한다. 하지만 이 변경 사항이 클라이언트 화면에 즉시 반영되지 않았다.Next.js는 성능 최적화를 위해 서버에서 가져온 데이터를 캐싱한다. 팔로우 상태가 변경되어도 Next.js는 여전히 이전에 캐싱된 데이터를 사용하고 있었기 때문에, 사용자가 보는 화면은 업데이트되지 않은 상태로 유지되었다.서버 사이드에서 데이터 변경이 발생한 후, 클라이언트의 캐시를 재검증(rev..

복잡한 프로그램을 구현하다 보면 기본적인 포인터 구조만 이용해서 메모리를 관리하기에는 다소 번거로울 때가 많다.메모리를 좀 더 효율적으로 관리하고 사용할 수 있는 데이터 구조의 개념과 연결 리스트를 알아보자.데이터 구조란데이터 구조(Data Structure)는 우리가 컴퓨터 메모리를 더 효율적으로 관리하기 위해 새로 정의하는 구조체다.일종의 메모리 레이아웃, 또는 지도라고 생각할 수 있다. 데이터 구조 중 하나인 연결 리스트에 대해 알아보자. 연결 리스트의 개념배열의 한계배열에서는 각 인덱스의 값이 메모리상에서 연이어 저장되어 있다.배열: [1][2][3]주소: 100 104 108 ← 연속된 메모리하지만 꼭 그럴 필요가 있을까? 연결 리스트의 아이디어각 값이 메모리상의 여러 군데 나뉘어져 있다고 ..