NEXT.JS_1. NEXT.JS란? 프로젝트 미리보기

Eunsu·2021년 12월 7일

먼저 말하자면 아직 NEXT.JS에 대해서 감이 잡히지않았다. 그러던 중 NEXT 초보강의를 찾게되어 그걸 기반으로 프로젝트를 해볼것이다.

아 근데 미친 다 영어로 되있음,, 동시번역이 안되지만 뭐 어쩌겠는가,,

아무튼 오늘은 Introduce 부터! 힘내라 은수야!

이 엉아 강의를 들을 꺼임!

영어를 바탕으로 모르는 부분 번역하면서 포스팅 할꺼임!!

NEXT.JS

◼ NEXT.JS란?

Next is React frontend development web framework created by Vercel(formerly Zeit) that enables functinality such as server-side rendering and static site generation.

넥스트는 Vercel(구 Zeit)에서 만든 React 프론트엔드 개발 웹 프레임워크로 서버 측 렌더링, 정적 사이트 생성 등의 기능을 가능하게 한다.

◾ Server Side Rendering이란?

Unlike a traditional React app where the entire application is loaded and rendered on the client, Next.js allows the first page load to be rendered by the server, which is great for SEO & performance

전체 애플리케이션이 클라이언트에서 로드되고 렌더링되는 기존 React 앱과 달리 Next.js는 첫 번째 페이지 로드가 서버에서 렌더링되도록 허용하므로 SEO 및 성능에 좋다.

◾ 그렇다면 NEXT.JS는 프론트엔드 프레임워크인가 아니면 백엔드 프레임워크인가?

▪ It is really both, because it's not comparable to something like Xpress because it still dose render your entire client side all your React stuff is within next.

▪ Xpress와 비교할 수 없기 때문에 정말 둘 다 가능하다고 할 수 있다. 왜냐하면 NEXT는 전체 클라이언트 측을 렌더링하기 때문에 모든 React 항목이 NEXT 안에 있기 때문입니다.

▪ but It also does have backing capabilities to handle requests, response. You can create your own API routes and so on.

▪그러나 NEXT는 요청, 응답을 처리하는 지원 기능도 있습니다. 고유한 API 경로 등을 만들 수 있습니다.

◾ NEXT.JS 가 갖는 장점

Easy page routing (쉬운 페이지 라우팅)

API Routes (API 경로)

Out of the box TypeScript & Sass (즉시 사용가능 한 타입스크립트와 Sass)

Static site generation (next export) 정적 사이트 생성

Easy Deployment(쉬운 배포)

◼ Project

➕ Project - DJ 페이지 만들기

▪ 메인 페이지

기능

이벤트 목록 보여주기

로그인

(로그인 했을 경우) 이벤트 추가, 이벤트 수정, 사진 업로드

Pagination

검색

이정도로 기능 구현을 한 것 같음. User 프로젝트와 정보 수정하는 부분이 겹쳐서 보고 따라하고
이해하면 어느 정도 감이 잡힐 것 같다!

➕ Backend

Backend Api 툴과 관련해서 간략하게 설명을 적어 놓으려 한다.

🚀 STRA API

STRA API란?

star API란 DB와 쉽게 연동해서 Restful or GraphQL방식으로 데이터를 받고 내주는 백앤드 역활을 톡톡히 해주는 툴이라고 할 수 있다.

Restful 이란?
- “Representational State Transfer” 의 약자로, HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
- 즉, REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.
- CRUD Operation
  Create : 생성(POST)
  Read : 조회(GET)
  Update : 수정(PUT)
  Delete : 삭제(DELETE)
  HEAD: header 정보 조회(HEAD)
GraphQL 이란?
- GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 이다.
- REST를 대체할 수 있는 GraphQL은 개발자가 단일 API 호출로 다양한 데이터 소스에서 데이터를 끌어오는 요청을 구성할 수 있도록 지원한다.
- GraphQL은 API 유지 관리자에게 기존 쿼리에 영향을 미치지 않고 필드를 추가하거나 폐기할 수 있는 유연성을 부여한다. 개발자는 자신이 선호하는 방식으로 API를 빌드할 수 있으며, GraphQL 사양은 이러한 API가 예측 가능한 방식으로 작동하도록 보장한다.
🚀 STRA API 대표기능
- headless CMS : CMS은 저작물 관리 시스템(Content Management System)인데, 프론트앤드를 뺀 CMS라고 생각하면 됨. 프론트엔드 연습에 좋음.
- Open Source
- 직관적인 관리자 화면
- RESTful or GraphQL 사용 가능
다음 포스팅 부터 프로젝트 시작!