동찬 코드 일지

서론웹 개발을 하다 보면 어느 순간 ‘코드를 잘 짜는 능력’만으로는 부족하다는 걸 체감하였다. 지속적으로 발생하는 AWS 비용과 프로젝트 시 마다 번거로운 세팅 작업 등등..그래서 나는 그냥 Docker 몇 개 띄우는 수준이 아니라,모니터링, 스토리지, Postgres, API 서버, CI/CD 자동 배포, Cloudflare Tunnel, Tailscale VPN까지 전부 갖춘 풀스택 인프라 구조. 특히 이후 진행되는 "사용자 관점의 피드백과 통계자료 수집을 위해서"는 모니터링 작업이 절실하고 중요하다는 것을 깨달았다. 프로젝트가 커지고 협업이 복잡해질수록, 프론트엔드·백엔드·DB·스토리지·네트워크가 서로 어떻게 묶여 돌아가는지 이해하는 게 훨씬 중요해진다. 결론적으로 "집에서도 실전급 인프라를 구축해..

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현재 실행 중인 작업이 있더라도 이후 작업을 블로킹하지 않고 곧바로 실행한다. 이를..

바인딩 : 식별자와 값을 연결하는 과정this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.함수는 4가지 방식으로 호출 될 수 있다.일반 함수 호출메서드 호출생성자 함수 호출Function.prototype.apply/call/bind 메서드에 의한 간접 호출this는 기본적으로 함수를 호출한 주체(객체)를 가리킨다.일반 함수 호출엄격모드가 아닐 때어떠한 함수도 일반 함수로 호출되면 this에는 전역 객체 (window) 가 바인딩 된다.node.js에서는 global 객체엄격모드일 때엄격 모드에서는 일반 함수로 호출된 함수의 this가 window가 아닌 undefined가 바인딩 된다..메서드 호출메서드를 호출할 때 메서드 이름 앞에 마침표 연산자 앞에 기술한 객..

https://2025.feconf.kr/ FEConf 2025국내 최대 프론트엔드 개발 컨퍼런스, FECONF 2025가 8월 23일 오프라인으로 찾아옵니다.2025.feconf.kr 25년 8월 23일세종대학교 광개토관 11시 2025 FE Conf에 참석했던 후기이다. 웹 FE 개발자 취준생으로써 현직자들의 고민과 개발과정을 경험하고 이를 통해 좀더 몰랐던 부분을 개선시키고자 참석. 전반적으로 프론트엔드 지식 및 경험이 어느정도 있어야 얻어갈 수 있는 컨퍼런스였다. - 12:00 - 12:30 스벨트를 통해 리액트 더 잘 이해하기https://ssgoi.dev/ko기존 React, Next 프레임워크를 중심으로만 프로젝트를 진행했었는데 Svelt 프레임워크의 특징 (FGR) 및 리엑트와의 차별점 ..

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html코드를 실행하기 전에 이러한 버그를 미리 발견할 수 있는 도구가 있다면 좋을 것입니다. TypeScript와 같은 정적 타입 검사기의 역할이 바로 그것입니다.정적 타입 검사기프로그램이 실행되기 전, 즉 컴파일 타임에 코드의 타입 안전성을 검사하는 도구입니다.런타임 환경과 컴파일 환경컴파일 타임(Compile Time)컴파일 타임은 소스 코드가 기계어나 중간 코드로 변환되는 시점을 의미합니다. 이 단계에서는:코드의 구문 오류를 검사합니다 (예: 세미콜론 누락, 괄호 짝 맞추기 등)타입 검사(정적 타입 언어의 경우)가 수행됩니다코드 최적화가 이루어집니다실제 코드 실행은 아직 일어나지 않습니다..