React

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

React의 폴더구조

초기셋팅이 완료된 폴더를 보일러 플레이트 라고 한다.

• node_modules : 라이브러리/프레임워크 저장소
• pages : 프론트엔드의 페이지 화면들
• public : 사진, 아이콘 등
• styles : CSS파일
• gitignore : git에서 제외할 파일
• package.json : 기본 매뉴얼
• README.md : 상세 설명서
• yarn.lock : 버전 잠금 파일

---

1) pages : 페이지 화면들을 모아놓은 폴더
2) package.json : 핵심이 되는 파일, 제품설명서와 같은 역할

프로젝트에 필요한 정보를 담은 카탈로그이며, 해당 프로젝트 폴더에만 존재한다.
패키지는 Package.json이 존재하는 폴더에 설치된다 → (node_modules)
폴더가 변경되거나 새로 git clone할 때 마다 패키지 install 필요 → yarn install

---

React의 HTML(JSX)

JSX는 React에서 사용하는 React 전용 HTML
React에서는 HTML 대신 JSX를 사용한다.

❗️웹 브라우저는 HTML, CSS, JS만 읽을 수 있지만!
소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환하여 실행된다!

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

CSS-IN-JS는 CSS를 JS상수에 저장해서 사용하는 방법

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

CSS-IN-JS의 장점

1) 태그에 의미를 부여할 수 있어서 태그만 봐도 결과물이 예상이 간다.
2) className을 입력하지 않아도 되기 때문에, 가독성이 좋은 코드가 된다.

ETC지식..

• GUI : 그래픽 유저 인터페이스, 그래픽으로 조작
• CLI : 커맨드 라인 인터페이스, 명령어 통해서 작동/조작
• Loop back : 현재 사용중인 컴퓨터 자신을 스스로 서버로 만들고 요청과 응답을 내부적으로 처리하는 것
• localhost:3000
  3000은 "(포트)"라고 부르는데, 컴퓨터가 서비스를 송수신 할 때 효율적으로 관리하기 위해 포트를 분리하여 사용한다.

git / github
git

Git 저장소 : 폴더, 파일 등을 저장해 두는 공간
폴더와 파일이 변경 이력 별로 구분되어 저장됨
같은 파일이라도 내용이 다르면 변경된 것으로 인식하여 변경 사항 별로 구분해 저장할 수 있음

로컬 저장소 : 내 PC에 파일이 저장되는 개인 전용 저장소

원격 저장소 : 파일이 원격 서버/원격 컴퓨터에서 관리되며, 여러사람이 함께 공유하기 위한 저장소

git init : 새로운 git 저장소 생성
git clone : 원격 저장소 복제
commit : 폴더, 파일의 변경 사항을 기록하는 것(시간 순으로 기록됨)

branch : 동일한 코드를 기반으로 다른 작업을 할 때 branch를 생성하여 독립적인 작업을 진행할 수 있음
작업이 완료되면 원래의 소스코드와 병합(merge)하여 하나로 만듬
⭐️주기적으로 commit 해주기!!

Stage : 임시 저장 공간(index)에 저장하는 것을 스테이징 한다고 표현
작업코드 => 임시저장 => 저장확정 => 업로드완료
(Staging) (Commit)
한번 커밋 하고 나면 되돌릴 수 없기 때문에 스테이징 단계를 거친다.