2021_11_18_TIL

원격 저장소에서 로컬 저장소로 소스를 가져오는 명령어

pull fetch

fetch 와 pull 의 차이는 가져온 소스를 merge 하느냐 안하느냐의 차이

 

 

 

 

 

 

pull과 fetch의 차이는 무엇일까?

 

git pull: git remote 명령을 통해 서로 연결된 원격 저장소의 최신 내용을 로컬 저장소로 가져오면서 병합한다.  git push의 반대 성격이라 생각하면 된다.
git fetch: 로컬 저장소와 원격 저장소의 변경 사항이 다를 때 이를 비교 대조하고 git merge 명령어와 함께 최신 데이터를 반영하거나 충돌 문제 등을 해결한다. 

 

 

일반적으로 브랜치를 만들지 않고 혼자서만 작업하면서  Git과 Github를 사용한다면 pull과 fetch를 사용할 일이 거의 없을 것이다.

하지만 대체적으로 Git을 사용할 때는 같이 협업하는 사람과 같이 사용할 것이다. 

 

협업을 하다 보면 내가 로컬에서 작업하고 있을 때, 같은 팀원이 원격 저장소에 먼저 변경 사항을 커밋하고 push를 하게 되는 상황은 반드시 있을 것이다. 그러면 원격 저장소의 업데이트된 내용이 나의 로컬저장소에는 최신화가 되어있지 않기 때문에 이럴 때 pull과 fetch를 사용하면 된다.

 

 

 

1. git fetch란?

페치(fetch)는 원격 저장소의 커밋들을 로컬 저장소로 가져온다. 그리고 자동으로 병합(Merge)를 해주지 않기 때문에 본인이 직접 확인을 한 후에 병합(Merge)하는 과정을 거쳐야한다. 

 

 

 

2. git pull이란?

git pull이란 원격 저장소의 정보를 가져오면서 자동으로 로컬 브랜치에 병합(Merge)까지 수행해주는 명령어이다. 

 

하지만 pull을 이용해서 원격 저장소의 커밋을 가져오게 되면 자동으로 병합되기 때문에 어떤 내용이 병합되면서 바뀌는지 알기가 힘들다는 단점이 있다.

 

 

 

https://sabarada.tistory.com/75

https://devlog-wjdrbs96.tistory.com/236

---

 

 

 

ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함하고 있다.

그러나 Prettier는 자동으로 코드의 스타일을 맞춰주는 보다 강력한 기능을 지원하고 있기 때문에 빈번히 ESLint와 함께 사용되고 있다.

때문에 일반적으로 Lintting 기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용한다.

 

 

린팅은 간단하게는 단순히 함수 뒤에 띄어쓰기를 안했다던지 함수 인자에 띄어쓰기를 생략했다던지 할 때 강제로 띄어쓰기를 넣어주거나 삭제해주거나 등의 일을 하면서 코드의 포멧을 일정하게 잡아준다.

 

 

 

 

린팅(Linting)을 사용하는 이유?

 

// 표준 포멧
function MyFunction (a, b, c) {
  // do somthing
}

// 개발자들 별로 다른 스타일들
function MyFunction(a, b, c) { // Function 뒤에 띄어쓰기 없음
function MyFunction (a,b,c) { // 인자간 띄어쓰기 없음
function MyFunction(a, b, c){ // 함수 시작 앞에 띄어쓰기 없음
function MyFunction( a, b, c) { // 첫번째 인자에 실수로 띄어쓰기 들어감

 

하나의 함수를 작성하더라도 다양한 형태로 코드를 작성할 수 있고, 작성 형식이 다르다보면 차후 해당 소스를 찾아볼때 검색에서 걸리지 않거나 여러 형태로 검색을 여러 번 해야 합니다. 만약 해당 함수에 버그가 발견되어 검색을 한다면 개발자들이 의도 또는 실수할 수 있는 모든 형태로 검색해봐야 합니다. 이는 유지보수 시 엄청난 소모가 일어나고 실수를 유발합니다. 예전에는 이런 내용들을 코딩 컨벤션(Coding Convention)이라는 이름으로 문서로 작성하고 신입사원들이 입사를 하면 컨벤션 먼저 숙지하고 따르는 것이 일상이었으나, 사람은 언제든 실수를 할 수 있기 때문에 이제는 린팅(Linting)이라는 기계적 도구를 이용해서 거의 대부분의 실수를 잡아 내고 일관된 포멧을 유지합니다.

 

 

이해하기 쉽게 띄어쓰기를 예로 들었지만 다른 스타일링과 의도하지 않고 의심스러운 오류나 버그 등을 정적인 상태로 잡아내는 것도 가능합니다.

 

 

출처: 

https://tech.weperson.com/wedev/frontend/linting/#%E1%84%85%E1%85%B5%E1%86%AB%E1%84%90%E1%85%B5%E1%86%BC-linting-%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

 

 

 

 

---

문득 import 문에서 궁금한 점이 생겼다.

어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 적어준다는 것이다.

 

 

그래서 찾아봤다

 

 

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import { TodoProvider } from './TodoContext';

 

 

 

 

이유는 export 방식의 차이이다.

 

모듈을 불러올 때 import라고 써주는 것처럼, 

모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야한다. 

 

 

export default TodoTemplate;

 

export TodoContext;

 

export해줄때 default를 붙인 TodoTemplate의 경우 중괄호없이 그냥 import하지만

default없이 export해준 TodoContext의 경우에는 중괄호 안에 담아 import해주면 되는 것이다

 

 

./src/App.js
Attempted import error: './TodoContext' does not contain a default export (imported as 'TodoProvider').

 

잘못할 경우 이런 에러가 발생한다

 

 

---

 

한 팀원이 초기세팅 작업을 완료한 후 다음과 같이 진행한다.

 

// 초기세팅 작업 완료 후

// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."

// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin https://github.com/.....(해당 repo 주소 입력)

// 연동된 repository로 push 해주세요.
git push origin master

// remote master에 초기세팅 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작하면 됩니다.


// "초기세팅 완료 > push 후에 멘토 검사가 진행됩니다. Ok 사인 받은 후 다른 분들 git clone 진행해주세요"
git clone https://github.com/.....(해당 repo 주소 입력)
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/jihyun

 

 

---

• reset.scss - default css 속성 초기화
• common.scss - 모든 페이지에 공통적으로 적용될 css 속성들
• variables.scss - 함께 쓰는 공통 css 속성(ex. theme color) 

 

 

// variables.scss 파일 
@mixin flexCenter { 
	display: flex; 
    	align-items: center; 
    	justify-content: center; 
}

 

// variables.scss 파일에서 정의한 변수들을 사용하는 scss 파일
@import '../variables.scss'

.logo {
	@include flexCenter;
}

 

 

 

 

 

 

---

리액트는 UI 만 담당하는 라이브러리이다.

라우터랑 SCSS 같이 배우는 이유: 라우터에 모이면서 스타일이 공유되서... CSS 파일만 썼을 때는 다른 태그 영역에 침범된다.


SCSS 장점: 네스팅 기능을 통해서 스타일 안겹치게 하기 위해


(로그인이 유효한지 ) 로직적으로 구현할 수 있는게 useNavigate 이다.


a 태그는 새로고침되는데 이때 state 변수도 초기화된다.


라우터에 페이지들을 추가



로컬은 내 컴퓨터에서 작업하는 것
리모트는 깃헙

직접적으로 remote 를 접근할 수 없다.
클론이라는 키워드를 통해서 코드를 받아온다.
그다음 브랜치를 생성한다.그다음 체크아웃을 통해 자기 브랜치로 이동한다.

git pull 받기 전에 git checkout 마스터로 내 위치로 바꾼 후에 git pull origin
내 로컬 마스터 업데이트 시키면 된다.


pull 할때 master 브랜치로 옮겨야 한다고 하셨나요? 네



git remote add origin https:// .......
git push origin master


npm install (node.modules, package.json 이 install)
그 후 각자 브랜치를 파서 진행하자




다른 사람이 git push 하게 되면 일단 git pull 로 받고 git pull checkout feature/main




<a 에서만 작업 안하면 됨>
1. git branch a
2. 리드미 파일 변경
3. git add . 
4. git commit -m "readme"
5. git push origin a
6. git branch -D a
7. git push origin --delete b



작업상황 확인 명령 -git reflog
  



git pull origin feature/nav



복구 시점 명령어
git reset --soft 시점