[AdminSystem] 관리자페이지 프로젝트 01-프로젝트 생성

[코딩은 자신감] 관리자페이지 프로젝트 01

프로젝트 생성 (create-react-app)

전제사항 : node.js 설치완료, visual studio code 설치완료

 

---

1. 1번 ~ 3번 중 한가지 방법으로 리액트 앱 생성하기

1번)

 - 새 폴더 만들기 (ex. MyReactProject)

  -> window + R로 실행창 열기

  -> "cmd"입력 후 확인 또는 엔터

  -> 방금 생성한 폴더 위치로 접근 (`cd ${폴더 위치}`)

      (ex. cd C:\MyReactProject)

  -> 터미널창에 "npx create-react-app ${생성할 리액트앱 이름}" 입력 후 엔터

      (ex. npx create-react-app react_admin_app)

  -> 설치중...

  -> 생성한 리액트앱으로 접근 (`cd ${생성한 리액트앱 이름}`)

      (ex. cd react_admin_app)

  -> "code ." 입력 후 엔터 (vscode 실행)

---

2번)

 - 새 폴더 만들기 (ex. react-admin-app)

  -> window + R로 실행창 열기

  -> "cmd"입력 후 확인 또는 엔터

  -> 방금 생성한 폴더 위치로 접근 (`cd ${폴더 위치}`)

      (ex. cd C:\MyReactProject)

  -> 터미널창에 "npx create-react-app ./" 입력 후 엔터

      (ex. npx create-react-app react_admin_app)

  -> 설치중...

  -> "code ." 입력 후 엔터 (vscode 실행)

---

3번)

 - 새 폴더 만들기 (ex. react-admin-app)

  -> vscode 실행 -> File-Open Folder 방금 만든 폴더에 접근

  -> 상단탭 중 Terminal-New Terminal로 터미널창 실행 (ctrl+shift+` 로도 실행 가능)

  -> "npx create-react-app ./" 입력 후 엔터

  -> 설치중... -> 설치완료

 

npx create-react-app 으로 관리자페이지 프로젝트 생성

 

---

2. 파일 구조 세팅

 - src 폴더의 모든 파일 삭제

src 폴더의 모든 파일 삭제하기

 

---

3. index.js & App.js 생성

 - src 폴더에 index.js 와 App.js 생성

index.js & App.js 생성

 - index.js 파일에 코드 작성

 

import React from "react";

import ReactDom from "react-dom";

 

import App from "./App";

ReactDom.render(<App />, document.getElementById("root"));

 

 - App.js 파일에 코드 작성

 

import React from "react";

 

const App = ( ) => {

  return <div>React Admin Project</div>;

};

 

export default App;

 

 

---

4. 프로젝트 실행

 - 새 터미널 창 열고 "npm install" 입력 후 엔터 -> "npm start" 입력 후 엔터

이 화면이 나오면 프로젝트 생성 및 기초 세팅 성공

 

---

5. GitHub push

 - github 푸쉬하기