[WIL 2023.06.04] 내배캠 3주차

📝 Situation(상황): 이번주 목표

개인 과제인 영화 검색 페이지 만들기가 이번 주의 목표였다.

저번주 한 주간 자바스크립트 학습한 이론강의를 몸소 손으로 익혀보는 시간이었다.

역시 가만히 앉아서 강의를 듣는 것과는 달라서 여러 고비를 만났다.

👀 Task(임무): situation 중 문제들

1. 데이터가 불러와지지 않는 문제

2. 데이터를 불러와서 카드 생성은 어떻게 하는 것?

3. 검색기능은 어떻게 만드는 것인가

4. 무한루프 하는 자동슬라이드를 만들기

5. 요소들 위치 조정 및 css 수정

🔍 Action(접근방법): 해결시도

위 문제들의 답을 찾기 위해 가장 먼저 찾았던 것은 구글 검색이었다.

오픈 api라는 개념 조차 무엇인지 생소했기 때문에 단어의 의미부터 파악했으며 

이후 이걸 코드로 구형하기 위해 어떻게 해야할지 발제 자료를 꼼꼼하게 읽었다.

필수 요구 사항이라 쓰고 힌트라 읽는다

이렇게 해도 잘 모르겠는 부분은 튜터님을 찾아가 도움을 구하는 방식으로 방향성을 찾아갔던 것 같다.

그리고 정말 답답한 순간에는 금지된 '그것'인 GPT 선생도 이용했다..

📃 Result(결과): action 후 성과

거의 맨땅에 헤딩 수준으로 무작정 시작한 과제였지만

기획부터 완성까지 오롯이 나 혼자서 하나의 페이지를 만들어 내었다는 것에 큰 의의를 둔다.

📽️ GOE's CINEMA

영화 검색 페이지 만들기

1. 소개

영화 검색 웹사이트.

인기순, 현재상영작, 높은평점순 등으로 정렬된 영화들을 볼 수 있고,

특정 영화를 검색할 수 있다.

디자인은 ‘레트로’ 와 ‘시네마’ 키워드를 착안. 붉은색과 전구로 장식된 이미지를 바탕으로 한다.

2. 기술스택

3. 구현 기능

1) 홈 화면 및 인기영화 자동 슬라이드

 슬라이드에 마우스 호버 시 슬라이드 멈춤. 마우스 떼면 다시 자동 슬라이딩

2) 카테고리별 영화 페이지

3) 검색 시 실시간 반영되어 결과 도출

 띄어쓰기에 상관없이 검색가능/대소문자 구분 없음

4) 하단 푸터

 

 로고 클릭 시 홈화면으로 이동 / 깃허브 아이콘 클릭 시 제작자 깃허브 주소로 이동 / 티스토리 아이콘 클릭 시 제작자 블로그로 이동

4. 아쉬운점 (추가하고 싶은 기능)

1) 원래는 영화별로 상세페이지를 모달로 띄워서 더 많은 정보를 표시

2) 검색어 입력 시 현재 페이지 위치에 상관없이(카테고리에 상관없이) 해당되는 영화를 검색

3) 검색 실시간 반영이 페이지 자체가 아니라 인풋창 하단에 필터링된 결과값을 리스트로 나타내는게 더 좋았을 듯

📓 Point(정리): 이번주 요약

새로이 시도해본 것

그리드의 사용

새로운 메서드 활용

(insertAdjacentHTML(), trim(), replace(), split(), replace(), cloneNode(), prepend(), setInterval())

콜백함수, 화살표 함수 활용

 

습득한 역량

문제를 발견하고 해결하는 능력 키우기

: 함수를 설계하고 호출했을때 실행이 안될 경우 이전과 다르게 문제부분을 파악하고 수정해가는 법을 알게 되었다.

예를들어 moveSlide함수의 if 조건문을 설정 했을때 ( if (currentIdx == slideCount) )

현재 입력된 숫자와 슬라이드 카운트가 일치하면 style의 left값이 '0px’이 되는 조건이 적용 되지않아 난감했었는데

실제로 값을 확인해보면 문제점이 무엇인지 정확하게 파악이 되고 고칠 수 있다는 것을 배웠다.