[TDL] 07/04 Today's-Done-List

- leetcode array and string 복습

Reverse Words in a String III

https://dev-minju.tistory.com/manage/posts/

---

- 제로베이스 HTML/CSS 강의

1. 단위와 값 - 상대길이, 함수 표기법

1 em === 부모의 font-size
1 rem === root의 font-size

font-size를 설정할 땐 rem으로 사용하도록 하자.
em은 부모에 따라 값이 변하기 때문에, 스타일 줄 때 불편함.


2. 박스 모델 - box-sizing

content - box : 초기 값. width와 height 속성이 콘텐츠 영역만 포함.
요소의 크기는 너비  = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않는다.

border - box : width와 height 속성이 안쪽 여백(padding)과 테두리(border)도 포함.
바깥 여백(margin)은 포함하지 않는다.
요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산.

* {
  box-sizing : border-box
}

주로 전체 설정(Universal select)해서 사용.

---

오전 회고 (만족도 : 7)

초반에 조금 집중을 못했지만 그래도 목표를 달성하였고 계획 세우고 시작하는 첫날이었는데, 이 정도면 전체적으로 만족.

---

- 제로베이스 JS 강의

최근에 스터디와 JS 프로젝트를 했어서 그런지, 예전보다 JS코드에 익숙해져서
기존에 만들었던 todo-list에 recommend버튼과 약간의 리팩터링을 하였는데, 전보다 훨씬 수월하게 진행한 것 같다.
역시 결국은 구현을 해보아야 많이 배운다. 이론 공부와 응용, 실습의 밸런스를 잘 찾아보자.

---

오후 회고 스터디 (만족도 : 6)

점심 먹고 나서 거의 집중 못했음..

저녁 먹은 후 클린 코드 강의와 책 읽는 건데, 책 읽는 대신 오후에 끝내지 못한 목표를 할 예정.

---

- 제로베이스 REACT 강의

오후에 했어야 하는데, 오후에 집중 못해서 저녁 먹고 나서 강의를 들었음.

---

리액트의 장점

• DOM 노드를 직접 조작하지 않아도 UI를 변경할 수 있다.
  => 데이터가 바뀔 때 요소를 변경하는 것에 대한 고민 없이, 이전의 뷰를 그냥 날리고 결과적으로 보여줘야 하는 뷰를 보여주면 된다는 말!
  => 한마디로, UI 로직(DOM을 업데이트)과 비즈니스 로직(데이터 - 상태 값을 다루는)을 분리할 수 있다.
  
• 내부적인 가상 돔(virtual DOM)이라는 것을 통해 변경된 부분만 업데이트할 수 있게 해 준다.

---

라이브러리 vs 프레임워크

app을 만들기 위해 필요한 기능들 : 라우팅, 전역 상태 관리, API 호출, 빌드 시스템 등

• 프레임워크 : app을 만들기 위해 필요한 여러 가지 기능들을 제공. ex) 앵귤러
• 라이브러리 : 기능들을 직접 구현하거나 구축해야 함. ex) 리액트
  • 장점 : 각자 환경에 맞거나, 마음에 드는 라이브러리를 선택하여 시스템을 구축할 수 있음.
  • 단점 : 여러 가지 라이브러리를 접하고 배워야 해서 초기 진입 장벽이 있음.

---

 React.createElement( ) : js에서는 아래와 같이 지정한 tagName의 HTML요소를 만들어서 반환한다면,

const element = document.createElement(tagName[, options])

react에서는 ReactElement를 반환한다.

const element = React.createElement(component, props, ...children)

ReactDOM.render( ) : ReactElement를 루트의 DOM 노드에 렌더링 하기 위해서 사용

---

번들러(Bundler) : 분리된 JS와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합한다.
React app에서 널리 사용되는 번들러에는 webpack과 browserify가 있다.

Hot Module Replacement (또는 HMR) : webpack에서 제공하는 가장 유용한 기능 중 하나.
모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다.
https://webpack.js.org/concepts/hot-module-replacement/

---

- udemy 클린 코드 강의

react 강의를 듣느라고 인트로만 들었음.

 

---

저녁 회고 스터디 (만족도 : 5)

오후에 달성하지 못했던 리액트 강의를 마저 듣고 udemy의 클린 코드 강의 섹션 1까지 듣긴 하였는데,
리액트 개발 환경 설정하는 부분에서 CRA 말고 react, react-dom, babel, webpack을 직접 설치하는 강의가 있었는데,
따라 하지는 않고 눈으로만 봤는데, 다시 생각해보니까 이제까지 CRA로만 환경 세팅을 해왔어서
직접 따라 해 보는 것이 좋을 것 같아, 내일 오전에 스터디 카페에 오자마자 이것부터 따라 해 볼 예정이다.

아무래도 오후 파트에 목표를 달성하지 못해서 미뤄지느라고 저녁 파트 목표까지 영향을 받아서 결국 저녁 파트도 목표를 달성하지 못하였기에 만족도는 5점으로 하겠음.

---

[출처 : 제로베이스 REACT 이론]