[Next + React Query로 SNS 서비스 만들기] 섹션 2 정리

useSelectedLayoutSegment();

최상위 세그먼트만 나온다 compose/tweet 인 세그먼트에서 tweet만 나옴
클라이언트 컴포넌트에서 작동함 

useSelectedLayoutSegments();

compose/tweet 에서 여러개의 세그먼츠가 배열로 나옴 ['compose', 'tweet']

 

참고
https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment

https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments

 

 

훅을 사용하거나, 이벤트 리스너가 있는경우는 클라이언트 컴포넌트로 빼주는게 좋다 .

참고

https://nextjs.org/docs/app/building-your-application/rendering/server-components

https://nextjs.org/docs/app/building-your-application/rendering/client-components

 

@media(prefers-color-scheme: dart) - 다크모드

참고

https://www.daleseo.com/css-prefers-color-scheme/

 

backdrop-filter를 사용하면 블러처리 가능

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

 

Dayjs - 날짜 관련된 플러그인

얼마나 시간이 경과되었는지 등 다양한 기능이 있다.

플러그인처럼 원하는기능 import 해서 사용하면 된다.

import relativeTime from 'dayjs/plugin/releativeTime';
import dayjs/locale/ko

dayjs.extend(relativeTIme);
dayjs.locale('ko');

classNames 플러그인

클래스를 합성 할때 사용하는 플러그인

배열로 써도되고, 풀어써도된다.

조건에 맞는 클래스를 합성해 준다.

const isOpen = true;
classNames('one', isOpen && 'open'); // = 'one open'

const isOpen = false;
classNames('one', isOpen ? 'open' : 'close'); // = 'one close'

usePathname

훅이기때문에 client component여야함

현재 패스 가져올 수 있는 훅

import {usePathname} from 'next/navigation';

const pathname = usePathname()

useSearchParams

client 에서는 쿼리스트링을 가져올수있다.

has(), getAll(), keys(), values(), entries(), forEach(), toString() 메소드 들이 있다.

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const search = searchParams.get('search')

  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

// 지금 쿼리스트링 다 가져오기 할때 
router.replace(`/search?${searchParams.toString()}&f=live`)

 

서버컴포넌트에서는 props로 searchParams를 가져올수 있다.

Next.js 에서는 URL의 search params를 프롭으로 자동 전달해준다.

export default function Home({ searchParams }) {
    console.log(searchParams);
    return <div></div>
}

useRouter

라우터 변경시 사용되는 훅

push, replace, refresh, prefetch, back, forward 메소드가 있다.

앱라우터에서는 next/router가 아닌 next/navigation import를 사용한다.

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

 

디폴트값으로 새로운 페이지 이동시 스크롤 top으로 되어있는데 비활성화 시키고 싶다면 'false'

 <button
      type="button"
      onClick={() => router.push('/dashboard', { scroll: false })}
    >
      Dashboard
    </button>

 

 

서버컴포넌트가 클라이언트 컴포넌트 자식컴포넌트로 가야하는경우

import 해서 사용하면안되고, children으로 받아서 사용하면 된다.

import로 사용하는 경우 서버컴포넌트가 클라이언트 컴포넌트로 변경된다.

onclick 캡쳐링

클릭이벤트랑 , a태그랑 겹치는경우 캡쳐링을 사용해서 해결할수있다.

버블링 - 이벤트가 시작한 곳에서 상위 dom으로 이벤트가 전파되는 것, 거의 일어난다

캡쳐링 - 버블링과는 반대로 이벤트가 아래로 내려가는 것, 보기 힘들다.

참고

https://ko.javascript.info/bubbling-and-capturing

 

 

에디터에서 export 옴기는 기능이 잇다.

다른파일로 변경되면 import 도 다 변경해준다.

YAGNI 야그니

you aint gonna need it

KISS, YAGNI, DRY (불필요하게, 필요할때, 반복하지마라)

소프트 웨어 개발 3대원칙

https://blog.naver.com/finway/221163007357

 

facker npm 플러그인

더미데이터 쉽게 넣어주는 플러그인

이미지, 텍스트 랜덤으로 생성할 수 있다.

const photo = {
    imageId: 1,
    link: faker.image.urlLoremFlickr(),
    Post: {
        content: faker.lorem.text()
    }
}

faker.image.avatar()

 

참고

https://www.npmjs.com/package/@faker-js/faker

 

 

ServerComponent params props

서버컴포넌트에서 params 라고 가져올수잇다.

[productId]/image/[imageId] 괄호안의 값,slug 값을 가져올 수 있다.

// [productId]/image/[imageId]
export default function Home({ params }) {
    console.log(params.productId);
        console.log(params.imageId);
    return <div></div>
}

패러렐 라우트 모달만들때 페이지가 있는경우마다 default 를 해줘야 오류가 안난다.

 

Array.at()

음수로 배열의 맨뒤에서 조회가 가능

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at