전체 글30 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. [Algorithm] 소문자로 이루어진 두 문자열에 중복된 문자가 존재하는지 확인하는 방법 두 문자열을 loop 돌거나, Set을 이용할 수도 있지만, bit masking을 통해 해결 가능! Python def wordToBits(word: str) -> int: bits = 0 for ch in word: bit = ord(ch) - 97 bits |= 1 0 TypeScript const wordToBits = (word: string) => { return Array.from(word).reduce((bits, letter) => bits | (1 { return (wordToBits(s1) & wordToBits(s2)) > 0; }; 2023. 1. 12. [JavaScript] Resize Observer 프롤로그 브라우저 창의 크기 변경될 때 콜백 함수를 실행시키려면 어떻게 할까요? 혹시, 저와 비슷하게 window.addEventListener('resize', callback)을 떠올리셨나요? 그렇다면, 특정 태그의 크기가 변경될 때는 어떻게 콜백 함수를 실행시킬까요? 이번 글에서는 Resize Observer을 사용해 문제를 해결해보고자 합니다. 최근 업무에서 특정 엘리먼트의 resize 이벤트를 다룰 기회가 있었습니다. 브라우저 창의 크기가 아닌, 특정 엘리먼트의 크기가 변경되므로 window 객체에서 이벤트를 관리하고 싶지는 않았습니다. 해결 방법을 찾아보다가 Resize Observer API을 알게 되었습니다. 공부한 내용을 남겨 둘 겸 Resize Oberserver를 정리하려고 합니다. .. 2023. 1. 7. 이전 1 2 3 4 5 다음