전체보기(64)
-
개인 프로젝트 코드베이스에 커서 룰 적용하기
이전 글 최근 아내와 함께 진행한 가계부 서비스에 커밋이 좀처럼 올라오고 있지 않다. 처음 생각했던 기본 기능들을 구현했으니 이제 기능을 고도화 하고 코드 리팩터링을 진행해야 할 타이밍인데, 항상 이 타이밍에 흥미를 잃는 듯하다. 아마 '회사에서 하던 일을 집에서 또 하기 싫다' 라는 무의식적인 마음이 드는 것이 아닐까 싶기도 하다. 그러나 이대로 프로젝트를 가만히 두었다가는 내 레포 목록의 자리만 차지하게 될 것이다. 이 프로젝트를 회사에서 하는 것과 다르게 하기 위해서, 나도 '바이브 코딩'을 시도해보려고 한다. 무작정 프롬프트를 입력해서 유지보수도 안될 코드 덩어리를 만들어 내고 싶지는 않고, AI 에 컨텍스트를 최대한 많이 부여해서, 내가 짜는 코드 퀄리티와 스타일을 그대로 베끼는 도플갱어를 만..
2025.08.05 -
자꾸 돈 쓰는 우리 부부 자제시키려고 가계부 개발한 후기
나는 4월 중순에 결혼했고, 결혼 직후 신혼여행을 다녀왔다.여러 감사한 분들께 마저 인사를 돌리고 나서, 모든 것이 드디어 마무리 되었다고 생각할 때 쯤. 통장잔고가 거의 비어 있다는 것을 깨달았다. 원래 계산대로라면 그래도 천만원에 가까운 돈이 남아 있었어야 했는데, 어째서일까?내가 애초에 계산을 잘못했나? 최근 너무 많은 일들이 지나갔기에 슈퍼 회피형인 나는 솔직히 그려러니 하고 넘어가고 싶었다. 하지만 우리 와이프는 나와는 다른 인종이다.몇달간의 내역을 뒤진 끝에 와이프는 우리가 신혼여행에 원래 예산보다 900만원을 더 썼다는 결론에 도달한다.신혼여행을 다녀온 후에도, 코스트코에 한번 가서 40만원을 쓰는 등 우리 부부는 돈을 펑펑 뿌리고 다녔다는 것이 밝혀졌다. 이대로는 안된다.'이제 돈을 아껴..
2025.07.19 -
리액트 커스텀 훅 사용 팁
이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=J-g9ZJha8FE useRef 를 사용하여 디펜던시 문제 해결하기 위와 같은 코드는 리액트 코드를 작성하면서 심심치 않게 볼 수 있습니다. useEffect 안에서 사용하는 함수가 외부 함수라서 이를 useEffect 에 넣어버리고 의존성에 등록해두지 않으면 linter 가 이를 지적할 것입니다. 해당 함수가 업데이트 될 필요가 있다고 합시다. 이때 useEffect 안에서 상태를 바꾸는 로직이 있다면 리렌더링이 수행될 것이고, 해당 외부함수가 useCallback 처리 되어 있지 않으면 매번 아예 새로 생성될 것이기 때문에 무한 렌더링의 수렁에 빠지게 됩니다. 하지만 그렇다고 useCall..
2021.11.30 -
이벤트 루프
이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=cCOL7MC4Pl0 이벤트 루프란? 자바스크립트의 단일 스레드 환경에 맞춰서 비동기 처리와 이벤트 핸들링을 수행하는데 사용되는 제어방식입니다. 간단히 설명하자면, 끊임없이 콜스택의 상태를 감지하며 태스크 큐의 콜백을 콜스택에 밀어넣는 방식입니다. 왜 자바스크립트는 단일스레드 방식을 택한 것일까? 이벤트 루프의 배경에는 흔히 자바스크립트가 '단일 스레드로만 동작한다'는 사실이 깔려 있습니다. 하지만 다른 언어들은 스레드를 나누는 일이 흔한데, 왜 하필 자바스크립트는 단일 스레드를 고집하는 것일까요? 이는 자바스크립트의 주요 실행 환경이 브라우저라는 점에 기반합니다. 이용자가 발생시킨 이벤트와 서..
2021.11.16 -
나만의 UI / 상태관리 라이브러리 (chreact.js)
컨셉트 기본적인 사용법은 리액트와 유사하게 구성하였습니다. 기존의 JSX 문법이 아닌 독자적인 문법을 한번 고안해보고 싶어서 함수 컴포넌트가 객체가 아닌 제가 template 이라고 명명한 특수한 형식의 문자열을 return 하도록 지정했습니다. import useState from "../lib/hooks/useState"; import Counter from "./Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const onReset = () =..
2021.11.06 -
클라우드 프론트 Quick Start
실습용 파일 준비 Cloud Front 를 직접 활용해보기 위해 간단한 웹사이트를 위한 HTML/CSS/Javascript 파일들을 준비해봅시다. 저는 과거에 제가 사용했던 포트폴리오 웹사이트를 사용하겠습니다. S3 에 파일 업로드 (s3 업로드 방법은 여기서 따로 다루지는 않겠습니다) 별다른 설정 없이 s3 에 index.html 을 비롯한 각종 웹 자원들을 업로드했다면 기본으로 퍼블릭 엑세스가 차단되어 있을 것입니다. 그리고 이건 정적 호스팅을 활성화하더라도 마찬가지입니다. 이제 파일의 접근권한을 이대로 내버려둔채로 정적 호스팅을 위해 Cloud Front 서비스를 이용해봅시다. Cloud Front 도메인 배포 처음 cloud front 를 이용한다면 위와 같은 화면을 보게 될 것입니다. Creat..
2021.08.29