Pay it forward

강의를 처음 봤을 때는 curryr을 이해하지 못해서 curryr이 굳이 왜 필요하지?라는 생각을 했었는데 함수형 코드를 엄청 쉽게 만들어준다. 가독성이 좋아진다 강의는 인프런 유인동님의 '자바스크립트로 알아보는 함수형 프로그래밍 (ES5)'입니다. 커링이란 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 함수는 클로저를 반환하는 함수로서 함수의 평가시점을 뒤로 미루는 효과가 있다. 모든 인수를 전달받을때까지 클로저만 반환한다. 마지막 인수를 전달받으면 평가되어 값이 된다. function _curry(fn) { return function (a, b) { return arguments.length === 2 ? fn(a, b) : function (b) { return..

함수형 코딩의 핵심 개념이라고 한다. 1. 커링 : 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다 const printAddr = (location) => (town) => console.log(`${location}시 ${town}구`); printAddr('인천')('서'); // 인천시 서구 이렇게 함수가 함수를 반환하기 때문에 화살표가 두 개씩 보이면 커링이다. 이것을 es5로 구현해보자 function printAddr(location) { return function (town) { console.log(`${location}시 ${town}구`); }; } printAddr('인천')('서'); printAddr 함수가 첫 번째 인자가 전달되었을 때 loca..

mdn 같은 곳의 문서를 보면 어떤 메서드를 설명할 때 Object.prototype.~~~라고 표시된 메서드와 단순히 Object.~~~ 라고 표시된 메서드가 있다. 이것을 이해하면 해당 메서드를 인스턴스를 통해 호출해서 사용해야 하는지, 아니면 인스턴스를 만들지 않고 생성자함수 그대로 사용할 수 있는지 결정할 수 있으며 해당 메서드의 탄생 의도를 파악하는데도 도움이 된다. 그리고 무엇보다 문서를 제대로 읽으려면 알아야 한다. 결론부터 말하자면 Object.prototype.toString()는 프로토타입 메서드이고 Object.keys()는 정적메서드이다. 프로토타입 메서드 vs 정적 메서드 두 차이를 이해하려면 프로토타입에 대해서 이해해야 한다. 프로토타입은 자바스크립트가 객체를 생성할 때 메모리를..

이번주는 미루고 미루던 사이드 프로젝트 프론트,백 코드를 모두 배포하기로..! 1. 백엔드 서버 기존에 ec2에 배포해서 http 퍼블릭IPv4 주소로 연결해서 localhost에서 작업 2. 프론트엔드 배포, ec2를 새로 만들어서 배포, 80포트를 3000번포트로 연결해주기 위해 nginx로 포트포워딩 3. https설정을 위해 certbot을 시도했으나 이유를 알수없는 unauthorized에러 발생 4. 로드밸런서를 사용해서 ssl을 적용하는 방법이 있다는 것을 알게되어 로드밸런서 사용으로 변경 5. 도메인연결,포트포워딩,로드밸런서ssl적용까지 해서 배포 / 당연히 cors에러 발생 6. 센트리 배포하면서 https 와 http가 서로 통신할 수 없다는 것을 알고 있었으며 이 경우는 현재 내 백엔..

한 페이지에 최대 600개의 데이터를 가져올 수 있는 무한스크롤 페이지가 있다. 한 200개 정도 넘어가면서부터 화면이 바로바로 랜더링 되지 않고 흰 화면이 잠깐 나왔다가 뒤늦게 랜더링 되는 이슈가 있었다. 특히 모바일에서 이런현상이 나타났고, 사파리 브라우저에서 굉장히 심했다. 당연히 브라우저마다 현상이 다르니 사파리 브라우저의 메모리 문제가 가장 먼저 떠올랐다. 구글링을 해보니 사파리 브라우저의 리페인트 과정에서 소모되는 리소스 문제인 것 같다. 스크롤을 내리면서 사파리에서 성능측정을 해 보았다. 스크롤을 내릴수록 cpu사용량이 점점 많아지고 눈에 띄게 느려졌다. 트러블슈팅 1 스크롤이 길어지면 부모컴포넌트의 리랜더링이 발생하면서 다시 만들 필요 없는 Dom까지 랜더링 한다? 가장 부모컴포넌트에서 d..

우리 회사는 스타트업이긴 하지만 시리즈 C투자를 받을 정도로 매출이 있고 전망이 밝은 회사다. 그럼에도 불구하고 아래와 같은 순서로 에러에 대응하고 있었다. [Sentry 적용 전 서비스 에러 발생시] 1. 유저의 문의 2. 제휴팀에서 캡처요구 및 에러발생시간, 경로 등을 구두로 소통하여 정보 획득 3. 개발팀에 전달 4. 전달받은 정보를 토대로 에러 재현 및 코드 분석 이런 과정을 통해 개발자에게 전달되기까지 어마어마한 에너지의 손실이 발생한다. 마치 퍼널처럼 걸러지고 걸러져서 담당 개발자에게 온전히 전달되는 에러건은 실제 발생건의 아주 일부일 것이다. 심지어 고객이 "화면에 뻐끔뻐끔뻐끔이라는 글자만 나와요!" 라고 하면 정말 난감하다. "화면에 뻐끔뻐끔뻐끔이라는 글자만 나와요!" 라는 고객의 제보를 ..