게으른개발너D

1. Catch All 이제 catch-all URL을 만들어보자. catch-all URL은 뭐든 캐치하는 URL이다. 우리가 이걸 쓰는 이유는 SEO에 좋게하기 위해서다. 영화제목을 url에 넣으려고 하는데, 한글이나 띄어쓰기같은 문자는 알파벳이 아닌 다른 문자열로 나오기 때문에 보기에도, SEO에도 별로 좋지 않다. 예를들어 'Spider-Man No Way Home'을 url에서 'Spider-Man+No+Way+Home'처럼 나오게 하려고 한다. 현재 [id].js 라고 설정해 놓은 파일 이름을 바꿀 것이다. 지금은 id라는 하나의 변수만 받고있다. 앞에 ...을 넣어서 [...id].js로 파일명을 변경해보자. 그럼 Spider-Man: No Way Home' 제목이 들어간 url로도 상세페이..

1. Dynamic Routes Dynamic URL을 어떻게 다루는지 알아보자, 지금까지는 Home과 About 페이지인, / 와 /about 두가지 url이 있다. 영화 상세보기 페이지처럼 url에 변수를 넣는 방법에 대해 알아보려고한다. create-react-app의 react-router-dom에서는 해당 url은 예를들어 이런식으로 작성한다, /movies/:id 이렇게 하면 reate-router-dom은 :id 부분이 변수라는 걸 인식한다. 1.1 next.js pages url next.js에는 router가 없으므로 이런걸 하는 다른 방법이 당연히 존재한다. pages 디렉토리에서 오직 폴더와 이름가지고만 만들 것이다, /movies/all 이라는 url을 만들고싶다면 pages 폴더에..

1. Server Side Rendering next.js 의 한 기능에 대해 공부할 것이다. 이건 우리가 페이지가 오직 server side render만 할지 선택할 수 있게 한다. 우리가 reload 할 때 next.js가 해당 page를 html 형태로 export 하던지 pre render 하는 걸 알고 있다. 우리는 html이 우리 app 의 initial state(초기 상태)라는 것도 안다. 그래서 html에서 loading화면 같은 걸 기대할 수도 있다. 그래서 페이지를 inspect (개발자 도구)하면 어딘가에 loading같은 게 있을 것이다. 하지만 어떤 회사나 개발자들은 pre-rendering 된 이 loading을 유저에게 보여주기 싫을 수도 있다. fetch라던지 server..

1. Patterns 1.1 Layout 이제 많은 사람들이 next.js를 이용할 때 따르는 아주 흔한 패턴에 대해 공부할 것이다. 바로, custom app component를 사용할 때 쓰는 layout 패턴이다. 먼저, components 디렉토리 안에 Layout.js라는 component를 만들자. // Layout.js import NavBar from "./NavBar"; function Layout({children}) { return {children} } export default Layout; div 안에 children을 넣어주었는데, children은 react에서 기본적으로 제공하는 prop이다. 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다...

1. CSS Modules next.js 앱에 CSS를 추가하는 방법은 아주 많다. 한가지 방법은 이전 게시글에서 사용해봤던 방법이다. 태그에 직접적으로 style property를 넣는것. 이것 말고도 modules라고 불리는 걸 사용해보자. NavBar.js와 같은 위치에 NavBar.modules.css라는 파일을 만들자. /* NavBar.modules.css */ .nav { display: flex; justify-content: space-between; background-color: tomato; } NavBar.js에 해당 모듈 파일을 자바스크립트 오브젝트로서 import한다. // NavBar.js import styles from './NavBar.modules.css'; 그리고나서..

1. Static Pre Rendering next.js의 가장 좋은 기능 중 하나는, 앱에 있는 페이지들이 미리 렌더링 (Pre-Rendering)된다는 점이다. 이것들은 정적 (static)으로 생성된다. 1.1 create-react-app과 next.js의 차이점 create-react-app create-react-app은 client-side render를 하는 앱을 만든다. client-side render는 우리 브라우저가 유저가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 예를들어 create-react-app으로 만든 우리 프로젝트를 살펴보면 header, menu, card 등 다양한 것들이 많은데, 걔네들은 유저가 보는 HTML 소스코드 안에 들어있지 않다. 소스 코드를 살..

1. Library vs Framework 일단 pages 폴더 안에 있는 모든 것을 삭제해 보자. 그리고 pages 폴더 안에 index.js라는 파일을 만들고 이렇게 작성해 주자 // index.js function Home() { return "hi"; } export default Home; 그럼 index.js의 Home component에 넣은 hi라는 문자가 웹사이트에 자동적으로 보이고 있다. library 우리는 library를 불러오고 library를 사용해서 무언가를 한다. create-react-app을 통해서 react 앱을 만든다면, 항상 아래에 이런 부분이 만들어져 있다. // index.js ... ReactDOM.render( ... , document.getElementBy..

1. Creating a Project NextJS 프로젝트를 생성해보자 cd Documents npx create-next-app@latest --typescript ​ 타입스크립트를 쓰려면 뒤에 --typescript를 쓰면 된다. 터미널에 위의 명령어를 입려하면 프로젝트명이 뭐냐고 물어볼 것이다 ​나는 nextjs-intro라고 이름 지어주었다. ​ 설치가 다 되었으면 code nextjs-intro를 입력하여 vscode를 열어본다. ​ npm run dev를 입력해서 실행시켜보자. http://localhost:3000에 직접 들어가서 문제없이 잘 동작하고 있는지 확인해 보자. ​ 프로젝트는 위와 같은 디폴트 페이지를 가지고 있다.