Frontend(3)
-
[React] Router를 활용하여 모달띄우기
들어가기 전에React 수업을 들은 후, 팀 과제로 TMDB를 활용한 넷플릭스 클론 프로젝트를 진행하게 되었다.프로젝트에서 각자 맡을 역할을 나누는 과정에서, 나는 자발적으로 모달 화면 구현을 담당했다. 사실 React 수업에서도 넷플릭스와 유사한 형식을 따라 개발했지만, 당시에는 개념적으로 헷갈리는 부분이 많았다.그래서 이번 프로젝트를 통해 부족했던 부분을 더 깊이 이해하고자 했다. Modal 화면을 구현하면서 수업에서 배웠던 방식(setModalOpen이라는 플래그를 사용해 모달을 띄우는 방식)을 떠올렸다.그러나 넷플릭스의 실제 페이지를 살펴보니, 모달이 뜰 때 URL이 변경되는 것을 발견했다.이와 같은 동작을 구현해보고 싶어 검색을 시작했고, React Router를 사용하면 모달을 URL 변경과 ..
2025.01.20 -
[JavaScript] ES모듈로 동적 로드와 버튼 액션 구현하기
인스타그램 클론 팀 프로젝트를 진행하던 중동적으로 로드한 sidebar.js 내부함수를 호출했는데 무반응. 디버깅해보니 discovery(호출하는 곳)에는 버튼에 해당하는 html을 못찾아서 발생된 문제. 처음에 전역으로 선언했지만 메모리를 낭비할 수도 있겠단 생각에 다른 방식을 찾아봄(작은 프로젝트지만 확장성 고려) 검색하다 ES모듈이라는 것을 찾아서 적용하게 됨.함수 내보내기// sidebar.jsexport function configButtonAction() { const menuButton = document.querySelector(".menuButton"); menuButton.addEventListener("click", (e) => { // button Action }}함수 가져오기/..
2025.01.08 -
[VSCode] Live Server 실시간 업데이트 적용하기
안녕하세요.민이입니다. HTML강의를 듣고 있는데 강사님은 Live Server를 통해 새로고침이 되는데저는 계속 disconnect -> go live 반복을 해야해서 의문을 가지던 중 해결 방법을 찾아서 공유합니다. 제가 쓰고있는 Live Server cmd + , 을 눌러 설정으로 이동해줍니다. 이 화면이 나올텐데요.off 를 afterDelay로 변경해주시면 됩니다. 딜레이는 따로 건들이지않고 1000으로 해두었습니다. 이제 Go live를 클릭한 후 코드를 추가하거나 삭제하면 일정 시간 후 라이브 화면도 바뀌는 걸 확인할 수 있어요 그럼 즐코딩하세요.
2024.11.15