1일차 / React , Git

Day 1

React

첫날에는 React를 설치했다.
React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구로, 페이스북, 인스타그램, 에어비앤비 등이 있다.

수업에 앞서 Node.js(+npm), Yarn을 설치하고
Emotion, Apollo-Client, Graphql, Ant-Design, Material-Ui, Axios를 함께 설치했다.

리눅스 명령어들을 배웠다.
1. cd: change directory.
2. ls (-al): list
3. mkdir: make directory
4. rm: remove
cd와 yarn dev를 많이 활용해서 두 명령어에는 많이 익숙해졌다.
ls -al은 하위폴더의 git에 push할 때의 충돌을 방지하기 위해 .git폴더 유무를 확인할 때 사용했다.

React의 import/export

우리가 만드는 소스코드는 주로 HTML, CSS, JAVASCRIPT이다.
이 때, 하나의 소스코드에 모든 내용을 코딩하면 너무 복잡해지므로
HTML, CSS, JAVASCRIPT를 작성하는 소스코드 파일을 각 각 따로 만들고, 필요에 따라 서로 불러와서 사용하게 된다.

React의 HTML(JSX)

JSX는 React에서 사용하는 React전용 HTML이다.

속성값의 대소문자 정도 차이 등을 제외하곤 거의 비슷하다.

React의 CSS(CSS-IN-JS) - emotion

CSS를 JS상수에 저장해서 사용하는 방법이다.
오른쪽은 동일한 CSS를 Title이란 상수에 저장한 것.

이렇게 저장한 상수는 마치 HTML 태그처럼 사용할 수 있다.

태그의 의미를 부여할 수 있어서 태그만 봐도 결과물의 예상이 가고,
코드의 길이가 짧아져 읽기 쉬운 코드가 된다.

Git과 Github

Git은 소스코드 저장을 도와주는 프로그램,
Github는 Git이라는 프로그램으로 저장한 파일들이 실제로 저장되는 장소이다.
내가 작성한 파일들을 Git을 사용하여 Github에 저장한다.

Git Push

1) Github에 repository를 생성
2) vscode를 사용해 프로젝트 폴더 터미널 내 git init 을 입력, 폴더 내 git 저장소 만들기 (.git폴더 확인, 충돌을 방지하기 위해 하위폴더 .git파일 삭제)
3) git remote add origin (나의 저장소 주소)
4) git add .
5) git commit -m "커밋 메세지"
6) git push origin master
** git remote -v : 경로 확인

Git Pull

1) git clone
2) git pull origin master (최신화)