성장하는 개발자 되기🏃🏻♂️
아 맞다 블로그...! 🤦🏻♂️
(매일 써야지 하면서 깜빡하고 하루에 몰아서 써버리기 👀)
추천 포스트
-
React 에서 비즈니스 로직 분리하기 (Custom Hooks Pattern)React 2022.04.25 20:56
관심사의 분리 여러분은 내일 A 과목을 시험 칩니다. 벼락치기의 민족답게 우리는 수업 중에 필기했던 내용들을 시험 전 날이 되어서야 한 번 살펴보려고 합니다. 그런데, 여러분의 노트에는 여태 들었던 모든 과목의 강의에 대한 내용이 필기되어 있습니다(꽤 성실하네요). 당장 내일 시험인데, 이렇게 갖가지 과목이 섞여있는 노트에서 A과목에 대한 내용만 뽑아 살펴보자니 눈앞이 깜깜합니다. 몇몇 내용은 A과목에 대한 내용인지 아니면 다른 과목의 설명인지 혼란스럽기까지 합니다. "누가 저런 바보짓을 해?"라고 생각하실 수 있는데 실제로 개발을 할 때 종종 일어나는 일입니다. 하나의 메서드, 혹은 컴포넌트가 굉장히 많은 일을 담당하고 있을 때 우리는 위와 비슷한 상황을 경험합니다. 새로운 기능을 추가해야 하거나 오류..
-
우아한테크캠프 4기 최종 합격 후기우아한테크캠프 4기 2021.06.25 13:59
이 글은 후에 다가오는 우아한 테크캠프를 준비하시는 분들께 도움이 되었으면 하는 의미에서 작성한 글입니다. 저작권 때문에 문제를 알려드릴 수는 없지만, 개인적으로 어떻게 준비를 했는지 최대한 자세하게 작성을 해보겠습니다. 서류 접수 지난 4월 말에 배달의 민족 기술 블로그에 글 하나가 올라왔다. 내가 그토록 기다리던 우아한 테크캠프 4기의 모집이 시작된 것이다. 게임 개발자에서 웹 개발자로 전향한 내게 있어서 큰 전환점이 될 것 같아 바로 지원을 했다. 우테캠에 지원하게 된 세가지 이유는 아래와 같다. 1. 좋은 프론트엔드 동료 개발자들과의 협업 기회 - 지방에 게임 개발자로 살면서 가장 큰 갈증을 느낀 부분이다. 주변에 웹 개발자가 없었고, 때문에 코드리뷰를 하거나 다양한 기술에 대한 의견을 공유 할 ..
-
[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] === 123 // arr.length === 3 위와 같이 생긴 객체의 프로퍼티에 접근하는 것은 일반적인 배열을 사용법과 똑같다는 것을 알 수 있다. 위와 같이 자바스크립트에서의 배열은 index를 key로 프로퍼티 값에 접근할 수 있..
-
02. 모바일 100vh 스크롤 문제 해결하기우주 심리 테스트 2021.06.09 20:10
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 vh 우리는 종종 스크린 사이즈의 너비를 혹은 높이 이용해 css 스타일링을 하곤 한다. 이 때 사용하는 단위가 바로 vw, vh 인데 1vw는 스크린 너비의 1%, 1vh는 스크린 높이의 1%를 말한다. 다시 말해, 100vw는 스크린 가로 사이즈, 100vh는 스크린 세로 사이즈를 의미한다. 이번 mbti 페이지에는 이 vw, vh라는 단위를 자주 사용했다. 브라우저의 관리자 모드에서 모바일 환경에서의 해상도를 미리 확인 해 볼수 있는데, 처음에 우리는 이 모드로 계속해서 확인 하면서 화면에 딱 맞는 ..
-
03. 렌더링 최적화(1) Memoization을 통한 리렌더링 최소화세계 여행 지도 2021.06.03 23:52
0. Performace / React-Profiler를 통한 퍼포먼스 확인 열심히 기능을 구현했지만 뭔가 반응이 살짝 느려서 리액트 개발자 툴인 profiler로 확인을 해보았다. 마우스를 옮길 때 마다 자그마치 400ms가 넘는 미친 반응속도가 나오고 있었다. 물론 npm run start로 실행하고 있다고는 하지만 너무나도 심각한 수준이었다. 조금 더 자세히 살펴보자, 그 이유를 알 것도 같았다. (사실 예상은 했었지만 이정도일줄은 몰랐다.) 180 x 90. 그러니까 만 육천개가 넘는 component들이 마우스가 이동 할 때 마다, 조금 더 정확하게는 마우스가 가리키는 나라가 변할 때 마다 모두다 새로 렌더링 되고 있었다...! 마우스 호버링 이벤트가 일어나면 상위 컴포넌트인 WorldMap의 ..
-
04. 렌더링 최적화(2) Recalculation-style 시간 줄이기세계 여행 지도 2021.06.04 10:53
빌드 버전을 실행해서 Performance 탭을 확인 해 보니, mouse over 이벤트에 의한 연산 등 많은 부분에서 성능이 올라갔지만, Recalculation-Style이라는 부분에서 여전히 40ms정도의 시간이 걸리고 있었다. (아무래도 컴포넌트가 많은 것도 한 몫 하겠지?) Reacalculation-Style이요? https://hovlee.tistory.com/25 전에 포스팅에서 언급한 렌더링 순서에 대해 간단하게 다시 정리하자면 최초에 페이지를 불러오게 되면 브라우저는 다음과 같은 순서로 페이지에 렌더링을 하게된다. 1. HTML 파일을 위에서 아래로 한 줄씩 차례대로 읽어 tag들을 파싱해 DOM Tree를 만들어나간다. 2. 중간에 link tag를 만나면 HTML 파싱을 중단하고 ..