node.js
node.js는 웹 페이지 밖, 로컬에서도 자바스크립트를 실행할 수 있는 실행기이다.
Javascript 런타임 매니저
런타임이란, 프로그램이 실행되고 있는 환경을 의미한다.
Javascript 런타임 매니저에는 npm, yarn이 있다.
런타임 매니저는 node.js 업데이트, 삭제 등 node.js를 관리하는 관리 툴이다.
1) npm (node package manager)
자바스크립트로 만든 기능들을 관리, 무료 공유하는 사이트이다.
사진 업로드, sns기능, 팔로우 기능 등 여러 기능들이 업로드 되어있다.
패키지 설치 시 의존하는 다른 패키지를 자동으로 실행하며, 중복설치가 가능하다.
기능을 다운로드 하려면 node.js와 npm 설치가 필요하다.
2) yarn
페이스북이 npm의 빠른 다운로드를 위해 npm을 개조하여 만든 것이다.
yarn이 npm보다 속도가 더 빠르기 때문에 실제로는 npm보다 yarn을 사용한다.
yarn.lock, package.json을 읽어 명시된 패키지만 설치한다.
npm과 달리 중복설치가 불가능하다.
CLI 명령어
-
cp : 폴더 복사
폴더 안에 있는 모든 내용을 같이 복사해주어야 한다.
cp -R 복사할 폴더 새로운폴더 이름 -
mv : 폴더 이동
mv 이동할 폴더 이동시킬 폴더 -
pwd : 현재 폴더 위치확인
-
cd : 현재 폴더 위치변경
-
../ : 상위 폴더로 이동
-
rm : 폴더 삭제
rm -rf 폴더이름
GUI : 그림으로 작동시키는 것. 컴퓨터에서 바탕화면이나 폴더로 보이는 부분 작동시키는 것을 의미한다.
CLI (Command line interface) : 터미널에서 명령어로 작동시키는 것
React 폴더 구조
보일러 플레이트
react 초기 셋팅이 완료된 폴더 구조를 보일러 플레이트라고 한다.
package.json
package.json은 제품 설명서와 같은 역할을 하며, 해당 프로젝트 폴더에만 존재한다.
npm, yarn은 package.json을 읽고 패키지를 설치한다.
패키지는 package.json이 존재하는 폴더에 설치된다. (node_modules)
폴더가 변경되거나 새로 git clone할때마다 패키지 install이 필요하다. (yarn install)
app.js
모든 페이지에 공통으로 적용될 설정파일이다.
next.js
react를 편리하게 사용하기 위한 react 기반 프레임워크이다.
라이브러리 : 기능 1개 (도구)
프레임워크 : 여러가지 기능들을 묶어놓은 것 (도구모음)
JSX
JSX는 React에서 사용하는 React 전용 Html이다.
📌 웹브라우저는 HTML, CSS, JAVASCRIPT 만 읽을 수 있다.
React에서 JSX를 사용하지만, 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행된다.
CSS-IN-JS
css를 javascript 상수에 저장하여 태그로 사용하는 방법이다.
태그에 의미를 부여할 수 있어서 알아보기 쉽고, 코드 길이가 짧아지고, 코드 재사용성이 증가한다는 장점이 있다.
사용방법
터미널에서 설치하려는 폴더로 이동한 후, yarn add @emotion/react 해준다.
emotion에서 styled를 import해준 후에 상수에 담은 css 변수를 export 해준다.
import styled from "@emotion/styled";
export const MyEmail = styled.span`
color: red;
`;Git
git은 소스코드 저장을 도와주는 분산 버전 관리 시스템이다.
git을 사용하여 프로그램을 저장하면, 누가 언제 어떤 글자 또는 코드를 변경했는지 알 수 있다.
또한, 중요한 코드를 실수로 잘못 바꾼 경우 되돌리기도 가능하다.
따라서, 실무에서는 Git을 통해 파일을 저장한다.
1) repository
폴더, 파일 등을 저장해 두는 공간이며, 변경 이력이 전부 저장된다.
- 로컬 저장소 : 내 pc에 저장되는 개인 저장소
- 원격 저장소 : 파일이 원격 서버/원격 컴퓨터에서 관리되며 여러 사람이 함께 공유하기 위한 저장소
2) branch
git log --all --oneline --graph
- git switch [브랜치 이름] : 해당 브랜치로 변경. 마지막 버전이 기록된다.
- git branch : 브랜치 목록 확인
- git branch [브랜치 이름] : 브랜치 생성
- git checkout [브랜치 이름] : 브랜치 이동
- git branch -d [브랜치 이름] : 브랜치 삭제
작업이 완료되면 원래의 소스코드와 merge 하여 하나로 만든다.
3) stage
임시 저장 공간에 저장하는 것을 스테이징한다고 표현한다.
스테이징 상태에서는 취소가 가능하지만, commit을 한 후에는 취소가 불가능하다.
📌 node modules는 yarn install로 재설치가 가능하므로 commit할때 삭제해 주는 것이 좋다.
4) merge
각 branch에서 작업한 코드들을 merge할 수 있다.
- 3-way merge 방법
master 브랜치에서 git merge dev 입력 (merge할때에도 커밋 메세지를 입력하여 기록한다.)
ctrl + x로 끝낸다.
📌 git에서 merge할 경우 충돌이 발생하게 되는데, 현재 버전과 새로운 버전 중 선택을 할 수 있다.(선택받지 못한 버전도 저장된다.)
5) clone
다른 사용자가 github에 올린 코드들을 복사해올 수 있다.
git clone (복사하려는 repository 주소)
📌 git clone후, 업데이트 된 부분을 받아오기 위해서는 git pull origin master를 해준다.
이때, 내 컴퓨터에서 clone후 변경한 부분이 있을 경우 pull이 되지 않는다.
이를 해결하기 위해서는,
git stash -> 임시저장
git stash list -> 임시저장 확인
git pull origin master
git stash pop stash@{번호} -> list에서 나온 번호로 임시저장 가져오기
순서로 진행해 준다.
