React (17) 썸네일형 리스트형 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 서버와 함께 구현이 가능하다. 시작하기 먼저 프로젝트 폴더를 생성한 후, 아래와 같.. Redux & Typescript - typesafe-actions Typesafe-actions 라이브러리로 코드를 조금 더 깔끔하게 만들고 리팩터링을 해보자. 먼저 typesafe-actions 모듈을 설치해주자. createStandardAction을 불러오고, 기존의 액션 타입 뒤에 붙어있던 as const들을 지워준다. 지워준 후에는 이제 createStandardAction을 써주자. 각 디스패치 함수에 createStandardAction을 아래와 같이 넣어준다. 그리고 이렇게 작성해주자. actions에 액션들을 넣어준다. 그 후, CounterAction이라는 타입을 만들어 ActionType (typesafe-actions 타입)에 타입을 로 지정해준다. 그리고 리듀서도 createReducer로 더 쉽게 작성 가능하다. 리듀서가 이렇게 쉽게 작성되었다.. Redux & Typescript - Ducks Pattern Redux with Typescript 타입스크립트와 리덕스를 같이 써보자. 먼저 프로젝트를 생성하고, redux와 react-redux를 설치해주자. redux는 자체적으로 타입스크립트를 지원하지만, react-redux는 그렇지 않다. 그러므로 따로 추가해주어야 한다. 이렇게 설치해주자. 이제 react-redux도 타입스크립트가 지원이 된다. 정확히는 공식적인 지원이 아닌, 커뮤니티에서 만든 타입스크립트 써드파티 라이브러리이다. 이제 ducks pattern을 사용하여 모듈을 만들어주자. ducks pattern에 대해서는 http://guswnsxodlf.github.io/redux-ducks-pattern Redux의 ducks패턴에 대해서 Ducks patternRedux를 사용하는 어플리케이션을 구축하다 보면 기능별로 여러 개의 .. 이전 1 2 3 다음
