TIL #025

오늘 한 것

BookStack

• 스택 페이지 UI 변경
  • stacklist flex-wrap 설정
• 생성페이지 UI 구현
• 생성페이지 기능 구현
• 생성 API 및 BE 로직 구현
• detail페이지
  • detail페이지 params를 id가 아닌 no로 변경

오늘 배운 것

Next.js

동적 라우팅

동적 라우팅 페이지 생성 방법

app
	ㄴpage
		ㄴ[동적라우팅할 query]
			ㄴpage.tsx

useRouter에 param 넣기

import {useRouter} from 'next/navigation';

const router = useRouter();
const handleRouter = () => {
	router.push('/PATHNAME?QUERY1=VALUE1&QUERY2=VALUE2')
};

useSearchParams을 통한 param찾기

// 현재 URL : localstorage:3000?찾고싶은PARAM=VALUE

import {useSearchParams} from 'next/navigation';

const searchParams = useSearchParams();
const param = searchParams.get('찾고싶은PARAM');
console.log(param) // VALUE

관련 문서 : NEXT.13 DOCS

CSS !important

css의 우선순위를 무시하고 해당 명령이 붙은 css가 가장 우선시되도록 하는 명령어.

뒤에 !important를 붙여 사용한다.

CSS의 규칙을 무시하는 행동이기에, 정말 신중히 사용하는 것이 권장된다.

div {
	color: red !important;
}

Textarea resize 제한

textarea {
	resize: none;
}

CSS 형제 선택자

인접 형제 선택자

~

일반 형제 선택자

Axios post

axios.post('URL', {BODY}, {HEADERS})