3강 Git Hub를 이용하여 소스코드 관리하기

App.js란?

:실질적으로 웹사이트의 화면에 대한 내용 출력을 담당하는 부분

 

<App.js>

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="gray-background"> //하나의 클래스를 App.css에서 정의해줄텐데 그 클래스를 사용하겠다는 뜻임
      <img src = {logo} alt ="logo" />
        <h2>Let's develop management system!</h2>
    </div>
  );
}

export default App

App.css란?

 : App.js와 연동되어서 웹사이트의 메인부분에 해당하는 디자인을 담당함.

 

<App.css>

.gray-background {
  background: darkgray;
}

ㄴApp.js에다가 적용하는 디자인 (darkgray 색상의 배경색을 설정.)

 

<index.html >

<div id ="root"></div>

→ index.css에서

ReactDOM.render(<App />, document.getElementById('root'))

으로 App내용을 root에 출력하도록 한다.

 

index.html 내에 있는 주석 부분들은 필요가 없으니 모두 삭제해도 무방하다.

 

README.md란?

: Git hub에 올라가서 출력될 내용임. Git hub의 소개글임. (해당 프로젝트의 소개, 설치방법, reference 등의 문구가 들어가는 공간)

 

<README.md>

## Management System
본 프로젝트는 React 고객 관리 시스템(Management System)입니다.

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

...

<Git과 연동 하는 법>

1. Git Hub에 로그인 후 내 Repositories에서 New 버튼
2. Repository name에 React Management Project 적고 Create repository 클릭
3. URL 왼쪽에 HTTPS 클릭 후 고유한 저장소 URL 복사함.
4. 수정된 내역을 로컬 저장소(내 컴퓨터)에 저장을 하기 ⇒ Commit

ㄴ왼쪽 상단에 CHANGE 옆에 +버튼 눌러서 모든 파일 stage에 올린 후 Commit message 작성 한 후 commit 하면 됨.

1. 새로 터미널 창 열어서 git remote add origin (복사했던 URL add. ) 입력하여 할당 원격지 저장소를 등록함.
2. git push —set-upstream origin master 입력하여 push함.

.gitignore란?

:깃허브에 올라가지 않도록 막아주는 역할을 함. Create React App 패키지를 이용하면 .gitignore 설정들도 알아서 해주기 때문에 편함.

 

 

[3강에서]

배운 것 : 프로젝트의 구성을 일부 바꿔보고 git 저장소에 프로젝트를 업로드 해봄.