Pay it forward

얼마 전 카카오 프론트엔드 개발블로그를 보다가 내가 겪고 있는 불편함을 해결한 사례가 있어서 자세히 보게 되었다. 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가 발생해서 오리진에 요청하고, 람다함수..

이번에 서비스 이미지 로딩속도 개선을 위해 AWS lambda@edge를 공부하던 중 두루뭉술 알고 있던 CloudFront를 다시 한번 공부하며 기록을 남깁니다. CloudFront는 html, css, js, image 등 정적, 동적 콘텐츠를 전 세계 사용자에게 더 빠르게 제공하도록 지원하는 웹서비스이다. 어떻게 더 빠르게 지원하느냐! 결론부터 말하자면 S3나 EC2같은 오리진 서버 말고. 전 세계 곳곳에 사용자 가까이에 '엣지로케이션'이라고 하는 데이터 센터를 두고 사용자가 CloudFront를 통해 들어오면 지연시간이 가장 낮은 엣지로케이션으로 요청을 라우팅 한다. 그리고 이 엣지로케이션에 콘텐츠가 캐싱되어 있다면 오리진에 요청을 보내지 않고 사용자가 가까운 엣지로케이션이 바로 콘텐츠를 응답한다..

const funcValidation = (argsName: number) => { if (!argsName) { throw new Error(`first argument is required in convertTimeToMS function`); } if (typeof argsName !== 'number') { throw new Error(`${argsName} is not number type`); } }; function convertMinToMS(min: number) { funcValidation(min); return Number(min * 60 * 1000); } function convertHourToMS(hour: number) { funcValidation(hour); return N..

한참 개발하다 좀 뜬금없이 대체 누구는 매개변수라고 하고 누군 인수, 인자라고 하고.. 뭐가 맞는 걸까 차이가 있긴 한 걸까? 궁금하여 찾아보게 된 블로그를 정리하는 글 일단 결론부터 Parameters는 함수가 정의되는 부분에서 함수가 받는 변수들을 말합니다. Arguments는 함수가 호출될 때 함수에 전달되는 값입니다. 자바스크립트는 함수가 호출될 때 전달하는 Arguments의 개수와 함수 정의 부분의 Parameters의 개수가 달라도 에러를 발생시키지 않습니다. 이는 Arguments와 Parameters가 서로 전혀 다른 엔터티로 취급되어야 한다는 것을 뜻합니다. 맨 위에 argsCheck 함수 정의 부분에서는 Parameters가 총 3개로 정의가 되었습니다. 그리고 argsCheck 함수..

최근에는 회사에서 격무에 시달리고 사이드로 백엔드 개발에도 도전하게 되어 블로그를 작성하지 못했는데 유데미에서 Poco Jang님의 클린코드 자바스크립트 강의를 듣고 기존 코드의 작은 부분을 수정한 기록을 남깁니다. 기존코드 constants폴더에 상수들을 담고 있는 배열을 선언한다. printRefundReason함수는 RSN001, RSN002 같은 code를 인자로 받고 배열에서 filter함수를 통해 배열의 각 요소중 code가 인자로 받은 code와 일치하는 객체를 찾아내고 그 객체의 name을 반환한다. 문제점: filter를 사용해야 하기 때문에 지역변수를 하나 선언해야 하고 filter가 새 배열을 리턴해주므로 target[0]으로 접근하는 방식도 직관적이지 못하고 의도를 파악하려고 노력하..