목록2024/04 (11)
훈돌라
완성한 코드를 제출하고, 피드백을 받아 살짝 수정하였다. - 검색 기능에서 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 += 를 이용해 카..
첫 번째 개인 과제남들은 꼴랑 이런걸로 뿌듯해? 라고 할 수 있지만 난 매우 뿌듯한 상태이다. 완료한거1. api 적용 완료2. 만들어둔 카드에 api 값 불러오기3. 간단한 css 수정 ( 계속 수정 예정) 해야될거1. 검색 스크립트 구현 (제목 입력 -> 해당 카드 출현)2. 카드 id 값 부여 (카드 클릭 시 id 값 알럿) 현재까지 구현 const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3MjI3NzE0MDM1MzEzNjBiZWU2Ym..
와이어프레임을 만들어보려고 했는데 강의 들으랴, 과제 구상하랴 머리가 터질 것 같아서 일단 제출 예시를 눈으로만 보고 코드들은 내가 직접 짜서 스크립트 없는 초안만 구현해봤다. 이제 여기서 api 데이터 넣고 css 쪽을 많이 건드려볼 생각이다. 강의를 아직 덜 들은 탓도 있겠지만 api 는 진짜 어떻게 넣는건지 감도 안 잡히는데 할 수 있을까.. 당연히 할 수 있다.. 안 되는 걸 시키진 않겠지. .title_btn { text-align: center; } .mainbtn { background-color: black; color: white; display: inline-block; margin: 10px; cursor: pointer; } 오늘 알게 된 사실 버튼들을 중앙 정렬하려면 버튼에 dis..