동찬 코드 일지

Fiber”아키텍처” Fiber는 React 내부의 렌더링 아키텍처이자 자료구조이 Fiber에서 수행하는 작업은 크게 2가지이다.Render phase= 리컨실리에이션(Reconciliation) 역할 : “무엇이 바뀌었는가” 계산 → “비동기” 가능비동기 렌더링의 효과이 비동기의 특성으로 최적의 사용자 경험을 제공 가능끊김 최소화렌더링 중이라도 메인 스레드를 완전히 점유하지 않기 때문에 스크롤, 입력, 애니메이션 등 사용자 인터랙션이 부드럽게 유지성능 최적화재 실행 및 중단 가능렌더링이 오래 걸리면 중간에 작업을 일시 중단즉, React는 렌더링을 협조적 스케줄링(Cooperative Scheduling) 으로 처리한다.브라우저가 한 프레임을 그린 뒤 다시 이어서 렌더링할 수 있다.JavaScript의..

fiber → React 16 버전부터 이전 Stack 구조에서 변경됨 학습 자료 출처https://goidle.github.io/react/in-depth-react-intro/ React 톺아보기 - 02. Intro | Deep Dive Magic Code모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 이번 포스트에서는goidle.github.io React Package 구성 요소ReactSharedSchedulerReconcilerRender phaseVDOM 조작 단계Commit phaseender phase에서 재조정된 VDOM을 DOM에 적용하고 라이프 사이클을 실..

성능 = 사용자가 느끼는 경험이 ‘빠르고’, ‘매끄럽고’, ‘안정적인’ 상태 성능은 다음과 같은 요소들로 이루어진다.초기 로딩 시간: 사용자가 페이지에 접속했을 때 첫 화면이 나타나고 상호작용 가능해지는 시간(FP, FCP, TTI 등).렌더링/재렌더링 효율: 상태나 props가 바뀔 때 불필요하게 많은 컴포넌트가 리렌더되지 않고 최적의 부분만 렌더 여부.상호작용 응답성: 예를 들어 버튼 클릭시 반응이 지연되면 성능이 나쁘다고 느껴진다. (FID, Input latency)UI 유동성/애니메이션: 스크롤, 드래그, 애니메이션이 끊기지 않고 매끄럽게 실행되는지 여부.네트워크/데이터 처리 효율: API 호출, 데이터 파싱, 리소스 최적화(CDN/캐시) 등이 적절하게 되어 있는지 분석.메모리/리소스 낭비 여부..

개요이번 9월 28일 25년 취업 시즌 하반기에 삼성전자 DX 네트워크 파트에 서류합격되어 SW 역량 검사를 진행하게 되었다. 솔직히 서류합격이 될 줄 몰랐지만, 이번 공채에 첫 소식으로 합격 소식을 들어 너무 반가웠다. 자소서에 든 노력이 헛되지 않았구나 생각이 들었다. 삼성전자에 냈던 자소서사가 가장 처음에 쓰고 처음에 내어 부족한점이 많다 생각하여 기대하지 않았지만, 이 결과를 통해 다른 자소서 또한 작성할 수 있는 기준이 될 수 있었고 코딩테스트 또한 대비 할 수 있는 기회라고 생각하였다. 장소는 경기도 이천의 삼성 지사에서 진행되었다. 하필 이날 아침에 비가 많이 쏟아졌었는데,다행히도 부모님이 태워다주셔서 금방 갈 수 있었다. 고사장 입장 및 문제에 대한 후기도착후 1열로 서서 고사장 까지 ..

https://litt.ly/lguplus_techplus 2025 유플텍플LG유플러스 테크컨퍼런스litt.ly 2025 유플텍플 컨퍼런스 후기일시 : 25.09.17 (수) 14:00 ~ 18:00장소 : LG U+ 마곡사옥 프론티어홀 B1 개요 이번 2025 유플텍플 컨퍼런스에는 LG U+ 유레카 프론트엔드 개발자 2기 수료생으로 참여하게 되었다. AI와 프론트엔드 개발자 관점에서 바라보는 시각과 활용법을 넓힐 수 있었던 시간이 되었다. 각 세션은 30분으로 짧게 진행되었지만, 모든 섹션은 핵심내용 위주로 압축하여 발표하셨고그로 인해 집중력이 흐트러지지 않고 끝까지 집중해서 들을 수 있던 시간이였다. 모든 섹션은 프론티어홀의 섹션을 들었다. 다른 섹션도 고민했지만,가장 프론트엔드 개발자와 연관성..

JS는 싱글 스레드(single thread) 방식으로 동작된다.싱글 스레드를 사용하므로 항상 하나의 테스크만을 처리할 수 있다.앞서 알아보았던 실행 컨텍스트는 Stack 구조로 쌓이며 실행 될 수 있는 컨텍스트는 최상위 컨텍스트 항상 오직 하나이다.나머지 아래에 쌓인 실행 컨텍스트는 작업 테스크큐에 남아 있다.소스코드가 실행 순서대로 (위에서 아래로) 해당 코드를 처리 후 다음 코드를 실행하는 기존의 동작 방식동기 sychronous소스코드의 실행 순서가 보장된다. 일반적인 소스코드의 동작 방식이다.하나의 작업이 실행되면 이후 작업은 진행되지 않는다. 이를 블로킹 (blocking)이라 한다.비동기 asynchronous현재 실행 중인 작업이 있더라도 이후 작업을 블로킹하지 않고 곧바로 실행한다. 이를..