1) 프로젝트 셋팅. Hello world

터미널을 열어서 프로젝트를 생성할 폴더로 가자.

그다음 프로젝트 생성

mkdir tutorial && cd tutorial
yarn init

엔터를 따다당 눌러주다 보면 package.json이 생성된다.

VS code를 열어보자.

code .

이 커맨드가 안먹힌다면, VS code를 열어서 cmd + shift + p를 입력하자.

 

그런 다음 shell이라고 누르면 끝

이제 프로젝트를 구축할텐데 react js, next js를 설치해주자.

 

yarn패키지를 이미 설치했길 바라며,

 

cmd + j를 눌러 터미널을 Vscode에 띄운 다음에 아래 커맨드를 입력한다.

yarn add next react react-dom

이번 프로젝트에서는 단순히 react만 사용하지 않고 next js를 사용하는데

개인적으로 react만 쓰는것보다 훨씬 간편하게 셋팅할 수 있고

서버사이드 렌더링도 제공하고, 나중에 무료로 호스팅까지 할 수 있어서 이번 프로젝트에 적용하게 되었다.

 

next js는 라우팅으로 pages라는 폴더에서 하는데 아래 사진처럼 폴더 구조를 만들기 바란다.

 

간단한 폴더 구조

먼저, src/component/Main/index.js파일을 아래처럼 작성하자.

import React from "react";

const index = () => {
  return <div>Hello world</div>;
};

export default index;

 

다음으로 pages/index.js를 다음처럼 작성한다.

import React from "react";
import Main from "../src/component/Main"
const index = () => {
  return <Main/>;
};

export default index;

 

이제 터미널에 다음 커맨드를 입력한다. 

yarn next

 

next js는 기본으로 node엔진을 3000포트에 띄운다.

 

Hello world