Ant Design 

Next.js

Mui

Semantic UI

더 많겠지만 여기까지만............

저는 Next.js를 선택했습니다.

https://2020.stateofjs.com/ko-KR/

이곳에 javascript관련 된 순위가 나오는데 next.js가 1위더라구요

여기서부터는 cmd에서 실행하면 됩니다.

일단 설치는 react 설치 후 ( 저는 typescript를 사용하려고 아래처럼 사용했습니다. )

>yarn create next-app --typescript
이렇게 하면 폴더를 만들라고 해서 그냥 엔터로 기본 my-app 가 생성됩니다.

설치가  완료 되었으면 아래 코드 실행

>my-app>mkdir pages 

>my-app>yarn dev

이렇게 실행하면 페이지 없다고 뜹니다. 아래경로에 index.js 파일을 만들고 해당코드를 넣어주세요

>my-app>pages>index.js

const HomePage = () => {

    return <div>Welcome to Next.js!</div>

}

export default HomePage

이렇게 해서 화면에 Welcome to Next.js 가 뜨면 정상 설된것입니다.

Next.js 설치 후 semantic ui react 설치해서 template를 쉽게 적용하자.

>my-app> yarn add semantic-ui-react semantic-ui-css

https://react.semantic-ui.com/

페이지에 접속해보면 설치 방법과 사용방법이 나와 있다.

일반적으로 사용하는 bootstrap 템플릿과 비슷한 형태라고 보면 된다.

설치 방법은 

yarn을 이용하는 방법과 npm을 설치하는 방법이 있다.

설치시 cmd 또는 cmder를 설치해서 사용 

1. node.js 설치

https://nodejs.org/ko/download/ 에서 윈도우용을 다운받아서 설치

2. npm 설치

node.js 설치시 자동으로 설치

3. yarn 설치

cmd 또는 cmder에서

설치확인 : yarn -v

4. create-react-app 설치

cmd 또는 cmder에서

또는

5. 프로젝트 생성

설치를 원하는 폴더로 이동

예) d:\react 폴더에 생성하고 싶다면 

react를 자동으로 실행하고 기본브라우져로 지정된 브라우져에 react 첫 화면이 나옴

경로는 대략 localhost:3000