[Next Test] Next Js 에서 Jest와 React Testing-Library로 테스트 환경 설정하기 ( 기초 )
Next js 테스트 환경 설정하기 Next js 에서 테스트환경을 만들기 위한 방법중 하나로 Jest와 React Testing-Library 를 사용합니다. Jest와 React Testing Library는 단위 테스트(Unit Testing) 에서 함께 자주 사용된다고 합니다. 이번 공부의 목적은 테스트 환경을 설정하는데 있어 구체적인 사항은 따로 공부를 진행하고 기초적인 세팅만 다루려고 합니다. 패키지 설치하기 ( Jest , Testing Library ) 따로 설치하기 $ npm install --save-dev @testing-library/jest-dom $ npm install --save-dev @testing-library/react $ npm install --save-dev ba..
[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..
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 "..
Next js SSR : get server side props
지금까지 공부했던 화면들은 next js의 장점인 SSR( Server Side Rendering ) 보단 CSR( Client Side Rendering ) 으로 화면 렌더링을 해주었습니다. 따라서 해당 화면을 브라우저에서 inspect 하게 되면 다음과 같이 데이터가 없는상태로 Loading 컴포넌트가 붙여진 채로 서버쪽으로 부터 html 소스파일을 받아오게됩니다. 지금까지의 플로우 즉 html 을 받아오고 > 화면 렌더링을 하고 > data fetch를 시작하고 pending 상태에서는 loading 화면을 보여주고 > fetch가 완료되면 그때서야 받아온 데이터를 가지고 렌더링하게 됩니다. 지금까지의 화면 이미지는 다음과 같습니다. Server Side Rendering next js에서는 서버측..