철테코

Next.js란 리액트 프레임워크로 서버사이드 렌더링을 가능하게 하는 프레임워크입니다. 기존 리액트는 라우팅 등 개발에 필요한 수많은 라이브러리를 각각 추가해줘야 하는 번거로움이 있었는데 Next.js는 이러한 프론트엔드 개발에 필요한 다양한 기능을 내장 라이브러리로 제공합니다. 또한 추가적으로 서버 사이드 렌더링이 가능하여 SEO에 유리한 웹을 개발할 수 있습니다. 1. _app.js // _app.js import React from 'react'; import '../styles/globals.css' import { wrapper } from "../store/store"; import { Hydrate, QueryClient, QueryClientProvider } from 'react-quer..

기존에 프로젝트를 진행할 때 상태관리에 있어서 리덕스 구조를 사용해 왔습니다. 그런데 최근 리덕스 Tool-kit이 나오고 공식 홈페이지에서도 이를 적극 활용할 것을 추천하고 있습니다. 이번 글에서는 React-Redux 프로젝트의 생성 과 생성하면 기본적으로 세팅되는 Redux 구조와 State 관리에 대해서 알아보려고 합니다. 설치 리액트 + 리덕스 프로젝트 생성 프로젝트를 만들 폴더에서 VSCode에서 터미널을 열고, 다음과 같은 명령어를 입력합니다. npx create-react-app [프로젝트 명] --template redux 기존 프로젝트 + 리덕스 만약 기존 프로젝트에 리덕스를 추가하고 싶다면 다음과 같은 명령어를 통해 리덕스를 추가할 수 있습니다. redux, react-redux np..

1. 폴더 생성 프로젝트를 생성할 폴더를 하나 만든다. 2. VSCode Terminal에서 명령어 입력 VSCode에서 Terminal을 열고 npm install -g create-react-app npm 모듈인 'create-react-app'을 설치한다. 그 다음 아까 만들어진 폴더에서 다음과 같이 프로젝트를 생성한다. npx create-react-app my-app 명령어를 입력한다. "my-app"부분에 만들 프로젝트 명을 사용하면 된다. 다음과 같이 리액트를 실행할 준비가 되었다. 3. 실행하기 npm start 다음과 같은 명령어를 터미널에서 해당 폴더에서 실행하면 우리가 만든 리액트 앱을 실행할 수 있다. http://localhost:3000/ 인터넷 주소에 위의 주소를 입력하면 실행..