본문 바로가기

전체 글64

[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #03] React + Vite 초기 세팅 및 복잡한 상태(State) 관리 전략 안녕하세요! 방구석에서 코딩으로 자본주의 생존 도구를 뚝딱뚝딱 만들어가고 있는 1인 개발자입니다.지난 2편에서는 엑셀의 답답함을 벗어던지기 위해 슬라이더 UI를 도입하고, 파란색과 초록색 컬러 심리학을 활용해 디자인 뼈대를 세운 이야기를 들려드렸죠. 자, 겉모습을 예쁘게 스케치했으니 이제 진짜 생명력을 불어넣을 차례입니다. 오늘 3편에서는 이 프로젝트의 엔진 역할을 하는 프론트엔드 프레임워크 초기 세팅과, 머리를 쥐어뜯게 만들었던 복잡한 '상태(State) 관리' 전략에 대해 이야기해 볼까 합니다. 빠르고 가볍게 시작하자! 시대의 대세 Vite과거에는 리액트(React) 프로젝트를 시작할 때 무조건 'Create React App(CRA)'이라는 명령어를 국룰처럼 썼습니다. 하지만 저는 이번 프로젝트에서.. 2026. 3. 10.
[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #02] [UI/UX] 숫자에 생명력을 불어넣는 디자인: 슬라이더 UX와 컬러 심리학 안녕하세요! 방구석에서 코딩으로 자본주의 생존 도구를 빚어내고 있는 1인 개발자입니다.지난 1편에서는 제가 왜 기존의 답답한 엑셀 파일들을 버리고, 직접 '올인원 배당 파이어족 은퇴 시뮬레이터'를 만들게 되었는지 그 기획 배경을 말씀드렸죠. 목표 금액이 아니라 '은퇴 날짜'를 역산해서 보여준다는 아이디어까지 구상하고 나니, 이제 남은 건 이 멋진 기획을 사용자들의 눈앞에 어떻게 예쁘고 편하게 보여줄 것인가 하는 '디자인' 문제였습니다. 오늘은 프론트엔드 개발자로서 제가 UI/UX(사용자 환경 및 경험)를 설계할 때 어떤 고민을 했는지, 그리고 색깔 하나하나에 어떤 심리학적 의미를 담았는지에 대한 재미있는 디자인 썰을 풀어보려고 합니다. 숫자 타이핑은 최악의 경험이다: 슬라이더(Slider)의 도입여러분,.. 2026. 3. 9.
[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #01] 엑셀은 가라! 1인 개발자의 파이어족 은퇴 계산기 탄생 배경 안녕하세요! 코딩이라는 도구를 활용해 자본주의 세상에서 살아남을 무기를 뚝딱뚝딱 만들어가는 1인 개발자입니다.오늘부터 제 블로그의 첫 번째 실전 웹 서비스 프로젝트인 '올인원 배당 파이어족 은퇴 시뮬레이터'의 제작기를 10부작 시리즈로 연재해보려고 해요. 단순히 "코드를 이렇게 짰습니다" 하고 결과물만 덜렁 보여주는 게 아니라, 왜 하필 이런 사이트를 기획하게 되었는지, 어떤 고민을 거쳐 기능을 완성했는지 그 밑바닥 과정을 전부 다 꺼내서 보여드릴 예정입니다. 자, 그럼 대망의 1편! 왜 잘 있는 엑셀 놔두고 굳이 웹사이트를 만들었는지, 그 탄생 배경에 대한 이야기부터 시작해 볼까요? 출퇴근길 지하철, 스마트폰으로 엑셀 파일 열어보셨나요?제가 이 웹개발 블로그 외에 기존부터 꾸준히 운영하던 '경제 블로그.. 2026. 3. 8.
화면 너머의 사람을 향하는 코딩, 누군가에게 해답이 될 웹개발 블로그를 시작하며 안녕하세요. 화면 너머의 수많은 코드들이 모여 우리의 일상을 얼마나 편리하고 가치 있게 변화시킬 수 있는지 탐구하는 웹 개발자입니다. 오늘, 저는 설레는 마음으로 이 웹개발 블로그의 첫 페이지를 엽니다. 처음 코딩이라는 세계에 발을 들여놓았을 때를 떠올려 봅니다. 검은 화면에 알 수 없는 영단어들을 타이핑하고, 그것이 웹 브라우저 위에서 하나의 온전한 버튼으로, 아름다운 이미지로, 그리고 사람들과 상호작용하는 서비스로 피어나는 과정을 보며 느꼈던 경이로움은 아직도 생생합니다. 하지만 그 과정이 결코 순탄치만은 않았습니다. 수없이 쏟아지는 붉은색 에러 메시지 앞에서 밤을 지새우기도 했고, 공식 문서를 읽어도 이해가 가지 않아 막막함에 한숨을 쉬던 날들도 셀 수 없이 많았습니다. 그 길고 외로웠던 터널을 지.. 2026. 3. 7.

티스토리툴바