React/Next.js (6) 썸네일형 리스트형 Next.js - 데이터 가져오기 (Data Fetching) Next.js에서 데이터를 가져와 컴포넌트에 props로 적용해주자. Next.js는 페이지에 데이터를 가져오기 위한 표준 API를 제공하는데, 바로 getInitialProps라고 불리는 비동기 함수를 사용한 구현이다. 데이터를 어디서 가져와야 할텐데, JSONPlaceholder에서 유저정보를 가져오는 방식으로 하도록 하겠다. 먼저 axios를 설치하고, /pages/users.js 파일을 만들어 다음과 같이 컴포넌트를 작성해준다. import Layout from "../components/Layout"; import axios from "axios"; const Users = ({ users }) => ( Users page {users.map((user) => ( {user.name}: {use.. Next.js - Express와 연결 (Connect to Express) 포트 분리 Next.js를 Express와 연결시켜보자. 가장 간단히는 포트를 분리하여 실행하는 방법이 있다. 먼저, Next.js를 포트 3000에서, 그리고 Express 서버를 포트 8000에서 실행시키는 방법으로 해보자. 루트 디렉터리에서 app.js 파일을 다음과 같이 작성해준다. const express = require("express"); const cors = require("cors"); const app = express(); app.use(cors()); app.get("/getdata", (req, res) => { return res.send("Responding from server!"); }); app.listen(8000); 그 후, package.json의 scripts를.. Next.js - 빌드와 배포 (Build and Deploy) 배포 Next.js 앱을 자신의 환경에서 배포해보자. 먼저 next.js 앱을 빌드해주자. 이전에 package.json 파일에서 스크립트를 확인해준다. "scripts": { "dev": "next", "build": "next build", "start": "next start" }, 먼저 앱을 빌드해준다. 다음과 같은 커맨드를 쳐준다. > npm run build 위 커맨드를 사용하면 배포를 위한 최적화된 코드를 생성한다. 그 후, 포트를 지정하여 Next.js 앱을 실행하여야 한다. 포트 값 없이 start를 통해 실행하면, > npm start localhost:3000에서 앱이 실행되는 것을 확인할 수 있다. 포트 지정 포트를 지정하여 배포를 할 수도 있다. 먼저 package.json의 sc.. Next.js - 컴포넌트와 스타일링 (Component and Styling) 컴포넌트화 Next.js에서 컴포넌트를 만들어 사용하는 것은 리액트 앱에서 하는 방법과 크게 다르지 않다. 그러나 앞선 예시들과 같이, react를 import 해줄 필요가 없다. 먼저, components 폴더를 만든 후, Header.js 파일을 만들어 다음과 같이 코드를 작성해준다. const Header = () => This is header; export default Header; 이제 pages/index.js 파일에 들어가서 다음과 같이 헤더를 추가해준다. import Link from "next/link"; import Header from "../components/HeaderExample"; const index = () => ( hello world Hello Page ); exp.. Next.js - 라우팅과 네비게이션 (Routing and Navigation) 네비게이션 Next.js에서 라우팅과 네비게이션을 하는 방법을 알아보자. 먼저 새로운 페이지를 만들기 위해 pages/hello.js 파일을 만들어 다음과 같이 코드를 작성해준다. const hello = () => Hello page~; export default hello; 그 후, 다시 index.js 파일로 돌아가 다음과 같은 링크를 생성해준다. import Link from "next/link"; const index = () => ( hello world Hello Page ); export default index; 이제 다시 인덱스 페이지로 돌아가면 다음과 같이 링크가 생성되어 있는 것을 볼 수 있다. 또한, a 태그를 확인해보면 아래와 같이 나온다. 즉, Link 컴포넌트를 사용한다고 하.. Next.js - 시작하기 (start Next.js) Next.js는 기본적으로 리액트를 기반으로 한 SPA (single page application) 을 빠르게 빌드할 수 있도록 도와주는 프레임워크이다. Next.js를 이용하면 빠르게 SPA를 빌드할 수 있으며, 기본적인 리액트 지식만 있다면 웹앱을 빠르게 빌드할 수 있도록 도와준다. 또한, Next.js는 매우 간단하며 커스터마이징이 매우 용이하다. Next.js의 특징과 장점 기본적으로 서버사이드 렌더링 (server-side rendering) 을 지원한다. 더욱 빠른 페이지 로드를 위한 코드 스플리팅을 자동으로 해준다. HMR을 지원하는 웹팩 기반 환경을 제공한다. Express나 Node.js와 같은 http 서버와 함께 구현이 가능하다. 시작하기 먼저 프로젝트 폴더를 생성한 후, 아래와 같.. 이전 1 다음
