get path variable in dynamic routing in app routing of next.js

 Next.js 

 app routing 

dynamtic routing

Next.js 에서 app routing을 사용할때  dynamic path를 사용하는 경우  path로 넘기는 변수 값을 얻어 오기 

page에 대한 dynamic routing은 설명이 되어 있으나 ,  route.js에서 쓰는 방법을 찾기가 어려웠음 

https://nextjs.org/docs/app/api-reference/file-conventions/route

route.ts 에 패스를 넘기는 설명이 있음

링크 예제에는 아래와 같이 되어 있으나, 

export async function GET(request, context: { params }) {

const team = params.team; // '1'

...

}

위 경우를 아래와 같이  수정 함 

async function GET(req: NextRequest, context: { params: any }) {

const companyId = context.params.companyId;

const memberId = context.params.memberId;

...

}

디렉토리 구조 

Copy recursive files from directory to directory ( to remember) 디렉토리에서 있는 디렉토리로 복사하기

 필요하지만 잊어 먹는 커맨드

디렉토리에서  기존 디렉토리로 모두 복사 할때 (디렉토리 포함 ) 

cp -Rv  sourcedir/.*   targetdir/         ## 숨은디렉토리까지 복사 ( R 하위포함,   v:진행과정 표시)

Using Modal component of Next.UI ( close , )

 Next.UI 의 modal 컴포넌트를 사용할때  몇가지 팁

1) 선택된 아이템의 값으로 모달에서 표시할 때 

•      모달을 띄우는 버튼 클릭 이벤트에서  useState에 변수를 선언하여 현재 선택된 데이터를 설정한다.

    //  바로 이벤트를 매핑 하는 경우 클릭 된 값을 설정하거나 전달  할 수 없으므로, 

<Button onPress={clickDelete} >선택 </Button>

  // 바로 이벤트를 매핑하지 말고 { }  현재 설정값 을 state에 설정하고  모달을 띄우고 설정된 값을 참조하도록 한다 호출을 하는 방식을 아래와 같이 바꿔본다.

//   event={eventFunc}     ---> event={    ( ) =>{ eventFunc(parameter) } }

const [selectedData, setSelectedData] = useState<MyItem>();

const clickButton = (item: MyItem) => {

console.log(item)

setSelectedData(item)

onOpen() // modal 열기

}

//----------------------------------------------------

<Button onPress={()=>{clickButton(item)}} />

// Modal 내에서, item의 속성을 표시한다

{item.title}

2) 모달에서 데이터를 처리하고 모달을 닫을 때, 모달내 button 에 이벤트를 연결하고 호출

<Button color="primary" variant="ghost" onPress={onProcess}>닫기</Button>

//--------------------------------------------

const onProcess = () => {

someCustomProcess() // some custom process you needed

onOpenChange() // modal close

}