[ react ] react 프레임워크 Next.js 설치 > react

본문 바로가기
사이트 내 전체검색

react

[ react ] react 프레임워크 Next.js 설치

페이지 정보

작성자 웹지기 댓글 0건 조회 563회 작성일 22-01-20 18:47

본문

많은 프레임워크가 존재한다.

그중에서 몇가지만 소개하자면

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


추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 3건 1 페이지
  • 열람중 [ react ] react 프레임워크 Next.js 설치
  • 많은 프레임워크가 존재한다. 그중에서 몇가지만 소개하자면 Ant Design Next.js Mui Semantic UI 더 많겠지만 여기까지만............ 저는 Next.js를 선택했습니다. https://2020.stateofjs.com/ko-KR/ 이곳에 javascript관련 된 순위가 나오는데 next.js가 1위더라구요 여기서부터는 cmd에서 실행하면 됩니다. 일단 설치는 react 설치 후 ( 저는 typescript를 사용하려고 아래처럼 사용했습...
  • 웹지기 01-20 564 0 0 댓글 0
  • 2 [ react ] react 시작하기 - 레이아웃 및 디자인 쉽게 적용하기 ( semantic ui reac…
  • semantic ui react - react 에 jquery를 접목시킨 템플릿이라고 보면됨 https://react.semantic-ui.com/ 페이지에 접속해보면 설치 방법과 사용방법이 나와 있다. 일반적으로 사용하는 bootstrap 템플릿과 비슷한 형태라고 보면 된다. 설치 방법은 yarn을 이용하는 방법과 npm을 설치하는 방법이 있다.
  • 웹지기 01-20 757 0 0 댓글 0
  • 1 [ React ] window + react install 윈도우에 리엑트 설치하기
  • 기본적으로 설치해야 할 프로그램 목록 node.js npm yarn create-react-app editor( visual studio code 등등 본인이 사용하는 editor ) git 설치시 cmd 또는 cmder를 설치해서 사용 1. node.js 설치 https://nodejs.org/ko/download/에서 윈도우용을 다운받아서 설치 2. npm 설치 node.js 설치시 자동으로 설치 3. yarn 설치 cmd...
  • 웹지기 05-15 2525 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
4,716
어제
10,286
최대
24,117
전체
4,324,631

그누보드5
Copyright © funyphp.com. All rights reserved.