2024-01-10 본 캠프 69일차 / 88일차 TIL (next.js useRouter 동적 라우팅)

2024-01-10 본 캠프 69일차 / 88일차 TIL (next.js useRouter 동적 라우팅)

 

주요 진행사항 :

- next.js pages router 동적 라우팅 

- db 구조 잡기

 

예정사항

- realtime chat 테스트

---

 

DB 구조 잡기

DM 서버를 위한 DB를 구성하였다.

dm_channels는 dm channel의 정보를 담고있는 테이블이며 포함된 space의 정보를 담고있는 space_id와 1대1 채팅방의 유저정보를 담는 user, other_user 의 속성을 담고있다.

 

dm_messages는 dm_channels의 id를 왜래키로 가지고 있으며 모든 dm의 내용을 담고있는 테이블이다.

보낸 시간인 created_at, 받는사람 id인 receiver_id, 보내는 사람 id인 sender_id, 메시지 정보인 message를 담고있다.

 

 

트러블 슈팅 : next.js pages router 동적라우팅 params 가져오기 type문제

1. next.js pages router에서 동적 라우팅을 위해서 파일이름을 [space_id].jsx로 변경

next.js는 자체 라우터를 제공하는데 이때 동적 라우팅을 실시하기 위해서는 [prams_key].tsx 형식을 사용한다.

 

 

2. router.push('경로/동적라우팅 params')를 통해 라우팅 설정

import router from 'next/router'

export default RouterTest(){
	const router = useRouter

	const handleToOtherPage=()=>router.push('다른페이지 path')

    return (
    	<button onClick={handleToOtherPage}>라우터 버튼</button>
    )
}

 

 

3. router.query를 통해 params 정보 가져오기

문제 발생 :

이렇게 가져온 params 정보는 string이 아니라 string | string[] | undefined 의 타입을 가진다.

따라서 이 값을 가져올 때 string으로 생각하고 사용하면 안되며, 타입 키퍼를 통해 string의 값을 가질 경우만 생각해야한다.

if (typeof router.query['params_key']==='string')