목록전체 글 (61)
훈돌라
인풋창에 한/영 키의 활성화 여부 ( 지금 키 상태가 한글인지, 영어인지) 를 띄우고 싶어요.. function checkHanEngKey(event) { const keyCode = event.keyCode || event.which; const isHanKey = (keyCode === 229); if (isHanKey) { alert("한/영"); } } document.addEventListener("keydown", checkHanEngKey); document.addEventListener("keypress", checkHanEngKey); document.addEventListener("keyup", checkHanEngKey); 일단 이런 식으로 한/영 키가 눌렸을 때 이벤트가 발생하..
이번 팀 프로젝트는 개인 과제의 연장선으로, 몇 가지 필수 기능들이 추가되었다.(1) 필수요구사항[1] TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)[2] 영화정보 상세 페이지 구현기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다[3] 상세 페이지 영화 리뷰 작성 기능 구현상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.[4] github PR(=Pull Request) 사용한 협업[5] UX를 고려한 validation ch..
완성한 코드를 제출하고, 피드백을 받아 살짝 수정하였다. - 검색 기능에서 item class 를 이용하여 요소를 가져온 이후 요소를 순회하면서 filter를 하고있을때, id 를 갖고 document.getElementById(id) 하고게신데, 이미 순회하고 있는 familyTitle자체가 document.getElementById(id)로 가져온 결과와 같은 요소이기때문에 document.getElementById(id)를 하는건 불필요한 행위입니다. familyTitle[i].style.display = 'block'; 이렇게만하셔도 됩니다. 수정전 if (rows.includes(filterValue)) { document.getElementById(id).style...
진짜 머리에 안 들어온다 ㅜ,ㅜ 변수 선언 키워드 : var, let, const키워드 우측에 변수 이름 작성 ex )let overview = doc['overview'];let 은 한 번 선언할 변수를 여러번 변경할 수 있음.const 는 한 번 선언하면 변경할 수 없음. 비교 연산자 === : 양쪽에 위치한 값이 같은 경우 true, 다른 경우 false == / != (같다 / 같지않다) !== 는 엄격한 비교 (변수 타입까지 고려함) 반복문 for ~ of = Array, Map과 같은 반복 가능한 객체의 요소를 하나씩 반복할 수 있게 해줌const persons = ['강승현', '홍길동', '김아무개'];for (const person of persons) {console.log(pe..
필수 조건들은 모두 들어갔다.. CSS 를 할 힘이 남아있지 않다.. 이런 식으로 포스터들이 나열되고, 포스터들은 영화 순위 API 에서 받아온 데이터들을 기반으로자동 생성되어 html 을 채우게 된다. 페이지 상단의 검색창에 검색어를 입력 후 검색 버튼을 누르면 -> ex ) titan 검색 포스터 제목에 titan 이 포함된 포스터들을 하단에 노출시킨다. 대, 소문자도 상관없다. 로직에 검색 시 데이터들을 읽을 때 소문자로 변환하여 읽게 끔 짜두었기 때문이다. 포스터를 클릭 했을 시 경고창에 해당 영화의 ID 값도 출력되게 끔 구현했다. 과제의 필수 조건 1. 제이쿼리 라이브러리 사용 없이 순수 바닐라 스크립트로 구현하기2. TMDB 오픈 API 를 이용하여 인기 영화 데이터 가져오기3..
오늘은 영화 카드를 눌렀을 때 API 로 불러온 ID 값을 alert 창으로 띄우는 로직을 작성했다. 이런 식으로 영화 포스터를 누르면 ID 값이 alert 창에 뜨게 된다. document.querySelectorAll("#itemcard").forEach((el)=>{ el.onclick = function(){ let x = el.getAttribute("movie-id"); // getattribute 요소의 속성을 가지고온다. alert('영화 ID :' + x); 처음엔 itemcard 를 getElementById. 로 불러왔었는데 이건 틀린 방법이다. 간단하게 이유를 설명하자면, 저번 게시글에서 나는 temp_html += 를 이용해 카..