목록전체 글 (46)
훈돌라
진짜 머리에 안 들어온다 ㅜ,ㅜ 변수 선언 키워드 : 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bG6LU1/btsGXRhpymf/RqySMFkhaW8eoEYiyJgGsK/img.png)
필수 조건들은 모두 들어갔다.. CSS 를 할 힘이 남아있지 않다.. 이런 식으로 포스터들이 나열되고, 포스터들은 영화 순위 API 에서 받아온 데이터들을 기반으로자동 생성되어 html 을 채우게 된다. 페이지 상단의 검색창에 검색어를 입력 후 검색 버튼을 누르면 -> ex ) titan 검색 포스터 제목에 titan 이 포함된 포스터들을 하단에 노출시킨다. 대, 소문자도 상관없다. 로직에 검색 시 데이터들을 읽을 때 소문자로 변환하여 읽게 끔 짜두었기 때문이다. 포스터를 클릭 했을 시 경고창에 해당 영화의 ID 값도 출력되게 끔 구현했다. 과제의 필수 조건 1. 제이쿼리 라이브러리 사용 없이 순수 바닐라 스크립트로 구현하기2. TMDB 오픈 API 를 이용하여 인기 영화 데이터 가져오기3..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dPpvTi/btsGVs2Df9Y/5ErQgKvekNFzxstuXk5mk0/img.png)
오늘은 영화 카드를 눌렀을 때 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 += 를 이용해 카..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bKSeES/btsGSRBWFSI/HGs2WyES3gswdgLKLvVZz0/img.png)
첫 번째 개인 과제남들은 꼴랑 이런걸로 뿌듯해? 라고 할 수 있지만 난 매우 뿌듯한 상태이다. 완료한거1. api 적용 완료2. 만들어둔 카드에 api 값 불러오기3. 간단한 css 수정 ( 계속 수정 예정) 해야될거1. 검색 스크립트 구현 (제목 입력 -> 해당 카드 출현)2. 카드 id 값 부여 (카드 클릭 시 id 값 알럿) 현재까지 구현 const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3MjI3NzE0MDM1MzEzNjBiZWU2Ym..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oGguB/btsGRpLMurh/Cgc2tdRXR68It7hOWyh3Pk/img.png)
와이어프레임을 만들어보려고 했는데 강의 들으랴, 과제 구상하랴 머리가 터질 것 같아서 일단 제출 예시를 눈으로만 보고 코드들은 내가 직접 짜서 스크립트 없는 초안만 구현해봤다. 이제 여기서 api 데이터 넣고 css 쪽을 많이 건드려볼 생각이다. 강의를 아직 덜 들은 탓도 있겠지만 api 는 진짜 어떻게 넣는건지 감도 안 잡히는데 할 수 있을까.. 당연히 할 수 있다.. 안 되는 걸 시키진 않겠지. .title_btn { text-align: center; } .mainbtn { background-color: black; color: white; display: inline-block; margin: 10px; cursor: pointer; } 오늘 알게 된 사실 버튼들을 중앙 정렬하려면 버튼에 dis..
변수, 상수 (나는 코드 스니펫에 의존하지 않는다. 직접 내가 타이핑한 vs code 임을 알린다.) // 변수, 상수 // 메모리에 저장한다. 읽어들여서 재사용한다. = 변수 // [변수의 5가지 주요 개념] // 변수 이름 : 저장된 값의 고유 이름 // 변수 값 : 변수에 저장된 값 // 변수 할당 : 변수에 값을 저장하는 행위 // 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 // 변수 창조 : 변수에 할당된 값을 읽어오는 것 // 변수를 선언할 수 있는 3가지 방법 : var, let, const //1. var var myVar = "Hello World"; var myVar = "Test1"; myVar = "GoodBye"; console.log(myVar); //2. let ..