sean.jin
Spark Code Blog
sean.jin
전체 방문자
오늘
어제
  • 분류 전체보기
    • 개발공부
      • Kotlin
      • LeetCode
      • Algorithm
      • React
    • 주식차트
    • 책리뷰
    • 유틸리티

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 책
  • 주식책리뷰
  • 아빠와 딸의 주식투자 레슨
  • 책리뷰
  • 책추천
  • 네마녀의날
  • 변동성
  • 주식입문자
  • 주식투자
  • 부의 추월차선
  • 쿼드러플위칭데이
  • 트리플 위칭데이
  • 오
  • 자기개발
  • 경제
  • 초보

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
sean.jin

Spark Code Blog

[React] react 앱을 만들기전 셋업
개발공부/React

[React] react 앱을 만들기전 셋업

2022. 3. 18. 18:38
반응형

터미널을 이용한 파일생성 및 실행

 

먼저 [터미널] 을 열어서 리엑트 파일을 만들어줘야합니다. (터미널 여는법: Command shift P)

 

저는 [Documents] 아래에 [movie-app-2019] 이름으로 만들어주겠습니다. 

 

 

1. 경로 설정해주기 

저는 documents아래에 react파일을 만들어 주도록하겠습니다. 

cd [경로]

 

2. React파일 만들어주기

npx create-react-app [파일이름]

 

3. Visual Studio Code 열기

code [react파일 이름]

터미널을 통해 [리엑트 폴더] 를 만들었다면 [Visual Studio Code]에서 열든지 

 

아래와 같이 code - [파일이름] 을 적어주시면 Visual Studio Code로 자동으로 윈도우가 열리게 됩니다. 

 

만들어진 React파일 기본 수정

test와 eject를 지워줍니다.

 

react 앱 시작하기

터미널을 열기위해 단축키 : [command+shift+P]  를 눌러주세요.

 

그리고 terminal을 치면 

아래와같은 터미널이 열립니다. 그리고 npm start를 쳐주면

브라우저로 react app이 열리게 됩니다. 

리엑트가 열리게 됩니다. 

 

 

개발중인기기가아닌 핸드폰이나 다른 기기에서 앱을 열고싶다면 

local: on your network를 사용하면됩니다. 

 

다음 포스트에서는 이 코드들을 깃헙에 올려줘 보도록 하겠습니다. 

반응형

'개발공부 > React' 카테고리의 다른 글

[React] Deploy React App Using Heroku  (0) 2022.04.25
[React] API 불러오기  (0) 2022.03.23
[React] class component와 state 활용- 라이프 사이클, React.Component  (0) 2022.03.20
[React] map 활용  (0) 2022.03.19
[React] Visual Studio Code에서 Github 활용 필수 기본 정리 - 깃헙에 업로드 하기, 클론  (0) 2022.03.18
    '개발공부/React' 카테고리의 다른 글
    • [React] API 불러오기
    • [React] class component와 state 활용- 라이프 사이클, React.Component
    • [React] map 활용
    • [React] Visual Studio Code에서 Github 활용 필수 기본 정리 - 깃헙에 업로드 하기, 클론
    sean.jin
    sean.jin
    앱개발, 알고리즘, JS, Kotlin, 미국 취업준비

    티스토리툴바