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

오늘은 일찍 일어나서 아침으로 샐러드도 먹고 나름 일찍 왔다..! 그래도 아직 계획보단 한참 늦은 게 함정
근데 계획했던 9시부터 스카와서 공부하는 건 너무너무 힘든데ㅠㅠㅠ 아직 한 번도 못 지켰다^^
오전 시간은 집에서 하는 게 더 나을 거 같단 생각이 들어, 내일은 차라리 점심 먹기 전까지 집에서 해보는 걸로!!!
TDL로 카테고리 적용해서 글을 써왔는데, 생각해보니까 지금 내가 적는 글들이 거의 TIL이 되어가고 있어서 TIL로 바꿔야 하나 고민 중....^^

---

- nodebird 강의
갑작스레 계획표를 또 수정하고 배 안 고파서 nodebird 강의를 조금 들어보려 했는데,
초기 세팅하고 git 설정을 이상하게 해서 세팅하는 데에 생각보다 시간을 오래 잡아먹었다
역시 딴짓이랑 삽질하는 데에 시간이 제일 빨리 가~~

---

- html 요소 metadata 강의

• metadata란 data를 설명하는 data
• meta에서 name과 content는 짝꿍
• application-name : 웹 페이지에서 구동 중인 애플리케이션의 이름
• js를 불러올 땐 body 끝부분에 추가해야 함.
  (html 내용들을 먼저 렌더링 하고, 마지막에 조금 시간이 걸리는 js파일들을 렌더링해야 깔끔하기 때문)

---

- html/css 프로젝트 강의

• flex-shrink box 레이아웃을 축소시킬 때 사용하며, default는 1
  flex-grow는 반대로 확장시킬 때 사용.
  https://blogpack.tistory.com/863
•  말줄임 처리를 scss로 스타일링할 때에는 mixin로 사용하면 편함.

@mixin ellipsis {
  text-overflow: ellipsis; // 텍스트가 영역을 넘어가면 말줄임
  white-space: nowrap; // 텍스트가 개행되지않고 오른쪽으로 쭉 이어지게
  overflow: hidden; // 영역이 넘어가면 감춘다.
}

• liner-gradient를 사용해보자.

해당 컴포넌트의 폭이 좁아지거나 모바일 버전은 scroll-x가 적용되는 부분인데,
스크롤하거나 스와이프 할 때, 스무스하게 연결되도록 스타일링을 줬다.

저 부분을 구현하려면

backgound-image에 linear-gradient를 줘서 왼쪽 사이드는 #fff를 35% 비중으로 오른쪽이 뿌옇게
오른쪽 사이드는 #fff를 65% 비중으로 왼쪽이 뿌옇게 주면 된다.
pointer-events는 해당 이미지가 어떤 기능을 수행해야 할 일이 없기 때문에 none으로 설정하여 클릭을 방지한다.

• classname을 분기화해서 공통 스타일, 개별 스타일을 적용해보자.

위의 코드처럼 classname에 스페이스를 줘서 여러 개의 classname을 적용할 수 있고,
오른쪽의 스타일 코드를 보면, new, popular의 classname에 속한 컴포넌트에만 스타일을 적용했음.
그래서 new와 popular가 아닐 경우에 margin-top: 10px을 주도록 할 수 있다.
분기화 하는 것은 알았는데, 사실 막상 스타일링할 때는 사용한 적이 거의 없는 것 같다ㅠ
그래서 이전에 했던 프로젝트들 리팩터링 하려면 스타일쪽도 장난 아닐 거라 생각이 든다...
지정한 classname을 제외하고 스타일 먹이는 것은 오늘 처음 알았는데, 신세계고 꼭꼭 써봐야겠다는 생각뿐!

---

17:50 오후 회고 스터디 (1부 만족도 : 7, 2부 만족도 : 9)
html 요소 공부할 때 살짝 졸았지만, 어려운 부분들은 없었어서 대체적으로 괜찮았고,
마크업 학습할 땐 집중도 있게 잘한 것 같아서 9점.
근데 아침을 일찍 먹고 점심을 안 먹어서 너무너무 배고파서 5시에 저녁시간을 가져서 5시의 할 일을 6시에 할 예정!

---

- 코어 JS 읽고 TIL 적기
읽는거 1시간, TIL 적는걸 1시간씩 총 2시간으로 잡았는데, 생각보다 더 오래 걸려서 약 2.5시간 정도 걸린 것 같다.
근데도 아직 비동기쪽 확실히 이해 못 해서 알고리즘 공부한 뒤에 시간 남으면 유튜브로 영상 찾아볼 예정.

---

- 자료구조 / 알고리즘 (Js ver.) 강의
아직은 알고리즘에 필요한 JS 기본 문법들 배우는 중.

• 배열
  • 여러 개체(Entity)값을 순차적으로 나열한 자료 구조
  • 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근
  • 대표 속성(property)과 메서드(method)
    
    • 배열 크기 및 배열 여부 확인: Array.length, Array.isArray()
    • 배열 추가/삭제 (Last In Frist Out - Back) : Array.push(), Array.pop()
    • 배열 추가/삭제 (LIFO - Front) : Array.shift(), Array.unshift()
    • 배열 조작 : Array.splice(), Array.slice(), Array.concat()
    • 배열 탐색 : Array.indexOf(), Array.lastIndexOf(), Array.includes()
    • 배열 변형 (callback 미사용) : Array.sort(), Array.reverse(), Array.join()

• 고차함수
  • 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수
  • 매개변수로 전달되는 함수는 콜백 함수 (Callback function)
  • 대표 배열 조작 메서드
    
    • 임의 정렬 : Array.sort(callback function)
    • 반복 작업 : Array.forEach()
    • 콜백함수 결과 배열 반환 : Array.map()
    • 조건 만족하는 하나의 값 반환 : Array.find()
    • 조건 만족하는 값 배열로 반환 : Array.filter()
    • 누적 결과 값 반환 : Array.reduce()

      ---

22:50 밤 회고 스터디 (만족도 : 8)

총평 : 오늘은 나름 집중이 잘 됐다! 어제부터 챙겨 먹은 영양제의 효과인가? 점점 더 집중력이 늘기를~

---

[ 출처, 참고 : 제로베이스 프론트엔드 스쿨 ]