23.10.09
📚 오늘 공부한 것
- 모듈 import/export
- callback으로 비동기 다루기
- 투두리스트 개선
😲 새롭게 알게된 것
모던 브라우저에서도 모듈을 쓸 수 있다!!
import
export 키워드로 내보내진 변수, 함수 등을 불러올 수 있다.
- export default로 내보내진 것을 가져온다
컴포넌트는 한 파일에 한 컴포넌트 방식을 지향하기 때문에 이 방식 추천
import defaultExport from "module-name"- module-name 내에서 export 된 모든 것을 모두 가져옴
- 별칭은 중복되지 않으면 자유롭게 정할 수 있다.
import * as allias from "module-name- 특정 값만 가져오기
import { loadItem } from "module-name"- 특정 값만 이름을 바꿔서 가져오기
import { loadItem as loadSth } from "module-name"- 혼용가능
import defaultFunction, {loadItem} from "module-name"- 별도 바인딩 없이 불러오기만 —> 불러오는 것만으로도 효과가 있는 스크립트에 사용
import "module-name"index.html 등에서 불러올 때 엔트리포인트 즉 type=”module”지정 필수!
<script src = "./src/index.js" type="module"> </script>export
다른 컴포넌트와 의존성이 없는 컴포넌트는 export default로 가능하다. 물론, 한 파일에 그 컴포넌트만 존재해야한다.
한 파일에 여러개를 export 하거나, 그런 경우라 각 function 이름과 파일명이 다를 땐 default 붙이지 않는다.
개별 script를 불러오는 것과 차이점 및 장점
- 각 JS파일 별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.
- script 태그로 로딩하는 것과 달리 불러오는 순서가 중요하지 않다.
- 또한 전역오염이 일어나지 않는다.
주의할것 !
- 웹 서버가 필요하다.
- import시 from 이후 파일 확장명 .js 꼭 붙여야 한다.
비동기 처리 callback
비동기 처리란?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
비동기 처리 되는 예시
- addEventListener()
두번째인자인 리스너 함수는 바로 실행되는 것이 아니라, 정의된 이벤트가 발생할 때 실행된다. - setTimeout()과 setInterval()
첫번째 인자인 핸들러함수는 두번째 인자인 타임아웃 시간 만큼 지난 후에 실행된다.
!! 타임아웃 시간이 0이라도 바로 실행되는 것이 아니다. 함수 내 다른 코드들의 실행을 마친 후에 발생한다.
주의 할 것
{ 요청 -> 성공시 응답값 중 조건에 따라 일부를 가지고 또 다른 요청 } 이런 경우 중첩 이 생긴다.. 이것이 바로 흔히 우리가 아는 "콜백지옥"^^
그럼 비동기 안하고 동기로 처리하면 되잖아 ?
NOPE!!!!! 동기(sync)방식으로 사용하게 되면 요청 후 응답이 오기전까지 브라우저가 굳는다. 왜냐하면, 자바스크립트는 싱글스레드다. 만약, API요청이 10초가 걸린다면, 10초동안 브라우저가 먹통이 되는 것이다. UI가 블로킹 되버리는 셈이다.
작업 잘하는 방법!
개발에 앞서 작업을 잘하려면 작업 순서를 먼저 생각하자!
알고리즘 문제를 풀 때에도 어떤 구조, 로직으로 풀 것인지 생각했던 것 처럼 대략의 그림을 그리자!
- 어떤 추가 컴포넌트가 필요할지
- 어떤 순서로 컴포넌트 구현이 필요할지
또, api에 연결하여 응답 받은 데이터를 사용할 경우, 사용할 데이터를 담을 변수에 더미데이터를 먼저 넣어두고 화면 구현을 확인하자.
render안에 EventListener
// TodoList.js
// ..(생략)
this.render = () => {
if (Array.isArray(this.state)) {
$element.innerHTML = `
<h1>Simple TodoList</h1>
<ul>
${this.state
.map(({ id, text }) => `<li data-id="${id}">${text}</li>`)
.join("")}
<ul>`;
$element.querySelectorAll("li").forEach(($li) => {
$li.addEventListener("click", (e) => {
const { id } = e.target.dataset;
onClick(parseInt(id));
});
});
}
};위와 같이 innerHTML을 통해 요소를 그렸고, 그려진 여러개의 < li > 요소에 대해 이벤트리스너를 등록하고자 했다.
이벤트 최적화 관점에서 좋은 코드는 아니다!
여기서 알고 갈 것은, render밖이 아닌 안에서 한 이유이다!
innerHTML의 경우 기존 값을 없애고 새로 그리기 때문에 이전에 밖에서 이벤트를 걸었다면, 다음 번에 새로 그릴 때 그 이벤트는 적용되지 않게 된다.
custom Attirbute : data-
"data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다."
어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 각 속성은 문자열 입니다.
<div data-num = "3"> tmp</div>다음과 같이 js 나 css에서 사용할 수 있습니다.
var divElem = document.getElementById("div");
divElem.dataset.num; // "3"div[data-num="3"] {
width: 400px;
}🤨 느낀 점
저번 강의를 듣고 궁금했던 점들에 대한 해답이 이번강의였다. js에서 모듈 사용하는 방법, 비동기와 이벤트리스너까지 의문점이 들어서 찾아보았던 부분에 대해 답을 알 수 있었고, 구현하고 있던 투두리스트에 적용할 수 있어서 이해하는데 도움이 되었다.
컴포넌트를 부르고 서로 간의 작용을 조율하기 위해 App.js를 이용하는 것이 기억에 남는다. API요청이나 응답 값에 따라 상태를 바꾸고 그 상태를 각각의 생성된 객체에 적용하는 방법을 복습하고 이번 과제에 적용해보면서 기억에 남겨야겠다.
🤔 오늘 회고
Keep
14일차 강의에 이어서 오늘 강의까지 배운 부분을 실습코드, 사이드 프로젝트, 과제에 계속해서 적용해보았다. 감을 잡는 데에는 직접 해보는게 가장 큰 힘인 것 같다.
Problem
양날의 검인것이,, 배운 것에 갇히기도 한다. 사이드 플젝 구현할 때 배운거과 나의 생각으로 한참을 구현했는데, 추가해야할 기능 구현 로직과 이전 로직이 상충하는게 많아 결국 돌아왔다..
Try
우선 정석인 로직으로 구현을 하고 나서 뒤짚어엎어본다는 각오로 재도전을 할거다 !
