Front-End13 Promise.all vs Promise.allSettled vs Promise.race vs Promise.any 프롤로그 본 글에서는 Promise의 method의 성공 및 에러 시 반환 값을 도표 형태로 정리하고자 합니다. Promise에 대한 개념은 ko.javascript.info와 mdn docs을 살펴보시면 좋을 것 같습니다. 도표로 정리해 본 Promise method Promise.all() Promise.allSettled() Promise.race() Promise.any() 반환 값 fulfilled 된 iterable 성공 실패가 반영 된 iterable * 가장 처음으로 fullfiled 또는 rejected 된 Promise 가장 처음으로 fullfiled 된 Promise catch문 이동 하는 경우 Promise가 하나라도 reject되는 경우 - - 모든 Promise가 rejected.. 2023. 3. 12. Redux 기반의 폼 렌더링 성능 최적화 프롤로그 혹시, 라이브러리를 사용하지 않고 폼(Form)의 상태를 어떻게 관리하고 계신가요? 저는 주로 부모 컴포넌트에서 폼 상태를 관리하고, 자식 컴포넌트에게 상태를 변경하는 prop을 전달하곤 합니다. 아래 코드로 예를 들어보겠습니다. const Child = ({ value, onChange }) => { return ( value: {value} ); }; const Parent = () => { const [value, setValue] = useState(""); const handleChangeValue = (e) => { setValue(e.target.value); }; return ; }; 위 코드는 기능상으로는 문제가 없는 것 같습니다. 그런데, 여기서 자식 컴포넌트 Child가 더 .. 2023. 3. 8. 프론트엔드 개발자 관점에서 바라본 이미지 최적화 프롤로그 웹에서 이미지 파일을 사용하기 위해서는 네트워크 요청과 응답 과정을 거쳐야 합니다. 그런데, 만약 이미지 파일 요청의 응답이 느려지면 어떻게 될까요? 이미지 파일 다음에 받아올 파일들의 응답이 느려지게 됩니다. 즉, 네트워크 상에서 blocking 현상이 발생하게 되는 거지요. 이러면 페이지 로드 시간이 늦어지고 사용성이 저하될 것입니다. 이러한 문제점을 개선하기 위해서는 이미지를 최적화하여 웹 페이지 로드 시간을 줄여야만 합니다. 본 글에서는 간단하게 이미지 최적화를 위한 방법을 소개하고자 합니다. 어떻게 이미지 최적화를 할 수 있는가? 2가지 관점으로 바라볼 수 있습니다. 1. 이미지 파일의 크기를 줄여야 합니다 그러면, 이미지 크기를 어떻게 줄일 수 있을까요? 1.1 이미지의 크기를 리사이.. 2023. 1. 28. [TypeScript] satisfies operator in Typescript 4.9 프롤로그 타입스크립트 4.9 버전부터 추가된 satisfies 연산자가 무엇인지 알아봅시다. 타입 단언(Type Declaration) 타입 단언은 변수 명 뒤에 타입을 선언하는 방법입니다. 타입스크립트는 타입 단언보다는 타입 추론이 좋지!! 라고 말할 수 있는데요. 저는 타입 단언과 타입 추론은 상황에 알맞게 사용하는 게 좋다고 생각합니다. 타입 단언 예 그러면, 타입 단언을 언제 사용하나요? 저는 주로 객체의 키와 값의 타입을 고정시키고 싶은 경우에 사용합니다. 예로, 타입스크립트 공식문서 예제를 가져와 보겠습니다. 요구사항은 아래와 같습니다. 디자인 시스템에 사용 될, pallate 객체를 생성해야 합니다. pallate 객체의 키 타입은 red, blue, green 중 하나입니다. pallate.. 2023. 1. 16. [JavaScript] Resize Observer 프롤로그 브라우저 창의 크기 변경될 때 콜백 함수를 실행시키려면 어떻게 할까요? 혹시, 저와 비슷하게 window.addEventListener('resize', callback)을 떠올리셨나요? 그렇다면, 특정 태그의 크기가 변경될 때는 어떻게 콜백 함수를 실행시킬까요? 이번 글에서는 Resize Observer을 사용해 문제를 해결해보고자 합니다. 최근 업무에서 특정 엘리먼트의 resize 이벤트를 다룰 기회가 있었습니다. 브라우저 창의 크기가 아닌, 특정 엘리먼트의 크기가 변경되므로 window 객체에서 이벤트를 관리하고 싶지는 않았습니다. 해결 방법을 찾아보다가 Resize Observer API을 알게 되었습니다. 공부한 내용을 남겨 둘 겸 Resize Oberserver를 정리하려고 합니다. .. 2023. 1. 7. Schema Validation Layer 프롤로그 타입스크립트 덕분에 자바스크립트 개발이 편해지고 있습니다. 컴파일 시점에서 타입을 검사하니 코드의 품질을 높일 수 있고, VS Code와 같은 IDE에서 자동완성을 제공해 개발 생산성도 높아지게 됩니다. 하지만 타입스크립트를 통해 개발한다고 해서 완전히 안전한것은 또 아닙니다. 타입스크립트의 컴파일 된 결과물은 결국 자바스크립트 코드입니다. 컴파일 시점에 에러가 발생하지 않더라도, 컴파일 된 자바스크립트 코드에서 런타임 에러가 발생할 수 있습니다. 이번 글에서는 런타임 환경에서도 타입 안정성을 보장할 수 있는 방법을 소개하고자 합니다. 코드를 살펴보고 싶으시다면, 하단 링크를 참고부탁드립니다. GitHub - mugglim/zod-with-react-error-boundary: Boilerpla.. 2022. 12. 5. 이전 1 2 3 다음
