본문 바로가기

분류 전체보기402

이벤트 버블링 기법 : 리로드 되는 페이지에서 이벤트 리스너가 끊어지는 문제 해결 방법 상황HTML 페이지에 여러 개의 버튼을 달고 그 버튼에서 클릭 이벤트가 발생했을 때 이벤트 리스너를 동작시키기 위해 여러 개의 이벤트 리스너를 달았다.특정 버튼의 기능에서 페이지를 초기화 하는 함수가 있어 페이지가 전부 리로드 된다.페이지가 리로드 되면 각 버튼에 달려있던 이벤트 리스너의 연결이 끊어지면서 버튼을 클릭해도 반응이 없다.해결해당 버튼이 아닌 상위 요소에 이벤트리스너를 장착하여, 버튼이 리로드 되더라도 이벤트 리스너가 끊어지지 않도록 한다.// 기존 코드document.querySelector(".detail_heart_btn").addEventListener("click", clickHeart);기존 코드가 있던 HTML의 태그 구성 요소를 보면 아래와 같다. 문제는 위 기존코.. Programing/JavaScript 2024. 5. 8.
2024-05-08 자바스크립트 팀 프로젝트 회고 (영화 검색 페이지) 자바스크립트 팀 프로젝트 회고구현한 기능영화 검색 페이지에서 한/영 전환 기능한/영 전환 버튼을 누르면 아래 페이지의 내용이 영문, 한글로 출력되도록 이벤트 리스너 설정index.html : 메인 페이지detail.html : 영화 클릭 시 세부 정보를 보여주는 상세 페이지heart.html : 영화 상세 페이지에서 찜 버튼 클릭시 저장되는 찜 목록을 보여주는 페이지구현 방법공통헤더에 한/영 전환 버튼을 만들어 버튼 클릭 시 페이지에 맞는 이벤트 리스너 동작하도록 구성html 페이지에 작성된 한글을 조건문을 달아 브라우저 언어 설정에 따라 다르게 출력되도록 전체 수정.// detail.html 언어변경 기능 (예시) (index.html, heart.html도 동일)const reviewInput = d.. Programing/TIL 2024. 5. 8.
2024-05-07 로컬스토리지를 활용하여 현재 보고 있는 메뉴 유지시키기 팀프로젝트를 하면서 팀원께서 미리 제작한 페이지에서 한/영 전환 기능을 구현하는 역할을 맡았다.  위와 같은 상태에서 헤더에 포함된 한영 전환 버튼을 누르면 이벤트리스너가 동작하면서 api를 한글로 fetch하여 화면에 새롭게 영화 카드를 그려지게 구상하였는데,문제는 현재 보고 있는 메뉴가 Top Rated인데, 한/영 전환을 하면서 한국어 API로 fetch 하는 데까지는 아무 문제가 없으나 이 바뀐 언어의 API로 다시 영화 카드를 화면에 그리는 과정에서 페이지가 새로고침 되며 페이지의 초기 상태인 popular로 강제 이동되는 현상이 발생했다.눈으로 보이는 페이지는 하나지만 popular와 top rated에서 각각 fetch를 다르게 요청해야 하는 상황인데,이를 해결할 방법을 찾지 못하다가 로컬스.. Programing/TIL 2024. 5. 8.
[코딩애플] Git 강좌 정리 (비공개) 보호되어 있는 글 입니다. 2024. 5. 4.
2024-05-03 쿼리스트링 조별과제를 하면서 반나절 가량을 애를 먹은 게 있다.쿼리스트링인데const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}language=${currentLanguage}&api_key=${ApiKey}`, options)이 코드의 구조 자체가 이해가 되질 않았다.최초 코드는 아래와 같았다.const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}api_key=${ApiKey}`, options)위 URL이 너무 복잡해보였는데, 튜터님께 질문 후 해결이 되었다.qu.. Programing/TIL 2024. 5. 3.

티스토리툴바