📚TIL
day9
Promise.then의 중요성
- then 매서드를 통해 결과를 꺼냈을 때의 값이 반드시 Promise는 아님
- Promise가 여러번 실행할 때 아무리 깊은 Promise라도 가장 안쪽에 있는 값을 꺼냄
- Promise가 중첩적으로 실행되고 있어도 단 한번의 then을 통해 실행할 수 있음
- 위 말은 Promise체인이 연속적으로 대기가 걸린 상황에서도 원하는 곳에서 한번의 then을 통해 해당하는 결과를 얻을 수 있다는 뜻
- 이런 규칙을 통해 JavaScript와 개발자, 개발자와 개발자 사이의 정확한 소통을 가능하게 함
Promise.resolve(Promise.resolve(Promise.resolve(Promise.resolve(11))))
.then(console.log) //11L.map, map, take
- L.map과 takeAll이 go에 나열될 때 map으로 치환 가능
go([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)],
L.map(a => a +10), //map(a => a +2)
takeAll,
console.log
)Kleisli Compsition - L.filter, take, nop
- Promise를 함게 지원하기 위해서는 Klesli Composition을 활용해야 함
- nop : 이후에 일어날 함수 대기열을 아무것도 하지 않고 끝내기 위해 사용
- nop의 사용 : filter에서 nop이 전달된다면 그 사이에 어떤 함수도 실행하지 않고 값을 take함수에 catch로 전달
const nop = Symbole('nop')
const go1 = (a, f) => a instanceof Promise ? a.then(f) : f(a)
//L.filter 함수 일부
//함수 내에서 b가 false일 경우 Promise.reject로 nop 전달
const b = go1(a,f)
if(b instanceof Promise)yield b.then(b => b ? a : Promise.reject(nop))
//take 함수 일부
//함수 내부에서 catch를 통해 받은 값이 nop일 경우 멈추지 않고 다음 코드를 평가
//아닐 경우 error를 다시 한번 전달
if(a instanceof Promise)a.then(
a => (res.push(a)).lengh === l ? res : recure()
).catch(e => e === nop ? recur() : Promise.reject(e))
//go 함수
go([1, 2, 3, 4, 5, 6],
L.map(a => Promise.reoslve(a * a)),
L.filter(a => a % 2),
take(2),
console.log
)day13
컴포넌트 방식으로 생각하기
- 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈
- TodoList 제작에 필요한 컴포넌트로 Header, TodoForm, TodoList, App, Main이 있으며 이런 식으로 추상화 할 수 있음
- 컴포넌트는 독립적으로 사용할 수 있으며 다른 곳엔 영향을 주지 않음
- 컴포넌트 사고를 통해 코드를 빠르게 수정하고 확장할 수 있음
Cookie
- 브라우저에 저장되는 작은 문자열로 FC 6265 명세에서 정의한 HTTP 프로토콜의 일부
- 다른 저장 방법들에 비해 가장 오래된 방식
- chrome 개발자모드 - application 에서 Cookie확인이 가능
- 유효기간을 넣지 않을 시 브라우저를 닫는 순간 정보가 사라짐
- 유효기간 입력에는 expires와 max-Age가 있음
- Coockie는 팝업으로 많이 사용됨
- HTTP요청시 헤더 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커질 시 HTTP요청 크기도 함께 커져 로딩이 느려짐
- 사이즈에 제한이 있으며 보안에 취약
document.cookie = 'language = javascript' //coockie 추가
const coockie = document.coockie //coockie 불러오기
//expires 넣기 : 기입한 날짜에 쿠키가 사라짐
new Date().toGMTString()
const date = new Date()
date.setDate(date.getDate() + 1) //하루뒤의 날짜로 변경
document.coockie = `country = Korea; expires = ${date.toGMTString()}`
//max-Age : 설정된 값 기준으로 기입한 기간 이후에 쿠키가 사라짐
document.cookie = `color = gray; max-Age = 60`
//60초 후 쿠키가 사라짐
document.cookie = `color = gray; max-Age = 0`
//갑에 강제로 0을 넣어 쿠키 삭제Local Storage
- key, value 기반으로 Local에 데이터 저장
- 도메인을 기반으로 Storage가 생성되며 도메인만 같다면 여러탭 내에서 같은 Storage가 공유됨
- 의도적으로 Storage를 삭제하지 않는 한 삭제되지 않음
- 일반적으로 네트워크 데이터를 cash하거나 편집 시 저장해 놓는 값들을 LocalStorage에 저장했다가 불러옴
- 코드 입력 시 window는 생랼 가능함
- chrome 개발자모드 - application - LocalStorage - 현재 도메인에서 저장된 정보 확인 가능
- LocalStorage에 값을 저장하는 3가지 방법
window.localStorage.country = 'Korea'
window.localStorage.('country') = 'Korea'
window.localStorage.setItem('country', 'Korea')
//덮어씌어질 위험이 있기 때문에 setItem을 이용해 저장하는 것을 권장
const storedCountry = localStorage.getItem('country') // 불러오기
localStorage.removeItem('country') //키 값을 이용해 삭제
localStorage.clear() //전체 삭제localStorage value에 JSON
- value에는 String만 넣을 수 있기 때문에 JSON.stringify로 넣고 JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋음
+string으로 변환하는 과정 없이 넣으면 JSON.string()해서 들어가기 때문에 출력시 [Object]Object가 출력
const user = {
name : 'hyoco',
color : ['gray', 'purple' ]
}
localStorage.setItem('user', JSON.stringify(user)) //저장
const storedName = JSON.parse(localStorage.getItem('name')) //불러오기Session Storage
- 전체적으로 Local Stroage와 동일
- 차이점은 브라우저를 닫을 시 저장된 내용이 초기화 됨
- 로그인을 스트릿하게 처리할 때, 임시값이 필요할 때 사용
- local, session 중 전략적으로 선택하여 사용
TodoList & Stroage
🌊하루를 마치며
13일차 강의는 TodoList를 제작하는 것이 중점이 되어 진행됐다. TodoList를 제작하는 과정을 따라서 코드를 쳐보면서 어떤식으로 컴포넌트를 나눠서 제작해야하는지 배울 수 있었다. 사실 내가 코드를 따라치지 않고 스스로 만들 수 있을까? 하는 생각이 들었다.. 아직 자신은 없지만 코드를 짤 때 의식적으로 컴포넌트 방식으로 생각하려고 노력해야겠당!
오늘 9일차 강의를 4개 정도 들었는데 재밌는 VanillaJS를 보다가 함수형을 다시 보려고 하니 이해가 어려워서 들었던 강의도 몇 개 들어야 했다. 오늘 강의에서 프라미스가 중첩으로 실행되고 있어도 한번의 then을 통해서 값을 받아올 수 있다는 점이 흥미로웠다. 프라미스의 끝은 어딜까?.. 정말 활용도가 높은 것 같다.
오늘 밀린 강의를 듣느라 배운 코드를 제대로 정리하지 못했다. 내일은 강의를 들은 후 부족한 코드를 정리할 생각이다!
Front-end Develop🥰