[내일배움캠프 12일차 TIL] 개인 프로젝트 1: 영화 검색 사이트

 

 

대충 꾸며놓고 나니 색조합이 마음에 들어서 css 설정에 적당히 참고했다

첫 프로젝트가 끝났다.

주제는 영화 검색 사이트 구현이었고 요구사항은 이렇게 되어있다.

결론부터 말하면 필수 구현사항을 전부 끝내지 못했다🥹 (형광펜으로 체크한 부분만 성공)

 

 

결과물 페이지

 

 

https://github.com/julie-kim-dev/movie-search

GitHub - julie-kim-dev/movie-search

 

 

---

 

좋았던 점

api를 끌어와서 눈에 보이는 결과물로 구현한다는 경험 자체가 도움이 됐다고 생각

DOM요소 제어에 아주 약간은 익숙해짐

flex를 이용해서 어렵지 않게 자리 배치

(다음 프로젝트는 기회가 된다면 grid도 사용해보고 싶다)

 

 

아쉬운 점

0.

당연히 전부 구현하지 못한것..😇

이번 프로젝트는 아쉬움이 더 커서 굳이 넘버링까지 해가며 써봅니다...

 

1.

alert 부분은 영화 id를 끌어올 구역을 고민하다가 결국 완성하지 못했다.

지금의 구조를 유지하며 id를 추가하는 방법이 있을것 같은데 movie = { title, overview, poster_path, vote_average, id } 이런 식으로 한꺼번에 잡는 방법밖에 떠오르지 않는다.

 

1-2.

그리고 클릭 이벤트도 넣긴 넣었는데...

뭔가 이상하게 들어갔다 ㅋㅋㅋㅋ

클릭은 클릭인데......

 

2.

카드 구조는 이런 식으로 짰는데 역시 ul-li가 아닌 div-div 구조가 신경이 쓰여서...

이 부분도 아마 수정하지 않을까 싶다

그나저나 지금은 공부하는 단계이고 코드를 작성하며 실시간으로 습득하는 부분이 꽤 있는지라 주석이 주렁주렁 달려있는데 이거 괜찮나?!! 회사가서도 이렇게 주절주절 달아놓고 있으면 어쩌지

 

 

신경쓴 점

영화 제목과 줄거리 부분에 height 값을 줘서 같은 높이로 나오도록 통일해줬다.

줄거리가 너무 긴 영화는 높이값에 맞춰 잘라줬는데, 조만간 수정할 때 말줄임표도 같이 넣어주고 싶다.

그리고 평점은 10점 만점이라는걸 알수있도록 '/ 10' 부분을 같이 작성했다.

써놓고 나니 전부 css 관련이긴 하지만 js는 구현 자체가 너무 급하고 힘들었어서 더 신경을 쓰고 어쩌고 할 겨를이 없었고 사실은 이 점이 제일 아쉽다🥹🥹🥹

얼른 익숙해져서 기능 구현은 물론이고 다른 부분도 신경써가며 코딩하고 싶다!

 

---

 

 

당장 내일부터 팀프로젝트 시작이라 조잡한 글이 되었지만..

다음주에는 좀더 알차고 회고라고 부를수있는 글을 쓸수있길...😱