241115 TIL

• Udemy <Git & Github 실무 활용 완벽 가이드>
  • Git 스태스(Stash) 사용 관련 내용
    • 하나의 브랜치에서 작업을 하다 다른 브랜치로 옮기고, 다시 기존 브랜치로 돌아가서 파일을 수정해서 커밋하고, 생성했던 브랜치로 돌아가보자. 그 상황에서 갈라져 나온 브랜치에서 작업을 하면 두 개 브랜치는 따로 갈라진 상황이 된다.
    • 그 상황에서 갈라진 브랜치의 작업을 하던 도중 커밋을 하지 않고 갈라져 나오기 전 브랜치의 커밋 위치로 이동하려고 하면 에러가 발생한다. 보통 이런 상황에선 갈라진 브랜치에서 생긴 변경 사항을 기존 커밋의 코드에 덮어씌우는 형태로 이동하는데, 그 과정에서 충돌이 발생할 수 있어 Git이 먼저 에러를 발생시킨 거다.
    • 이런 상황에서 git stash(git stash save의 축약형) 명령어를 사용할 수 있다. stash는 임시 저장 같은 거다. 커밋을 하지 않으면 다른 커밋으로 이동할 수 없는 상황에서, 현재 개발 중인 코드를 커밋하고 싶지 않을 때 스태시를 사용하면 된다.
    • git stash로 임시 저장한 변경 사항은 git stash pop으로 가져올 수 있다. pop은 스태시 영역에 있는 변경 사항을 삭제하면서 가져오는데, 보존하면서 복원하고 싶으면 git stash apply를 사용하면 된다(하지만, 많은 경우 git stash pop을 사용한다).
    • stash는 여러 번 할 수 있다. git stash list를 사용하면 stash 정보를 볼 수 있다. git stash apply stash@{num}을 실행하면 원하는 스태시로 코드를 되돌릴 수 있다.
    • 보통은 stash에 여러 항목을 넣지 않고, 하나의 stash만 추가했다 삭제하는 정도로만 사용한다. 많이 사용하면 헷갈릴 수 있으니 주의하자.
• TODO APP 만들기 with React
  • CSS에서 상위 부모 요소를 display: flex로 만들어주고, 하위 요소에서 flex: 1로 설정해 주면 하위에 있는 다른 요소의 크기를 제외한 영역을 꽉 차게 영역을 차지해 줄 수 있다.
  • 생성자 함수 Date를 new Date()로 사용해서 Date 객체를 만들어주면 생성된 시점의 시간을 값으로 받을 수 있다. 시간은 ms 단위로 표시되며, 1970년 1월 1일 0시 0분 0초 대비 경과된 시간을 받을 수 있다.
  • new Date().toDateString(), new Date().toLocaleDateString() 메서드를 사용하면 원하는 형태로 날짜 데이터를 받아올 수 있다.
  • input 요소가 포커스 됐을 때의 CSS는 input:focus라는 가상 선택자를 사용하면 된다. outline: none이라고 하면 요소 밖에 생기는 하이라이트 outline을 없앨 수 있고, 필요하면 다른 스타일로 지정할 수도 있다.
  • n개 이상의 정보를 담아야 하는 자료 구조를 사용할 땐 상황에 맞게 활용해야 하는데, 배열 메서드 사용이 필요한 경우엔 배열을 쓰는 게 좋지만 그게 아니면 객체가 조금 더 좋은 것 같다. 이유는, 배열을 사용하면 배열 안의 값에 접근할 때 인덱스를 활용해야 하는데, 인덱스는 아무 의미도 갖지 못하기 때문이다. person[0]이라고 하면 0번 인덱스에 있는 값이 무엇인지 알 수 없지만, person.name이라고 하면 값이 '이름'이라는 것이 명확하게 나타난다. 코드를 최대한 명시적으로, 사람이 읽고 이해하기 쉽게 작성하도록 노력하자.
  • input 창에 onChange 이벤트 핸들러를 추가하면 사용자가 입력할 때마다 이벤트가 발생하게 되고, 그때마다 state를 변경해서 리렌더를 발생시키면 성능이 많이 나빠질 수 있다. 이럴 경우 디바운스(Debounce)를 사용하면 유용하다. 디바운스는 마지막 이벤트 발생 후 일정 시간 이후에 작업이 처리될 수 있도록 해주는 기법을 의미한다. 만약에 이벤트 발생 후 일정 시간이 경과되기 전에 새로운 이벤트가 발생하면 경과 시간을 초기화한다. 즉 연속된 이벤트에 대해 가장 마지막 이벤트 이후에 작업을 처리하도록 해주기 때문에 여러 차례 리렌더링 되는 걸 막아줄 수 있다.
• Udemy <한 입 크기로 잘라먹는 리액트>
  • 컴포넌트마다 CSS 파일을 따로 만들어서 UI를 지정하면 컴포넌트의 변경 사항이나 에러를 쉽게 추적할 수 있다.
  • 배열을 렌더링 할 땐 고유한 key를 추가해줘야 한다. key가 없으면 리액트는 에러를 뱉는다.

 

React를 공부해 보니 확실히 A라는 걸 구현하는 데 있어 여러 복잡도가 줄어드는 게 느껴진다. 확실히 왜 이런 기술이 등장했고 많은 사람들이 사랑하는지 조금은 알 것 같다. 조금 더 차근차근, 깊고 꼼꼼하게 공부하면서 활용도를 더 높여봐야겠다.