[세번째 프로젝트/팀] 최고 평점 영화 콜렉션 회고록

작업 기간: 6/5, 6/7 ~ 6/9 13:00(3.5일)

팀원 중 한명의 프로젝트 정해서, 그걸 바탕으로 서브페이지 상세정보 view 및 댓글기능 추가하기.

다른 팀원의 프로젝트 베이스로 사용!

 

1. 개인플젝때 썼던 S.A 문서 재탕

https://www.notion.so/S-A-a419de34e8a449a1955498a1f026ecab

 

2. 결과물

https://github.com/AJ3504/We_are_confused

GitHub - AJ3504/We_are_confused: 영화 팀과제

 

 

 

 

---

3. 이번 프로젝트에서 한 경험들

사실 내가 한 작업들은 하루만에 끝나서 이번 프로젝트는 매우 널널하게 보냈다..

 

3-1. S.A. 문서 생성 및 개발 일정, 회의 내용 기록

 

3-2. 개인프로젝트에서 만들었던 다크모드, 최근검색어 기능 붙임

 

3-3. URL Parameter(쿼리스트링) 값을 이용하여 링크타고 들어 온 해당 movieId에 접근

const urlParams = new URL(location.href).searchParams;
const movieId = urlParams.get('movieId');
console.log(movieId)

 

3-4. movieId를 이용하여 TMDB의 상세정보 api를 가져 옴

https://developer.themoviedb.org/reference/movie-details

Details

 

3-5. 서브p에서 댓글 수정 및 삭제 form을 제출하면서 새로고침될 때, 쿼리스트링 movieId값이 날아가는 이슈

action 속성에서 쿼리스트링을 붙여줘도 제출 시 날아가버림.

form을 action="경로"와 get(default)로 설정해놓고,

숨김처리한 input에 name과 movieId값을 부여해서 쿼리스트링이 다시 붙을 수 있게 함

 

3-6. 중간에 깃헙 master브랜치로 다른 조원들과 합치는 과정에서 

깃 경로를 잘못 설정하셨는지 중첩된? 폴더로 올리신 분이 계셔서 

그 위로 푸쉬한 조원분과 상의하면서 고쳐드림.. 다행히 수정된게 그리 많지 않아서 수월했다

 

3-7. 다른 팀분께서 알려주신 github issues 기능!

누가 뭘 할건지 기록이 가능하고,

#넘버를 복사해서 브랜치명 끝에 -#넘버 로 붙이면

해당 #넘버를 클릭해서 추적가능하다고 함.

머지 완료되면 클로즈 이슈 버튼 클릭.

 

 

 

---

4. 리뷰 체크리스트 메모

다음 프로젝트때 이것도 S.A.에 추가해서 다 같이 체크하면서 컨벤션으로 써도 괜찮겠다.

 

 

STEP01. 요구사항

• [  ] github PR(=Pull Request) 사용한 협업
• [  ] UX를 고려한 validation check
• [  ] flex, grid, 반응형 UI(선택)

 

 

STEP02. 협업(git, github)

1. 프로젝트 생성
2. 코드 작성 및 저장
3. (팀장) github repository 생성
4. (팀원) git clone하여 코드 동기화
5. 각자 개발
6. add / commit / push
7. merge

 

 

STEP03. HTML(UI 구성) 리뷰

• [  ] semantic한 마크업 구조를 가지고 있는가
• [  ] div, span으로 전부 되어있지는 않은가
• [  ] 제출 기능을 위해 form 태그(enter, click 모두 가능)를 활용했는가
• [  ] script 태그의 위치(HTML 파싱 타이밍 고려) / defer

 

 

STEP04. Javascript

• [  ] 변수명(카멜케이스, 스네이크케이스, 파스칼케이스, 케밥케이스)
• [  ] then/catch vs async/await
• [  ] 구조분해할당
• [  ] 배열메서드(forEach, map, filter, reduce) 사용
• [  ] 태그에 직접 eventHandler를 할당하지 않고, addEventListener과 같은 DOM 접근으로 처리하였는가
• [  ] 올바른 DOM selector를 사용하였는가(class, id등 활용)
• [  ] 모듈화를 활용하였는가(관심사의 분리) + import / export
• [  ] 코드의 가독성이 확보되었는가? 한 눈에 파악이 가능한가

 

 

STEP05. CSS

• [  ] prettierrc
• [  ] 크로스 브라우징 이슈를 해결하기 위한 reset.css

 

 

STEP06. SEO & Semantic한 구조 설계

• [  ] SEO : 제목태그, 메타 태그, URL 구성 등을 효과적으로 활용하였는가
• [  ] Semantic한 HTML요소 사용: <header>, <nav>, <article>, <section>, <footer>와 같은 의미론적 요소를 활용 및 접근성 있는 마크업을 하였는가

 

 

STEP07. 기타(구조, UX 등 기타사항) -- 프로젝트 시 수정 필요

• [  ] 사용자 편의성을 위해, keyup에도 검색 기능을 주입하였는가
• [  ] 대/소문자 구분 없이 조회되게 하였는가
• [  ] localStorage를 목적(데이터베이스 대용)에 맞게 잘 이용하였는가
• [  ] README 파일, API 문서 등 협업과 유지보수에 용이하도록 문서화를 하였는가
• [  ] 오류처리가 적절하게 되어있는가?