TIL. Sass, Router, Git 초기세팅 - 8/5

1. Sass

- Sass 란 무엇일까?

Sass는 css의 상위에 있는 메타언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 일종의 CSS 전처리기(pre-processor)이다.

큰 특징은 위에서도 나와있지만 이런것들이 있습니다.

• 변수 활용
• Nesting
• &연산자

Nesting이나 변수 활용으로 가독성을 높이고 자주 쓰이는 중복되는 것들을 변수하나로 편하게 재사용할 수 있게 해주고 Nesting을 통해서 여러 component들과 routing 될때 중복되는 class명으로 인한 오류를 없앨 수 있습니다.

확장자는 .scss입니다.

명령어

npm install node-sass --save

2. Router

- Router 란 무엇일까?

Router를 알기 위해서는 먼저 SPA를 알아야 합니다.

SPA(Single Page Application)

• 페이지를 로딩할때마다 서버에서 리소스를 가져와서 렌더링하지 않는 방식.
  뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 필요한 데이터만 서버에서 받아온다.

하지만 여러 화면들을 만들려면 주소도 여러개가 있어야 하는데, 주소에 따라 다른 뷰를 보여주는 것을 라우팅이라고 합니다.

React-router

• 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.
  또한 서버 사이드 렌더링도 도와준다.
  자바스크립트 파일을 이용하여 페이지에서 기존 컴포넌트를 언마운트 시키고 다른 컴포넌트를 마운트 함.
  예를 들면, 웹의 헤더 컴포넌트처럼 모든 페이지에서 존재하는 컴포넌트의 경우 페이지가 바뀌어도 처음부터 렌더링 할 필요 없이 그대로 유지된다.

즉 React에서 Router는 SPA 방식에서 여러개의 Component들을 주소값을 각각 세팅해서 코드에 따라 언마운트와 마운트를 시켜서 다른 뷰를 보여주게 해줍니다.

- react-router 설치

npm install react-router-dom --save

- react-router 사용

ReactDOM.render(, document.getElementById('root'));

- Link와 withRouter()

• <Link></Link>는 주로 Navbar처럼 클릭하면 바로 이동되길 원하는 곳에 사용합니다.
• withRouter()는 주로 조건이 있는 곳에 사용하면 좋습니다.

3. Git 초기 세팅

이제 팀 프로젝트에 들어가게 되면 팀별로 Git 초기 세팅을 해야합니다.

- 팀 별 master branch 세팅 후 push

• 먼저 클론 받은 디렉토리를 git init 합니다.

• git remote origin add "주소" 이렇게 원격 저장소와 연결을 시켜줍니다.

• 팀 별로 초기 세팅 값에 맞춰서 각 master branch를 세팅하고 acp(add, commit, push)를 해줍니다.

- 팀원들 각각 clone 및 branch 만들기

• git clone "주소" 를 통해서 master branch를 클론합니다.

• npm install 여기서 이걸 하는 이유는 master가 사용한 package를 각자의 클론 디렉토리에 설치가 되어있지 않을 수 있기 때문에 해줘야 합니다.
  (react-router, sass 등)

• 이제 각자 git branch feature/yeheum 으로 branch를 만듭니다.

• git checkout branch feature/yeheum 으로 현 branch위치를 옮깁니다.

• 그리고 자유롭게 수정을 합시다.

- 주의 사항

각자의 branch에서 push를 할때 오류가 날 수가 있습니다.
이건 master branch가 변경되어서 충돌이 나는 것입니다.

그렇기 때문에 저희는 먼저 해야 할 일들이 있습니다.

• git checkout master로 현 위치를 이동합니다.

• git pull origin master로 원격 저장소에 있는 master branch를 로컬 저장소로 pull합니다.

• checkout 으로 각자의 브랜치로 위치를 이동합니다.

• git merge master를 통해서 머지를 하고 수정사항을 확인합니다.

• 그리고 다시 acp를 하면 정상적으로 잘 작동합니다.
  (이걸 하는 사이에 다른 팀원이 마스터를 수정해버리면 또 오류가 난다는 우연이...)

• 이제 PR을 통해서 merge해 달라고 요청을 하면 끝!