TIL #210125

📚 TIL

---

코드숨 2주차 DAY 8, 모던 JavaScript 튜토리얼

🚀 학습 목표

리액트 컴포넌트를 분리하고 간단한 Todo App 만들어 보기

 

1. 간단한 카운터 앱을 리액트로 만들고 이를 여러 개의 파일로 분리해 봅니다.

2. 간단한 Todo 앱을 리액트로 만들어 봅니다.

 

---

 

🚀 React 시작하기

리액트 설치하기

 

npm install react react-dom

• React
• ReactDOM
• Components & Props

 

설치를 다 했는데 적용이 안돼서.. 내일 1주차 내용 다시 봐야겠어요

 

---

 

🚀 1주차 과제 풀이 1

let을 사용하지 않을게요 -> 변수를 재할당하지 않고 코드 작성하기

const를 사용하면 재할당을 할 수 없어요 -> render에 변수로 count를 받는다.

변수를 바꾼 다음에 render를 실행하면 값이 바뀌는 부분을 다 쫓아가야되고

상태가 바뀔때마다 확인해야된다. -> render 함수에 다음 값을 바로 받는다

상태가 여러가지가 되는 경우가 많다 -> 값으로 받지 않고 Object로 받는다

{}로 받고 다음 값은 값: 다음값 이렇게

+ eslint를 실행하면 createElement 함수가 선언되었지만 사용하지 않았다는 에러 발생한다

-> no-unused-vars 룰을 disable하면 다른 곳에서 생긴 문제를 발견할 수 없다고 한다

 

// eslint-disable-next-line no-unused-vars
function createElement(tagName, props, ...children) {
  // 생략
}

 

 

---

 

파트 1 - 코어 자바스크립트

🚀 모듈

모듈 소개

 

- 모듈(module) : 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나

 

• export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있음
• import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있음

- 모듈의 특징

 

• 모듈은 항상 엄격 모드(use strict)로 실행됨
• 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없음
• 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행됨
• 모듈 스크립트는 항상 지연 실행됨
• 모듈 스크립트에선 async 속성을 인라인 스크립트에도 적용할 수 있음

- 브라우저 환경에서는 웹팩(Webpack)과 같은 특별한 툴을 사용해 모듈을 한 데 묶어(번들링) 프로덕션 서버에 올리는 방식을 사용

 

모듈 내보내고 가져오기

 

- 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능

- 선언부와 export가 떨어져 있어도 내보내기가 가능

- 무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...}안에 작성

 

동적으로 모듈 가져오기

 

- import(module) 표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프라미스를 반환

- 호출은 어디서나 가능

- 코드 내 어디에서 동적으로 사용 가능

 

---

 

😁 오늘 한 일

---

 

📕 공부하기

- 오늘은 1주차 첫번째 과제 풀이를 공부하고 진도를 조금 나갔어요

- 첫번째 과제 풀이를 하고 나니 두번째 과제의 힌트를 더 얻은 것 같아요

 

🧤 방청소하기

- 방청소를 안해서 안쓰는 물건들이 쌓여있길래 방청소를 했어요

- 집에서 공부를 하려면 방청소부터 하게 돼요!

 

📺 유튜브보기

- 아.. 유튜브엔 왜이렇게 재밌는게 많을까요

- 영화리뷰 보고.. 무슨 마약 체험 영상 이런것도 재밌고 ㅋㅋ