1. 템플릿 리터럴

• 텍스트 줄바꿈을 하고 싶을 때
• 줄바꿈하는 곳에 \n 을 사용하는데 코드에서만 적용 (사용자에겐 표시되지 않음)

// 옛날 법
var name = '준석'
var a = 'qweqweqweqweqweqweqwe'\\n'qwewqeqweqweqwewqeqweqwe'+name 

// 템플릿 리터럴
var b = `qweqweqweqweqweqweqwe
qwewqeqweqweqwewqeqweqwe ${name} `

2. Styled-components에서 Global CSS 적용하는 방법 알아보기

• 글로벌 CSS를 사용하는 이유
  • 공통된 작업을 하나하나 하는 것이 비효율
  • 만약 전체 수정이 필요할 때 컴포넌트 하나하나 찾아가며 수정해야 함

ThemeProvider 사용

• ThemeProvider 태그를 컴포넌트 최상단에 감싸준다
• 프롭스로 theme를 설정
• 해당 프롭스의 값들은 하위에 있는 styled컴포넌트들은 모두 사용가능
• 자판기에서 적용할 수 있는 부분: 버튼 디자인, 컬러

3. 백그라운 이슈 정리

1. 이슈: 상위 태그(빈 div태그)에 백그라운드 컬러를 지정 ⇒ 하위 태그 아래 margin부분에 적용되지 않음

2. 이유: 상위태그의 height가 내부 태그에 맞춰서 크기를 조정 - margin끼리 맞닿을 때 상쇄

3. ⇒ 자식 요소의 마진이 더 크든 작든 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링이 됩니다. (부모를 벗어남)

   

4. 해결방법: padding 또는 border 값을 주어 벽을 만들어주는 것이 안전합니다. 이렇게 하면 의도했던 대로 첫 번째(마지막) 자식 요소를 배치할 수 있습니다.