에드윈 블로그

Promise : 비동기처리

Promise는 Object의 일종입니다.

Promise로 비동기 처리가 가능합니다. 비동기 처리라 하면, 따로따로 처리할 수 있다는 걸 의미합니다. JavaScript는 원래 위에서 아래로, 순서대로, 차례차례 처리됩니다(동기식 처리). 

Promise는 Producer와 Consumer로 나뉩니다.

Producer

Promise 생성 

const promise = new Promise(function(resolve, reject){});

Promise는 executor라는 함수를 가집니다. 얘는 JavaScript에서 자체 제공하는 콜백 함수입니다.

executor는 resolve와 reject라는 인자를 받습니다(꼭 resolve와 reject라고 쓰진 않아도 됩니다).

성공했을 때 resolve, 에러 떴을 때 reject가 실행된다고 생각하면 됩니다.

Promise의 특성 : state, value

Promise는 처음에는 pending state와 undefined value를 가집니다.

이후 executor에 의해 promise는 둘 중 하나의 state와 value를 가집니다.

executor가 실행되서 성공했을 때는 fulfilled state와 resolve에서 받은 value를 가집니다.

executor가 실행되서 에러가 떴을 때는 rejected state와 error를 value로 가집니다.

fulfiiled 또는 rejected된 promise를 settled promise라고 합니다. 한번 fulfiiled 또는 rejected가 된 promise는 더이상 state를 변경시키지 않습니다. 그래서 executor에 resolve 또는 reject와 관련된 내용이 2개 이상 있을 경우, 가장 먼저 실행된 애만 받고 나머지는 무시합니다.

Consumer

Promise가 생성되었으니 생성된 애를 써야합니다. 이때 사용되는 method로 .then, .catch, .finally가 있습니다.

.then

.then은 성공과 에러 값을 받습니다. Promise.then(성공, 에러)로 구성되는데 Promise.then(성공) 처럼 성공만 쓸 수도, Promise.then(,에러) 처럼 실패만 쓸 수도 있습니다.

.catch

.catch는 Promise.then(,에러)와 동일합니다. Promise.catch(에러)라고 사용됩니다.

에러만 처리하고 싶을 때 Promise.catch()로 쓰거나, Promise.then(성공).catch(에러)로 구분지어 쓸 수 있습니다.

.finally

.finally는 인자를 받지 않고 프로미스가 실행되면 항상 실행됩니다. 이점은 .then(성공, 에러)와 유사해 보이지만, 다른 점은 finally에는 state가 없어도 된다는 점입니다. 그래서 받고 있는 인자도 없습니다. 그리고 또 중요한 점은 인자를 받지 않고 상태를 통과시키기에 .finally().then()이나 .finally().catch() 와 같이 작성할 수 있습니다.

이 글은 아래 주소에서 다룬 내용을 보고 공부한 걸 정리한 글입니다.

혼자 만들어본 기록지 앱에 최신순 정렬을 추가했다

수업(바닐라JS로 노마드코더 크롬 앱 만들기)에선 array를 만들고 거기에 push()를 통해 list에 추가할 수 있도록 알려줬다.

이를 통해 to-do list를 만들 수 있었지만

문제는 가장 최근에 추가된 요소가 가장 마지막으로 간다는 것이다🤔

왜그럴까..?

처음에는 array에 들어가는 순서를 바꾸면 되지 않을까 생각했다. 그래서 생각한 범인은 바로 push()

push를 사용하면 새로 추가하는 아이를 array 맨 마지막에 추가시킨다.

그래서 단순하게

' 그럼..array 첫번째 자리에 추가되도록 하면 되나? '

생각했다.

그래서 찾은 해법은?! unshift() 

확인 결과, 기대했던 대로 array의 첫번째 자리로 추가되며 원하던 최신순 정렬이 완성된듯 보였다.

그러나 문제는 새로고침을 해야 최신순 정렬이 되다는 점이었다..🤦‍♂️

preventDefault()를 통해 새로고침을 막았으니..

이대로 둔다면, 오히려 새로고침하면 순서가 바뀌는 셈이니 사용자의 혼란을 야기하는 없느니만 못한 기능인 것이다..

그래서 나는 push가 아닌 appendchild()를 건들기로 방향을 바꿨다.

appendchild()도 마지막 자리에 요소를 추가한다는 점은 push와 비슷했으나

얘는 HTML 요소를 추가하고 있었다.

그니깐

' HTML 기준으로 첫번째 자리에 추가되도록 하면 되지 않을까..? '

생각했던 것이다.

insertBefore()와 firsthchild를 활용해 항상 첫번째 node로 위치할 수 있도록 했다.

(firstchild는 insertBefore()의 2번째 파라미터로 활용)

array에는 push를 통해 꼬리로 들어가더라도

html 상에는 머리로 들어가니깐 새로고침없이도 최신순 정렬되는 것이다.

또 기존 localStorage에 있던 얘들을 불러와 HTML로 뿌릴 때도 같은 function을 활용하고 있는데

그러니 새로 추가된 건과 localStorage에 있던 건 모두 최신순으로 정렬되는 것을 확인할 수 있었다.

정리

array 머리에 넣는다 : unshift() / array 꼬리에 넣는다 : push()

👉근데 localStorage에 반영되는 내용이기에 이 array 순서는 새로고침해야 반영된다

👉 PreventDefault()를 넣었다면, 애초에 HTML에 넣을 때 머리에 넣을 수 있도록 하자 :

insertBefore(newNode, list.firstchild)

https://lim0517sh.github.io/recordInspirations/

노마드코더에서 JS 수업을 들었다.

들어도 이걸 어떻게 써야하는지 감이 하나도..

HTML,CSS수업 들었을 때는 이런 느낌이 많진 않았던 것 같은데..

그래서 배운 것을 좀더 내것으로 만들기 위해

수업에서 나온 내용을 바탕으로 나만의 작은 서비스를 직접 만들어보기로 했다.

이름하여 영감기록지🔥

기능은 매우매우 간단하다

그냥 기록지이다.

기록하는 기능은 수업에서 TO DO LIST 파트를 많이 참고했다

그리고 또 한가지 작은 기능이 더 있다(어쩌면 나만 알 수 있는..)

바로 플레이스홀더가 바뀌는 기능이다.

이는 QUOTES AND BACKGROUND 파트를 참고했다.

https://lim0517sh.github.io/recordInspirations/

직접 나만의 서비스를 개발하면서 느낀 건

이 코드가 왜 쓰였는지 직접 써봐야 안다는 것이다.코딩은 역시 써봐야 안다그리고 막힌 곳이 풀렸을 때 쾌감이 쩐다는 것이다.카페에서 혼자 세레머니하고..아주 쾌감이 대단하다할수록 코딩이 재밌는게 새로운 취미가 생기는 것 같아 즐겁다.

JSON(JavaScript Object Notation) 특징

• 읽기 좋음(가독성)
• 프로그램 언어와 플랫폼 상관없이 사용 가능
• JS의 Object마냥 Key : Value 조합
• 브라우저와 통신 가능, 모바일과도 통신 가능

stringify() => Object를 JSON으로

• replacer로 보내고 싶은 애만 JSON으로 보내기 가능
• Symbol이나 class > method는 안됨

parse() => JSON을 Object로

• 큰 따옴표에 묶여 string으로 나옴
• reviver로 원하는 형태(data type)로 나오게 할 수 있음

object : name과 value로 구성된 property의 집합
   e.g. Edwin = { age:26, height: 170, nickname:"Edwin", status:"working", coding:function(){}, eating:function(){}}
     여기서 name은? age, height, nickname, status, coding, eating
     여기서 value는? 26, 170, Edwin, working, funciton()
     property는? Edwin이라는 object 안 각각의 name: value 구성
         그중 function property가 method -> 그럼 여기서 method는? coding:function(){}, eating:function(){}

내용 참조 :