TMDB API 사용하기 5

더보기벌써 5월?,,, 말도안되 map 함수를 좀 더 고쳐봤다. 코드가 너무 더러워서 신경이 엄청 쓰였었는데... 챗지피티한테 물어보니까 구조 분해 할당을 사용하라고 하는 것. ,,,,,,,,,,아하! 분명히 공부한건데 써먹을 일이 없어서 기억이 잘 안 나는 게 함정. 재빨ㄹ ㅣ검색 구조 분해 할당은 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법이다.이런 식으로 저장되어 있는 api는 객체이므로... 이 객체들을 변수로 분해 해줄 수 있다는 것. 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용하는 듯 싶다. 검색해서 예제를 하나 봤다. // 이름과 성을 요소로 가진 배열let arr = ["Bora", "Lee"]// 구조 분해 할당을 이용해// firstName엔 arr[0..

• format_list_bulleted TIL
• · 2024. 5. 1.
• textsms

TMDB API 사용하기 4

사실 새벽에 방법을 찾아서 미리 코드를 추가하긴 했다. 1. 검색 창에 아무것도 입력하지 않았을 때도 alert 창을 띄우는 것 전document.querySelector('#search-btn').addEventListener('click', function (event) { event.preventDefault(); showResult(); }); function showResult() { let inputValue = document.querySelector('#input-text').value.toLowerCase(); //소문자로 변환원래는 버튼을 클릭했을 때 새로 고침을 막으면서 showResult 함수가 실행되게 했고, showResult는 i..

• format_list_bulleted TIL
• · 2024. 4. 30.
• textsms

TMDB API 사용하기 3

더보기더보기(새벽) 진짜 눈물 찔끔 났다. . . 드디어 성공했다. (물론 블로그 글 & 챗지피티의 도움이 없었다면...) 나를 괴롭히던 검색 기능... 당최 어떻게 실행해야 하는지 모르겠어서 일단 블로그 코드를 그대로 붙여넣고 조금씩 수정을 해가면서 고쳤는데 일단 버튼 실행 함수까지는 그럭저럭 구현을 했는데 그 이후부터가 문제였다. -- 까지 쓰고 일단 잠들었다. 전 노트북 용량 문제로 사용하기 힘들었던 깃도 이제서야 써봤다. 일단 코드는 이렇다. 참고한 블로그가 너무 많다(...) 당연히 보진 못하시겠지만 저의 빛, 희망, 구원의 손길 그 자체였습니다... 물론 그대로 복붙하진 않았고, 최대한 바꿔보고 코드를 줄여보려 애썼다!  먼저 함수를 하나 만든다. function showResult() { ..

• format_list_bulleted TIL
• · 2024. 4. 25.
• textsms

TMDB API 사용하기 2

오늘 하루는 고통 그잡채... 카드 리스트까지는 만들었는데 검색 기능은 구현못했다. 여러 블로그를 찾아봐도 내용이 다 달라서 더 혼란스럽다. 어쩌면 코드를 갈아엎어야 할지도... 내가 봐도 마음에 드는 코드는 아니다. let url = 'https://api.themoviedb.org/3/movie/top_rated?api_key=&language=en-US&page=3, options';fetch(url) .then((response) => response.json()) .then((response) => { let movie = response['results'].filter( (x) => x['original_language'] === 'en' ); let temp_h..

• format_list_bulleted TIL
• · 2024. 4. 24.
• textsms

TMDB API 사용하기 1

과제개요순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현학습해온 자바스크립트 문법을 최대한 활용스타일링 작업하며 css 와 친해지기 이번 과제는 영화 검색 사이트를 제작한다. 오늘은 일단 html 뼈대와 css를 작성했다. tmdb api도 가져와야 하는데 시키는 대로 해도 자꾸 오류가 떠서 조금 오래 붙잡고 있었다. 서치해보니 나와 같은 문제가 있는 사람들은 많이 보였는데 명확한 해결 방법이 안 나와서. . . 깝깝해 하는 중이었다. {   "status_code": 7,   "status_message": "Invalid API key: You must be granted a valid key.",   "success": false }   ++이 문제는 팀 과제를 하면서 해결했는데검..

• format_list_bulleted TIL
• · 2024. 4. 23.
• textsms