2019-03-03 TIL

2019-03-03

TIL

github의 원본 repo의 새로생긴 특정 branch를 로컬로 가져오는 방법

upstream repository는 내가 fork해온 원본 repo를 말한다. git remote add upstream “주소” 해서 리모트로 추가해놓고 git remote update (이건 필수인지 잘 모르겠지만 일단 명령어 쳐서 업데이트 하고 시작했다.) git checkout -t “upstream/브랜치명” 으로 동명의 새 브랜치를 만들면서 내용을 가져온다. (필요시 내 github repo에 push해도 된다. 리커전 레퍼런스 코드를 저장해놓고 싶어서 위 짓을 했고, push도 해놨다.)

git checkout “upstream/브랜치명” 하면 임시로 가져온다. 소스를 보고 변경할 수 있지만, 변경사항을 commit이나 push할 수 없다고 한다.

pull = fetch + merge merge를 잘못해서 변경을 취소해야 한다면 방법이 있다.

  1. merge 중 충돌로 중단된 경우 : git reset —hard HEAD 로 직전 상태로 돌아갈 수 있다.
  2. merge가 완료된 경우 : git reset —hard ORIGHEAD (ORIGHEAD는 병합 전을 가리키는 참조이름)

React

[리액트 도움닫기 웹북]

HMR

어플리케이션 컴포넌트(<App />)를 렌더하는 .js파일에 아래 코드를 넣으면 브라우저가 새로고침되지 않고 브라우저 내 어플리케이션이 재실행된다. 변경사항이 반영된다.

// Hot Module Replacement (HMR)
if (module.hot) {
  module.hot.accept();
}

key

key값을 배열의 인덱스로 주면 새로 렌더될때마다 값이 새로 배정된다. 순서가 바뀌거나 중간 엔트리가 삭제되는 경우 리액트가 식별할 수 없다. 아마도 각 항목을 정확히 가리키는 값이 들어가야 할 것 같다.

관련된 블로그 글-예제포함

반복해 생성되는(복붙되는)컴포넌트는 서로를 구분할 수단이 필요한 것이다. key가 각각의 고유 id고, 안에 들어간 내용을 그 key에 value로 저장한다고 생각하면 될거같다. (key:value pair). 그래서 배열 인덱스를 key로 주면, 배열의 맨 앞에 새 오브젝트가 들어왔을때, key:0인 컴포넌트에 {“0”: “내용1”}을 넣어서, 새로 렌더됐을때 첫칸에 “내용1”이 들어간다. 반면 key를 고유값을 주면 이전상태에서 {“고유1”:“내용1”}이었던 기억대로, 다음 렌더시 key가 “고유1”인 컴포넌트에 “내용1”을 넣는다. 새로 추가한 칸은 다른 키이름”고유2”를 가지게 되니까 들어가는 내용이 없다.

클로저 함수의 인자에 대해

var f = function (a, b, ...argOuter) {
  var privateA = a;
  var privateB = b;
  return function(...argInner) {
    console.log(privateA, a, privateB, b, ...argOuter, ...argInner, arguments);
  }
}
var ff = f(1, 2, "out");
ff("in"); // 1 1 2 2 "out" "in" Arguments ["in", callee: (...), Symbol(Symbol.iterator): ƒ]

리턴된 클로저 함수인 ff함수에서 모든 변수에 접근 가능하며, arguments 키워드는 자신의 스코프의 것을 참조한다.

var f = function (a, b, ...argOuter) {
  var privateA = a;
  var privateB = b;
  return (...argInner) => {
    console.log(privateA, a, privateB, b, ...argOuter, ...argInner, arguments);
  }
}
var ff = f(1, 2, "out");
ff("in"); // 1 1 2 2 "out" "in" Arguments(3) [1, 2, "out", callee: (...), Symbol(Symbol.iterator): ƒ]

동일한 코드지만 클로저 함수를 arrow function으로 선언했다. arrow function은 자신만의 실행컨텍스트를 만들지 않으며, arguments키워드도 갖지 않으므로, 외부함수의 것을 참조하는 것을 알 수 있다.


Minchang Kim
Minchang Kim
웹/앱 개발자 김민창입니다! 좋은 하루 되세요!