둥글게 둥글게

⭐️⭐️⭐️ 별점 star-rating을 구현해 보자 요즘 배달, 쇼핑몰, 어플, 장소 등 어느 곳에서나 별점을 볼 수 있을 것이다. 해당 상품의 별점을 통해 만족도를 확인하기 때문에! 정말 기본이 되는 기능 중 하나인 별점을 구현해보고자 한다. ✨ 결과물 👉🏻 star-rating은 재사용이 가능하도록 코드를 구현하였으며, 마우스 반응에 따라 효과를 다르게 주었다. 💛 star를 클릭했을 때는 노랑색 🖤 star에 마우스를 호버 했을 때는 회색 만들기 전에는 간단해 보여서 오래 걸리지 않겠다! 했지만, 역시나 이번에도 큰 오산이었다 🫠 📌 사용자가 정의한 start-rating 컨테이너 요소의 참조를 StarRating 함수에 전달해 star 요소들로 구성된 star-rating 요소를 동적으로 생성 ..

😆 javascript를 사용하여 해당 버튼을 누르면 side navigation이 화면에 open close 되도록 구현하였다. 정말 간단한 기능이지만, 처음에는 애를 먹었다 😂 버튼을 누르면 side navigation이 나타나도록 구현하는 기능뿐 아니라, 또 다른 조건도 만족해야 했기 때문이다. ✨ 결과물 👉🏻 왼쪽 위에 있는 버튼을 선택하면 side navigation이 화면에 나타났다가 사라지도록 구현한 것을 볼 수 있다. 여기까지는 쉽게 구현할 수 있었지만, 아래 조건에서부터 슬슬 막히기 시작했다; 📌 새로고침 또는 페이지 이동, 브라우저 재시작 등의 행위를 한 후에도 해당 side navigation을 open 해 놓은 상태로 유지할 수 있도록 코드 구현 전역이라는 단어를 강의를 들으면서 정..