프로젝트 썸네일형 리스트형 Next.js 1 (라우팅) Next.js 는 리액트 문법이 기반이기 때문에 기존에 리액트를 사용해봤다면 수월하다! (개꿀) Next.js는 자동 라우팅 기능이 있다! 자동 라우팅이라니! 리액트에서는 BrowserRouter, Routes, Route = path 같이 여러 작업을 했었는데 next.js 는 사용하지 않는다! 사용법! 위 사진처럼 app 안에 새로운 폴더를 만들어 주면 된다! 그럼 자동으로 폴더 명으로 url이 생성된다. 그리고 이렇게 page.js를 만들어 주고 우리 React 쓰듯이 아래처럼 만들어주면 이렇게 나온다! 만약 /hello/world 라고 만들고 싶을때는? 위에서 app 폴더에서 한것처럼 하면 된다! 더보기 Next.js를 알아보자! Next.js는 무엇이냐! 1. React 라이브러리의 프레임워크로 Server side rendering (서버에서 HTML다 완성해서 보내주는 것)을 할 수 있다. 2. client side rendering으로도 할 수 있다. 3. 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR) 도 가능하다! Next.js를 쓰는 이유! SEO(Search engine optimization)를 위한 SSR(Server side rendering) 이전에는 React 나 vue같은 라이브러리를 써서 client side rendering (CSR)을 했었다. 그 이유는 화면이 부드럽게 렌더링 되고되고 특정 부분의 .. 더보기 JSON 서버 만들기! JSON 서버를 왜 만드나 이번에 프로젝트를 하면서 느낀 점이 있다. 바로 내가 원하는 시점에 api가 완성되지 않는다는 점이다. 완성되기까지 마냥 기다릴 수 없기 때문에 나는 api가 없어도 내가 가짜 서버를 만들어서 테스트를 해야겠다고 강하게 느꼈다. 그래서 시작하는 JOSN 서버 만들기! JSON 서버 란? JSON 서버는 진짜 서버는 아니지만 JSON 데이터를 주고받을 수 있게 필요한 것을 제공해준다! JSON 서버 만들기 npm install -g json-server 먼저 https://www.npmjs.com/package/json-server 이 사이트에 들어가서 터미널에 위에 사진 처럼 json-server를 설치해 준다! 그리곤 프로젝트 최상위에 폴더와 파일을 만들어주고 DB.json .. 더보기 이전 1 2 3 다음
