자바스크립트 - Next.js

[Next.js] Next.js 14에서 react-select를 사용해보자 (feat. 트러블 슈팅)

이번에 프로젝트를 진행하던중에 next.js 14버전에서 react-select를 쓰려는데 참고할만한 글이 그렇게 많지 않아서 정보도 공유하고 나도 나중에 다시 볼 겸 포스팅을 해본다 ! 시작은 똑같다. npm i react-select 해당 명령을 통해 설치하면 기본 셋팅은 끝. "use client"; import React from "react"; import Select from "react-select"; export default function SelectBox() { const areaOptions = [ { value: "전체", label: "전체" }, { value: "강동구", label: "강동구" }, { value: "강서구", label: "강서구" }, ]; return ..

[Next.js] Extra attributes from the server : ... 에러 해결

Next 14를 사용하는 프로젝트를 하다가 문제에 부딪혔다. "use client"; import React, { useId } from "react"; import Select from "react-select"; interface OptionData { value: string; label: string; } interface Props { area?: boolean; status?: boolean; options: OptionData[]; } export default function SelectBox({ area, options }: Props) { const placeholder = area ? "지역 선택" : "완료/미완료 여부"; const id = useId(); return ( ); }..

[Next.js] useSelectedLayoutSegment와 useSelectedLayoutSegments에 대해 알아보자 !

❗️useSelectedLayoutSegment ✅ 클라이언트 컴포넌트에서만 사용할 수 있는 훅으로 'use client'필수 ✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 반환 ✅ Header Footer와 같이 글로벌하게 사용되는 레이아웃 컴포넌트에서 이를 활용하여 조건부 처리가 가능 경로 url return app/layout.tsx /segment segment app/test/layout.tsx /segment null app/layout.tsx / null ❗️useSelectedLayoutSegments ✅ useSelectedLayoutSegment와 동일하게 클라이언트 컴포넌트에서만 사용할 수 있느 훅으로 'use client'필수 ✅ 현재 active 한 seg..

[Next.js] Next.js의 기본적인 정보에 대해서 알아보자

❗️클라이언트 컴포넌트가 될 수 있는 상황들 ✅ 훅을 쓸 때 ✅ onclick같은 이벤트 리스너를 쓸 때 ✅ 동적으로 UI를 업데이트 해야할 때 등등 ..? ❗️폴더명 대괄호와 소괄호의 차이 Next.js에서 괄호 ( )와 대괄호 [ ]로 묶인 폴더 이름은 라우팅 및 동적 경로와 관련된 특정 의미를 갖는다. ✅ 소괄호 ( ) 안의 폴더 이름 ]app 폴더 내부에 폴더를 정의하길 원하지만 route 경로설정은 되지 않기를 원할 때 폴더 이름을 소괄호( ) 로 생성할 경우 route 경로 설정이 되지 않는다. 소괄호를 사용하면 주소창에 관여를 하지 않기 때문에 특정 그룹을 만들어서 사용하면 좋다 ! 예시를 보여주자면, 해당 이미지에서 처럼 afterLogin과 beforeLogin이라는 주소창에 관여하지 않..