What I studied

리액트에서는 react-router-dom을 이용하여 movies/:id 와 같은 형식으로 params를 지정해줄 수 있었는데 Next.js에서는 다른 방식으로 URL에 변수를 넣을 수 있다고 한다. 지금부터는 Next.js에서 라우터를 하는 방식을 알아보자. Next.js에서 페이지 이동 - 페이지가 1개일 때 Next.js에서는 react-router-dom을 이용했을 때와는 다르게 Pages라는 폴더 안에 원하는 파일을 만들어주면 그게 자동으로 page의 URL이 되는 신기함을 경험했었다. 그런데 기본적인 URL을 만드는 방법은 알았지만 그 뒤에 params로 새로운 변수를 넣어주는 방법에 대해서는 알지 못해 이를 알아봐야겠다고 생각했다. // 로컬 호스트 3000 뒤에 오는 기본적인 URL은 Pa..

클라이언트 사이드 렌더링(CSR)과 SPA 리액트는 기본적으로 싱글 페이지 어플리케이션(SPA)으로 하나의 Html에 수많은 js 파일을 가진다. 싱글 페이지 어플리케이션은 기본적으로 클라이언트 사이드 렌더링 방식을 취하는데 CSR은 클라이언트(브라우저)에서 자바스크립트 파일을 통해 데이터를 렌더링 하는 방식이다. 그렇기 때문에 클라이언트에서 데이터 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터를 받아온다. 장점 필요하거나 수정된 데이터만 서버에 요청하여 받아오기 때문에 서버 트래픽이 감소한다. HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 검색 엔진 최적화(SEO)가 가능하다. 단점 검색 엔진 크롤러가 정보수집을 제대로 하지 못한다. 초기에 데이터를 제외한 모든 코..

API KEY 숨기기 보통 API KEY는 본인의 고유한 것이기 때문에 인터넷에 노출시키면 안된다. 그렇기 때문에 env 파일 안에 넣어서 작업한 후 깃에도 올라가지 않도록 항상 조심하는 것이 좋다. Next.js라서 가능한 Redirect와 Rewrite라는 것을 배웠는데 API KEY나 특정 경로를 감출 때 이 방법을 사용하면 되는 것 같다. Redirect redirect는 사용자가 변경된 path로 유입되면 새로운 경로고 안내하는데 아래와 같이 next.config.js 파일을 수정해주면 된다. 여기서 "/contact"라는 경로를 입력하면 "/form"이라는 새로운 경로로 리다이렉트 되는 것을 알 수 있다. const nextConfig = { reactStrictMode: true, async..

영화 DATA를 가져온 사이트 (TMDB) 노마드 코더 next.js 강의를 들으며 알게된 사이트인데 기본적으로 API 구성이 잘 되어있어서 내가 원하는 데이터를 어렵지 않게 받아올 수 있는 것 같다. 나는 이곳에서 영화 데이터를 받아오기 위해 API 키 발급 신청을 했고, 신청 후 즉시 API 키가 발급된 것을 알 수 있었다. 지금부터는 받아온 API KEY를 이용해 NEXTJS 프로젝트에 data를 심어줘볼 것이다. 리액트앱과 다른 것? 사실상 데이터를 받아와서 화면에 그려주는 것은 리액트에서와 다를 것이 없었던 것 같다. 똑같이 화면이 렌더링될 때 내가 받아오고자하는 데이터를 요청하면 되는 것이었는데 이번에 처음으로 fetch함수를 이용해봤다. 먼저, 발급한 API KEY를 변수로 선언해주고 가져온..

Next.js에서 Style을 적용하는 방법에는 어떤 것이 있을까? ① CSS module을 사용하는 방법 가장 먼저 css module을 사용하는 방법을 적용해보았는데 NavBar.js에 CSS를 적용하기 위해 NavBar.module.css라는 파일을 생성해주었다. 그 후 css 파일 안에서 클래스 선택자로 스타일을 만들어주었고 이를 NavBar.js에 불러와 사용하였다. // NavBar.module.css .link { text-decoration: none; } .active { color: tomato; } link의 경우 두가지 a태그에 모두 적용이 되어야하고, active의 경우 조건부로 true인 경우에만 적용이 되도록 해야하는데 그럴 때는 ``을 이용하거나 className을 배열로 만..

Next.js란? 지금까지는 리액트를 사용하여 CSR로 애플리케이션을 구성했다면 지금부터는 next.js라는 프레임워크에 대해 공부한 것을 정리해보려고 한다. 기본적으로 리액트는 SPA이기 때문에 CSR을 기반으로 운영되어지지만 next.js를 이용하면 서버 사이드 렌더링을 간편하게 적용할 수 있게 된다. 클라이언트 사이드 렌더링의 경우 html 파일이 하나이며 나머지가 모두 js 파일로 이루어져 처음에는 흰색 화면을 가지고 온 후, 자바스크립트 번들을 다운 받고 나서 화면을 렌더링하게 된다. 반면에 next.js를 이용하여 SSR로 작동시키면 pre-rendering을 하기 때문에 기본적으로 html을 먼저 불러와 사용자에게 보여주고 그 후에 리액트에 연결해 어플리케이션을 보여주는 식으로 작동된다. 여..