웹-프론트앤드 서버 기본 구성

제작 컨셉

모든 코드는 Typescript로 작성 한다.

Next.js를 통해 Server-side-rendering 및 Routing을 제어한다.

React.js를 통해 비주얼적인 부분을 제어한다.

서버와의 통신은 GraphQL 방식으로 한다.

Typescript Target을 ES5로 하여 하위 브라우저를 지원한다.

Typescript 코드로 빌드된 JS 코드를 Webpack으로 번들화 하여 최종적으로 하나의 파일로 묶어준다.

 

구성요소

Node.js, Typescript, React.js, Next.js

 

Node 프로젝트 생성

$ yarn init -y

 

필수 모듈들 추가

$ yarn add react react-dom next

$ yarn add --dev typescript @types/node @types/react @types/react-dom @types/next

 

package.json 수정

{
	...
	"scripts": {
    	"dev": "next"
	},
    ...
}

 

루트에 pages 폴더 생성

$ mkdir pages

 

pages 폴더 안에 index.tsx 생성

const Index = () => (
    <div>
        <h1>
            Hi, Next.js
        </h1>
    </div>
);

export default Index;

 

실행

$ yarn dev