Portfolio

1. Module

1-1. import

export 키워드로 내보내진 변수,함수등을 불러올 수 있는 키워드

💡

import/export Module 방식을 사용하면, 스크립트 의존성을 훨씬 간편하게 관리할 수 있다. - 스크립트 의존성을 추적하여 사용하지 않는 스크립트 제거 가능 - script 태그 사용 시 불러오는 순서가 중요하지만, module방식은 고려하지 않아도 됨 - 전역오염이 되지 않는다는 장점

import defaltExport from “module-name”

export default로 보내진 것만을 가져올 수 있다.

컴포넌트처럼 통채로 들고 올 때 사용

import * as ItemList from “module-name”

as는 alias의 줄임말로, export로 내보내진 모든 것을 가져온다.

객체형식으로 받아온다.

import { loadItem as LItem } from “module-name”

해당 모듈에서 특정 부분만 import 해온다.

as를 붙여서 alias 지정도 가능

treeshaking을 이용한 라이브러리 경량화 작업에 많이 사용

1-3 실습

html 파일에서 <script type=”module” > 방식으로 index.js를 불러온다.

이후 모든 다른 js 파일들은 import/export 방식으로 index.js에서 불러와 사용한다.

컴포넌트의 경우 export default

storage는 전역오염 방지를 위해 설정한 IIFE방식 더 이상 사용하지 않아도 됨

2. 비동기를 다루는 법

비동기처리란 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고, 다음코드를 먼저 실행하는 JS의 특성이다.

예시

addEventListner 함수

이벤트리스너의 첫번째 인자로 정의한 이벤트가 발생할 때 두 번째 인자로 받은 callback함수가 실행된다.

setTimeout, setInterval

두번째 인자로 받은 시간만큼 지난 후에, 첫번째 인자로 받은 callback함수를 실행한다.

두번째 인자가 0이여도, 바로 실행되는 것이 아니라, 이벤트 큐에 담겨 현재 콜스택이 비워진 이후에 실행된다.

AJAX 요청 (XMLHttpRequest)

서버에 특정 동작을 요청하고, 결과에 따라 다른 동작을 실행한다.

2-1. callback

등장

동기방식으로 사용하게 되면, 요청 후 응답이 오기 전 까지 브라우저가 굳어버린다.

문제

콜백의 중첩으로 인해 코드의 가독성이 많이 떨어지는 문제

2-2. promise

2-3. async/await

2-4. 실습

step1 작업순서 정하기

작업순서를 그리며, 머리 속으로 길을 정하는 것 중요하다.

노트 혹은 나만의 그림, 순서도를 통해 어떤 영향을 서로 주고 받을 수 있는지 알 수 있다.

0. 모듈화 작업

1. api.js 만들기

중복 호출 요소가 많기 때문에 모듈화 한다.

중복이 많다는 건, 매 상황에서 조금 씩 다르게 사용될 여지가 있기 때문에, 유지보수관리 어려워진다.

2. TodoList 컴포넌트,TodoComments 컴포넌트 만들기

Tip dummy데이터로 렌더링 이상 없는지 체크 후, api연결 시키기.

<TodoList /> 와 <TodoComments /> 만들기

3. <App />에서 2개의 컴포넌트 연결하기

중요 App에서 관리할 상태: todos, selectedTodo, comments

12일차 배운 것 정리 (1)

목차