이번 과제 역시 순수 바닐라 자바스크립트로 개인 과제에서 제출한 과제 중 1개를 선택하여 여러 기능을 추가하면서 발전시키는 팀 과제이다.
우린 아침 회의를 통해 짱짱잘만드신 우리 팀원분 과제를 대표로 뽑아 그걸로 기능을 추가하며 작업하기로 결정하였다!
그리고 우리조는 매일 회의를 통해 정리된걸 노션으로 정리하는데, 이런식으로 정리하니깐 내가 지금 작업해야할게 무엇이고, 또 어떤 기능이 추가, 삭제됐고, 완료가 됐는지 한 눈에 확인할 수 있어서 이 부분도 진짜 좋다!!!!
일단 내가 처음으로 작업할 부분은 영화 overview 내 설정한 글자수가 넘어갈 시 (더보기 ...) 으로 노출이 되게끔 하는게 내 첫번째 작업이다.
이런식으로 영화 overview가 너무 길다보니 우리는 300자가 초과할 시 상세 페이지를 통하여 좀 더 자세한 내용을 노출하는걸로 결정하였다!!
<script>
// 영화 설명 문자열 줄이기 (...)
const summaryOverview = (overview) => {
let max = 300; // 표시할 글자수 기준
if (overview.length > max) {
overview =
overview.substr(0, max - 2) +
`
더보기 ...`;
}
</script>코드는 이런식으로 작성하였는데, 적용하기가 좀 힘들었다..!
내가 테스트로 구현한 코드는 저 코드에 들어가있는 str 코드로 간단하게 만들어서 기능만 테스트해보고 되는것을 확인하고 냅다 적용시키려고했는데, 내가 만든 코드를 다른사람의 코드에 어떻게 적용을 해야 할 지에 대해 좀 애를먹었다 ㅠㅠ.. 이 과제가 개인 과제라면 내가 만든코드에 그냥 입력하고 적용시키면 그만이였지만, 팀 과제로 진행하다보니 팀원분들이 만들어놓으신 코드가 내가 생각하고 있는 코드가 맞을까? 라는 생각이 엄청들면서 (물론 내가 좀 더 공부를 해서 스스로 해석할 수 있는 능력이 생기면 좋겠지만..) 아직은 이 수준이 아니다보니 코드 한줄 한줄이 어떤 코드에 연결이 되어있고 어떤 기능인지 하나도 몰랐었다 ㅠㅠㅠㅠㅠ...
결국 팀원분에게 조용히 요청을 드리며.. 이 코드는 이 코드도 저 코드는 저 코드다~~ 라면서 코드에 대해서 설명을 들었따 ㅋㅋㅋ ㅠㅠㅠ
이때 느꼈던 점은 진짜 이래서 주석을 잘 해야 되는구나 라고 느꼈음..!
내가 다른사람들의 코드를 사용할 수도, 혹은 그 반대가 될 수 있기에 이 코드가 어떠한 기능을 실행시켜주는지에 대해 간단하게라도 주석을 적어놓으면 코드를 보는 입장에서 정말 편하게 작업할 수 있겠다라는 생각?!
하여튼!! 이렇게 도움을 받고 우리는 영화 데이터를 오픈 api를 이용하여 받아오기 때문에 데이터 안에 있는 overview를 바탕으로 코드를 연결시켜보았다!
더보기 ... !! 깔끔하게 기능이 추가 되었다!! 지금 이미지 상으로는 1개의 영화가 보이지만 메인 홈페이지 내 overview가 300자가 초과 될 시 전부 저렇게 노출이 된다!!
나의 지식 부족으로 인해서 첫 작업이 매우 느리게 시작되었지만 ㅜㅜㅜ 그래도 잘 추가 된게 어디야... 진짜루..
