5/9 TIL (조별과제 제출!)

오늘은 5월 1일부터 오늘까지 진행했던 조별과제를 제출하는 날이다.

다른 팀원분들 코드를 보면 감탄만 나온다.. 얼마나 잘하시는 거지 ㅠㅠ

과제를 진행하면서 조별과제 기능 설명 및 우리 팀이 기술적으로 어려움을 겪었던 부분에 대해서 적어볼까 한다.

기술적 어려움

• 1. li 태그의 key값이 숫자로 시작하면 querySelector로 가져올 때 제대로 읽어 오질 못한다는 점을 몰라서 고생했다

• 2. 수정할 때 입력 받는 부분이 textarea이고 기본 row값은 2인 반면에 내용은 그 이상이 될 수 있어서 내용이 안 보이는 경우가 있을 수 있었음.
     row값을 내용에 따라 설정했어야 했는데 이 부분도 생각을 많이 했다

• 3. 리뷰 내용은 p 태그를 사용해서 보여주는데 p 태그는 개행을 "\n"가 아닌
     로 하기때문에 Localstorage에 있는 데이터를 읽어올 때는 "\n"를
     로 변경 해줘야 했고 수정 할 때 입력창으로 사용한 textarea는
     을 그냥 문자열로써 읽어버려서 "\n"으로 또 변경해줘야 했음

• 4. 협업 과정에서 코드 충돌(Conflict)이 꽤 있었는데, 이 코드 충돌을 해결하는 과정이 까다로웠고 Git에 대해 아직은 익숙하지가 않아서 배워왔던
     Git을 제대로 활용하지 못한 점이 아쉽다.

정도가 있었다. 아무래도 협업을 하는 과정에서의 코드 충돌은 피할 수 없는 난관인 거 같다

메인페이지 기능 설명

일단 우리 조의 메인 페이지를 보자면, 홈페이지를 로딩 시킬 때 밋밋해 보이지 않도록 애니메이션 기능을 구현했다
css keyframes와 animation 속성을 사용했고, 팝콘이 마우스 커서를 따라다니게 하는 기능은 addEventListner('mousemove', function() {}) 이벤트를 사용했다.

또한, 메인페이지에서 정렬 기능을 구현해 영화를 제목,개봉일,별점순으로 정렬을 할 수 있게끔 하였고
화면 좌측 하단에 사용자가 직접 라이트모드/ 다크모드를 설정할 수 있게 버튼을 구현해놨다.

상세페이지 기능 설명

다음으로 상세페이지 설명을 해보자면 해당 영화를 클릭 시
innerHTML,async, awit를 사용하여 해당 영화의 상세 정보를 담은 페이지를 사용자의 화면에 출력시킨다.

스크롤을 내려보면 예고편, 등장인물, 이와 비슷한 영화를 나타내주고 있으며, 이 또한 async, await를 적극 사용했다.
오른쪽 중앙에 위치한 리뷰칸 버튼을 클릭 시 리뷰를 남길 수 있는 창을 open,close 할 수 있다.

해당 리뷰 창에서는 아이디, 비밀번호를 기재해서 리뷰를 남길 수 있으며 별점또한 남길 수 있다.preventDefault를 사용해 홈페이지가 새로고침 되는 걸 방지했으며 localStorage를 사용해 정보를 저장했고, addEventListner도 적극적으로 사용하였다

삭제, 수정을 할 시에는 반드시 비밀번호가 옳아야만 수정이 가능하게 if문을 사용해서 유효성 검사도 구현을 해놨다.

겪었던 기술적 어려움 / 느낀 점

조별과제를 진행하면서 겪었던 기술적 어려움으로는 일단 아무래도 여러명이 협업을 하다 보니 코드 충돌이 많이 있었는데, 아직도 Git에 대한 이해도가 그리 깊지 않은 거 같다고 생각을 해서 살짝 애를 먹었다.

그리고 개인적으로 생각하는 아쉬운 점으론 코드 리팩토링하는 부분에 있어서 아직 코딩에 대해 미흡한 부분이 많아서 다른 사람이 볼 때 코드의 가독성이 떨어질 수 있다는 점이 굉장히 아쉽다 ㅠㅠ.. 앞으로 보완해가도록 노력해야겠다.

팀 프로젝트를 하면서 확실히 내 개인적인 실력이 타 팀원 분들에 비해 부족하다고
냉철하게 느끼는 바인데, 어려운 부분이 생기면 매니저님, 튜터님, 팀원 분들이 도와주시고 옆에서 피드백을 해주신 덕분에 수월하게 진행이 된 거 같아서 감사드리고, 나 또한
도움을 줄 수 있는 팀원이 되고자 하는 욕심이 크다.

캠프를 진행하면서 깨달은 점도 많고 배워가는 점도 정말 많다..
이번 조별과제를 진행하면서 스스로에게 아쉬웠던 점을 되새기며
화이팅~ 해야지