[Next Js] Next 에서 Error 에러 처리 방법 : 404 / 500 / _error Pages , 에러 경계(ErrorBoundary)
Next js 에서 에러 처리를 하는 방법에 대해서 공부해보았습니다. 기본적으로 제공해주는 에러 처리 방법은 아래와 같습니다. 404 error page : 페이지를 찾지 못했을 때 보여줄 페이지 - 예) http://MyApp.com/asdlkj/alkdsjflkja 와 같이 해당 도메인에서 없는 페이지에 접근했을때 보여줄 페이지 500 error page : 서버쪽 문제가 생겼을 때 보여줄 페이지 _error page : 400에러, 500에러 이외의 에러가 발생했을 때 보여줄 페이지 Error : Next js 의 Error 컴포넌트 모듈로 에러를 페이지 내에서 처리할 수 있다. Error boundary : 클라이언트 쪽의 컴포넌트의 렌더링 문제가 발생했을 때 보여줄 컴포넌트 정의 및 경계 404..
[React] ErrorBoundary : 에러 경계로 에러 상태 표시
에러 경계의 도입과정 이전에는 컴포넌트 내부( UI의 일부분 )의 자바스크립트 에러가 React의 내부 상태를 훼손하고 전체 어플리케이션을 중단 시켜버리는 치명적인 오류가 있었습니다. 이를 해결하기 위해 React 16에서는 에러 경계(Error Boundary)라는 새로운 개념이 도입되었다고 합니다. 에러 경계 ErrorBooundary란 에러 경계로 감싸면 하위 컴포넌트들에서 발생하는 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 fallback UI를 보여주는 React 컴포넌트입니다. 에러 경계 에러 잡아내기 다음과 같은 에러를 잡아냅니다. - 렌더링 도중 생명 주기 메서드 - 자식의 전체 트리의 자바스크립트 에러 다음과 같은 에러는 포착하지 않습니다. - 이벤트 핸들러 - 비동기적 코드 ..
[Typescript] 수박 겉핥기식 공부시작 및 설치
앞서... 본 공부는 노마드 코더의 Typescript로 블록체인 만들기 강의를 통해 진행했습니다. Typescript 는 javascript의 업그레이드 버전이라고 말 할수 있는데 자바스크립트에는 엄격한 규칙이 없어 유연하게 개발을 할 수 있습니다. 다만 큰 프로젝트를 진행하고 팀으로 일을하다보면 엄격한 규칙이 단점이 되게됩니다. 자바스크립트는 2 + "2" = 4 인 number + "string : number" 이 가능하여 버그를 발생할 수 있는 여지가 있습니다. Typescript의 특징 참고 : https://www.samsungsds.com/kr/insights/TypeScript.html 특징 1. 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를..
Next js 404Page / 수박 겉핥기 공부 끝
404 Page Next js 에서 404 페이지를 만드는 방법은 아주 간단합니다. pages폴더에 404.js를 만들고 다음과 같이 페이지 구조를 작성해주면 끝입니다. // 404.js export default function NotFound() { return ( 404 : 없는 페이지 입니다. ); } 그럼 없는 페이지에 접속했을때 해당 페이지를 렌더링 시켜주죠 공부를 마치며... 노마드 코더님의 기초 Next js의 강의를 모두 수강하였습니다. 이상으로 NEXT.js 의 수박 겉핥기 식 기초 공부를 마치고, 더욱 심화되게 NEXT js를 공부해보려합니다.
Next js Catch-All URL / serverSideProps Context
Catch-all URL 이란 아래 사진과 같이 url 뒤에 붙여진 parameter 값을 다 받아오는것을 말합니다. 위 URL 에 영화 제목을 넣어 SEO 최적화를 시켜줄겁니다. 이 방법을 사용하게 되면 영화의 제목을 바로 받아올 수 있을 뿐더러 홈페이지에서 클릭 후 상세페이지를 들어오지 않더라도 영화의 제목을 확인할 수 있게됩니다. 우선 index.js URL 라우팅을 다음과 같이 영화제목도 url에 들어갈 수 있도록 바꿔줍니다. [...] 으로 Catch-All 그리고 이전에 만들었던 pages > movies > [id].js의 파일명을 [...params].js 로 바꿔줍니다. 여기서 id > params 로 바꾼 이유는 더이상 id의 파일명 보다는 catch all 할 url이 하나의 para..
Next js Dynamic Routes / 중첩 라우팅 / URL 변수 / router state 전달 및 마스킹
create-react-app 에서는 router를 react-router-dom 으로 처리하고 url parameter 를 "movies/:id" 와 같이 해서 movies/123 movies/124 를 넣어 dynamic url을 만들었습니다. 하지만 Next js 에서는 router를 기본적으로 지원을 해주고 그 속에서 dynamic routes를 구현할 수 있습니다. Routes 간단한 라우팅의 예시로 /movies/all 페이지를 만들고 싶다고 하면, pages 폴더에 movies 폴더를 만들고 all.js 페이지 파일을 생성해주어 만들면 됩니다. 폴더의 트리 구조로 url이 만들어집니다. // movies / all.js export default function ALL() { return "..