지금 진행하고 있는 파이널 프로젝트에서 2단계 컴포넌트로 프로필을 변경할 수 있는 부분을 맡게 되었다.  위와 같은 UI로 만들면 됐는데 UI자체는 간단하지만 서버와의 통신이 있는 컴포넌트 였기 때문에 생각보다 제작시간이 오래 걸렸다.  이 컴포넌트를 만드는 과정에서 사용자 프로필을 불러오고 업데이트하는 기능을 구현하면서, Supabase를 이용한 서버와의 통신을 이번 프로젝트에서는 처음으로 경험하게 되었다.이번 글에서는 서버에서 데이터를 가져오는 과정과 그 과정에서 배운 점들을 공유하려 한다!  📌 서버와 통신하여 데이터를 가져오는 과정처음에는 Supabase의 select() 메서드를 사용하여 데이터를 불러오는 간단한 API 요청을 작성했다.const fetchProfile = async () =>..

이번 글은 지금 바닐라 프로젝트를 진행하면서 내가 맡은 부분 중 하나인 예약/주문 페이지의 컴포넌트로 제작한스위치로 토글 되면서 탭이 바뀌는 버튼을 만들게 된 과정에 대해 설명해보고자 한다. css 보다는 JS에 집중하여 설명해보려고한다.이런 결과물이 나오게 된다  JS 코드document.addEventListener("DOMContentLoaded", () => { // (1) const switchContainer = document.querySelector(".toggle-switch"); // 해당 클래스 가진 요소 선택 const buttons = document.querySelectorAll(".toggle"); // 해당 클래스 가진 요소를 '모두' 선택 buttons.for..