React는 가장 많이 사용되는 프론트엔드 라이브러리다. 하지만 정작 React의 내부 동작 원리를 정확히 이해하고 사용하는 개발자는 많지 않다. 나 역시 페이지나 컴포넌트를 만들고 상태를 관리하는 것에만 집중했지, React가 어떻게 효율적으로 DOM을 업데이트하는지에 대해서는 깊이 생각해보지 않았다. 면접 스터디를 하면서 React의 핵심 동작 원리를 다시 정리하며 공부해보기로 했다. React 공식문서와 MDN 문서 등을 살펴보며 정리한 내용이다 :) 목차브라우저 렌더링 과정과 업데이트 시점React를 사용하는 이유React의 렌더링 프로세스재조정(Reconciliation) 과정Virtual DOM과 실제 DOMDiffing 알고리즘Fiber 아키텍처Virtual DOM의 한계점정리 브라우저 ..

처음으로 개발자 컨퍼런스에 다녀왔다. 마침 모교에서 진행된 행사라 익숙한 장소였고, 졸업생 할인으로 티켓을 조금 더 저렴하게 구매할 수 있었다! 행사 정보일시: 2025년 7월 26일 (토) 오후 1시 ~ 6시장소: 인하대학교 60주년 기념관구성: 5개 트랙, 총 27개 세션 행사 요약 및 후기1. 106호 - Google I/O 요약만 봤다고? AI가 못 보는 진짜 이야기Gemini Canvas를 통한 프롬프트 기반 프로토타입 제작Gemini on Glassers HUD 디스플레이 기술비디오 생성 AI Flow와 가상 피팅 서비스 Try on it 소개안드로이드 관련 신기능 및 프로젝트 공유새로운 기술을 가볍게 접하는 워밍업 세션이었다.2. 108호 - 대규모 트래픽을 처리하는 프론트 개발자의 전략..

안녕하세요!밀리의 서재를 간간히 이용하며 틈틈이 독서를 하던 중 좋은 기회를 얻게 되었습니다!바로 밀리 북클럽 1기 참새로 선정되었다는 소식! 🐦✨메일을 확인한 순간부터 설레는 마음으로 웰컴 키트를 기다렸는데 생각보다 빨리 와서 후기를 남기려고 합니다. 밀리 북클럽 참새 1기 활동 기간기간: 2025.08.04 ~ 2025.10.31 (총 3개월)책을 읽고, 나누고, 기록하는 다양한 미션 진행북클럽 전용 커뮤니티 활동 및 작가 편지, 우수 참여자 이벤트 등 풍성한 혜택 기대하지 않던 와중 추가합격하게 되어 더 기뻤어요..! 웰컴 키트 구성 & 언박싱 박스를 열자마자 밀리 감성이 그대로 느껴졌습니다.참새 1기 웰컴 키트 구성품은 다음과 같습니다.NFC 키링 (한정 제작)귀여운 그립톡세련된 책갈피감성..

무너즈(MoonoZ) - LG U+ AI 혜택 큐레이션 플랫폼 개발 회고록안녕하세요! 오늘은 LG U+ 유레카 SW교육과정에서 진행한 종합프로젝트 무너즈(MoonoZ) 개발 회고입니다.해당 프로젝트는 유레카 프론트엔드 개발자 2기 종합프로젝트에서 최우수상을 수상한 뜻깊은 프로젝트였는데요!3주라는 짧은 기간 동안 팀장으로서 팀을 이끌며 AI 기반 서비스를 구축한 경험을 공유해보겠습니다! 프로젝트 소개 프로젝트명: MoonoZ (무너즈)주제: MZ세대를 위한 스마트한 LG U+ 혜택 큐레이션 서비스개발 기간: 2025.06.04 ~ 06.26 (약 3주)팀 구성: 5명 (Full-Stack)수상: 유레카 프론트엔드 개발자 2기 종합프로젝트 최우수상 프로젝트 주제 선정 배경 최근 경기 불황과 구독료 인상으..

🎮 너로 정했다! - 밸런스 게임 플랫폼 개발 회고록안녕하세요! 오늘은 LG U+ 유레카 SW교육과정에서 진행한 미니프로젝트 '너로 정했다!' 개발 회고입니다. 유레카에서 진행한 첫 프로젝트라는 점에서 뜻깊었는데요. 곧 종합 프로젝트를 앞두고 있어 작성해보았습니다! 📝 프로젝트 소개기본 정보프로젝트명: 너로 정했다!주제: 밸런스 게임 기반의 소셜 인터랙티브 커뮤니티 플랫폼개발 기간: 2025.03.13 ~ 03.21 / 05.07 ~ 05.20 (총 약 20일 - 피그마 디자인 제외)팀 구성: 4인배포 링크: 서비스 바로가기 너로 정했다! oh-no-its-me.vercel.app 프로젝트 주제 선정 배경저희는 미니프로젝트인만큼 규모는 작지만 실제로 이용할 수 있는 서비스를 만들고자 했습니다. 그래..

안녕하세요👋 요즘 사이드 프로젝트로 '그리미티'라는 플랫폼을 개발하고 있습니다.해당 프로젝트에서 검색 기능을 구현하면서 검색한 키워드를 결과 리스트 내에서 강조(하이라이트) 하는 기능을 새로 도입하게 되었는데요. 처음에는 검색어를 props로 하나하나 내려서 강조하려고 했지만,컴포넌트가 많아질수록 관리가 어려워질 것이라는 생각이 들었습니다.따라서 Context API를 사용해 검색 키워드와 하이라이트 함수를 전역으로 공유하는 방법을 선택하였습니다! Context를 사용한 이유?검색 결과는 한 번의 API 호출로 처리됨사용자가 검색어를 입력하면, 해당 검색어에 맞는 결과를 API 호출로 받아옵니다. 이 결과는 검색어가 바뀔 때마다 새로운 데이터를 가져와서 보여주는 방식이기 때문에 어차피 하위 컴포넌트들이..

프론트엔드에서 사용자 경험을 향상시키는 데 있어 낙관적 업데이트는 매우 중요한 전략입니다. 이번 포스팅에서는 낙관적 업데이트가 무엇인지, 그리고 이를 실제 프로젝트에 어떻게 적용할 수 있는지를 직접 구현해보며 정리해봤습니다. 프로젝트 배포 링크https://react-opimistic-update-psi.vercel.app/ Vite + React + TS react-opimistic-update-psi.vercel.app  🔍 낙관적 업데이트란?낙관적 업데이트는 요청이 성공할 것이라고 '낙관적으로' 가정하고, UI를 먼저 업데이트한 뒤, 나중에 서버 응답에 따라 결과를 반영하거나 롤백하는 방식입니다.예를 들어, 좋아요 버튼을 클릭했을 때 실제 요청 결과를 기다리는 대신:하트 아이콘이 즉시 활성화(채워..

리액트 기반 세로로 배치된 5개의 이미지들을 사용자가 스크롤함에 따라서 나타나도록 애니메이션을 구현해봅시다~!먼저 리액트에서 애니메이션을 구현하는 방법은 다양하게 존재하지만, 외부 라이브러리를 사용하지 않는 방법과 기본 API만 사용하는 방법을 포함해 총 3가지로 구현해보았습니다. Result깃허브 링크: https://github.com/abyss-s/react-scroll-animation배포 링크: https://react-scroll-animation-orcin.vercel.app/ 1. IntersectionObserverIntersectionObserver는 순수 JavaScript API로, 라이브러리에 의존하지 않고도 스크롤 애니메이션을 구현할 수 있습니다. Intersection Obse..

Spring Boot 개발환경 설정, 포스트맨 테스트 & 깃 관리 정리유레카 미니 프로젝트 진행 전, 개인 공부를 위해 작성한 자료입니다. 스프링부트란?Spring Boot는 스프링 프레임워크의 복잡한 설정을 단순화하여 빠르고 효율적인 애플리케이션 개발을 가능하게 하는 프레임워크입니다. 주요 특징은 다음과 같습니다:자동 설정(Auto Configuration): 애플리케이션 실행 환경에 맞게 필요한 설정을 자동으로 구성해줍니다.독립 실행형 애플리케이션: 내장 톰캣, 제티 등 웹 서버를 포함하여 별도의 서버 설치 없이 애플리케이션을 실행할 수 있습니다.프로덕션 친화적 기능: 모니터링, 로깅, 보안 등 프로덕션 환경에 필요한 다양한 기능을 제공합니다.개발환경개발환경에 따라 설정 방법에 차이가 있을 수 있으니..

MySQL PID 오류 해결 방법 (Homebrew 설치 기준) 스프링부트와 데이터베이스 연동 실습을 혼자 해보려고 mysql 서버를 켰는데 갑자기 먹통이 되더니 ERROR! The server quit without updating PID 에러가 발생했습니다.구글링을 통해 찾아보았더니 전부 mysql을 재설치해보는게 베스트라고 해서 진행했지만 또 에러...😳아무래도 이미 실행중인 서버가 있었는데, 캐시가 남아있거나 뭔가 충돌이 발생한 것 같습니다.재설치해도 소켓파일이 꼬인 모양을 볼 수 있습니다..이런 경우 그냥 모든 쓰레기 파일을 날리고 다시 받아야 합니다. 1. MySQL 프로세스 종료Homebrew로 설치한 경우brew services stop mysql 2. MySQL 관련 파일 삭제설치 경로..

Next.js 강의를 수강하던 도중 다음과 같은 에러가 발생했습니다. Error: Route "/movies/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at MovieDetail (src/app/(movies)/movies/[id]/page.tsx:6:10)  강의 내용과 버전차이가 있어서 발생한 문제로 파악되어 공식문서를 참고했습니다.주어진 오류는 params를 비동기적으로 처리해야 한다는 것을 의미합니다.  경고 발생 원인코드 내에서 동적 렌더링을 사용하는 API에 접근할 때 발생합니다.이는..

문제https://www.acmicpc.net/problem/7453  개념투포인터, 이분탐색, 해시맵  구현 코드(JavaScript)const fs = require('fs');const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n');const n = +input[0];const lines = input.slice(1).map((li) => li.split(' ').map((i) => +i)); const map = new Map();for (let i = 0; i    코드 설명4개의 열(column)을 가진 n x 4 크기의 행렬이 주어졌을 때 A[a]+B[b]+C[c]+D[d]=0이 되는 쌍, 즉 조합 개수를 찾는 문제입..