들어가기 전 - Fiber의 등장fiber는 일반적인 자바스크립트 객체지만, 본질적으로는 UI 상태를 값으로 표현한 구조체다.React는 이 Fiber 노드들을 연결해 렌더 트리(가상 DOM 트리)를 구성하고, 이를 실제 DOM과 비교(diff)하여 변경사항만을 반영하는 방식으로 렌더링 효율을 높인다.React 공식 문서에서는 렌더링을 “상태 업데이트가 발생한 컴포넌트를 재귀적으로 호출하며 변경 사항을 계산하는 과정”이라고 설명한다.하지만 나는 이 설명이 너무 추상적어서 이해하기 어려웠다..『모던 React 딥 다이브』도 참고해봤지만, 내부 구조를 모른 채 개념만 다루다 보니 오히려 더 혼란스러웠다.그래서, 직접 React 코드를 뜯어보기로 결심했다. 🫠 FiberNode 구조function Fiber..

낙관적 업데이트낙관적 업데이트란 서버로부터 응답을 받기 전 UI를 미리 업데이트 하는 방법이다.사용자에게 빠른 피드백을 줄 수 있기 때문에 자주 사용된다.그러나 서버로부터의 응답이 실패했을 경우 롤백하는 적절한 처리가 필요하며, 무분별하게 사용하면 사용자로부터 신뢰를 잃을 수 있으므로 빠른 상호작용이 중요하지만 중요하지 않은 데이터에 적용할 수 있겠다. 나의 경우, 프로젝트에서 낙관적 업데이트를 적용했고, 서버로부터 에러가 발생했을 때 롤백하는 로직까지 구현해보았다.좋아요 기능 같은 경우는 즉각적으로 반영되는 것이 사용자의 입장에서 필수적인 경험이라고 생각했기 때문이다. 낙관적 업데이트 시나리오흐름: 좋아요 관련 local state 변경 → UI 렌더링 → 좋아요 api 호출롤백: local stat..

오픈소스 컨트리뷰션 아카데미 참여형에 지원하여 운 좋게도 멘티로 선정되었다.주변의 실력 있고 개발에 진심인 선배들이 꼭 거쳐 가는 대외활동이어서 궁금했고, 오픈소스에 기여한다는 것 자체가 너무 멋있어 보여서 간절하게 하고 싶었던 활동이었다. https://www.contribution.ac/( ⬆️ 위의 사이트에서 더 자세하게 확인할 수 있습니다) ✍🏻 지원서 작성특이하게도 1지망과 2지망을 고를 수 있었다.나는 자바스크립트를 사용하여 컨트리뷰션 하고 싶었기에 선택지가 많지는 않았다.그렇기 때문에 사실 1지망만 넣고 싶었는데 2지망도 필수로 고르는 것이었어서 1지망 다음으로 제일 재밌어보이고, 내가 잘 할 수 있을 것 같은 프로젝트를 골랐다. 내가 고른 1지망은 Githru-VScode-Extensio..

문제 상황오늘은 코코 프로젝트를 개발하며 React 리렌더링을 최적화한 경험에 대해 작성해보려고 한다.먼저 아래와 같이 렌더링을 확인하기 위한 dev tool을 사용했을 때, 대화 이력을 선택할 때마다 페이지의 모든 컴포넌트가 한꺼번에 리렌더링 되는 현상이 있었다. 특정 항목을 선택해도 전체 항목들이 함께 리렌더링 되는 것을 확인할 수 있었다. 리렌더링 조건리렌더링 조건을 찾아보며 왜 이렇게 되는지 그 이유를 찾아 보았다. (이런 기본적인 내용이 생각나지 않았다니..)그 이유는 페이지 컴포넌트에서 state를 관리하는데, 아마 그 state가 변하면서 하위 컴포넌트들이 모두 리렌더링 된 것이었다.React에서의 리렌더링 조건은 아래와 같다. state가 바뀔 때props가 바뀔 때부모 컴포넌트가 다시 그..

🖥️ 코드리뷰 中export const createPost = async (data: ICreatePostRequest) => { const response = await axiosInstance.post>( `${API_SUB_URLS_V3}/posts`, data ); return response.data.data;}; 코드 리뷰에서 위와 같은 질문을 받고 비동기 처리 로직을 돌아보았고, react query의 에러 핸들링 메소드와 try, catch를 혼용해서 사용하고 있었습니다. 비동기 로직 되돌아보기export const createPost = async (data: ICreatePostRequest) => { const response = await axiosInstance..

프로젝트를 진행하며 폰트 최적화 및 preload를 적용한 내용을 기록 프로젝트 현재 폰트 현황과 배포 방식 코코 프론트엔드는 CloudFront + S3 방식으로 배포따라서, 사용한 데이터 용량과 네트워크 요청 수에 의해 비용 산정된다.현재 폰트 관련 최적화 및 고려가 하나도 이루어지지 않은 상태이다. index.html 폰트 로드 Pretendard : 서비스 메인 폰트Jua 특정 컴포넌트에서만 사용되는 폰트현재 웹폰트를 외부 CDN 두 군데에서 각각 불러오고 있으며,둘 다 폰트 서브셋이 아니어서 용량이 매우 크다. ❓폰트 서브셋이란필요하지 않은 글자는 다 제외하고 필요한 글자들만 불러오는 것. 그래서 결론은 웹 폰트를 외부 CDN으로 불러 오는 방식 대신 폰트 파일을 올려 서빙하는 방..

들어가기 전 `vite-bundle-analyzer`로 시각화한 현재 번들 사이즈다.현재 페이지 별로 필요한 부분들을 코드 스플리팅해 지연 로딩 해놓은 상태다. (Dynamic Import)(페이지/컴포넌트 별로 지연로딩한 포스팅 참고 ➡️ https://hyemmimi.tistory.com/28 ) 초기 로딩 속도 (네트워크 Slow 4G 기준) 초기 로딩 시 하나로 뭉쳐진 청크를 다운로드하며, Finish 시간은 10.88초이다. 이제 이 하나로 뭉쳐진 무거운 번들을 분리해보고자 한다.분리하고자 하는 이유를 아래와 같이 정리해보았다. 라이브러리를 청크로 분리하고자 하는 이유1. 초기 로딩 속도 개선브라우저는 필요한 앱 코드만 먼저 로딩하고, 무거운 라이브러리는 캐시된 청크에서 비동기 로딩할..

Lazy loading이란?필요한 시점에만 리소스를 로딩하는 기법이다.특히나 React를 사용해 클라이언트 사이드 렌더링을 하는 어플리케이션의 경우, 초기 접근 시 모든 리소스(js, css, html, 이미지 등)를 한 번에 다운로드 하는데, 네트워크 환경이 좋지 않을 경우 사용자는 빈 페이지를 오래 보게 된다.그렇기 때문에 lazy loading으로 초기에 다운 받는 리소스의 양을 줄이는 것이 목적이다.초기에 번들에서 제외 시켰다가 정말 필요할 때 (페이지 이동으로 접근할 때 등) 해당 리소스를 다운 받는 것이다. Code Splitting과의 관계code splitting은 전체 JS 코드를 여러 개의 작은 chunk로 나누는 작업이다.이렇게 나뉘어진 chunk 단위로 필요한 시점에만 불러오는 la..

열심히 기술 블로그를 작성하고 있었는데 (게시글도 25개)내 게시글이 구글에 검색하니 절대 나오지 않는거다 ..    통계를 보니 아예 검색이 안되는 것 같아서 알아본 결과 “Google Search Console”에 URL을 등록하고, 사이트 인증을 한 다음에 Sitemap과 Rss 파일을 제출해야 크롤링 봇이 크롤링할 확률이 높아진다고 한다.프론트엔드 개발하면서 전혀 몰랐던 사실이었다.. https://doona-diary.tistory.com/7 티스토리 수익형 블로그 필수 세팅 - 구글 검색 설정안녕하세요! 일상과 일을 스스로 정의하고 실행하는 삶을 위해 노력하는 행복그림 기획자 로나입니다 :) 티스토리 블로그 개설을 완료하셨다면, 내 블로그와 블로그 글들이 다른 검색엔즌인 구doona-diary..

벌써 카카오테크 부트캠프를 시작한지도 반절이 지나갔다.🥲🥲온라인 과정이 끝나고 오프라인 과정 동안 꽤나 즐거웠는데 그때 찍었던 사진들을 정리하고 회고할겸 포스팅을 써본다! 📖 지원 서적 도착 드디어! 기다리고 기다리던 도서가 배송됐다.나는 풀스택 과정이기 때문에 클린코드, 리팩토링, SQL, 자바, 애자일 개발론, 클라우드, 피그마, 타입스크립트 등등의 책들을 받았다.이번주부터 이제 나도 주말에 프리하기 때문에!! 개인 공부 열심히 해봐야지 ^_^ 🌙 해커톤 아직도 기억난다. 해커톤 팀 구성은 운영진에서 짜주는 게 아니라 개인 PR을 통해 따로 조장들에 연락을 해서 짜는 것이었는데이때 당시 풀스택 같은 조 분들이랑 '우리 아직 배운 게 많이 없는데 해커톤 어떡해~~!' 하며 걱정했었던 기억 ..