분류 전체보기221 AWS S3 정적 웹사이트 배포하기 AWS S3를 사용하면 정적 웹사이트를 배포할 수 있다. 이 글에서는 정적 웹사이트 빌드 파일을 업로드하고, 퍼플릭 액세스 권한을 풀고, 정책을 생성하여 누구나 내가 만든 웹사이트를 사용할 수 있도록 S3에 배포하는 방법을 알아본다. 1. 빌드로 번들링하기 배포하기에 앞서 프로젝트를 빌드하여 번들링하는 과정이 필요하다. 빌드과정을 거치면 dist(혹은 build)라는 폴더가 생성되는데, 여기에는 우리가 작성한 코드를 압축, 난독화하여 번들링한 파일이 들어있다. 2. S3 버킷 만들기 빌드를 완료했으면 이제 AWS S3 서비스에서 버킷을 만든다. AWS S3 웹사이트에 들어가면 다음과 같은 화면이 나온다. 버킷 만들기를 누르면 버킷 일반 구성과 옵션을 선택할 수 있는데 버킷 이름과 AWS 리전만 선택한다... 2023. 6. 30. Next.js Docs (8) Error Handling Error Handling error.js 파일 컨벤션을 사용하면 중첩된 route에서 런타임 오류를 적절하게 처리할 수 있다. - route segment와 중첩된 자식들의 React Error Boundary로 자동으로 래핑한다. - 파일 시스템 계층을 사용하여 특정 segment에 맞게 조정된 error UI를 만들어 세세하게 조정한다. - 영향을 받는 segment에 대한 error를 격리하고, app의 나머지 부분을 작동하는 상태로 유지한다. - 전체 페이지를 다시 로드하지 않고 error 복구를 시도하는 기능을 추가한다. route segment에 error.js를 추가함으로써 error UI를 만들고 export하여 React 컴포넌트로 사용한다. // app/dashboard/error.t.. 2023. 6. 28. Next.js Docs (7) Loading UI and Streaming Loading UI and Streaming 특별한 파일인 loading.js는 React Suspense와 함께 유의미한 로딩 UI를 만들 수 있게 해준다. 이러한 컨벤션을 사용하면 route segment의 내용이 로딩되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있고 렌더링이 완료되면 자동으로 새로운 내용으로 바뀐다. Instant Loading States instant loading state(즉시 로딩 상태)는 탐색시 즉시 표시되는 대체 UI이다. 스켈레톤이나 스피너 같은 로딩 표시기 또는 표지사진, 제목 등 이후에 표시될 화면의 작지만 의미있는 부분을 미리 렌더링 할 수 있다. 이를 통해 사용자는 앱이 응답중임을 알 수 있고, 더 나은 사용자 경험을 제공할 수 있다. 폴더안에 loading.. 2023. 6. 24. Next.js Docs (6) Dynamic Routes Dynamic Routes 정확한 segment 이름을 모르고, 동적 데이터에서 route를 만들려고 할 때 요청시 입력되거나 빌드시 미리 렌더링되는 동적 segment를 사용할 수 있다. Convention 동적 segment는 폴더 이름을 대괄호로 감싸서 만든다. [foldername] ex. [id] , [slug] 동적 segment는 레이아웃, 페이지, route, generateMetadata 함수에 대한 매개 변수로 전달된다. Example 예를 들어 블로그는 app/blog/[slug]/page.js 와 같은 경로를 포함할 수 있는데 여기서 [slug]는 블로그 post의 동적 segment이다. // app/blog/[slug]/page.tsx export default function .. 2023. 6. 20. Next.js Docs (5) Route Groups Route Groups app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 그러나 폴더를 Route Group으로 표시해서 route의 URL 경로에 폴더가 포함되지 않도록 할 수 있다. 이것은 URL 경로 구조에 영향을 주지 않고 route segment와 프로젝트 파일을 논리 그룹으로 구성할 수 있다. Route groups는 다음과 같은 상황에서 유용하다. - route 그룹 구성(예를 들면 사이트 섹션별, 의도별, 혹은 팀별로) - 동일한 route segment 레벨에서 중첩된 레이아웃 활성화 : - 여러개의 루트 레이아웃을 포함하여 동일한 segment에서 여러 중첩된 레이아웃 만들기 - 공용 segment 경로의 하위 레이아웃 추가 Convention Route group은.. 2023. 6. 16. Next.js Docs (4) Linking and Navigating Linking and Navigating Next.js router는 서버 중심의 라우팅, 클라이언트측 네비게이션을 사용한다. 즉각적인 로딩상태와 동시 렌더링을 지원한다. 이것은 네비게이션이 클라이언트 상태를 유지하고 비싼 리렌더링을 피하고, 방해가 되지 않으며 레이스 상태를 만들지 않는다는 것을 의미한다. route간 이동은 다음과 같은 두가지 방법이 있다. - 컴포넌트 - useRouter hook 이 페이지에서는 와 useRouter()를 어떻게 쓰는지 알아보고 네비게이션이 어떻게 동작하는지 깊게 알아본다. 컴포넌트 는 HTML a 태그에서 확장되어 route 간 사전 fetch 및 클라이언트 탐색을 제공하는 React 컴포넌트이다. 이것은 Next.js에서 route 간 탐색의 기본 방법이다. 컴.. 2023. 6. 13. 이전 1 2 3 4 5 6 7 ··· 37 다음
