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

오전에 공부 안 하는 게 습관 돼서 이제 8시 반에 일어나도 공부 안 하고 그냥 폰 한다...^^
책을 펴놓고 2장 보고 폰만 하면서.... 그렇게 오전을 보냈다..... 정신 안 차리네~
그래도 오늘 최근 중에 제일 일찍 일어난 날이다~ 낼은 오전에 15장 이상 볼 수 있도록!

---

- css 속성 학습

• a태그 안의 attr에 스타일 적용하는 방법

빈번하게 사용하는지는 아직 잘 모르겠지만, 꼭 기억해뒀다가 나중에 필요할 때 어렵게 하지 말고 쉽게 적용해보자!

---

- html/css 프로젝트 강의

---

- nodebird 강의 (React, Next.js)

브라우저 -> 프론트 서버 -> 백엔드 서버 -> 프론트 서버 -> 브라우저

브라우저 -> 프론트 서버 -> 브라우저 -> 백엔드 서버 -> 브라우저

• code splitting : 예를 들면 브라우저에서 detail page에 대한 데이터만을 받고 싶지만, CSR 특성상 브라우저에 데이터를 넘겨줄 때 html, js, css, img 등을 한 번에 모두 넘겨줌 (main, post page 등등 모두).
  이렇게 불필요한 코드들이 넘어오게 될 경우 렌더링 속도도 느리고, 서버에도 부담이 가기 때문에 코드를 분할하여
  요청받은 detail page 정보만을 받아올 수 있도록 해주는 것. (code splitting을 순수 react에서 구현하려면 난이도가 있는 편, next.js가 더 쉬움)
  ※ 보통은 백엔드 서버 -> 브라우저로 바로 넘어가는 경우와는 달리, code splitting을 할 경우에는 프런트 서버에 스플릿을 요청해야 한다.
• 고객 경험이 필요한 사이트 : React
  단순 렌더 되는 사이트 : html, CSS
  검색 엔진이 필요한 사이트 : SSR
• 반응형 페이지를 구현할 때는 모바일을 먼저 디자인하는 것이 효율적이다.
  데스크톱부터 구현할 경우에는 브레이크 포인트 설정이 힘듦.
• antd에서 반응형 grid를 생성할 때 xs(모바일), md(데스크톱) 등을 사용해보자.
  https://ant.design/components/grid/
• grid를 만들 때 gutter를 사용해서 각 칼럼에 간격을 주면 좋다 (프론트에서는 자주 쓰이는 용어니깐 외워두자!)
  

  

• a태그 target에 _blank(새 창에서 열기)를 적용할 경우 보안 위험이 있으니 항상 target="_blank"와 rel="noreferrer noopener"를 같이 설정해주어야 함.

---

17:50 오후 회고 스터디 (만족도 : 7)
오늘 대체적으로 오후에 집중도가 나쁘진 않았지만, 조금 졸렸어서 30분 정도밖에 나가서 벚꽃 나들이 겸 산책을 하고 왔다ㅎ.ㅎ 진도를 많이 나간 건 아닌데, 그래도 모르는 부분들을 블로그에 정리하면서 조금씩 지식이 쌓이고 있는 거 같아서 만족스러웠음~ 샐러드를 싸왔지만 버거킹을 먹어버렸음~ 돈 아껴랑~

---

- 자료구조 / 알고리즘 (Js ver.) 강의

• Collection : 구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간
  (자바스크립트에서 제공하는 Collection) Indexed Collection -> Array, Typed Array
  keyed Collection -> Object, Map, Weak Map, Set, Weak Set
  • Map : 다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장 가능할 수 있는 Collection
    • Object 대비 비교하면 다양한 Key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요
    • 생성자: new Map() / 개수 확인: Map.size / 요소 추가: Map.set(key, value) / 요소 접근: Map.get(key) /
    • 요소 삭제: Map.delete(key) / 전체 삭제: Map.clear() / 요소 존재 여부 확인: Map.has(key) /
    • 그 밖의 메서드: Map.keys(), Map.values(), Map.entires() /
    • Map <-> Object 변환: Object.entries(Object), Object.fromEntries(Map)를 통해 Map과 Object 간 변환이 가능
    • Map 반복문 : Collection 객체인 Map이 가지고 있는 iterator 속성을 이용하여 for ... of 구문을 통해 반복문 수행 가능
  • Set : value만을 저장하며 중복을 허용하지 않는 Collection로, key값이 없고, value만 갖고 있음.
    • 다양한 자료형을 value로 사용 가능하며, set.add 호출 시 set이 반환되므로 체이닝(chaining) 가능
    • Set은 key값이 없지만, Map과의 호환성을 위해 key도 value와 같은 값으로 출력된다.
    • 요소 추가: Set.add(value) / 생성자: new Set() / 개수 확인: Set.size / 요소 삭제: Set.delete(value)
    • 전체 삭제: Set.clear() / 요소 존재 여부 확인: Set.has(value) / 그 밖의 메서드: Set.keys(), Set.values(), Set.entries()
    • Set 반복문 : Collection 객체인 Set이 가지고 있는 iterator 속성을 이용하여 for... of 구문을 통해 반복문 수행 가능
• Math
  • 표준 Built-in 객체로써 수학적인 연산을 위한 속성 값과 메서드를 제공하는 객체
  • Math는 생성자 함수가 아니며, 모든 속성과 메서드는 정적이기에 Math.function()으로 언제든 호출 가능
    • 오일러 상수(e): Math.E / PI: Math.PI
    • 최대값: Math.max(... x), 최소값: Math.min(... x), 절대값: Math.abs(x)
      배열을 인수로 받아 최대/최소를 산출하려면 apply 함수 혹은 스프레드 문법 사용 필요
    • 0과 1사이의 난수 랜덤 값: Math.random()
    • 제곱: Math.pow(x, y), 제곱근: Math.sqrt(x)
    • 소수점 처리:
      소수점 이하 반올림: Math.round(x) / 소수점 이하 올림: Math.ceil(x) / 소수점 이하 내림 : Math.floor(x)

---

22:50 저녁 회고 스터디 (만족도 : 8)
저녁에 싸온 샐러드 안먹고 햄버거 먹어서 그런지 밥먹고 내내 집중도 있게 잘 했다.
JS문법 강의를 들으면서 물론 자주 사용안하는 함수들도 많이 배우긴 하지만, 내가 너무 최소한의 문법들만 알았던 것 같아서 새로운 지식들이 많이 늘어나는 것 같아서 나름 재미있게 학습하고 있다.
근데 알고리즘을 언넝 풀어야하는데 좀처럼 진도가 많이 안나가서 그게 조금 걱정이다...
아마 내일부터는 알고리즘을 풀 수 있을 것 같다~ 병렬식 진도로 차근차근 조금씩 공부하니까, 집중도 더 잘되고 재미있게 하고있다는 생각이다! 오전에만 일찍 일어나면 만족스러운 방향일텐데~~~ 내일도 파이팅!

---

[ 출처, 참고 : 제로베이스 프론트엔드 스쿨 ]
[ 출처, 참고 : 인프런 Zerocho's nodebird 강의 ]