16 :: 리팩토링, url 바꾸기, 싱글 페이지 어플리케이션, Promise

엘리스 SW 엔지니어 트랙 16일차

이고잉님 실시간 강의날

 

 

저번주에 배운 Closure를

몰라도 괜찮다는

이고잉님의 격려의 말씀으로 시작

 

이번주 배울 Promise 지금은

다른 사람이 만든 Promise를 가지고

라이브러리를 이해할 정도만 가도 좋다

 

Ajax는 꼭 이해하자!

 

다음주에 나올 클린코드, TypeScript, 디자인 패턴 등

그냥 구경만 해도 좋다

 

시멘틱 태그

의미론적 태그라고도 불린다

검색 로봇이 사이트를 더욱 가치있게 사용할 수 있게 도와준다

 

 

앱을 구상할 때

데이터를 먼저 생각하자

let data = [
                {id:1, title:'html', body:'html is ...'},
                {id:2, title:'css', body:'css is ...'},
                {id:3, title:'js', body:'js is ...'}
            ]

 

 

리팩토링(Refactoring)

짠 코드를 더 보기 쉽게, 짧게, 유지보수하기 좋게 만드는 것을 리팩토링

 

 

자바스크립트로 url 바꾸기

아마 프로그래머스 어느 코딩테스트에서

봤던 문제중에 url을 변경하는게 있었다.

이걸 이용하면 되는 걸까?

 

window.history.pushState()

mdn 링크 => https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

 

 

싱글 페이지 어플리케이션

이 부트캠프의 핵심

한 페이지에서 어플리케이션을 관리

항상 다음 코드가 들어간다. 페이지를 넘기면 안되니까

event.preventDefault()

 

location.pathname

내가 어떤 페이지에 있는지 보여준다

 

 

egoing님 이론 강의 끝나고

오규석님 실습 강의 시작

 

 

동기 / 비동기

 

비동기

기다리지 않고 다른 것을 하고 있는 것

 

setTimeout()

비동기적으로 동작된다

 

콜백 함수(Callback Function)

1. 다른 함수의 인자로 이용되는 함수

2. 어떤 이벤트에 의해 호출되는 함수

 

 

콜백함수의 지옥에 빠지는 것을 구해줄 수 있는 Promise

Promise

약속
선생님 말씀이 보통 데이터를 받아올 때 사용한다고 하신다

데이터를 받아 올 때
시간차가 생길 수 있다
그 시간차에
비동기적으로 움직이는 자바스크립트에
대응하기 위한 녀석인듯 보인다

원하는 데이터를 잘 받아오면(resolve)
해당하는 코드를 실행하게 도와주는 객체이다

그와 동시에 잘못 받아오면(reject)
그에 해당하는 코드를 실행해서
확인할 수 있는 것이다.

 

 

Promise(resolve, reject)

resolve()를 사용하면

then이 실행된다

 

resolve()의 파라미터가 then 파라미터로 할당

 

세트 메뉴

resolve  <=> then

reject  <=> catch

 

 

여러가지로 어려운것을 많이 들은 날

egoing님과 진행했던

CRUD에서

C부분 onsubmit을 해서 바꾸는 부분을 잘 이해해야

목요일에 따라가겠다

 

Promise는 개념을 까먹지 않게만 해놓자

 

 

promise by Womanizer #unsplash