전체 글98 나만의 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. 나만의 React 만들기(Build your own react) - STEP 3 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 3 - Concurrent Mode이전 step까지의 코드에서 리팩터링이 필요한 부분이 있다. 그 부분을 먼저 수정하고 진행해 보자.바로 render function 내부에 재귀로 호출하는 부분이다.element.props.children.forEach((child) => render(child, dom)); [왜 문제가 될까?🧐]렌더링을 시작하면 완벽한 element tree를 렌더링 할 때까지 멈추지 않는다. element tree가 크면 메인 스레드를 오랫동안 차단할 수 있다. 그러면 브라우저가 사용자 입력 처리나, 애니메이션을 매끄럽게 유지하는 것과 같은 우선순위가 높은 작업을 .. 2024. 9. 5. 나만의 React 만들기(Build your own react) - STEP 2 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 2 - The render functionSTEP1 코드에 이어 이제 render function을 만들어보자.ReactDOM.render 버전을 Didact.render로 만들어보는 것이 이번 step의 목표다.function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => typeof child === "object" ? child : createTextElement(child) ), .. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 1 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 1 - The createElement Function이제는 React 코드를 우리만의 React인 Didact로 대체해보자.우선 createElement function을 만들어보는 것이 이번 step의 목표다. JSX를 JS로 변환하는 createElement 함수를 만들어보자.const element = ( bar )const container = document.getElementById("root")ReactDOM.render(element, container) 우선 STEP 0을 다시 되짚어보면,위 코드 element JSX가 babel에 의해 변환이 되면 아.. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 0 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.React가 제공해 주는 기능들을 당연한 듯 사용해 왔지만,React 내부가 어떻게 동작하는지 궁금해본 적 없이 당연한 듯 사용하기를 n년...그리고 모던 React Deep Dive를 사고 앞 챕터 부분을 분명 읽었는데 역시 빠르게 휘발되어 버렸다... build-your-own-react 에서 알려주는 대로 차근차근 따라가며 확실히 이해하는 과정 기록을 위해 블로그를 작성한다.왜냐면 사실 한번 쭉 따라 해봤는데, 완벽히 이해했나요? 아니요🙂↔️... 상태이기 때문이다.다시 차근차근.. 이제는 알고쓰자 React! 실습을 하며 같이 진행해야 하기 때문에 해당 문서에서 지원하는 리액트 버전을 .. 2024. 9. 3. 플러그인 세미나 - 주니어 개발자 취업 / 이직 전략과 맹점 나는 F-lab 멘토링을 진행하고 있다. k사 출신의 멘토님과 지금까지 3번을 진행했고, 멘토링은 한 주에 한 번 한 시간 동안 진행된다. 지난주 금요일부터 플러그인이라고 F-lab에서 주관하는 첫번째 세미나가 진행되었다 :)앞으로 매주 1번 진행 예정이고 유익한 인사이트를 제공하며 소통이 목적이다.지식의 선순환, 경험 공유를 통한 좋은 마인드셋 함양, 주니어 개발의 고민 해소, 성장과 커뮤니티의 장 형성을 목표로 진행된다.단, 이번 세미나는 F-lab 멘티와 수료생을 위한 내부 세미나로 진행되었다.안내를 보니 추후에는 공개 세미나도 진행될 예정이라고 한다...! 주니어 개발자 취업 / 이직 전략과 맹점이라는 주제로 Elkein 멘토님(NHN, 넷마블, 크래프톤 출신의 10+년차)이 진행하셨는데, 백엔드.. 2024. 9. 3. [Error] Page "src/app/~.page.tsx" has an invalid "default" export 문제 원인현재 프로젝트 진행 중에 서버 API로 요청을 받아 처리하지 않기 때문에,하드코딩으로 데이터를 임시로 넣어 아래와 같이 처리하고 있었습니다!interface Event { imageSrc: string link: string}interface EventPageProps { list: Event[]}const EventTempList = [ { imageSrc: '/images/sample.jpg', link: '/' },]export default function EventPage({ list = EventTempList }: EventPageProps) { return (...)} dev 환경에서 구동했을때는 전혀 오류가 나지 않고 잘 화면이 나왔는데,docker로 build되는 과정.. 2024. 5. 10. 이전 1 2 3 4 5 6 7 ··· 11 다음
