# fetch
# form
# remove() vs removeChild()
# 클릭시 → 개별 id를 alert 창으로 띄우기
# text overflow 자르기
# 카드 돌리기
PREVIEW
📐 내일배움 캠프 개인과제 1번째
이번 개인 과제의 목적은 지난주(230522~230526)에 배운 JS를 잘이해하고 있는지 복습하기 위함이다.
따라서 기본적으로 지켜줘야할 '준수사항 및 목표사항'은 다음과 같다.
- 순수 바닐라 자바스크립트만으로 영회리스트 조회 및 검색 UI 구현
- 학습해온 자바스크립트 문법을 최대한 활용
- 스타일링 작업하며 css 와 친해지기
이번 과제에서는 JS에 집중해줘야하므로 '주제', '기본 디자인', '사용해야할 get API 가져오는 법'과 '지켜야할 필수 요구사항'이 주어졌다. 디자인은 본인 입맛대로, 추가기능도 본인 입맛대로 만들면 된다는 guideline이 있다.
📐 와이어 프레임
원하면 얼마든지 추가하고, 빼고 해도 되지만 일단 최소한으로 주어진 주체는 '최고 평점 영화'를 보여주는 페이지를 만드는 것이다. 간단한 주제이고, 며칠안에 완성할지 모르기 때문에 기능 구현에 먼저 집중하고자 기본 예시로 제공된 페이지랑 동일한 구성으로 만들기로 결정했다.
만든과정 (기억하고 싶은 것만!)
🚧 tag 구성
항상 tag을 too much하게 짰었기 때문에 sample로 주어진 페이지의 tag를 한번 보았다.
semantic tag도 활용하여 body를 총 3부분으로 나눴다. header(제목), form(제출양식), section(본문)
form tag 저번 프로젝트 때 잘 몰라서 못써먹었는데 배울 수 있겠다.
tag box를 어느 정도로 만들어야 하나... 했는데 움직이는 단위를 고려하려 '최최최소한'으로 해주면 된다...고 느꼈다.
card 같은 것도 안의 요소를 또 따로 묶어주곤 했었는데 그럴 필요는 없는것 같다.
'전체 cards 감싸는 box1 > 개별 card box > card box items' 정도로만해줘도 될듯
그렇게 만든 최초 큰 틀
🚧 reset.css 파일 생성 | CSS 초기 설정
'웹브라우저'마다 default style이 있으므로 => 우리가 작성한 CSS 스타일을 모든 브라우저에서 최대한 일관성있게 보여주기 위해 CSS 스타일을 초기화해주는 과정이 필요함.
+ 추가적으로 이뿐만 아니라 각 tag들의 default style 또한 혼란의 요소가 될 수 있으므로 css 초기설정하는 것은 유용하다고 할 수 있음
main css style을 잘 보이기 위한 초기화과정이므로 reset.css 파일 첨부시 항상 제일 상단에 두도록!필요성
◦ '웹브라우저'마다 default style이 있으므로 우리가 작성한 CSS 스타일을 모든 브라우저에서 최대한 일관성있게 보여주기 위해 CSS 스타일을 초기화해주는 과정이 필요함.
◦ 각 tag들의 default style 또한 혼란의 요소가 될 수 있으므로 css 초기설정하는 것은 유용하다고 할 수 있음
main css style을 잘 보이기 위한 초기화과정이므로 reset.css 파일 첨부시 항상 제일 상단에 두도록!
CSS 초기 설정 추천 코드 => 아래 사이트 참고
🚧 카드 사이 간격
🧡 display: flex; 에서 flexbox 속성을 사용함.
예전에 정보list를 카드로 붙여넣을 때 카드 핵심 items를 가지고 있는 카드를 한번 더 감싸지 않고, flexbox 속성을 주었을 때
카드간 사이 간격이 일정하지 않았던 경험이 있다.
같은 팀원이 사용하는 방식을 보고 깨달았는데 카드를 한 번 더 감싸줘야 카드 사이 간격을 일정하게 둘 수 있다!
카드를 이중으로 감싸지 않은 상태는 카드사이 간격이 일정하지 않다!!
↘︎ 지금 사용하고 있는 '카드를 이중으로 감싸고 있는' 형태 😁
↘︎ 카드를 이중으로 감싸지 '않은' 형태
↘︎ 카드를 이중으로 감싸지 '않은' 형태 | flex-start;
↘︎ 카드를 이중으로 감싸지 '않은' 형태 | 행이 바꿔었고, 다음 행에 카드가 덜 찼을 때 | justify-content: center;
↘︎ 카드를 이중으로 감싸지 '않은' 형태 | 행이 바꿔었고, 다음 행에 카드가 덜 찼을 때 | justify-content: apace-evenly;
✅ 🚧 외부 API에 담긴 정보를 fetch 를 이용하여 가져온다. (단, jquery 안쓰고 순수 JS만 이용해서 !!) | => 다시 공부하기 !
( 현상태 : fetch로 가져온 정보꾸러미에서 원하는 정보를 꺼낼 수도 있고, 어떻게 써야하는지도 아는데 fetch 구조 각각의 쓰임 잘 모름.)
// 영화 API 요청 코드
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization:
'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhYjdkNzRhNTRiYzEzNTE4ZDgyMTc1MjAzNzM4MzliNSIsInN1YiI6IjY0NzA4OGI1NTQzN2Y1MDE0NzVmMDU0ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.FaD0cXTgqDH5QUE4-ZoUBQJFr9fuQMr0VtpdOJEbTxE',
},
};
function getMovieAPI() {
fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
.then(response => response.json())
.then(json => {
// 💙 json에 우리가 사용할 수 있는 객체형태로 보기좋게 담겨져있음
// json이든 myson 이든 작명은 자유!
})
.catch(err => console.error(err));
}
🚧 form data 입력값 보내기
document.getElementById('form').addEventListener('submit', showSearch);
// ㄴ = ' id="form" '인 document에 submit event가 발생하면, showSearch 함수를 실행하라 function showSearch(event) {
event.preventDefault();
let input_str = document.getElementById('search-input').value; // DOM의 속성 value를 이용해서 해당 요소의 값을 가져오기
console.log(input_str);
// 🍀 1. 카드 리스팅할 공간 비우기
let parent = document.getElementsByTagName('section')[0];
let children = parent.querySelectorAll('.card-bg');
children.forEach(child => {
parent.removeChild(child);
});
// 🍀 2. .forEach() 메서드로 movie를 하나씩 가져온다. 단, if문을 이용하여 input_str을 포함하는 title을 가진 영화만 가져오기!
movies.forEach(movie => {
let title = movie['title'];
// 1. 가져온 movie에 있는 title 가져와서 input_str과 문자열 비교 | 문자열에 특정 문자가 포함이 되었는가
// 1-1. 소대문자 상관없이 찾기 | 두 문자열 전부 소문자로 변경 | string.toLowerCase();
let sTitle = title.toLowerCase();
let sInput_str = input_str.toLowerCase();
// 1-2. 문자열 포함 여부 | 문자열.indexOf(문자) : -1(=false) or 1(true) 반환 // 문자열.includes(문자) : false or true 반환
if (sTitle.includes(sInput_str)) {
let id = movie['id'];
let overview = movie['overview'];
let poster_path = 'https://image.tmdb.org/t/p/w500' + movie['poster_path'];
let vote_average = movie['vote_average'];
let temp_html = `
<div class="card-bg">
<div id="${id}" class="card-content" onclick="alertId(this.id)">
<!-- 이미지 크기 260*390 -->
<img src="${poster_path}" alt="movie image" />
<h3>${title}</h3>
<p class="card-overview">
${overview}
</p>
<p class="card-rating">Rating : ${vote_average}</p>
</div>
</div>
`;
document.getElementById('cards').insertAdjacentHTML('beforeend', temp_html);
}
});
}🧡 카드 parsing할 공간 비우기는 아래에서도 설명할 removeChild()로 해도 되지만 remove()라는 방법도 있다는 점!
두 방법 차이가 있음
🚧 remove() vs removeChild()
◦ 삭제 당하고 싶은 요소.remove() | 삭제 당하고 싶은 요소만 쓰고 싶다.
◦ 상위부모요소.removeChild(삭제할 하위요소) | 상위부모요소의 자식요소를 삭제하고 싶다.
🚧 클릭시 → 개별 id를 alert 창으로 띄우기
🚧 text overflow 자르기
🚧 카드 돌리기
궁금한 것
질문1. 내 html의 script에서 showSearch()함수를 정의할 때 이 함수를 감싸는 또다른 함수에서 이미 선언 및 정의된 변수가 다시 선언되어야 오류가 발생안하는 이유 => 출력은 잘 되는데 아래 코드를 실행 하려니 오류가 떴었다. 왜죵?
// 아래 코드 두 줄 다 이미 한번 선언 및 할당되었던 것들.
// 아래 코드 두 줄이 없어도 console.log(parent, children)은 잘 나오는데
// .. 젤 하단의 코드에서 오류뜸
let parent = document.getElementsByTagName('section')[0];
let children = parent.querySelectorAll('.card-bg');
children.forEach(child => {
parent.removeChild(child);
});
궁금1. parsing 개념
타인에게 설명해주다 부족하다 느낀 것 / 헷갈리는 것
📍 fetch 사용방법 | 더 학습하기 ➡︎ ('https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch')
📍 구분 | DOM, event, (식별자, 변수명, 변수)
📍 box-sizing | content-box vs border-box
📍 길이 단위 사용 경우 (상대적 길이 단위, 절대적 길이 단위)
몰라서 사용못한 것
❤️🔥 grid
❤️🔥 sass
❤️🔥 event.target
'Log > TIL' 카테고리의 다른 글
| TIL_230531 | 개인프로젝트 JS파일 엎기 (2) | 2023.05.31 |
|---|---|
| TIL_230530 | 무엇이 부족하고, 무엇을 보충할까 (0) | 2023.05.31 |
| TIL_230526 | TIL 습관형성 2일차 _ JS강의 4주차 (0) | 2023.05.26 |
| TIL_230525 | TIL 습관 포기못해! (0) | 2023.05.25 |
| TIL_230524 | 잘 이해하고 있지? (0) | 2023.05.25 |
