9/9 - 폴더 구조 정의

폴더 구조 정의

이번 프로젝트 때 컨벤션을 정할 시기에 폴더 구조도 정리해야 된다는 것을 이해하고는 있었다.

부트캠프 1차 프로젝트때는 폴더 구조를 정하지 않아서, 서로 파일이 다른 위치에 있었던 것이 기억났다.

 

이번 개인 프로젝트는 나 혼자서 진행하므로, 폴더 구조를 따로 정리하지 않았는데,

작업하다보면 햇갈릴 수도 있고, 나중에 ReadMe 같은 곳에 정리해두고 싶어서, 글로 정리해보기로 했다.

src ( @ 디렉토리 )

@

/app
    /api
    /styles
    /component
    /~
/schemas
/types
/utils
	/api
    /db

schemas

@/schemas

introductionPosts.model.ts << Collection명 + .model.ts

utils

@/utils

/api
	introductionPostsApi.ts << Collection명 + Api.ts
/db
	dbConnection.ts

types

@/types

mongodb.ts << global 타입
/interfaces
	introductionPost.interface.ts << Model 명 + .interface.ts

app

@/app

page.tsx
page.module.scss

/styles
	themes.scss << 변수 등을 조작하기 위한 파일들
/components
	BannerList.tsx << app/page.tsx 컴포넌트
/posts
	page.tsx
    /components
    	Button.tsx << posts/page.tsx 컴포넌트
...

api

@/app/api

route.ts

/introduction-posts
	route.ts
...

Next.js 의 request 객체

Next.js 13 master course - router handler (velog.io)

Next.js 13 master course - router handler

목업 데이터를 추가하기 위해 POST 함수를 작성하던 중,

request 자체를 어떻게 다뤄야 할까? 싶어서 윗 글을 참고하였다.

 

또한, 우선 POST 요청이 잘 가는지에 대해 확인해보고 싶어서 해당 코드를 작성해보았다.

export async function POST(request: Request) {
  return NextResponse.json(request.json());
}

콘솔과 response 코드는 200으로 오류는 나지 않았지만, 이상하게 body로 준 내용과는 다르게 빈 객체 {}가 반환되었다.

request 객체가 어떤 값을 가지는 가에 대해서 확인하기 위해 console.log(request.json())을 통해 로그를 확인했다.

Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 1180,
  [Symbol(trigger_async_id_symbol)]: 1167,
  [Symbol(kResourceStore)]: { isAppRoute: true },
  [Symbol(kResourceStore)]: {
    headers: [Getter],
    cookies: [Getter],
    mutableCookies: [Getter],
    draftMode: [Getter]
  },
  [Symbol(kResourceStore)]: {
    isStaticGeneration: false,
    pathname: '/api/users',
    originalPathname: '/api/users/route',
    incrementalCache: IncrementalCache {
      locks: Map(0) {},
      unlocks: Map(0) {},
      dev: true,
      minimalMode: false,
      requestHeaders: [Object],
      requestProtocol: 'http',
      allowedRevalidateHeaderKeys: undefined,
      prerenderManifest: [Object],
      fetchCacheKeyPrefix: '',
      cacheHandler: [FileSystemCache]
    },
    isRevalidate: false,
    isPrerendering: undefined,
    fetchCache: undefined,
    isOnDemandRevalidate: undefined,
    isDraftMode: undefined,
    revalidate: 0
  }
}

다음과 같은 로그가 떴고, 어디서도 body의 값은 확인할 수 없었다.

하지만 이 객체가 Promise 객체임을 확인할 수 있었고, 해당 request가 비동기 작업을 요구함을 이해했다.

export async function POST(request: Request) {
  return NextResponse.json(await request.json());
}

비동기 작업을 위해 await를 추가했고, 결과적으로 의도한 결과를 얻을 수 있었다.