프로젝트의 관리를 위해 Git 저장소를 생성하고 소스코드를 올리겠다.
소스코드 올리기 전에 코드의 윤곽을 잡고 올리겠다.
윤곽
App.js
실질적으로 웹사이트의 화면에 대한 내용 출력을 담당한다.
App.js의 App()을 다음과 같이 수정한다.
function App() {
return (
<div className="gray-background">
<img src={logo} lat="logo"/>
<h2>Let's develop management system!</h2>
</div>
);
}위의 className은 CSS(디자인) 클래스다.
React는 JSX문법을 따르기 때문에 className으로 클래스의 이름을 적어준다.
App.css
App.css파일은 App.js와 연동되어서 웹사이트 메인 부분의 디자인을 담당한다.
최초 작성된 내용을 지우고 다음의 클래스를 정의한다.
.gray-background {
background: darkgray;
}저장 후 원하는대로 화면이 수정되었는지 확인한다.
../public/index.html
먼저 주석을 제거하여 필요한 내용만 남긴다.
index.html 소스코드 내부에는 div의 id 값으로 "root"가 들어가있다.
실제로 root 영역에 App.js의 내용이 출력된다.
index.js
index.js를 보면 이라는 App.js의 컴포넌트를 실제 HTML 문서의 root라는 id 값의 위치에다가 출력하라고 나와있다.
ReactDOM.render(<App/>, document.getElementById('root'));즉, root 위치에 App.js를 그리라는 뜻이다.
../README.md
Git Hub에 올라가서 출력될 내용이다.
(일종의 소개글)
일반적으로
- 프로젝트의 소개
- 설치 방법
- 레퍼런스
등이 들어간다.
최상단에 다음의 문구를 추가한다.
## Management System
본 프로젝트는 React 강의 목적으로 만들어진 고객 관리 시스템(Management System)입니다.지금까지의 내용이 정상적으로 반영되었는지 확인한다.
Git으로 프로젝트 관리
Git Hub에 저장소 생성
회원가입 및 로그인한다.
마이페이지의 레포지토리 항목을 클릭한다.
New를 클릭하여 새로 만든다.
레포지토리: 하나의 프로젝트의 소스코드가 올라갈 수 있는 일종의 저장공간
Create a new repository
- 이름 설정
- 나머지 무시
- 생성 버튼 클릭
=> 저장소 생성
Commit
생성된 페이지의 레포지토리 URL을 복사한다.
VS Code의 좌측 Git 태그를 보면 수정사항을 볼 수 있다.
클릭해보면 수정한 부분도 알 수 있다.
- 버튼으로 Stage에 올린다.
Commit 메시지 작성
체크(커밋) 버튼을 눌러 커밋 진행 가능하다.
Push
터미널을 열고 다음 명령어를 통해 위에서 복사한 URL을 원격지 저장소로 등록한다.
git remote add origin {URL}다음 명령어로 Push를 진행하면 수정한 소스코드가 Git Hub에 업로드된다.
git push --set-upstream origin master(오류 발생하면 키 등록이 필요하다. 구글링으로 해결할 것.)
Push를 완료하면 Git 저장소에 프로젝트가 올라가 있음을 확인할 수 있다.
.gitignore
기본적으로
/build
/node_modules
등은 Git Hub에 업로드 되지 않도록 설정되어있다.
일반적으로 코딩을 하면서 React App을 빌드해서 실시간으로 앱을 확인하면서 코딩이 가능한데, 이를 위해서는 빌드가 되어야한다. 이런 내용이 /node_modules에 들어가 있는데, 이런 내용까지 Git Hub에 올리면 용량이 너무 커서 이런 부분은 각자의 개발환경에서 구축하고 업로드하지않겠다고 설정하는 것이다.
이런 부분을 .gitignore에서 설정하는 것이다.
다음 명령어를 통해 .gitignore 설정 또한 기본적으로 이루어 주기 때문에 매우 간단하게 react app을 구성하고 설정까지 완료할 수가 있는 것이다.
create-react-app.
.
.
강의를 통해 공부한 내용을 기록한 게시물입니다.
