개발새발 로그

리액트에서는 이벤트 객체가 아닌 합성 이벤트라는 객체를 사용한다고 한다.리액트에서 이벤트를 처리할 때 이벤트 위임으로 처리한다고 한다. 이렇게 리액트에서는 이벤트를 기존과 다른 방식으로 처리하는 것 같다.이를 공부하면서 학습한 내용을 정리해보려고 한다.  📖합성이벤트🤔Event에 offsetX가 없다고..? 예전에 프로젝트를 진행하면서 Event객체를 사용할 때 문제가 하나 있었다.받아온 Event 객체에 내가 원하는 속성이 없다고 뜨는 문제였는데 그때는 그냥 "아~ 그렇구나" 하고 넘기고 해결했었다. 오늘은 그 문제를 한번 다시 갖고 와서 깊게 파고들려고 한다. 리액트에서 아래와 같이 작성하면 타입스크립트 오류가 뜬다. function handleClick(e: MouseEvent) { co..

리액트 상태 관리 라이브러리가 내부에서 어떤식으로 구현이되는지 공부하면서구현 방식을 처음 봤을 때 이해하기가 어려웠다. 그래서 직접 코드를 작성해보고, 그림으로 표현하면서 더 쉽게 정리해보았다. 먼저 웹 애플리케이션에서 상태로 분류될 수 있는 것들은 대표적으로 아래와 같다.1. UI : 상호작용이 가능한 모든 요소의 현재 값(다크/라이트 모드,라디오를 비롯한 각종 input, 알림창의 노출 여부)2. URL : 브라우저에서 관리되고 있는 상태 값3. 폼(form): 폼이 로딩 중인지, 현재 제출했는지, 접근이 불가능한지, 값이 유효한지 등4. 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값도 상태로 볼 수 있다. 🤔왜 상태관리 라이브러리가 필요할까?웹 서비스에서 점차 다양한 기능이 제..

우리가 프로젝트를 빌드하기 위해서 많은 빌드 툴을 사용하고 있다. 그 중 대표적인 빌드 툴은 Babel과 Terser일 것이다.(Webpack도 빌드 툴이다.) 프로젝트의 규모가 커질 수록 전체 코드들이 Babel과 Terser과 같은 빌드 툴을 거쳐서 실제 프로덕션 코드로 변환되는 시간이 코드양에 비례해 늘어나게 된다. 빌드 시간이 오래 걸린다면 빌드를 할 때마다 그 시간을 기다려야 한다. 어떻게 빌드를 빠르게 할 수 있을까? NextJS에서 Next 12버전 부터 정식으로 도입된 SWC라는 툴이 있다. Next는 SWC로 구축된 새로운 컴파일러로 빌드하면 기존과 비교했을 때 빌드 타입이 5배까지 빨라진다고 소개했다. 이번 포스팅에서는 Babel과 Terser, SWC에 대해 알아보고, SWC가 왜 빠..

ref를 사용하고, 학습하면서 생각하게된 궁금점이 많았다.궁금점에 대한 해답을 찾으면서 학습한 내용을 정리해봤다. 🤔왜 ref를 props로 전달하면 안될까?useRef를 사용해서 자식 컴포넌트에 ref를 전달할 때 이렇게 코드를 작성할 수 있다.export default function MainPage() { const ref = useRef(null) return ( )}const ChildComponent = ({ ref }) => { useEffect(() => { console.log(ref) }, [ref]) return 하이}그러면 아래와 같이 경고문을 띄우게 된다.또한 undefined를 반환한..

React에서 제공되는 hook들이 있는데 이를 최대한 활용하는 것이 좋다고 개인적으로 생각한다. 특히 생소한 훅들이 몇몇 있는데 그 중에서 3가지를 가져와봤다. React 18에 도입된 새로운 기능인 useId와 useTransition,useDeferredValue 에 대해서 알아보자 📖useId https://react.dev/reference/react/useId useId – React The library for web and native user interfaces react.dev useId는 아래와 같이 사용한다고 한다. const id = useId() useId는 어떤 아이디를 생성하는 것으로 보인다. 그럼 useId를 실제로 console.log에 찍으면 어떻게 나올까? const ..

리액트의 특징 중 가장 많이 언급되는 것이 가상 DOM이라는 것이다. 하지만 이 가상 DOM에 대해서 자세히 모르는 경우가 많다. 이번 포스팅에서는 가상 DOM에 대해서 자세히 알아보려고 한다. 가상 DOM 생긴 이유? 가상 DOM은 왜 생겼을까? 가상 DOM 이전에 DOM을 먼저 알아보자 DOM이란 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 그럼 브라우저가 웹 사이트에 접근요청을 받고 화면을 그리는 과정을 살펴보자 CRP(Critical Rendering Path) 브라우저는 위 과정을 거쳐서 웹페이지를 렌더링 한다. 그렇다면 사용자의 인터렉션으로 업데이트가 된다면 어떻게 될까? 위처럼 자바스크립트가 DOM을 수정해서 업데이트가 발생한다..

우리는 리액트로 프로젝트를 개발할 때 객체 구조 분해 할당과 전개 연산자를 정말 자주 사용한다. 근데 이 객체 구조 분해 할당과 전개 연산자가 번들링 크기를 크게 만들어서 사용시 고려해야한다고 한다..! 나는 이 부분에 대해서 "왜 번들링 크기가 커지는 것이지?" 에 대해서 생각하게 됐고, "그럼 객체 구조 분해 할당이나 객체 전개 연산자는 사용하면 안되는거야?" 에 대해서 찾아보게 됐다. 발전해가는 Javascript 다른 언어와 마찬가지로 Javascript는 새로운 버전과 함께 새로운 기능이 나오고 있다. 이러한 Javascript 표준을 ECAMScript라고 한다. 그래서 작성하고자하는 자바스크립트 문법이 어떤 ECMAScript 버전에서 만들어졌는지 확인해야한다. 왜냐하면 모든 브라우저와 자바..

😁Modal 어떻게 만드니? Modal은 정말 많이 쓰이는 기능이다. 보통 다들 Modal 만들 때 어떻게 할까? 리액트로 Modal을 만든다고 하면 아마 아래와 같은 방법을 사용할 것이다. const Page = () => { const {isOpen, setIsOpen } = useState(false); return ( setIsOpen(true)}>모달 열기 {isOpen && ( 모달 테스트 )} ); }; 이렇게 간단하게 만들 수 있지만 단점이 존재한다. 렌더링 성능면에서 모달의 내용이 복잡하고, 빈번하게 열린다면 성능저하게 올 수있고, CreatePortal을 사용하지 않아 DOM 계층 구조에서의 위치문제가 생길 수있다.히 특히 Modal의 transition이나 애니메이션을 적용할 때 어려..