다음 Js 튜토리얼
다음 JS는 무엇입니까?
Next Js에 대해 알아보기 전에 Next.js가 무엇인지 알아야 합니다.
Next.js는 개발자가 서버 렌더링된 React 애플리케이션을 쉽게 만들 수 있도록 하는 React 애플리케이션 구축을 위한 인기 있는 오픈 소스 프레임워크입니다.
NextJ를 사용한 이유는 무엇입니까?
다음과 같이 최신 웹 응용 프로그램을 보다 효율적으로 구축하고 배포할 수 있는 일련의 도구 및 기능을 제공합니다.
서버측 렌더링: Next.js는 기본적으로 서버측 렌더링(SSR)을 지원합니다. 즉, 초기 HTML이 서버에서 생성되어 클라이언트로 전송되어 페이지 로드 속도가 빨라지고 SEO가 향상됩니다.
자동 코드 분할: Next.js는 자동으로 코드를 더 작은 조각으로 분할하므로 각 페이지에 필요한 코드만 로드되어 애플리케이션의 초기 로드 시간이 단축됩니다.
정적 사이트 생성: Next.js는 빌드 시 페이지를 미리 렌더링하는 SSG(정적 사이트 생성)를 허용하므로 로드 시간이 훨씬 빨라지고 서버 로드가 줄어듭니다.
API 경로: Next.js는 외부 데이터 소스와 쉽게 통합할 수 있도록 API 경로를 만드는 쉬운 방법을 제공합니다.
기본 제공 CSS 지원: Next.js는 CSS 모듈 또는 스타일 구성 요소를 사용하여 스타일 지정을 기본 제공하므로 응용 프로그램에 대한 CSS를 더 쉽게 작성하고 유지 관리할 수 있습니다.
전반적으로 Next.js는 성능, SEO 및 개발 경험을 개선하는 기능을 제공하면서 최신 웹 애플리케이션을 보다 쉽고 빠르게 구축하고 배포할 수 있도록 합니다.
Next Js 학습의 전제 조건:
Next.js를 배우기 전에 다음 기술에 대한 탄탄한 기반을 갖추는 것이 좋습니다.
HTML 및 CSS: Next.js는 반응성이 뛰어나고 잘 설계된 웹 애플리케이션을 구축하기 위해 HTML 및 CSS에 대한 확실한 이해가 필요한 React를 기반으로 구축되었습니다.
JavaScript: Next.js는 JavaScript 프레임워크이므로 변수, 함수, 배열, 개체, 루프 및 조건문을 포함하여 언어와 기본 사항을 잘 이해하고 있어야 합니다.
React: Next.js는 React 위에 구축되었으므로 구성 요소, 상태, 소품 및 가상 DOM을 포함한 React의 핵심 개념을 잘 이해하고 있어야 합니다.
Node.js: Next.js는 Node.js를 사용하여 서버 측 렌더링 및 기타 서버 측 작업을 실행합니다. Node.js와 이를 사용하여 웹 애플리케이션을 만드는 방법을 잘 이해하고 있어야 합니다.
Git: Git은 코드 리포지토리 관리에 일반적으로 사용되는 버전 제어 시스템입니다. Git과 이를 사용하여 코드를 관리하는 방법에 익숙해야 합니다.
또한 Next.js를 시작하기 전에 웹 애플리케이션 구축 경험이 있는 것이 좋습니다. Next.js는 일반 React에 비해 많은 이점을 제공하지만 여전히 복잡할 수 있으므로 웹 애플리케이션 구축 경험이 있으면 Next.js에서 사용되는 개념과 도구를 더 잘 이해하는 데 도움이 될 수 있습니다.
시스템 전제 조건
Next.js를 시작하려면 시스템이 다음 전제 조건을 충족하는지 확인해야 합니다.
Node.js: Next.js는 Node.js 위에 구축되므로 시스템에 Node.js를 설치해야 합니다. Node.js 공식 웹 사이트에서 최신 버전의 Node.js를 다운로드할 수 있습니다.
NPM: NPM(노드 패키지 관리자)은 Next.js 프로젝트의 종속성을 관리하는 데 사용됩니다. Node.js와 함께 번들로 제공되므로 기본적으로 설치해야 합니다.
Git: Git은 코드 리포지토리 관리에 일반적으로 사용되는 버전 제어 시스템입니다. Next.js 프로젝트를 관리하려면 시스템에 Git이 설치되어 있어야 합니다.
NextJs 앱을 만들 수 있습니다.
다음은 카드에 이미지를 표시하고 무한 스크롤을 구현하며 Server Side Rendering을 사용하여 getServerSideProps를 사용하여 데이터를 가져오는 Next.js 앱을 빌드하는 단계별 가이드입니다.
1단계: 프로젝트 설정
시작하려면 다음 명령을 실행하여 새 Next.js 프로젝트를 만듭니다.
npx create-next-app
my-app cd my-app
2단계: 종속성 설치
다음으로 다음 종속성을 설치합니다.
npm install axios react-infinite-scroll-component tailwindcss
axios 라이브러리를 사용하여 API에 대한 HTTP 요청을 만들고 react-infinite-scroll-component를 사용하여 무한 스크롤을 구현하고 tailwindcss를 사용하여 구성 요소의 스타일을 지정할 것입니다.
3단계: 이미지 카드 구성 요소 만들기
구성 요소 디렉터리에 ImageCard.js라는 새 파일을 만들고 다음 코드를 추가합니다.
암호:
import React from 'react';
function ImageCard({ image }) {
return (
<div className="rounded overflow-hidden shadow-lg">
<img src={image.urls.regular} alt={image.alt_description} />
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">{image.user.username}</div>
</div>
</div>
);
}
export default ImageCard;
4단계: 무한 스크롤 구성 요소 만들기
구성 요소 디렉터리에 InfiniteScrollImages.js라는 새 파일을 만들고 다음 코드를 추가합니다.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroll-component';
import ImageCard from './ImageCard';
function InfiniteScrollImages() {
const [images, setImages] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
fetchImages();
}, []);
const fetchImages = async () => {
const response = await axios.get(`https://api.unsplash.com/photos`, {
params: {
client_id: '<YOUR_API_KEY>',
page: page,
per_page: 9,
},
});
setImages((prevImages) => [...prevImages, ...response.data]);
setPage((prevPage) => prevPage + 1);
};
return (
<InfiniteScroll
dataLength={images.length}
next={fetchImages}
hasMore={true}
loader={<h4>Loading...</h4>}
>
<div className="grid grid-cols-3 gap-4">
{images.map((image) => (
<ImageCard key={image.id} image={image} />
))}
</div>
</InfiniteScroll>
);
}
export default InfiniteScrollImages;
5단계: 인덱스 페이지 생성
export async function getServerSideProps() {
const { data } = await
axios.get(`https://api.unsplash.com/photos/random`, {
params: {
client_id: '<YOUR_API_KEY>',
count: 9,
},
});
return {
props: {
initialImages: data,
},
};
}
export default function Home({ initialImages }) {
return (
<div className="container mx-auto my-8">
<h1 className="text-4xl font-bold mb-8">Infinite Scroll Images</h1>
<InfiniteScrollImages initialImages={initialImages} />
</div>
);
}
6단계: Tailwind CSS 추가
Next.js에는 CSS 모듈 지원 기능이 내장되어 있으므로 Tailwind CSS를 프로젝트에 쉽게 추가할 수 있습니다. styles/globals.css라는 새 파일을 만들고 다음 코드를 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
8단계: 개발 서버 시작
마지막으로 다음 명령을 실행하여 개발 서버를 시작합니다.
npm run dev
방문하다http://localhost:3000브라우저에서 실행 중인 앱을 확인하세요.
그게 다야! 카드에 이미지를 표시하고, 무한 스크롤을 구현하고, Server Side Rendering을 사용하여 getServerSideProps를 사용하여 데이터를 가져오는 Next.js 앱을 빌드했습니다.
gitLab/gitHub에 코드 푸시
이제 배포하자
1단계: EC2 인스턴스 시작
먼저 AWS Management Console을 사용하여 EC2 인스턴스를 시작합니다. 필요에 맞는 인스턴스 유형을 선택하고 포트 80(HTTP) 및 443(HTTPS)에서 들어오는 트래픽을 허용하도록 보안 그룹을 구성해야 합니다.
2단계: 인스턴스에 연결
인스턴스가 시작되면 SSH를 사용하여 연결합니다. 터미널에서 ssh 명령을 사용하거나 Windows 시스템을 사용하는 경우 PuTTY와 같은 도구를 사용할 수 있습니다.
ssh -i <PATH_TO_PRIVATE_KEY> <USER>@<PUBLIC_IP_ADDRESS>
3단계: Nginx 설치
다음으로 다음 명령을 사용하여 인스턴스에 Nginx를 설치합니다.
sudo apt update
sudo apt install nginx
cd /var/www/html
sudo git clone <repo url>
cd my-app
server {
server_name www.DOMAINNAME.com DOMAINNAME.com;
index index.html index.htm;
root /var/www/html/my-app; #Make sure using the full path
# Serve any static assets with NGINX
location /_next/static {
alias /var/www/html/my-app/.next/static;
add_header Cache-Control "public, max-age=3600, immutable";
}
location / {
try_files $uri.html $uri/index.html # only serve html files from this dir
@public
@nextjs;
add_header Cache-Control "public, max-age=3600";
}
location @public {
add_header Cache-Control "public, max-age=3600";
}
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location @nextjs {
# reverse proxy for next server
proxy_pass http://localhost:3000; #Don't forget to update your port number
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
listen 80 default_server;
listen [::]:80;
}
이 구성은 Nginx가 포트 80에서 수신하고 localhost:3000에서 실행 중인 Next.js 앱에 대한 프록시 요청을 수신하도록 지시합니다.
5단계: Nginx 다시 시작
구성을 추가했으면 다음 명령을 사용하여 Nginx를 다시 시작합니다.
sudo systemctl 재시작 nginx
6단계: PM2 설치
다음 명령을 사용하여 인스턴스에 전역적으로 PM2를 설치합니다.
sudo npm install -g pm2
7단계: Next.js 앱 빌드 및 시작
Next.js 앱의 루트 디렉터리에서 앱의 프로덕션 버전을 빌드합니다.
cd /var/www/html/my-app
npm run build
pm2 start npm --name "<APP_NAME>" -- start
앱의 이름으로 바꿉니다.
8단계: PM2 구성 저장 인스턴스
가 다시 시작될 때 앱이 다시 시작되도록 PM2 구성을 저장합니다.
pm2 save
9단계: 앱에 액세스 앱
에 액세스 하려면 브라우저에서 도메인 이름 또는 공용 IP 주소를 방문하십시오. Nginx는 localhost:3000에서 실행되는 Next.js 앱에 요청을 프록시합니다.
축하합니다. Nginx를 리버스 프록시 서버로 사용하고 PM2를 프로세스 관리자로 사용하여 AWS EC2 인스턴스에 Next.js 앱을 성공적으로 배포했습니다!
![연결된 목록이란 무엇입니까? [1 부]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
