React는 javascript를 더 효율적으로 사용하기 위해 페이스북에서 만든 도구이다.
웹서비스를 실행시키려면 무조건 html, css, javascript가 있어야 한다.
자바스크립트를 웹 브라우저가 아닌 로컬 컴퓨터에서 바로 실행시킬 수 있게끔 실행시켜주는 도구가 node.js이다.
npmjs.com은 node.js를 기반으로 실행될 수 있는 패키지들을 모아놓은 사이트이다.
이런 것들을 다운로드 받을 수 있게 해주는 패키지 매니저가 npm이고 node.js를 설치하면 같이 설치된다.
yarn이라는 페이스북이 만든 속도가 더 빠른 패키지 매니저도 있다.
설치를 하기 위해서는 기존의 설치 방식인 마우스로 클릭해서 설치하는 GUI와 터미널에 입력해 설치하는 CLI 두 가지 방법이 있다.
프로젝트를 설치하면 초기 셋팅이 완료된 폴더들이 생기는데 이 폴더의 구조를 보일러 플레이트(Boilerplate)라고 한다.
package.json은 설치했던 목록 히스토리이고, 실제로 설치된 소스들은 node_modules에 들어있다.
React에서는 html, css 대신 JSX라는 문법을 사용하는데 React 전용 HTML이다.
html, css, javascript를 하나의 jsx파일에 합친다.
css 대신 emotion을 사용하는데 코드가 간결해져 읽기 쉽다는 장점이 있고, div를 사용했을 때와 다르게 태그에 의미를 부여해줄 수 있다.
그리고 한 번 만들어둔 코드를 import해서 불러올 수 있어 코드의 재사용성이 증가된다.
import styles from "(파일주소)"로 불러오고
export default로 내보내줄 수 있다.
package.json은 해당하는 프로젝트 폴더에만 존재한다. npm, yarn은 설치 목록 히스토리를 보여주는 이 package.json을 읽고 패키지 설치를 한다.
폴더가 변경되거나 새로 git clone할 때마다 패키지 설치를 해주어야 한다.
이미 저장되어 있는데 git init을 하면 git 저장소가 중복되며 충돌이 일어나 하위 폴더가 사라지기 때문에 git log로 이 저장소에 설치가 되어있는지 확인해주어야 한다.
동일한 코드를 기반으로 다른 작업을 할 때 branch를 생성해 독립적인 작업을 진행할 수 있다.
자동배포 시스템이 있어 master나 main 브랜치가 있는데 이 곳에 서비스가 업데이트되면 바로 반영이 된다.
완성되지 않은 서비스일 경우에는 위험하기 때문에 Dev, Feat에서 작업하고 나중에 기존의 소스코드와 merge시켜준다.
임시저장공간(index)에 저장하는 것을 staging한다고 한다.
스테이징을 거치는 이유는 한 번 git commit하고 나면 이전 상태로 돌아가기 어려워서, commit을 함부로 하지 않기 위해 한 번 더 확인하는 것이다.
git switch master로 이동하면 dev 브랜치에서 작업했던 내용들이 화면에서 사라진다.
git merge dev를 입력해서 코드를 합친다.
만약 터미널에 이상한 게 뜨면 ctrl + x 눌러주면 된다.
<git merge 방식>
- fast-forward
기록 관리를 위해 3-way merge 해야 할 경우에 git merge --no --ff를 입력해주면 된다. - rebase
브랜치의 시작점을 바꾸는 방법.
강제로 fast-forward 한 것과 같다고 볼 수 있다. - squash
병합 전 브랜치와의 연결을 끊고 코드만 새 브랜치 안으로 이동시켜준다.
git merge --squash dev를 입력하면 된다.
이 방법은 지금은 쓸 일 없고 그냥 알아두기만..
