Frontend
프론트엔드 개발 일지
시리즈 내 포스트(9)
JavaScript의 Map 자료구조에 대해서 자세하게 알아보자
Map 내장 메서드 가지고 삽질했던 경험
JavaScript의 new Map() 구조에 대해서 알아보자 자바스크립트에는 객체라는 자료형이 존재한다. Object는 키-값을 쌍으로 데이터를 저장하는 자료형으로, 원시 타입과는 다르게 여러 값을 하나의 단위로 묶어서 관리할 수 있는 참조 타입 자료형이다. 기본적인 사용법은 아래와 같다. ```js const obj = { location
2026. 02. 14.15분JavaScript자료구조
장시간 AI 처리 작업의 실시간 진행률 구현 (SSE)
SSE에 대해서
SSE로 실시간 진행률 받아오기 최근 진행 중인 프로젝트에서 을 마주하게 되었다. 문제는 단순히 시간이 오래 걸린다는 것만이 아니었다. 사용자는 작업이 진행 중인지, 멈춘 건지 알 수 없음 - 작업이 진행하다가 배포 서버가 죽거나 하면 더더욱 백그라운드에서 복잡한 파이프라인이 돌아가지만 결과만 보여줄 뿐 "처리 중" 메시지만 3분 동안
2026. 02. 06.5분FrontendSSE실시간
zod로 유효성 검사를 선언적으로 관리하기
복잡한 Form을 잘 작성하려면
Zod 를 잘 작성하는 방법 최근 10개 이상의 필드를 가진 Form 코드를 작성하게 되면서 zod를 활용할 수 있는 기회가 있었다. 복잡한 Form 코드를 작성할 기회가 많지 않았는데 최근 Form 코드를 구현하면서 복잡한 유효성 검사를 zod로 개선한 경험에 대해서 이야기해보고, 어떻게 유효성 검사를 분리하는 것이 중요할지 생각해보기로 했다. Z
2025. 12. 27.9분라이브러리Form
Vanilla Extract에 대해서 알아봅시다
CSS Library
최근에 신기한 CSS 라이브러리를 써볼 수 있는 기회가 생겼다. TailwindCSS 정착민이었던 나에게는 새로운 도전이었다.. Vanilla Extract 일단 vanilla extract는 CSS 라이브러리이다. TailwindCSS는 init 등의 명령어와 환경을 제공해주기 때문에 프레임워크의 성격을 띄지만 이번에 알아볼 VE는 라이브러리이다
2025. 10. 29.5분FECSS
Module Federation에 대해서
Micro-Frontend Architecture 위한 수단
Module Federation은 정말 처음 들어보는 생소한 용어였다. 해당 기술에 대해서 알아보면서 이게 Micro-Frontend Architecture를 위해서 사용하는 일종의 수단이구나 생각했다. Module Federation 정의 서로 다른 프로젝트에서 하나 이상의 빌드된 코드를 런타임에 동적으로 로드하고 공유할 수 있게 하는 기술
2025. 10. 19.4분FE개념
리액트의 Render 함수와 Component 방식의 차이점
성능, 가독성 차이점
리액트에서 Render 함수와 Component 방식의 차이점을 알아보자 상황 공통 컴포넌트(캘린더)를 만드는 중 currentView 상태에 따라 다른 뷰를 보여주는 컴포넌트를 만들어야 했다. currentView는 로 구성되어있다. 각 상태에 따른 서로 다른 뷰를 렌더링해야했기에 처음에 renderCalendar 함수를 만들어서 사용했다
2025. 10. 10.4분FE
Promise.all 이해하기
면접 복기
Promise.all 이해하기 최근에 면접을 보게 됐는데, 거기서 API 최적화 방안에 대한 질문이 나왔다. 알고는 있었지만 대비를 하지 못했던 질문이어서 엉뚱한 답변만 했던 것 같다. 그래서 이번에 API 최적화 방안에 대한 질문의 대답을 준비하면서 Promise.all의 동작 방식에 대해서 공부해보면 좋겠다고 생각했다. Promise
2025. 08. 29.10분JavaScript
개발, 배포 환경의 Lighthouse 성능 점수 차이 왜 생기는 걸까?
빌드시 최적화 이해
Development, Production 환경의 Lighthouse 성능 점수 차이 왜 생기는 걸까? 프론트엔드 개발을 하면 성능 측정을 하게 된다. 개발 환경과 배포 환경에서 Lighthouse 도구를 사용해 각각 측정했다. 점수가 생각보다 크게 차이가 나는 것을 발견했다. 개발 환경과 배포 환경이란 웹 개발을 하다보면 개발 환경과 배포 환경을
2025. 06. 22.10분최적화빌드
드래그 앤 드롭 기능 예제와 성능 최적화 🚀
throttle과 requestAnimationFrame
이 글은 티스토리 블로그에서 이전된 글입니다. 최근에 드래그 앤 드롭 기능을 만들어보면서 느낀 점은 정말 재미있는 기능이라는 점인 것 같다! 이번에는 간단한 드래그앤드롭,DND 예제를 만들어보고, 그 후에 어떤 최적화를 할 수 있을까에 대해서 고민해보려고 한다. 드래그 앤 드롭 기능 예제와 성능 최적화 🚀 일단 dnd 예제를 만들어야하는데, 초기에
2025. 03. 16.14분