두번째 팀프로젝트 회고🎉🎉
일주일이라는 시간이 어떻게 지나갔는지 모를만큼 빠르게 흘러간 두번째 팀프로젝트!
이번 프로젝트 주제는 개인과제로 만들었던 영화소개사이트를 디벨롭하는 것이었다.
🚩 [자바스크립트 팀 과제]
- Javascript 과정을 마무리하며, 팀원들과 함께 JS 문법의 핵심을 적용해
볼 수 있는 영화 검색 사이트를 제작합니다.
- 기존에 개인 과제에서 TMDB를 이용하여 수행하신 과제의 "심화 버전"으로 진행합니다.우선 발제 끝나고 개인과제들을 쭉 보면서 누구 과제를 선택할지 살펴보았다.
캐러셀, 페이지네이션 구현이 되어있고 js코드 방식을 봤을 때도 배울 부분이 많은 것 같아서 기성님 코드에서 디벨롭 하기로 했다!
📍 01. 프로젝트명 정하고 기능구현 정리하기
프로젝트명
github에서 영감?을 받았는데ㅋㅋ 우리의 코드를 깃허브에 저장하는 것처럼
영화 정보들을 저장하는 공간이라는 뜻으로 "MovieHub"로 정했다.
기능구현
필수기능구현이었던 상세페이지 이동/영화 리뷰 작성 기능 구현을 넣었고
메인페이지는 내 개인과제 있던 검색창과 랜덤으로 영화예고가 뜨는 걸 합치기로 했다.
추가구현으로는 반응형디자인, 스크롤TOP버튼, 언어변경버튼 정도였고 기성님 코드에 있던 캐러셀과 페이지네이션 위치나 자잘한 수정사항을 손보기로 했다.
📍 02. 팀노션 작성 및 와이어프레임 그리기
우리의 규칙과 목표는 단순하지만 중요했다.
- 누구든지 튜터님한테 질문하러 갈 때 다같이 가기
- 기능구현하다가 안 되면 망설이지 말고 도움 요청하기
- 자바스크립트/깃허브 활용 많이 하기!!
- 중간에 깃발 꽂지 않기 (포기 금지)
- 디자인에 집착하지 않기(기능 구현 우선으로)
자바스크립트를 능숙하게 다룰 정도로 경험이 많은 편은 아니어서 쫄지뭬!! 할 수 있어! 마인드를 가지는 것
그리고 깃허브를 많이 활용해서 협업에 익숙해지는 것, 마지막으로 디자인에 집착해서 기능구현을 간과하지 않는 것이었다.
처음 미니프로젝트를 할 때 갑자기 디자인에 힘쏟게 되어서 CRUD를 다 만들지 못한게 아쉬워서 초반에 강력하게 주장했다..ㅋㅋ 디자인 집착 금지해! 우린 디자이너가 아니고 개발자라는 걸 명심해!!
와이어프레임
 |  |
|---|
포인트컬러는 빨강으로 가려다가 너도나도 다 넷플릭스 ui를 볼 것 같아서 우리는 쿠팡플레이..ㅋㅋ 로 파란색을 택했다.
📍 03. 개별 기능구현하기
현재 기성님 코드가 어떻게 짜여져있는지 전체적으로 코드리뷰를 싹 들은 후 각자 맡은 부분을 구현하기 시작했다.
우선 나는 내 개인과제에 있던 header 부분과 upcoming movie 부분을 잘~ 옮겨와야했다.
말은 되게 간단했는데 1) 기존 코드 컨벤션을 유지하면서 내가 짠 코드도 잘 불러와야했다.
또 2) html에 하드코딩하는 방식이 아닌, 모듈화 시키고 js에서 동적으로 렌더링 되게 하는게 미션이었다.
여기서 자꾸 appendChild 속성이 뜻대로 안 돼서 정말 애먹었는데..! 코드 위치도 수정하고 렌더링 되는 순서를 신경써서 함수를 적어줘서 성공적으로 붙여넣을 수 있었다.
이때 뿐만 아니고 다른 분들 코딩을 공부하면서 따로 만들어봤을 때도 똑같이 appendChild null 에러가 발생했는데 아무리 구글링을 해도 이해가 되지 않아서 튜터님께 설명을 들은 후 velog에 별도로 기록해두었다.
나중에 다시 볼 때 꼭 같이 확실히 이해하고 가라고 미래의 나를 위해ㅋㅋ 링크 남겨두기🤪
검색 이벤트 수정
searchInput.addEventListener("input", async (e) => {
let keyUpValues = e.target.value;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(async () => {
const language = getLanguage();
let searchData;
if (keyUpValues === "") {
searchData = await getTopRatedMoviesList(language, 1);
} else {
searchData = await getSearchData(language, keyUpValues, 1);
}
const cardList = document.querySelector("#card-list");
cardList.innerHTML = makeCards(searchData);
updatePagination(searchData.total_pages, 1);
addPaginationEventListeners(searchData.total_pages);
if (keyUpValues) {
upcomeContainer.style.display = "none";
} else {
upcomeContainer.style.display = "flex";
}
}, 200);
});다른 코드들은 비슷했는데 검색창 부분이 조금 더 추가되었다.
기존 코드에서는 사용자가 타이핑 하는 순간 순간마다 이벤트를 탐색하는 코드였는데 이렇게 하면 이벤트 발생 빈도가 높아질 때 과부하가 올 수 있다. 그래서 튜터님이 "디바운싱" 을 넣으면 좋을 것 같다고 하셔서 막판에 추가했다.
그리고 언어변경 기능을 추가하면서 한국어, 영어 버전도 모두 검색 되도록 수정작업이 들어갔다.
상세페이지에서는 사라지게!
const deleteSearchForm = () => {
const searchForm = document.getElementById("search-form");
if (window.location.href.split("/").includes("detail")) {
searchForm.style.display = "none";
} else {
searchForm.style.display = "flex";
}
};상세페이지로 이동했을 때는 검색기능을 없애기로 해서 window.location.href 페이지 이동 기능을 사용해 url에 "detail"가 있다면 none 처리 해주었다.
댓글 삭제버튼 구현하기
미니프로젝트때 삭제버튼 구현을 하긴 했었는데 그때는 거의 구경 👀 입코딩이라서 직접 해보고 싶었다.
localStorage에 저장된 데이터를 이용해서 removeItem을 해줄 생각이었다.
저 Key 값을 removeItem에 넣어주었더니 문제는 댓글이 여러개이든 1개이든 상관없이 '전부' 삭제해버렸다ㅠ
삭제버튼을 누른 그 하나만! 삭제해야했고 처음에는 e.target.value 를 사용해보면 되지 않을까? 했다.
그러다 저번에도 각 댓글마다 고유 id를 부여해서 지워주는 방식을 썼던 것 같아서 이번에도 댓글마다 id값을 부여해주었다.
const loadComments = () => {
const comments = JSON.parse(localStorage.getItem(`comments_${movieId}`)) || [];
... 아래 코드 생략댓글을 쓰면 로컬에 저장하는 키값에 movieId 라는 고유 id값을 넣어주고
commentDeleteBtn.addEventListener("click", (event) => {
const check = prompt("비밀 번호를 입력해주세요.");
if (check === comment.password) {
const filteredComments = comments.filter((_, i) => i !== index);
localStorage.setItem(`comments_${movieId}`, JSON.stringify(filteredComments));
loadComments();
} else {
alert("비밀번호가 틀렸습니다.");
}
});클릭했을 때 삭제하는 이벤트를 작성하면서 comments 뿐만 아니라 위에서 설정한 id 값도 같이 가져오도록 수정했다.
json으로 파싱하느라 이랬다가 저랬다가 하는게 처음에는 복잡하게 느껴졌는데 지금 보니 조금은 편하게 읽을 수 있게 된 것 같다.
📍 git으로 협업하기 Pull Request
29번이나 pr을 한 우리 조...ㅋㅋㅋ 많은걸까 적은걸까
이것도 짧게 기록하긴 했어서 느낀점 위주로 회고해보면
브랜치를 분류하고 본격적인 팀프로젝트로 github를 사용한건 처음이었는데 생각만큼 충돌이 많이 발생하지 않았다.
github는 로컬과 싱크를 맞추는 것이 충돌을 발생시키지 않는 포인트인 것 같아서 어떤 기능 구현이나 수정이 끝나면 내 브랜치에 커밋을 하고 pr하기 전 각자 충돌이 발생할 지점은 없을지 한번 더 생각해보고 신중한 pr을 한 것 같다ㅋㅋㅋㅋ
pull 잘 해오고 충돌난 부분은 비교하면서 차분히 지워나가면 큰 문제는 없는 것 같다.
다음 팀플 때도 요정도만 사용할 수 있었으면 좋겠다ㅋㅋㅋㅋ
📍 팀프로젝트에서 배운 부분
아무래도 module화 시켜서 조각낸 js 파일을 불러오는 것..!이 아닐까 싶다.
그리고 script 파일의 위치도 외부에서 가져오냐/ 내가 작업한거냐에 따라 또 다르다는 것!
사실 이 방식을 완벽하게 체득하지 못해서..ㅎ 혼자 작업을 하거나 다음 팀플에서 나서서 정리할 수 있을 정도는 아니지만 이런식으로 작업할 수 있구나 하는 큰 공부가 되었다.
코딩에 답은 없고 지금 우리의 코드도 보완할 부분이 많지만 지금 내 수준에서는 배워먹어야할 부분이 상당해서 완성된 김에 주말에 하나하나 코드리뷰해서 복습할 예정이다.
📍 팀프로젝트를 마치며..!
굵직한 기능구현보다는 잔잔바리 작업을 한 것 같고..
주도적으로 만들면서 재미를 느꼈다기 보다는 배우고 따라가기 급급했던 프로젝트였다. 스트레스는 왜이리 받았는지 꿈에서도 코딩하는 일주일을 보냈다.😴
구현해야 하는게 어디서부터 시작해야할지 감이 안 오거나 이 api를 가지고 어떻게 써먹어야할지 모를 때 정말 미쳐버리는 것 같았고 자괴감도 엄청 심하게 들었다. 세상에 천재는 많고 여전히 나는 트이지 않았다는 걸 몸으로 직격탄을 맞아버려서 많이 많이 공부가 필요하고 발전해야겠다 생각이 들었다.
당장 내일부터 리액트가 시작되지만 주말에 완성된 코드들 보고 복습하고 여유가 된다면 기능구현을 따라해보려고한다..!
이번에는 많이 배울 수 있었으니 언젠가 웃으면서 개발을 즐기는 사람이 되어있기를!🙏
