24일차 리액트 숙련주차(변수 주의사항, 스타일드 컴포넌트, 오늘의 메서드: repeat())

목표를 아래와 같이 정했지만 결국 1-10까지밖에 듣지 못했다...
React.memo부터 망해버렸다...

오늘의 목표!!

• 리액트 숙련주차 강의 1-11까지 듣기
• 자바스크립트 30문제 오답 부분 정리
• 리액트 입문 과제 코드리뷰 강의 듣기

🌳 모던 자바스크립트 Deep Dive

모던 자바스크립트 책 15분을 읽고 깨달은 부분

변수를 사용할 때 주의할 사항

• 변수의 무분별한 남발은 금물.
• 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다.
• 전역 변수는 최대한 사용하지 않도록 한다.
• 변수보다는 상수를 사용해 값의 변경을 억제한다.
• 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.
  
  

🌳 후발대 수업

입문주차 Todo-list 만들기 상세히 뜯어보기

몰랐던 내용 정리

node modules - 사용할 수 있는 라이브러리 패키지

🌳 자바스크립트 30문제 오답 부분 정리

https://www.notion.so/0f9eb44043274e188ea906b524650fcb

🌳 리액트 숙련주차 강의 정리

CSS-in-JS

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

1. styled-components
   우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지
   꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행

const StBox =styled.div`
	width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 20px
`

조건부 스타일링
props를 통해서 css에 대한 정보를 전달.

GlobalStyles(전역 스타일링)
'프로젝트 전체를 아우르는 스타일!'
가끔 우리는 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용해야 할 필요도 있다.
그럴 경우 '전역적으로(globally)' 스타일을 지정한다.

🌳 오늘의 메서드 공부

String.prototype.repeat()

문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.

반복 횟수는 양의 정수여야 함.
반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨.

console.log('완두콩'.repeat(3));  //완두콩완두콩완두콩