오늘 일기
엘리 드림코딩 react youtube clone 강의를 듣는 중이다
진짜 설명 깨알로 하는 것도 너무 좋고,, 지금 보는 시점에서 강의가 1년정도 지난 강의인데도 너무 좋다. 확실히 시작할 때 듣기 좋은 강의(아마 처음부터 이거 했으면 어렵긴 했을 듯)
근데 조금 아쉬운 건 react 강의만 하다보니 redux가 없다... 상태관리 훅을 나중에 하실 지는 모르겠는데..
redux는 아쉬운대로 스파르타코딩클럽 강의를 들어야 하나 싶다.
당장 다음주부터 레슨을 받게 되는데 기본적으로 그런 지식은 있어야 하지 싶어서.
일단 내일 유튜브클론까지 듣고 redux 강의를 들어보자.
-
알고리즘 / 자료구조
강의를 사야하나... 고민.
일단 그 블로그에 정리되어 있던 문제들 그거 실버 정도만이라도 풀어보자 3월전까지!! 너무 무리하지 말기.. -
기술 면접 대비
대비 겸 이론 공부할 겸
JS 개념, React 개념, 네트워크 / 브라우저 등등
월 수 목 금 스터디 이외에도 가능하면 하루에 하나씩 알아봐보자.
오늘 배운 것
git
git 처음 push 할 때 항상 까먹어서 쳐본다 ㅋㅋㅋㅋㅋㅋㅋ
- git 생성
git init - github 에서 repo 생성
repo 생성하면 git 명령어들 다 알려준다.ㅋㅋ
나는 근데 대충 - git push
git remote add origin [repo주소]
git add .
git commit -m "commit message"
git push origin main
이런 식으로 한다.
추가로, 작년?부터 BLM movement 때문이었는지는 모르겠지만, 어쨌든 흑인 인권과 관련하여 default branch를 master라고 하지 않고 main으로 바꾸었다.
그런데 이제 local에서는 master로 되어 있는 것 같고, 만약 하던대로 push 해버리면 github에서 pull request가 떠버린다. (main에는 아무것도 없어 merge 할 수도 없음)
그래서 올리기 전에
git branch -M main
혹시 모르니까
git status
or
git checkout main
이후
git push -u origin main
으로 한다.
이제, 커밋 메세지도 조금 더 신경 써야겠다. 멘토님이 너무 짧다고 하셨으니.. 그래도 예전 커밋들 다 적어놓은 게 어디야... 진짜 클날뻔..
postCSS
CSS 전처리기 중 하나.
모듈화와 다양한 플러그인을 가진 것이 장점이다.
CRA에 기본적으로 포함되어 있을 정도로 사용률이 높다.
style을 줄 때,
만약 각각의 컴포넌트마다 같은 클래스명을 사용하면
나중에 나온 컴포넌트의 속성으로 덮어씌어진다.
따라서 모듈화를 위해 원래는 BEM 규칙을 따라 클래스 명을 유일하도록 변경했었는데,
postcss에서는 module로 해서 모듈화를 할 수 있다.
(알아서 모듈화 시켜서 classname을 변경해준다.)
와 이거 진짜.ㅋㅋㅋ
내 개인 프로젝트 진행하다가 짜집기 했던 코드 중에 className={style.name}
이거 이렇게 되어 있어서 도저히 커스텀으로 css 수정하다가 안되어서 그냥 포기했었는데ㅋㅋㅋㅋ
이게 postCSS 였다니 충격
그리고 생각보다 간단한 것이었다.
이제 이것도 조금 공부해보면서 쓰는 습관 들여야겠다.
JSX
JSX란
javascript 요소인데 html요소 같이 생김
그것을 JSX라고 부름
자바스크립트 코드 위에서 html 요소 처럼 사용할 수 있게 만든 것
HTML과 JSX 차이
html 요소는 class / jsx 는 className
html 에서는 onclick / jsx는 onClick
html은 마크업 언어, jsx는 엄밀히 말하면 자바스크립트 언어이다
따라서 jsx는 비즈니스 로직(중괄호를 이용해서 변수 등을 나타낼 수 있다), 자바스크립트 코드를 사용할 수 있다
나중에 바벨이 jsx를 변환해주는 것이다.
jsx는 형제 노드를 가질 수 없다.
한 가지 노드로만 감싸져야 한다. (그냥 묶어줄 때는 div 태그 남발하지 말고 그냥 프래그먼트<></> 사용하기)
만약, 브라우저에서 요소를 확인했을 때,
동작할 때 DOM 요소가 엄청 많이 변한다 => 매우 잘못하고 있는 것!
VDOM이 있으므로 바뀐 부분만 렌더가 되어야 하는데
잘못짜서 실제 돔 요소가 많이 바뀌는 것일 수 있음
