D.JOUNG

개요최근 렌더링 최적화를 공부하면서 리플로우와 리페인팅 방지에 각별히 신경을 쓰게 됐다. 리팩토링하는 코드 내에서 getBoundingClientRect() 메소드를 자주 호출하는 부가 있는데, getBoundingClientRect()는 아래 포스팅에 정리되어있는 리플로우 유발 메소드 중 하나다.https://gist.github.com/paulirish/5d52fb081b3570c81e3a What forces layout/reflow. The comprehensive list.What forces layout/reflow. The comprehensive list. - what-forces-layout.mdgist.github.com 그런데 성능탭을 열어 타임라인을 살펴봐도 성능에 문제가 될 정도로..

Next(React)에서는 HTML img 태그 대신 Image라는 자체 태그를 따로 제공하고 있다. Image 태그는 서버에서 이미지를 미리 받아와 화면에 더 빠르고 최적화된 방식으로 이미지를 표시할 수 있게 해준다.  보통 컨테이너(div) 크기에 맞게 반응형으로 이미지를 조절하고 싶을 때는 이미지를 div 백그라운드 속성으로 지정하거나 div 태그를 중복해서 작성한 다음 안쪽 div에 absolute 속성을 먹여 적용한다.  하지만 Image 태그를 사용하면 위와 같은 복잡한 방식 필요 없이 간단하게 부모 크기에 이미지를 맞출 수 있다. 일반적으로 구글링을 검색했을 때 나오는 방법은 다음과 같다.  layout 속성에 fill 값을 주어 이미지를 컨테이너에 꽉 채우고, objectFit 속성에 co..

componentDidUpdate와 componentWillUnmount는 클래스 컴포넌트에서 사용하는 생명주기 관리 메소드, useEffect는 함수 컴포넌트에서 사용하는 생명주기 관리 Effect hook이다. 공식 문서를 조금이라도 깔짝여본 적이 있다면 useEffect를 componentDidUpdate와 componentWillUnmount의 역할로 이해해도 괜찮다고 적시한 내용을 기억할지도 모른다. 하지만 위 두 함수와 useEffect가 완벽하게 동일한 역할을 한다면 모순되는 부분이 보이기 시작했다. 아무래도 자세한 이해가 부족한 것 같아 미뤄뒀던 공식 문서의 다음 장을 읽기 시작했다. 클래스 컴포넌트의 두 함수와 useEffect의 차이를 명확하게 이해하기 위해서는 먼저 두 컴포넌트의 생명..

자바스크립트는 클릭, 드래그, 키(KEY) 다운 등 사용자가 HTML DOM과 상호작용 할 수 있는 다양한 브라우저 이벤트를 지원하고 있다. 그 중 html 태그의 onClick 속성과 onContextMenu 속성은 각각 클릭과 우클릭 이벤트 발생 시 작동할 이벤트 핸들러를 속성값으로 갖는다. 이벤트 버블링과 이벤트 캡쳐링은 DOM 트리를 타고 전달되는 이벤트 객체의 이동 단계로, 이벤트 객체는 캡쳐링 단계인지 버블링 단계인지에 따라 부모 혹은 자식 요소로 전파된다. 쉽게 생각해서 각 요소에서 이벤트가 발생하는 순서라고 이해해도 괜찮을 듯 싶다. 웹3(w3.org) 공식 사이트에서는 이벤트 객체의 전이 단계와 순서를 다음과 같이 정의하고 있다. (1) 캡쳐링 단계 (Capture Phase) 에서는 w..

정규식이란? 정규 표현식, 줄여서 정규식은 어떤 문자열에서 원하는 특정 문자(열)을 탐색하는 방법이다. 반복문과 각종 string 메소드를 사용하면 정규식 없이도 원하는 문자를 찾을 수 있겠지만, 정규식을 사용하면 훨씬 길이를 단축하고 가독성을 높일 수 있다. 공식 문서에서는 '문자열에서 특정 문자 조합을 찾기 위한 패턴'이라고 설명하고 있다. 정규식은 웹 개발 시 데이터로부터 원하는 정보를 추출할 때 유용하게 활용할 수 있으며, 로그 분석 도구인 GA4와 Looker studio의 필터에도 정규식을 활용할 수 있는 옵션이 존재한다. (정규식을 할 줄 안다면 이 두가지 도구에서 필터를 훨씬 간편하게 이용 가능해진다.) 정규식을 만들고, 결과를 리턴받는 법 javascript에서 정규 표현식을 만드는 방법..

최근 리액트 강의를 수강하며 지뢰찾기 구현을 스스로 해보았다. 지뢰찾기 게임은 사용자가 빈 칸을 클릭했을 경우 그 주변 빈칸들과 숫자칸을 전부 오픈해야한다.  숫자칸이나 지뢰 칸을 클릭했을 경우는 클릭한 칸에 대한 이벤트만 처리해주면 되지만, 빈 칸을 클릭한 경우는 주변 칸 까지 모두 검사해야 하므로 조금 더 까다로운 알고리즘을 고민해봐야 했다. 결과적으로는 반복문과 재귀함수 두 가지 방법으로 빈칸 열기를 구현할 수 있게 되어 코드를 정리해두려고 한다. 사실 두 알고리즘 다 핵심 원리는 같다. 공백 칸을 클릭했을 경우, 해당 칸 근처의 여덟 칸을 검사하여 숫자 칸일 경우는 해당 칸만 오픈하고, 공백 칸일 경우는 해당 칸을 중심으로 같은 작업을 반복한다.  1. 반복문과 배열을 사용해 탐색하기 (bfs)l..

제로초님의 React 무료 강의를 계속 시청하며 기초를 다져가는 중이다. 1부 수업인 로또 숫자 당첨기까지 수강했고, 중간 점검 겸 React의 Hooks들을 정리하고 넘어가려고 한다. React는 두 가지 형식으로 컴포넌트 제작 방식을 제공하고 있다. 클래스 컴포넌트와 함수 컴포넌트인데, 원래는 클래스 컴포넌트를 주로 사용하다가 최근 현업에서는 거의 함수 컴포넌트만 사용하고 있다고 한다. React 공식 문서에도 'Class 컴포넌트를 삭제할 예정은 없다'라는 문구가 굳이 실려있는 것을 보면, 개발자들이 Class 컴포넌트의 삭제를 고려할 만큼 함수 컴포넌트가 대세이긴 한 것 같다. 함수 컴포넌트를 사용하면 클래스 컴포넌트보다 라인 수를 줄일 수 있고, this 예약어나 class 형식을 신경쓰지 않는..

웹 제작 프레임워크를 고민하다가 가장 많이 사용한다는 프레임워크 중 React 프레임워크를 선택해 공부해보기로 했다. 많이 알려져있는대로 React는 페이스북에서 만든 프레임워크이며, 페이스북에 사용된 React 컴포넌트는 무려 5만개를 넘어간다고 한다. 아직 공부하는 중이지만 React의 장점은 state라는 변수 하나로 html 요소를 편하게 변경하고, 컴포넌트 별로 개발 및 관리가 용이하다는 점에 있는 것 같다. state 변수를 변경하는 것 만으로 React는 전체 페이지 재접속 없이 해당 컴포넌트 영역만 자동으로 리렌더링 해준다. (렌더링이란 페이지를 다시 로드하는 동작을 뜻한다.) 독학을 하려는 중이고, 아직 유료 강의까지 결제할 마음은 없어서 웹 상에서 괜찮은 무료 강의를 찾아봤다. 그 중 ..