이전에 react-hook-form의 input 입력에서는 ref를 사용하는 것을 확인했다. 그렇다면 라이브러리에서도 ref를 사용하는데, useState보다 ref가 더 좋은 방법일까?useRef와 useState의 차이React 공식 문서에서는 ref를 "컴포넌트가 일부 정보를 기억하고 싶지만, 해당 정보가 렌더링 로직에 영향을 미치지 않는 경우" 사용하는 것이 적절하다고 설명한다. 주로 포커스 제어, 값 가져오기, DOM 요소 조작 등에 사용된다고도 적혀있다. 반면, useState는 컴포넌트의 상태를 저장하고, 값이 변경될 때 리렌더링을 발생시키는 역할을 한다. 코드 예제: useRef와 useState 비교import { useState, useRef } from 'react';export de..

React 앱 배포 버전이 바뀔 때마다, 빌드 파일을 서버 개발자님에게 전달해야 했다.서버 개발자분도 다양한 업무를 보시다 보니, 빌드 파일을 전달해도 응답이 늦거나 실제 서버에 반영되는 시간이 늦어졌다. 모바일 서비스와 다르게, 웹 서비스는 심사 과정을 거치지 않고 서비스가 배포되기 때문에 이러한 늦은 반영은 디메리트가 있다고 생각했다.앞으로 몇달간 여러 프로젝트를 진행하면서, 이러한 상황을 지속적으로 겪을 것이였기 때문에 자동 빌드 및 자동 배포를 고민하게 되었다.GitHub Actions을 선택한 이유CI/CD 도구는 여러 가지가 있지만, 이번 자동화 과정에서는 GitHub Actions을 선택했다. 이유는 다음과 같다.✔ GitHub과 네이티브 통합 → 별도 설치 없이 바로 사용 가능✔ 간단한 ..

Recoil 메모리 누수 확인을 하려고, 성능 확인 라이브러리 이것 저것을 확인해보다가 React Dev tools를 사용하게 되었다.Dev tools를 사용하면서 메모리 누수 보단 오히려 렌더링 관점의 확인을 더 할 수 있었다. 예를 들어, 컴포넌트의 리렌더링 빈도와 원인을 시각적으로 파악할 수 있었다. 내가 발견한 상황은,input의 값을 useState-onChange로 변경하면, 글자 하나 변경당 useState를 갖는 컴포넌트가 리렌더 되는 것을 확인했다.하지만 react-hook-form에서는 register가 적용된 input의 값이 변경되어도, 컴포넌트가 리렌더 되지 않았다. [ 여기서 'register가 적용된 input'은 react-hook-form에서 제공하는 함수로 관리되는 입력 ..

이전 글에서 Recoil을 선택한 이유와 장점에 대해 설명했다.마지막에는 Recoil의 메모리 누수 문제점에 대해 언급하며, 내 프로젝트에서도 이 문제가 발생하고 있는지 파악해보겠다고 했다. 결론적으로, 현재 진행 중인 외주 프로젝트에서는 메모리 누수가 발생하지 않았다.[ 확실히 알게 된 건, atom만 쓴다면 메모리 누수 문제는 없다. ]메모리 누수가 일어나고 있다고 가정하고, atom의 메모리 사용 상태를 지속적으로 점검했지만,기존에 사용하던 atom들에서 문제가 발견되지 않았다. [ = 사용되지 않으면서도 메모리에 남아 있는 atom은 없었다. ] 상당히 뻘짓을 많이 했다. 메모리 누수가 일어난다고 해서, 없는 누수를 찾으려고 크롬 개발자 도구 메모리 탭 기능들을 몇일이나 봤다. 이해를 돕기 위해,..

웹 페이지는 HTML, CSS, JavaScript로 구성된다.그런데 이걸 브라우저는 어떻게 받아서 사용자 눈앞에 ‘화면’으로 보여줄 수 있을까?1. HTML 수신 (Byte Stream)브라우저는 서버로부터 HTML 파일을 바이트 스트림(byte stream) 형태로 전달받는다.즉, 0과 1로 이루어진 데이터 덩어리를 먼저 받는다.예: 0100111001101010... 2. 문자 인코딩 (Decode)받은 바이트 스트림을 사람이 읽을 수 있는 **문자(Character)**로 변환한다.대부분의 웹사이트는 UTF-8 인코딩을 사용한다. 3. 토큰화 (Tokenize)이제 브라우저는 문자 하나하나를 읽으면서 문법 구조를 파악하기 시작한다.HTML 문서는 , /, = 같은 구조적 기호로 이루어져 있다.He..