[TIL] Day 11 TMDB API, 검색 기능 구현

2023.10.19 목

 

<09:00 일정 정리>

하루의 큰 틀이 되는 계획을 수립했다.

어제 작성한 팀 노션에 기재하여 오전 회의 시간 때 일정을 공유하도록 한다.

이전에는 메모장에만 작성을 했었는데, 노션에 깔끔하게 정리를 하니까 더 편하고 눈에 잘 들어온다.

 

전체적인 하루를 그려보며 효율적인 공부방법을 찾고,

불필요한 곳에 쓰이는 시간을 줄여서 개발 능력을 기를데 더 투자할 수 있다.

 

 

<10:00 오전 회의>

팀원들과 일정을 공유하고 코드 리뷰를 진행했다.

모두 개인 과제에 대한 어려움이 있는 것 같다.

 

 

API KEY를 넣어야 하나? 

 

TMDB API를 활용해서 영화 검색 사이트를 제작하는데,

도무지 API가 작동을 안한다...

어제 늦은 밤까지 찾아가며 구현을 해보려고 했지만 끝내지 못했다.

팀원들은 어떻게 해결을 했는지 궁금해서 코드 리뷰를 진행했다.

 

나와 다른 점은 API KEY를 활용했다는 점.

이 부분에 대해서 어떤 차이가 있는지 검색이 필요할 것 같다.

(추후 기능을 구현했는데 API KEY 없이 작동하는 방법을 찾았다. API KEY로 작동시키는 방법도 있는 듯 하다)

 

 

<10:10 개인과제>

영화 검색 사이트 "Rotten Orange" 만들기

• API 구현
• 검색 구현

 

API 기능 구현

fetch에서 results 가져오지 못 하는 오류

 

첫번째 큰 난관...

API를 잘 불러오나 했는데 해당 오류가 계속 console창에 나타난다.

이 문제 때문에 코드를 하나하나 뜯어보며 고민했다.

 

 

 오류 해결

fetch(API_URL, options)
	.then(response => response.json())
	.then(response => console.log(response)) //해당 부분을 지우니까 작동한다
	.then(data => fetchThen(data))
	.catch(err => console.error(err));

다른 부분만 계속 건들였는데

.then(response => console.log(response))

해당 부분을 지우니까 정상 작동한다...

 

설마 하고 넘겼던 작은 부분에서 큰 에러가 발생할 수 있다는 걸 다시 한 번 뼈저리게 느낀다.

console.log 로직이 영향을 미칠 수 있다는 걸 알았다.

특히 then 명령어에서 작동을 하는 부분이기에 오류가 뜨는 것 같다.

 

 

검색 기능 구현

큰 산을 넘으니까 또 산이 하나 남아있다.

핵심 기능 중 검색 기능을 구현하는 것이다.

코드를 씹고 뜯고 맛보며 결국 구현에 성공했다.

 

수많은 오류들

처음 사용해보는 코드들이 많아서 직접 부딪치며 익혔다.

그 과정에서 정말 많은 오류들을 만날 수 밖에 없었다.

 

대부분의 오류는 생각보다 사소한 것에서 찾아온다.

• 변수명에 오타가 있거나
• 로직의 순서가 바뀌었거나
• {} 표시가 안되었거나

아주 기본적이지만 이런 부분에서 틀리게 된다면 매우 골치아파진다.

왜냐하면 어디서 오류가 났는지 제대로 알려주지 않기 때문이다.

너무 사소한 부분이라 계속해서 들여다봐도 찾기 못할 때가 많다.

그래서 기본기가 튼튼할 수록 오류와 마주치는 횟수가 줄어들고, 그만큼 실력이 올라가는 것 같다.

 

TMDB API 사용법
event.preventDefault()
addEventListener
document.querySelector / document.querySelectorAll
insertAdjacentHTML
forEach
map
filter
findIndex
then

(자세한 내용을 추후 별도의 글로 정리해야겠다. -링크)

 

 

<14:00 오후 회의>

구현에 성공한 코드 리뷰를 진행했다.

서로 공유하고 학습하는 것이 정말 중요하다.

앞으로 어떻게 끌어주고 밀어주며 같이 공부할까에 대한 고민도 해보는 시간을 가졌다.

 

 

<15:00 디버깅>

검색 기능을 구현한 팀원들이 나오기 시작했고,

아직 오류의 늪에서 나오지 못한 팀원들을 구해주기로 했다.

 

각자 진행 상황을 리뷰하고 그 과정을 해결한 사람이 해결방안은 제안한다.

화면 공유나 파일을 받아서 하나씩 살펴보며 어떤 부분에서 에러가 발생했는지 찾는 과정이다.

 

내가 경험하지 못했던 에러를 간접경험하며 경험을 쌓을 수 있고,

팀원의 에러를 빨리 해결하고 다음 문제를 같이 고민해볼 수 있어서 개발 시간이 단축된다.

각자 로직을 구성하는 방법이 달라서 살펴볼게 많지만 다양한 코드를 보고 분석할 수 있는 경험이 큰 도움이 되는 것 같다.

 

search_area.addEventListener("submit", search); / click 시 작동 안함
API 한국어로 가져오는 방법

 

 

<19:00 취업 설명회 : 게임개발자 실시간 Q&A>

웹,앱 개발과는 조금은 거리가 있어보이지만,

게임을 즐겨했던 입장에서 게임개발 쪽 분야는 어떤 이야기가 있을지 궁금했다.

마침 취업 설명회를 한다고 해서 이번 기회에 들어보기로 했다.

 

가장 도움 되었던 것은 현업에 종사하는 튜터님에게 많은 질문을 할 수 있는 기회가 있었던 것!

 

자바스크립트로 웹 프론트엔드 공부중인데 이걸 살려서 게임개발쪽으로 취업하는 방법이 있을까요?

• 하나의 언어를 배웠다면 다른 언어는 수월하게 배울 수 있다.

 

게임쪽을 희망한다면 C++(언리얼엔진)이나 C#(유니티)를 필수적으로 공부해야할까요?

• C++이나 C#은 필수적이라고 생각한다.

 

게임도 장르에 대한 유행이 있는데 현업에서 느껴지는 부분도 궁금합니다. 요즘 유행하는 장르나 앞으로 전망있어 보이는 장르가 있을까요?

• 하이브리드 캐주얼 장르 (하이퍼 캐주얼과 미드코어 사이)
• 하이브리드 캐주얼 게임은 하이퍼캐주얼 게임의 높은 접근성과 미드코어 게임의 수익 창출 및 유지 메커니즘과 통합함으로써 하이브리드 캐주얼은 잠재적으로 참여를 높이고 플레이어 유지할 수 있습니다.
• 현업에서도 느끼는 부분인데 게임을 만들고 있다보면 유행이 금방 지나가서 시행착오가 많다.

 

 

<20:00 CSS 연습>

 

Flexbox Froggy

 

Grid Garden

기능 구현을 마쳤으니 이제 CSS를 만져볼 차례이다.

정렬하는 방법이 크게 Flex, Grid가 존재한다.

 

해당 사이트에서는 게임을 통해서 CSS 기능을 살펴보고 실전에 적용할 수 있다.

게임 형태로 되어있어서 재미있게 학습할 수 있다.

실제로 적용하는 부분에 있어서도 큰 도움이 된다.

 

 

---

하루를 마치며

수많은 오류와 사투하고,

많은 문제를 해결한 하루였다.

사소하지만 중요한 부분들을 기억하고

같은 실수를 반복하지 않는 것이 중요하다!

 

 

오늘의 한 줄
문제가 발생하면 끈기로 해결하자!