[Node.js_4기] Today_I_Learn : 개인과제2 + (24/01/09)

목차

 

1. 문제

2. 시도

3. 결과

4. 배운점

 

1. 문제 

 

3_ 카드 클릭시 클릭한 영화 id 출력 alert창 구현

4. 영화 검색 UI구현 (현재 input 공간과 butoon만 구현한 상황)의 구현,
그리고 피드백 받은 부분에 대한 수정

 

2. 시도 

 

(1) 카드 클릭시, 클릭한 영화 id 출력(alert)

fetch 부분에서 TMDB에서 데이터를 받아온 후 해당 함수를 실행한다. 카드의 img에 이벤트 리스너를 추가해주고, 클릭되었을 때 해당 영화의 id를 가져와 출력하는 방식으로 동작한다. 쿼리 셀렉터로 img를 선택하고, 해당 index가 movies(tmdb에서 받아온 데이터의 results)의 영화 index와 같다는 점을 이용했습니다.

(2) 영화 검색 UI 기능 구현

해당 함수는 함수 표현식으로 선언했는데, 이유는 fetch마다 실행할 함수가 아니라 생각했기 때문이다. DOM과 쿼리로 html요소와 json에 접근하는건 동일하다. 접근한 cards의 내부 요소 card의 title이 search로 선언된 입력값을 포함하는지 확인하여 false라면 card에 display : 'none';으로 화면에 표시하지 않게 하여 구현했다. 함수 표현식을 사용하여 동명 함수가 다른곳에서 호출될 경우(지금은 일어나지 않겠지만...) 발생할 문제를 미연에 방지했습니다.

(3) 수정사항

이전에는 display를 grid로 설정하고, grid-template를 사용하여 고정된 템플릿 형식으로 카드를 출력하게했지만, display:flex, flex-flow:row wrap;으로 바꿈으로서, 창 크기에 따라 자동적으로 카드 배열이 달라지게 만들었습니다.

 

3. 결과 

개인프로젝트 평가 결과, 최소한의 기본 구현은 모두 마쳤습니다. 추가 요구사항의 경우, 일부 인정되어 피드백을 받을 수 있었고, 불필요한 주석의 제거, 공통 피드백으로 받은 몇몇 수정사항등이 있습니다. 이는 추후 수정과 함께 TIL로 작성할 예정입니다.

 

4. 배운점 

 

1. css.reset

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

모든 환경에서 css를 리셋하고, 똑같은 css를 적용시켜주기 위해 해당 코드를 사용함으로서 어디서든 같은 화면을 볼 수 있게 되었습니다.

 

2. prettier 

자동으로 코드를 정렬 수정 해주는 툴 입니다. 

 

<개인과제 해설>

 - 모듈

• 특정 관심사에 해당하는 기능을 수행하는 변수와 함수의 모음
• 관심사의 분리 (재사용성, 유지보수성, 깃 협업능률 향상)
• 모듈별 독립적 scope 생성. (모듈에서 동일한 변수 사용해도 무관해짐)
• Strict Mode 기본 내장(1. 변수 선언 없이 즉시 사용 방지, 2. 예약어를 변수명으로 사용 방)

 - 이벤트 위임

• 자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 위임하는 것 (메모리 절약)

<ul id="card-list" onclick="handleClick(event)">
	<li class="movie-card" id="movieId">
     <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
     <h3 class="movie-title">제목</h3>
     <p>내용</p>
     <p>Rating: 평점</p>
  </li>
</ul>

• 부모 요소인 ul 태그 이벤트핸들러가 등록되어 있으면 자식 요소인 li, img, h3, p 태그 중 어떤 것을 클릭해도 부모 요소의 이벤트 핸들러가 실행된다. 

 

- from태그

• semantic tag : 폼 내부에 사용자로부터 입력을 받고 제출하는 UI가 있을 것이라 예측 가능

formElement.addEventListner('submit', function (event) {
	// 발생한 이벤트에 대한 브라우저의 기본 동작(새로고침)을 막습니다.
	event.preventDefault();
})

• submit 이벤트 발생 시 새로고침 처리하는 기본 동작을 가지고 있음
• form 내부에서 input 과 button 의 동작

<form id="search-form">
    <label>영화 검색 : </label>
    <input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요" />
    <button type="submit" id="search-btn">검색</button>
</form>

• form 태그에 submit 이벤트 핸들러가 있는 경우, input에 내용 입력 후 button 클릭 또는 Enter 입력 시 submit 이벤트 핸들러가 실행된다.
• form 안에 있는 button 태그에 type을 명시하지 않은 경우 기본 type은 submit 이며, submit이 아닌 다른 타입을 명시하면 버튼 클릭 시 submit 이벤트가 발생하지 않는다.