[TIL] 23/10/27 javascript : 팀과제

😎 한 일

현재 상영작 페이지를 작성하고 있음.

[ 완료된 상황 ]
1. 드롭다운 클릭 시 쿼리 변경해서 가져옴
2. 더보기 하면 더 가져옴 (5페이지)

[ 남은 거 혹은 문제점 ]
1. 개봉일순 소팅 시 
소팅쿼리는 최초개봉일(외국기준)만 제공하고 
개봉일은 한국으로 지역을 넘겨주면 한국 개봉일을 넘겨줘서 순서 안맞아보이는게 있음
사실 평점(vote average)도 한개 이상하고 인기 점수도 여러개 이상함 
쿼리 구림 ~!

2. 동그라미를 동그랗게 하려면 숫자 7 -> 7.0 으로 고쳐야 함 : 동그라미에 크기를 주면 되었겠네ㅠ (24.03)
(뇌가 혼란해서 빨리 할 수 없을 것 같아서 안되면 그냥 평점을 인기점수 옆에 찍어주기)


[UI 상 부가적인거]
1. sort_by 를 탑에 고정 시키고싶다. // @_@ 못하겠다. : fixed 하면되는데!! (24.03)
2. 아니면 위로가기 버튼이 필요한 듯.

🤣 TIL

[ javascript 날짜 가져와서 0 붙이기 ]

어제의 ^.^ 열심히 한 뿌듯한 코드 갈아엎기!

내가 가져와야 하는 양식은 yyyy-mm-dd 인데

어제 확인하지 못했던 부분이 month나 date의 숫자가 1자리 일 경우...

하필이면 어제 찍은 날짜가 10.27 이었던것이냐. (어제지만 새벽에 찍어서봐서 ^.^ 오늘..)

 

toLocaleDateString() 메소드는 2023.1.6  이런형태로 반환해 준다.

let today = new Date(); // Fri Oct 27 2023 01:22:34 GMT+0900 (한국 표준시)
let date = today.toLocaleDateString();  // 2023. 10. 27.

 

어제 사용한 코드.

let today = new Date();
let date = today.toLocaleDateString().replaceAll(".", "").replaceAll(" ", "-");

//2023-9-17 , 2023-10-17

문제가 뭐였냐면

TMDB 사이트 URL에 요청할 data들을 쿼리형식으로 붙여주는데, 개봉일을 적어서 보내 줘야 했다.
하드 코딩으로 넣었을때는 잘 되었는데, 작성한 변수를 넣어주니 못 읽어 왔다.

한참 문제가 뭔지 몰랐는데 이러지리 쿼리를 짤라보다가,
실수로 앞에 9월 17일이 적용이 안되어서 받아오는 걸 보고 알게되었다.

주소를 확인해 보니
&release_date.gte=2023-9-17 이따위로 붙어있어서 안되는 것이 었다. ㅜㅜ

월, 일이 10보다 작으면 String으로 바꿔서 0 붙이고 사이사이 "-" 도 붙여주도록

코드를 무식하게 if 문으로만 작성했는데 너무 구려서 부끄럽다.

(코드첨부는 패쓰)

[2주 전 날짜 계산 하기]

toLocaleDateString 말고 년,월,일을 각각 받아오는 메소드를 사용하고,

날짜계산이 만만치 않다 생각했는데, 30일도 있고 31일도 있고 윤년도고 있고 막 있잖아..

열심히 찾은 결과 역시 Date() 메소드 내부에서 다 해줄 수 있었다. 

https://gurtn.tistory.com/10

코딩은 복붙이다!

🙄...잘못된 복붙은 내코드처럼 더러운 코드를 낳는다...

let today = new Date();
let weeksAgo = new Date(new Date().setDate(1 - 14));

요렇게 나온다.

 

 

 

[TMDB nowPlay 에 대한 TMI...]

이친구들은 현재 상영작을 명확하게 보여줄 수가 없다. 억지로 만들어서 보여주는데 방식은 아래와 같다.

Now Playing 라는 API를 따로 빼놓았다.

https://developer.themoviedb.org/reference/movie-now-playing-list

중간에 있는 설명을 보면, 결국 내부에서는 Discover API 를 사용하는 것과 같으며,

필터링을 더 하고싶으면 Discover를 확인하라고 써있다.

 

curl --request GET \
     --url 'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc&with_release_type=2|3&release_date.gte={min_date}&release_date.lte={max_date}' \
     --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5NWU5N2QyZGE0NzI1NTcyODJmNjA4NGE4MDIzYTRiZSIsInN1YiI6IjY1MzRkN2I3NDJkODM3MDEyYzc2YjM5NSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.nlgw0kibOhrWpDdAK7wDBxrSGBN1-oywRoHgcq-t5_c' \
     --header 'accept: application/json'

Now Playing 과 동일하다는 Discovery call을 살펴보니 

대략 2주 전부터의 개봉일을 확인해서 인기순으로 이것저것 다른 쿼리를 붙여서 보내주는 것이다.

&release_date.gte={min_date}&release_date.lte={max_date}' 이렇게 써있긴한데,

받아온걸 확인해보니 2주 전과, 1일 후 까지를 보여준다.

TMDB에서 구현해 놓은 현재 상영영화 사이트에도 default로 저렇게 설정 되어있음.

 

나는 소팅 방식을 vote 순, popularity 순 등으로 받아오고 싶은거라서 discover API를 열심히 팠다. 

전체를 받아와서 소팅하기 싫은 꼼수였는데, API가 좀 별로다~~~

(5page에 96개 정도 되었는데 그냥 소팅할껄 그랬놔.. 객체가 대용량이라 감이안온다.)

 

TMDB Discover API의 안좋은 점 ㅠㅠ

1) region 을 한국으로 설정하면 개봉일을 한국 기준으로 반환해 준다.

//[Tip.국내 상영만 보여주기] language : ko-KR (한국어) , region : KR (남한)

 

2) 개봉일 기준으로 소팅할 수 있는 discovery query 는 외국 기준 최초 개봉일 뿐이다.

 

그래서 가져온 데이터의 소팅 순서를 보면 ? ^.^

알겠져...? 둘이 얼추 비슷한 것도 많지만... 후..

 

할 일

CSS 추가, git 반영 리퀘스트올리기, 또 머지..

나머지 전체 안된부분 체크 체크.