Pay it forward

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. 전달받은 정보를 토대로 에러 재현 및 코드 분석 이런 과정을 통해 개발자에게 전달되기까지 어마어마한 에너지의 손실이 발생한다. 마치 퍼널처럼 걸러지고 걸러져서 담당 개발자에게 온전히 전달되는 에러건은 실제 발생건의 아주 일부일 것이다. 심지어 고객이 "화면에 뻐끔뻐끔뻐끔이라는 글자만 나와요!" 라고 하면 정말 난감하다. "화면에 뻐끔뻐끔뻐끔이라는 글자만 나와요!" 라는 고객의 제보를 ..

얼마 전 카카오 프론트엔드 개발블로그를 보다가 내가 겪고 있는 불편함을 해결한 사례가 있어서 자세히 보게 되었다. https://fe-developers.kakaoent.com/2022/221127-api-layer/ `API 언제 나오나요?` 로 부터 독립하기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 'API 언제 나오나요?' 너무나도 익숙한 말인데..ㅋㅋ 카카오 개발자들도 똑같은 문제를 겪고 있었다니! 위 블로그를 참고해서 나의 문제를 해결해보려고 한다. 위 사례에서는 리덕스툴킷을 사용해서 문제를 해결했지만 나는 리액트쿼리를 사용하고 있기 때문에 리액트쿼리의 select 옵션을 통해 비슷한 기능을 구현할 수 있을 것이라고 생각했다. 쿼리 함수에서 반환하는 데이..

이번에 Lambda@edge를 공부하게 된 계기는 회사 서비스에서 gif파일이 최적화되지 않고 원본이 서빙되는 경우가 발생하여 대체 이미지 최적화가 어떻게 이루어지고 있는지 이해할 필요가 있었고 좀 더 쾌적한 서비스로 개선하고 싶어서 공부하게 되었다. 그게 Lambda@edge랑 무슨 상관이냐. Lambda@edge를 사용한 on-the-fly방식의 이미지 리사이징을 사용하고 있었기 때문이다. on-the-fly방식의 이미지 리사이징을 구현하게 되면 리사이징 된 이미지를 저장하는 s3가 필요 없다. 리사이징 된 이미지는 캐싱되어 오직 클라우드프런트 엣지로케이션에만 존재한다.(스토리지 비용이 안 든다) 첫 번째 요청하는 사용자는 cloutfront cache miss가 발생해서 오리진에 요청하고, 람다함수..