본문 바로가기

전체 글79

01. 데이터 타입 (코어 자바스크립트) 책을 읽은지는 꽤 지났지만, 다시한번 복습 겸 기록을 남겨보려고 합니다. 책을 읽고 요약해 정리한 내용의 전문은 제 개인 노션에 정리해놓았습니다. 데이터 타입데이터 타입의 종류자바스크립트 데이터 타입의 종류는 기본형(Primitive Type)과 참조형(Reference Type)으로 나뉜다.기본형에는 number, string, boolean, null, undefined, Symbol이 있고,참조형에는 object(array, function, Date, RegExp, Map, WeakMap, Set, WeakSet)이 있다.데이터를 할당하거나 연산 시 기본형과 참조형 모두 복제를 한다.기본형은 값이 담긴 주솟값을 바로 복제하고, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한.. 2024. 9. 16.
이게 무슨 일이야? 배민다운, 배민 사람들의 이야기 해당 책을 접하게 된 계기는 영등포 롯데백화점 내 카페 레드브릭(RDBK)에 갔는데 뭘 읽어볼까~ 하다 우연히 내 시선에 잡혀 읽게 되었다. 핸드북 사이즈에 조그만 책, 금방 읽을 수 있겠다 싶어서 더 손이 쉽게 갔던 것 같다. 책을 읽으면서 기억하고 싶은 문장들을 기록해 놓았는데, 공유해보고자 한다. 개발자라면, 아니 우아한형제들에 관심이 있는 사람이라면 SNS에서 한 번쯤은 봤을 아래 이미지그때는 함께 보던 이들과 맞아~ 맞아~ 이래야지! 하며 공감하며 배민의 이런 기업문화의 공유가 타 회사의 문화까지 긍정적인 영향을 주는 것 같아 긍정적으로 보게 되었다. 이제 아래부터는 조금은 정돈되지 않았지만, 책을 읽으면서 기록하고 싶었던 문장들을 나열해보고자 한다.이나모리 가즈오 회장님은 일을 다시 정의해요... 2024. 9. 12.
memo, useMemo 이해하기 리액트 공식문서를 보고 정리한 내용입니다.누군가 내게 memo, useMemo, useCallback 그거 왜 써? 라고 물어본다면 자신 있게 대답할 수 있을까?"성능 최적화를 위해 쓰지~""어떻게 최적화가 되는데?""음..."학습 전 누가 나에게 물어봤다면 이렇게 꿀 먹은 벙어리가 되어버렸을 것 같다...!하지만 이번에 나만의 React 만들기를 구현하며 memo, useMemo를 직접 구현해보려고 하니 다시 개념을 확실히 짚고 넘어가야 할 필요성을 강하게 느껴 학습해보았다.사실 당연한 거지 뭔지 알아야 만들 수 있으니까~!그래서 시작한 공식문서 정리! 이 정리를 바탕으로 정리가 되어 구현까지 진행할 수 있었다!시작해보자 😁 memo공식문서 : https://ko.react.dev/reference/.. 2024. 9. 11.
나만의 React 만들기(Build your own react) - STEP +α STEP +α - memo, useMemo 구현 지금까지는 문서에 나와있는 내용을 차근차근 따라 하며 구현해 봤다.한 번에 이해가 가지 않는 부분들이 있어서 문서보고 따라치며 github README에 정리 -> 정리한 내용을 바탕으로 다시 처음부터 코드를 짜보며 블로그에 다시 정리 -> 마지막으로 코드 다시 작성해 보면서 총 3번을 해보니까 이제야 흐름이 눈에 보이기 시작했다!문서 내용에 그치지 않고, 더 나아가 memo, useMemo를 구현해야 한다고 하면 어떻게 작성해야 할지 추가 스텝을 진행해보려고 한다!우선 이 memo, useMemo를 구현하기 전에 memo와 useMemo가 뭔지 알아야 구현을 시작할 수 있으니 개념 정리를 다시금 진행했다. 개념 정리는 노션에 정리해 놔서 이 글 바로 다음.. 2024. 9. 10.
나만의 React 만들기(Build your own react) - STEP 8 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 8 - Hooks이제 function components가 있으니 state를 추가해보는 작업을 해보겠다.const Didact = { createElement, render, useState,};/** @jsx Didact.createElement */function Counter() { const [state, setState] = Didact.useState(1); return setState((c) => c + 1)}>Count: {state};}const element = ;const container = document.getElementById("root"); 영.. 2024. 9. 9.
나만의 React 만들기(Build your own react) - STEP 7 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 7 - Function Components이제 function components에 대한 지원을 할 수 있도록 코드를 수정해보자. function App(props) { return Hi {props.name};}const element = ;const container = document.getElementById("root");Didact.render(element, container);위와 같이 h1을 반환하는 간단한 function component를 사용해보겠다.위 jsx 코드를 js로 변환하면 아래 코드와 같다.function App(props) { return Didact.. 2024. 9. 7.
나만의 React 만들기(Build your own react) - STEP 6 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 6 - ReconciliationReconciliation이란 재조정이라는 의미이다.리액트 공식문서에도 해당 내용이 있으니 참고해도 좋을 것 같다. 이전 step까지는 DOM에만 항목을 추가했다.이번 step부터는 노드를 업데이트하거나 삭제하는 방법에 대해 학습할 것이다.답을 먼저 말하자면 렌더링 함수에서 받은 요소를 DOM에 커밋한 마지막 fiber tree와 비교해야 한다.비교를 위해 커밋를 마친 후에 DOM에 커밋한 마지막 fiber tree에 대한 참조를 currentRoot라는 변수로 저장했다.즉, currentRoot는 이전에 렌더링된, 그리고 DOM에 커밋된 fiber tre.. 2024. 9. 6.
나만의 React 만들기(Build your own react) - STEP 5 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 5 - Render and commit Phases이전 step에서 수정해야 할 코드가 있다. if (fiber.parent) { fiber.parent.dom.appendChild(fiber.dom);}바로 이 부분인데, element에 대해 작업할 때마다 DOM에 새 노드를 추가하고 있다. 전체 트리 렌더링을 완료하기 전에 브라우저가 작업을 중단할 수 있는데, 이 경우 사용자에게는 완전하지 않은 UI가 표시된다. 따라서 DOM을 변경하는 부분을 제거하고, 대신 fiber tree의 root를 추적할 것이다.이를 work in progress root, 줄여서 wipRoot라고 부른다.. 2024. 9. 6.
나만의 React 만들기(Build your own react) - STEP 4 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 4 - Fibers이제 앞선 step에 이어 작업 단위를 구성해야 한다. 이때 fiber tree라는 데이터 구조가 필요하다.각 element마다 하나의 fiber가 있고 각 fiber는 작업 단위가 된다. Didact.render( , container);위 코드를 Fiber Tree로 나타내면 다음과 같다. 위 코드를 element tree로 렌더링한다고 가정해 보자.root fiber를 생성하고, nextUntilOfWork로 설정한다.나머지 작업은 PerformUnitOfWork 함수에서 수행되며 각 fiber에 대해 3가지 작업을.. 2024. 9. 5.

티스토리툴바