[next.js 제로초] 섹션 2. 본격 클론 시작

제로초님 강의 정리
https://www.inflearn.com/course/next-react-query-sns

ActiveLink 만들기

• 라우터에서 현재 경로를 알고 싶으면 use client를 사용하여 클라이언트 컴포넌트 이용
• import { useSelectedLayoutSegment } from “next/navigation”;

"use client";

import { useSelectedLayoutSegment } from "next/navigation";

const NavMenu = () => {
	const segment = useSelectedLayoutSegment();
	console.log(segment); //경로 출력
	return (
		<ul>
			<li>NavMenu</li>
		</ul>
	)
}

export default NavMenu;

• useSelectedLayoutSegment는 최상위 폴더명만 가져옴
  ex) /compose/tweet 에서 호출할 경우 compose만 반환
• 하위까지 가져올꺼면 useSelectedLayoutSegments 쓸것 (s 주의)
  ex) /compose/tweet 일 경우 [‘compose’, ‘tweet’] 반환

Context API

Tab 구현

• Tab.tsx, TabProvider.tsx 생성

// TabProvider.tsx
"use client"

import {createContext, ReactNode, useState} from "react";

export const TabContext = createContext({
	tab: 'rec',
	setTab: (value: 'rec' | 'fol') => {},
});

type Props = { children: ReactNode };
export default function TabProvider({ children }: Props) {
	const [tab, setTab] = useState('rec');
	
	return (
		<TabContext.Provider value={{ tab, setTab }}>
			{children}
		</TabContext.Provider>
	)
}

dayjs 쓰기

• moment랑 비슷해서 쓰기 편하고 더 가벼움

classnames로 클래스 합성하기

• 클래스를 조건부로 가질때
• classnames, clsx
• npm i classnames

"use client"

import style from './post.module.css';
import cx from 'classnames';

export default function ActionButtons() {
	const commented = true;
	const reposted = true;
	const liked = false;
	
	return (
	<div className={style.actionButtons}>
		<div className={cx(style.commentButton, { [style.commented]: commented })}>
			...
		</div>
		<div className={cx(style.repostButton, reposted && style.reposted)}>
			...	
		</div>
		<div className={cx([style.heartButton, liked && style.liked])}>
			...
		</div>
	</div>
	)
}

usePathname

"use client"

import {usePathname} from "next/navigation";

... if(pathname === '/explore') return null;

useSearchParams

Props로 가져오기

• useSearchParams 안 쓰고 가져오는 방법
• page의 props에 기본으로 들어있음

type Props = {
	searchParams: { q?: string };
}
export default function Search({ searchParams }: Props) {
	// searchParams.q
}

useSearchParams

import {router, useSearchParams} from "next/navigation";

const router = useRouter();
const searchParams = useSearchParams();

router.replace(`/search?q=${searchParams.get('q')}`);

• searchParams.toString() -> 모든 쿼리스트링을 가져옴

faker.js

• npm i @faker-js/faker
• 더미데이터 쉽게 넣어주는 라이브러리
• import { faker } from ‘@faker-js/faker’;
• faker.image.urlLoremFlicker(); // 이런식으로

Tips

CSS

• dvw, dvh 로 디바이스 크기 지원하기
• flex-grow: 1 로 가운데 정렬
• position: fixed일때 width: inherit으로 부모 크기 가져오기
• flex: 1로 분리

JS

• Array.prototype.at() -> 정수값을 받아 해당 인덱스에 있는 항목을 반환 (음수는 뒤부터)

Next.js

• 이벤트 핸들러가 있을 시 클라이언트 컴포넌트로 분리하는게 좋음
  -> 브라우저에서 동작해야되는 부분을 전부 클라이언트 컴포넌트로 분리한다
• 컴포넌트 파일 위치는 공통으로 쓰일 곳에
• onClickCapture 이벤트 핸들러
  -> 클릭되는 범위가 겹칠 때 사용
• params로 slug를 가져올 수 있음.

기타

• 브라우저에서 svg 태그 복사시 outer html로 복사 -> 왜??
• move (export const 등 ) vscode 기능 확인해보기