[TDL] 03/31 Today's-Done-List

(아침공부는 너무 힘들다ㅠㅠ 그래도 어제보다 1시간 빨리 도착...!)

---

13:50 - 15:00 html 임베디드 요소 강의
(원래 계획했던 시간은 30분 정도인데, 생각해보니 강의를 다 듣는 거에만 30분 소요되고 거기에 내가 실습을 하면 시간이 더 걸리더라! 실습하는 시간을 간과했다. 점심 먹고 오후 스터디부터 3시까지로 조금 더 여유 있게 시간을 잡으면 될 거 같다~!)
너무 느낀 점? 만 적는 것 같아서 배운 것 중에 새로 알게 된 것들을 간단히 적어보고, 길어진다 싶으면 따로 포스팅해보자.

<Embedded Elements>

• css를 제외하고 html의 img tag 만으로도 responsive 효과를 줄 수 있다는 것을 처음 알았다.
  srcset 속성을 사용하여 이미지의 viewport마다 다른 이미지들을 다운로드할 수 있도록 적용할 수 있고
  sizes 속성에서 min-width, max-width를 사용하여 사이즈를 제한할 수 있음.
• video tag에서
  비디오 설정 = controls, 썸네일 설정 = poster
  자동재생 = autoplay, 자동 재생이 막혀 있을 경우 = muted, 무한 재생 = loop

---

15:20 - 16:00 갑작스러운 강의 구매....
갑자기 강의 듣다 말고 프엔 오픈톡 봤는데 제로초님의 노드 버드 강의가 너무 재미있을 거 같고 흥미로워 보여서 GET..!
오늘까지 인프런 20% 할인이란 말이야~ 오전 타임에 일찍 오면 공부할 계획인데^^ 언제 일찍 올 거냐고ㅠ 정신 차렷

---

16:00 - 15:50 html/css 프로젝트 강의

<마크업을 하는 과정>

• 전체 디자인을 훑어본다
  • 대략적인 큰 레이아웃을 구상한다
  • 메인 컴포넌트를 분석한다
  • 반복되는 컴포넌트를 구분한다
• 가변적인 요소가 들어가는 항목을 확인한다
  • 이미지가 가변일 때, no image 처리는 어떻게 되는가?
  • 이미지 비율이 다를 때 어떤 기준으로 크롭 하는가?
  • 텍스트가 가변일 때 몇 줄까지 노출하는가? (말줄임)
  • 값이 없을 때 0으로 노출하는지, 항목 자체가 사라지는지? (ex. 별점)
• 기획/디자인 측에서 요청한 인터렉션이 있는지?

마크업에는 정답이 없다.
같은 화면이더라도 마크업 하는 방식은 개발자마다 모두 다르다.
모작을 하는 과정 혹은 다뤄보지 않은 레이아웃에 대한 고민이 있을 땐, 벤치마킹할 사이트의 코드를 훑어보자.
주로 국내 서비스라면 네이버, 글로벌 서비스라면 구글이 좋은 예제.

프로젝트 초기 설정에 생각보다 많은 마크업 세팅이 필요하다..
팀원들과 프로젝트를 하거나, 이제까지 다른 강의들을 봐도 이렇게까지 디테일하게 들어간 적은 없었는데
이번 강의를 통해 실무에서 활용하는 찐 폴더 구조를 본 것 같다는 생각이 든다.
스타일을 설정하지 않아도 브라우저마다 default로 갖고 있는 소스들을 모두 없애는 reset 파일,
그 후 전체적으로 나만의 스타일을 살짝 주는 preset 파일 (optional)을 비롯해서
해당 프로젝트에서 자주 쓰는 디자인들을 모두 변수화, default font, size 등도 변수화를 시킴으로써
용이한 유지보수, 통일감, 재사용성의 효율을 얻었다.
예전에 인스타 클론 코딩을 할 때 scss를 사용하였는데 다른 팀원분의 의견으로 미디어 쿼리, 폰트 사이즈, 색상까지는 변수화 작업을 했었는데, 사실 그때는 이게 그렇게까지 중요한 건지 몰라서 제대로 적용시키지 않았다는 것을 요즘 들어 점점 더 깨닫고 있다... 지금이라도 깨달았으니 조금 더 개발자답게, 디테일하고 꼼꼼하게 코드를 작성해보자.

---

17:50 회고 스터디 (만족도 : 7)

---

19:30 - 23:30 자료구조 / 알고리즘 (Js ver.) 강의
(집중이 잘 안 되고 허리가 아파서 딴짓을 좀 많이 했기에 예상보다 강의를 많이 못 들었다..
그 와중에 허리보호대 게또...☆ 그래서 30분 더 하고 집에 가기로 함ㅠㅠ 집중 좀 해~)

<Object.getOwnPropertyDescriptors>

Object.getOwnPropertyDescriptors를 이용하여 해당 함수가 갖고있는 프로퍼티들을 모두 볼 수 있다.
아래 add_2의 PropertyDescriptors를 보면 aad_1를 할당한 것이기에, name.value 부분이 똑같은걸 볼 수 있음.
따라서 할당한다면 전체 복사가 된다!

// 1. 함수 선언식
function add_1(x, y) {
	return x + y;
}

// 2. 함수 선언식 add_1을 add_2에 할당한다면?
const add_2 = add_1;

console.log(Object.getOwnPropertyDescriptors(add_1));
console.log(Object.getOwnPropertyDescriptors(add_2));

// Object.getOwnPropertyDescriptors(add_1)
{
  length: { value: 2, writable: false, enumerable: false, configurable: true },
  name: {
    value: 'add_1',
    writable: false,
    enumerable: false,
    configurable: true
  },
  arguments: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  caller: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}


// Object.getOwnPropertyDescriptors(add_2)
{
  length: { value: 2, writable: false, enumerable: false, configurable: true },
  name: {
    value: 'add_1',
    writable: false,
    enumerable: false,
    configurable: true
  },
  arguments: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  caller: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}

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

---

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