2021-12-27 월요일 / 복습 즐겁게
🤍 회고
-
오늘의 도전과 배움
아침에 일찍 일어나서 하드트레이닝 조기 출석! 요즘 계속 늦게 잤는데 생활패턴을 되돌릴려고 침대에서 정말 노력했다.. 쉬엄쉬엄했지만 조금이라도 더 공부하려고 노력했고, 오늘은 머리보다 마음이 더 채워진 하루인 것 같다. -
학습하면서 궁금하거나 어려웠던 점
궁금한 건 항상 많은데 너무나도 많아서 매일 같이 주석을 달거나 메모장에 적힌채로 쌓여있다.. 뭐든 당일에 해결하는 게 최고인데 노력해야지. 그리고 토끼님을 만나서 -
내일 해보고 싶은 것들
질문 정리하고 todo mvc project 혼자 만들어보기! cypress 오늘 연습하려고 했는데 너무 피곤해서 못해가지고 내일 공식문서 보면서 test code도 스스로 짜보고 react 공식문서도 읽고, 오랫동안 이런저런 이유로 뇌가 과부하 상태라 계속 팀프로젝트를 미뤄왔는데 책임감을 가지고 차근차근 풀어봐야겠다 즐겁게.. 파이팅 ㅜㅜ🔥
.
오늘부터 다시 열심히 공부하는 습관을 들이려고 일찍 일어나서 하드트레이닝도 듣고 다른 계획도 다 수행하려 했지만,, 중간에 너무 졸려서 낮잠을 자버렸다. 공부를 안 하고 시간이 흐르면 불안해지고 기분이 별로 안 좋은데 눈이 소복이 쌓여서 정말 이뻤다:)
조금 공부하다 저녁먹고 7시에 토끼님이랑 코칭을 했는데 나는 열심히 하지도 않으면서 항상 자책하고 조급하고 불안해하면서 우울한 적이 많았는데 우선 자기 자신을 존중해라. 조급해하지 말라. 따뜻한 조언들을 많이 해주셔서 마음에 여유가 생기는 것 같다! 항상 내가 어떤 상태인지 파악하고 기록하면서 더 성숙해졌으면 좋겠다
🖤 real world 하드 트레이닝
React Hooks - useState & useEffect
-> 따로 정리하긴 좀 머리가 아프고,, 일단 간단하게 작동 방식? 원리? 공부하기!
Typesccript - Type Alias vs Interface
대부분의 경우 구분하지 않고 사용해도 괜찮지만 interface는 좀 더 넓은 개념?!
interface의 기능을 type에서 사용할 수 있고 interface는 언제나 확장 가능하지만 type은 새로운 프로퍼티를 추가하기 위해서 재선언할 수 없다. 확장 시 interface는 extends 키워드를 사용하고 type은 &를 사용! interface는 객체 타입을 생성하므로 유니온 타입, 튜플, 단순한 원시값 타입 선언의 경우 type을 이용.. 많이 찾아봤지만 글로만 봐서는 잘 모르겠고 다른 사람들의 코드를 보거나 연습하면서 익혀야 할 듯
Git commit
commit은 기능별 작은 단위로 쪼개서 올리기!! 일단 내가 무엇을 할지 명확하게 정하고 만드는 것이 중요함. 개발환경을 설정하거나 데이터를 가져오거나 변경하거나 등등.. (hompage -> home page?!)
커밋 히스토리 조회하기 - https://git-scm.com/book/ko/v2/Git%EC%9D%98-%EA%B8%B0%EC%B4%88-%EC%BB%A4%EB%B0%8B-%ED%9E%88%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%A1%B0%ED%9A%8C%ED%95%98%EA%B8%B0
💙 리액트를 다루는 기술 5장 ref: DOM에 이름 달기
// 일반 HTML
<div id='my-elem></div>- 리액트 컴포넌트 안에서도 id를 사용할 수 있지만 같은 컴포넌트가 여러 번 사용되면 unique해야하는 id가 중복되므로 특수한 경우가 아니라면 권장하지 않음. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동해서 이런 문제가 생기지 않음!
5.1 ref는 어떤 상황에서 사용해야 할까?
DOM을 직접적으로 건드려야 할 때
5.1.3 DOM을 꼭 사용해야 하는 상황
특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 요소에 그림 그리기 등
5.2 ref 사용
5.2.1 콜백 함수를 통한 ref 설정
ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것. ref를 달고자 하는 요소에 ref 라는 콜백 함수를 props로 전달
5.2.2 createRef를 통한 ref 설정
또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것
5.3 컴포넌트에 ref 달기
리액트에서는 컴포넌트에도 ref를 달 수 있음. 이 방법은 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 씀.
정리
컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용하며, 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 고려한 후 사용!
이 장에서는 클래스형 컴포넌트에 ref를 적용하는 실습을 하는데 나는 거의 함수형 컴포넌트로만 만들어봐서 간단하게 쭉 읽었다. 리액트를 약 2달 넘게 배우면서 ref를 배웠지만 써본 적이 없어서 함수형 컴포넌트에 ref를 사용하는 법과 어떤 경우에 적용하는지 찾아봐야겠다
💛 모던 자바스크립트 Deep Dive
내일..
💗 드림코딩 Git 강의
3.1 깃의 중요한 컨셉 이해하기
Git을 정확하게 이해하고 잘 활용하기 위해선 크게 3가지의 작업환경 Workflow를 이해하는 것이 중요함!
- working directory: 프로젝트의 파일들을 수정하는 작업
- untracked | traked (unmodified|modified) 로 나눌 수 있음. - staging area: 히스토리에 저장할 준비가 되어있는 파일들
- .git directory: 버전의 히스토리들
3.2 로컬 파일들 추가하기 add
//
echo hello world! > a.txt
// 현재 파일의 상태들 확인
git status
// a.txt를 staging area로 옮기기 - tracked file
git add a.txt
// 무슨 차이인지 잘 모르겠음!
git add . or git add *
// staging area -> working directory
git rm --cached <file>...
git rm --cached * // untracked3.3 절대 추가 하면 안되는 아이들 ignore
빌드 안에 부수적으로 생긴 파일들을 git에 포함하고 싶지 않을 때
echo filename > .gitignore
.gitignore
*.log
build/
build/...3.4 현재 상태 확인하기 status
https://git-scm.com/docs/git-status
// 간편하게
git status -s
// 상세하게
git status3.5 파일 비교하기 diff
https://git-scm.com/docs/git-diff
정확하게 어떤 파일의 내용이 수정되었는지 확인. working directory에 있는 변경사항들만 확인?
git diff
cat ?!
// staging area에 있는 것 확인
git diff --staged
// 스테이지 옵션과 동일
git diff --staged근데 아직 터미널로 확인하는 게 익숙하지 않고 diff는 거의 사용해보지 않아서 명령어에 익숙해지면 diff도 사용해봐야지.
