성장하는 개발자 되기🏃🏻♂️
아 맞다 블로그...! 🤦🏻♂️
(매일 써야지 하면서 깜빡하고 하루에 몰아서 써버리기 👀)
추천 포스트
-
React 에서 비즈니스 로직 분리하기 (Custom Hooks Pattern)React 2022.04.25 20:56
관심사의 분리 여러분은 내일 A 과목을 시험 칩니다. 벼락치기의 민족답게 우리는 수업 중에 필기했던 내용들을 시험 전 날이 되어서야 한 번 살펴보려고 합니다. 그런데, 여러분의 노트에는 여태 들었던 모든 과목의 강의에 대한 내용이 필기되어 있습니다(꽤 성실하네요). 당장 내일 시험인데, 이렇게 갖가지 과목이 섞여있는 노트에서 A과목에 대한 내용만 뽑아 살펴보자니 눈앞이 깜깜합니다. 몇몇 내용은 A과목에 대한 내..
-
[JavaScript] 배열(Array)과 이터러블(Iterable)JavaScript 2021.10.19 14:47
배열 (Array) 일반적인 자료구조에서의 배열은 '연속된 메모리 공간에 나열된 동일한 타입의 데이터(요소)들의 집합'을 이야기한다. 때문에 배열의 주소만 알고 있다면 해당 배열의 n번째 데이터는 어떤 값인지 O(1)의 속도로 (아주 빠르게) 알 수 있다. 자바스크립트의 배열은 이러한 배열의 특징을 흉내내고 있는 아주 특수한 객체다. const arr = { 0: 100, 1: 123, 2: 129, length: 3 } // arr[0] === 100 // arr[1] === 1..
-
02. 모바일 100vh 스크롤 문제 해결하기우주 심리 테스트 2021.06.09 20:10
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 vh 우리는 종종 스크린 사이즈의 너비를 혹은 높이 이용해 css 스타일링을 하곤 한다. 이 때 사용하는 단위가 바로 vw, vh 인데 1vw는 스크린 너비의 1%, 1vh는 스크린 높이의 1%를 말한다. 다시 말해, 100vw는 스크린 가로 사이즈..
-
03. 렌더링 최적화(1) Memoization을 통한 리렌더링 최소화세계 여행 지도 2021.06.03 23:52
0. Performace / React-Profiler를 통한 퍼포먼스 확인 열심히 기능을 구현했지만 뭔가 반응이 살짝 느려서 리액트 개발자 툴인 profiler로 확인을 해보았다. 마우스를 옮길 때 마다 자그마치 400ms가 넘는 미친 반응속도가 나오고 있었다. 물론 npm run start로 실행하고 있다고는 하지만 너무나도 심각한 수준이었다. 조금 더 자세히 살펴보자, 그 이유를 알 것도 같았다. (사실 예상은 했었지만 이정도일줄은 몰랐다.) 180..
-
04. 렌더링 최적화(2) Recalculation-style 시간 줄이기세계 여행 지도 2021.06.04 10:53
빌드 버전을 실행해서 Performance 탭을 확인 해 보니, mouse over 이벤트에 의한 연산 등 많은 부분에서 성능이 올라갔지만, Recalculation-Style이라는 부분에서 여전히 40ms정도의 시간이 걸리고 있었다. (아무래도 컴포넌트가 많은 것도 한 몫 하겠지?) Reacalculation-Style이요? https://hovlee.tistory.com/25 전에 포스팅에서 언급한 렌더링 순서에 대해 간단하게 다시 정리하자면 최초에 페이지를 불러오게 되면 브라..