230317(금)

🎄 성장일지 3.2

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0)
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 경험 위주로 (2.0)
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ 정해진 템플릿에 맞춰서 (3.0)
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1) 230102부터 시작되는 학습에 관한 내용 추가
(3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기!

🔑 오늘의 키워드

CSS Transition 속성을 활용해서 애니메이션 효과를 만드는 방법?

• 기준이 되는 태그에 transition: targetProperty transitionTime transitionFunction transitionDelayTime의 형태로 스타일을 부여합니다.
• 그 다음, 어떤 이벤트(hover, event handler 등)에 따라 targetProperty의 값을 변경하는 스타일을 부여합니다.
• 그 이벤트가 발생했을 때, transition을 통해 특정 property를 감시하여 애니메이션 효과를 줄 수 있습니다.

Event 버블링과 캡처링은 무엇인가요?

이벤트는 상위 요소에서 타겟 요소, 그리고 타겟 요소에서 상위 요소로 전달됩니다.

• 버블링: 타겟 요소에서 상위 요소로 전달되는 단계
• 캡처링: 상위 요소에서 타겟 요소로 전달되는 단계

이벤트 위임 방식을 활용할 수 있는 예시

• 주로 캡처링보단 버블링을 활용하여 이벤트 위임 방식을 활용합니다.

document.querySelector('ul').addEventListener('click', (e) => {
  // 원하는 함수 구현
});

위와 같이 구현한 후, 콜백함수 내부에서 li 태그일 때만 함수가 실행되게 하는 등의 조건을 추가하여 활용합니다.

conditional breakpoint 란?

• debugging을 위해 breakpoint를 걸 때, 어떤 특정 조건일 때만 breakpoint를 주는 것을 의미합니다.

css 클래스 중복을 방지하는 방법은?

• 1. Scss와 같은 css 전처리기를 사용합니다. 주로 scss에서는 &를 통해 자기 자신을 선택자로 표현할 수 있습니다.
• 2. css module을 사용합니다.

• Button.module.css와 같이 파일을 만들고 컴포넌트 파일(js, ts)에서 import styles from '/Button.module.css'로 가져옵니다.

• 이후 해당 컴포넌트의 class에 위 변수를 할당합니다.

• 주로 component 단위 개발에서 사용합니다.

foo.apply(this)의 동작방식?(foo는 함수라고 가정)

• foo 함수의 this에 변수로 지정된 this를 binding하여 함수를 호출합니다.
• 이 때, apply는 첫번째 파라미터는 binding할 this를 받고 그 뒤에는 배열([]) 형태로 나머지 foo 함수의 파라미터들을 전달합니다.

var 와 let의 차이는 무엇인가요?const를 사용할때는 언제인가요?

• 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.

• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

• var: 변수의 선언과 초기화가 동시에 일어난다. 즉, undefined가 먼저 할당된다. 또한, 함수 스코프에 대해서만 스코프를 갖는다. 변수의 중복 선언이 가능하다.

• let: 변수의 선언과 초기화가 따로 일어난다 즉, 변수 선언 전에 그 변수를 사용할 수 없다. 모든 블록 스코프에 대해서 스코프를 갖는다. 변수 중복 선언은 불가능하지만 재할당은 가능하다.

• const: 선언과 초기화를 반드시 동시에 일어난다.(일어나야한다.) 허나 let처럼 const도 변수 선언 이전에 접근할 수 없도록 런타임 이전에는 사용할 수 없게 되어있다.

부모 태그 flex일 때, 가장 끝에 있는 자식 노드만 오른쪽으로 보내고 싶을 때 좋은 팁

<ul class="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

.parent {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.parent li:nth-child(5) {
    margin-left: auto;
}

위와 같이 부모 태그를 flex-start로 주고, 가장 끝에 있는 자식 태그에 margin-left: auto를 스타일링하면 된다.

참고

• var, let, const
• flex box 마지막 자식 태그만 오른쪽으로

📝 요약 및 하루 간단 회고

생각한 것보다 내가 알고 있다고 느꼈던 내용들 중에서 잊어버린 것들들도 꽤 있다는 걸 느꼈다. 몇번이나 반복했어서 바로바로 기억이 날 줄 알았는데, 또 그게 아닌 거 같다. 또한, 기존에 알고 있던 구현 방식에서 더 다양한 방법들이 있다는 사실도 새삼 다시 느낄 수 있는 하루였었다.
컴포넌트 단위로 개발하는 게 하면할수록 좋다는 건 느끼고 있다. 코드 분리나 재사용성 등을 따져보면 정말 좋은 것 같다. 다만, 아직 설계면에서 어디서부터 어디까지를 컴포넌트로 두고 작게 나눠야하는지가 어렵다. 이 부분은 계속 컴포넌트를 만들다보면 감이 오리라 믿는다.

오늘의 잘한 점

• 기존에 알고있던 내용들 다시 복습 및 상기
• html, css 레이아웃 잡을 때, 다른 방법으로도 시도해보고 배우기

오늘의 아쉬운 점

• 지금 성장일지를 쓰는데 너무 졸리다… 좀더 개발하다 자고 싶은디…! ㅠ