10일차 인스타그램 '좋아요' 버튼, 리액트 없이 바닐라 JS로 구현하기
목표 : 풀스택 개발자·2025. 12. 1.
1. 서론: 정적인 웹에 생명을 불어넣다HTML과 CSS로 만든 웹페이지는 예쁘지만 죽어있는 상태입니다. 사용자가 버튼을 눌렀을 때 숫자가 올라가고, 색깔이 변하게 하려면 자바스크립트로 DOM(문서 객체 모델)을 조작해야 합니다.오늘은 가장 기초적이면서도 핵심적인 '좋아요 카운터' 기능을 바닐라 자바스크립트(Vanilla JS)로 직접 구현해보며 querySelector, addEventListener, style 조작법을 정리했습니다.2. 기능 명세초기 상태: 하트 버튼과 숫자 0이 보임.동작: 버튼 클릭 시 숫자가 1씩 증가.심화(UI): 좋아요 수가 10개가 넘어가면 숫자가 빨간색으로 변함.3. 구현 과정 (Step-by-Step)1) 요소 선택하기 (querySelector) 가장 먼저 JS에게 ..
