[DreamChain DApp] #15 Front-End 개발환경 구축 1

이번글부터는 Front-End에 관한 글입니다.
이전글 - [DreamChain DApp] #14 소스코드, 스크립트 정리

본 내용은 Ethereum and Solidity: The Complete Developer's Guide을 참고해서 작성되었습니다.

---

Frond-end를 위한 웹페이지 개발은 사실 저도 전문가 아닙니다. 따라서 자세한 설명은 어렵습니다. 그래도 최대한 이해하고 설명해 보겠습니다. 이점은 양해 바랍니다.

개발환경

• OS: Ubuntu 16.04 64bits
• 브라우저: chrome
• Editor: atom

패키지 설치

웹페이지 개발을 위해 다음과 같은 것들을 사용할 예정입니다.

• 로컬 웹서버 구축
• HTML5
• CSS
• Javascript
• React
• Next.js

다음과 같이 몇가지 패키지를 설치합니다. 특히 Next.js의 경우는 아래와 같이 특정 버전을 지정하여 설치합니다.

$ npm install --save [email protected] react react-dom

Next를 설치하고 나면 .next라는 폴더가 생성됩니다.

Next가 페이지 라우팅, 즉 페이지들간의 이동을 담당하게 됩니다. 이 때 페이지들이 저장된 폴더명을 반드시 pages로 해야 합니다. 저는 이미 사전에 프로젝트 폴더 밑에 pages 폴더를 만들어 놨습니다. Next의 유용한 점은 pages 밑의 파일들이 하나의 웹페이지가 되어 자유롭게 이동하게끔 해주는 것입니다.

로컬 웹서버 구축

로컬 웹서버 구축은 별로 할 것이 없습니다. Next만 설치하면 끝입니다!
Next를 사용하기 위해 package.json파일에 아래와 같이 "dev"라는 스크립트 관련 내용을 추가합니다. dev라는 스크립트를 실행할 때마다 "next dev"가 실행되게 됩니다.

그럼 바로 실행해 보겠습니다. 프로젝트의 root 폴더로 이동하여 아래와 같이 입력합니다.

$ npm run dev

그러면 아래와 같이 로컬 웹서버가 돌아간다는 메시지가 나타납니다. 웹브라우저를 켜고 http://localhost:3000을 입력해 봅니다.

그러나 404 Not Found가 나타납니다. 그것은 pages폴더에 아무 것도 없기 때문입니다. 테스트용으로 pages 폴더 밑에 new_story.js라는 파일이름으로 아래와 같이 내용을 넣어봅니다.

import React from 'react';
export default () => {
  return <h1>This is the new dream story page!</h1>;
};

단순히 react 패키지를 import 하고, 메시지를 출력하는 페이지입니다. 내용을 저장하고, 이번에는 http://localhost:3000/new_story.js를 입력해보면, 아래와 같이 짜잔~하고 웹페이지가 나타납니다. 이때 new_story.js에서 .js는 빼고 입력해야 합니다. 주의하세요.

비록 내용은 아직 이해하기 어렵지만 너무 간단한거 아닌가요? 저도 사실 놀랍습니다. 이렇게 웹페이지 구축이 쉽다니요~

index.js

웹사이트를 방문하면 처음에 보이는 페이지가 있습니다. 이런 페이지는 특별히 페이지 이름을 지정하지 않아도 되는데, 이 페이지를 index페이지라고 합니다. pages폴더에 index.js라는 파일을 아래와 같은 내용으로 만듭니다.

import React from 'react';
export default () => {
  return <h1>This is the DreamFactory page!</h1>;
};

그리고 다시 웹브라우저에서 'http://localhost:3000`으로 페이지 이름을 넣지 않아봅니다.

짜잔~ 멋지지 않습니까?

---

예전에는 웹페이지 구성하는게 매우 번거로와 보였는데, React와 Next를 사용하니 매우 쉽게 웹페이지를 만들 수가 있네요. 도메인을 구매하고 클라우드 서비스에 올리기만 하면 실제 서비스도 가능하겠는걸요? ㅎ

다음글에서는 web3 provider를 설정하는 방법과 index 페이지에 배포된 컨트랙트의 정보를 읽어서 출력하는 방법을 다뤄보겠습니다.

오늘의 실습: React와 Next에 대해서 더 자세히 알아보세요.