차마시는 개발자

TIL Done it Cookie Http 요청시 헤더에 Cookie가 같이 나가기 때문에 주의 document.cookie Local Storage key=value 기반으로 Local에 저장 도메인 기반 Storage 생성(도메인이 같으면 여러탭에 같은 Storage 공유) 직접 삭제 안하면 삭제되지 않는다. JSON.stringify(), JSON.parse() 주로 사용 //저장 localStorage.setItem('문자열', '문자열'); //불러오기 localStorage.getItem('문자열'); //삭제 localStorage.removeItem('문자열'); //전체 삭제 localStorage.clear(); Session Storage 전반적으로 Local Storage랑 같다 B..

TIL Done it 함수형 프로그래밍 나쁜 습관 지우기 reduce로 모든 것을 다 해결하려 하지 말자!!! => reduce + 복잡 함수 보다 reduce + 간단 함수 + map or filter TodoList 만들기 순서 Component 나누기 + html 구조 / 인자 들어오는 것 생각 html 제작(기본적인 틀) Component 기능 제작 this.render로 실행을 하는 식으로 제작 연결된 기능을 이용할 때는 setState 사용 App.js 제작 및 정리 Feeling 강의를 다 듣고 스스로 만드는 식으로 공부 방법을 바꾸게 되었습니다. 스스로 만들때 생각보다 막히는 것이 많아서 놀랐습니다. 그래도 뭔가 발전한다는 느낌이 들어 기분이 참 좋습니다. :) 젠지 화이팅! REF 프로그..

TIL Done it Promise Error handling Promise.reject을 있 을 때 Error을 출력하지 않고 나중에 원할 때 출력하는 방법 클로저 문제에 대한 var와 let의 차이점 명령형 프로그래밍 "어떻게" 처리하는 것이 있는 프로그래밍 일일이 과정이 다 나와 있는 프로그래밍 const a = (arr) => { for (let i = 0; i { arr.forEach((v, i) => console.log(v)); } Error handling 동기적 1. 인자 지정 fu..

클로저 문제에 대한 var와 let의 차이점(왜 5 5 5 5) 같은 부분 setTimeout()함수가 task Queue에 들어간 다음 call stack에 있는 for문이 끝나면 call stack에 들어와서 실행을 하는데 이때 클로저를 이용하여 i를 참조합니다. 1. var인 경우 var는 함수형 스코프로 setTimeout()함수가 call stack에 들어와서 실행 할 때 상위 스코프에게 i값을 물어보면 i값은 이미 5값이 되어 있어서 5 5 5 5 5와 같이 출력이 됩니다. const nums = [0, 1, 2, 3, 4]; for (var i = 0; i < nums.length; i++) { setTimeout(function () { console.log(`${i}`); }, i * 1..

Promise.reject있어 중간에 Error을 출력하지 않고 나중에 원할 때 출력하는 법 => catch를 미리 걸어두는 것!! a); 2. Error 출력도 안하고 Catch를 원할때 Error 값 받아오는 경우 Promise.reject 부분만 진행을 하고 .catch는 진행을 하지 않은 상황이기 때문에 다음 원하는 부분에서 .catch를 활용할 수 있습니다. var a = Promise.reject('ㅎ'); a.catch(a => a); 마무리 Promise를 반복하면서 Error가 있는 부분을 처리하는 것에 대해 미리 catch를 적용시켜 Error를 미리 출력하지 않고 원하는 부분에서 Error를 출력하도록 하는 방법들입니다. 이것에서도 catch를 미리 실행하는 것에 따라 Error를 원..

TIL Done it document.createDocumentFragment() DOM 트리를 build하기 위해 DOM 노드를 추가할 수 있는 새 공간을 만들어 줍니다. => 가상 공간을 만들어 계속 DOM이 추가 되고 렌더링 되는 것을 막기 위한 방법 box-sizing content-box: width, height 포함, padding, border 미포함 border-box: width, height, padding, border 포함 Promise Callback 함수와 다르게 비동기 상황을 다룹니다. Promise라는 class를 통해 만들어진 instance를 반환하는데 그 값은 대기(Pending), 이행(Fulfilled), 실패(Rejected)를 다루는 일급 값으로 이루어져 있다...

TIL Done it Dynamic Programming(DP) Memoization 하향식 접근 (작은 것 -> 큰 것) => 작은 값(저장)을 통해 큰 값 찾는 방법 필요할 때 계산 Tabulation 상향식 접근 => 미리 답을 구해놓고 필요할 때 사용하는 방법 미리 계산 HTML : Structure + Semantic CSS: Expression 선택자, 복합 선택자 코드리뷰 초기 (고수준 피드백) 버그, 장애, 성능, 보안 Extract Method, Composed Method, Invert-if(복잡도) 후기 (저수준 피드백) (선택적인) 설계 개선 변수명 변경, 주석을 명확하게 하는 것 ... [Nit] 태그 활용: 고치면 좋지만 아니어도 그만 Feeling 마지막 커피챗을 하였습니다. ..

TIL Done it 함수형 프로그래밍 go : 즉시 평가하는 함수 const go = (...args) => reduce((a, f) => f(a), args); ex) go( 0, a => a + 1, a => a + 10, a => console.log(a)); //11 args: 인자들, a: 인자 pipe : 합성된 함수를 만드는 함수(함수를 return) //인자 1개 const pipe = (...fs) => (a) => go(a, ...fs); ex) const a = pipe( a => a + 1, a => a + 10, a => console.log(a)); a(0);//11 //인자 여러개 const pipe = (f, ...fs) => (...as) => go(f(...as), ....