[TIL] Day 14 개인과제의 연장선, 팀과제
2023.10.24 화
팀 과제가 시작되었다.
오전 발제를 통해서 무엇을 만들어야할 지 듣게 되었다.
이번 프로젝트는 개인 과제의 연장선 느낌이다.
만들었던 '영화 검색 사이트'를 활용해서 추가 기능을 만드는 것이다.
영화 카드를 선택하면 해당 영화의 상세페이지로 이동하고, 리뷰를 작성할 수 있는 기능을 구현해야 한다.
Today
- 팀 과제 브리핑
- 보충반 OT
- 팀 노션 작성 및 팀장 직책
- 개인과제 해설영상 및 리팩토링
- git 특강
팀 과제 브리핑
발제를 마치고 과제를 시작하기 앞서 브리핑을 진행했다.
전체적인 팀의 목표를 세우고, 일정을 확인하기 위해서 진행되었다.
팀장으로서 프로젝트의 전체적인 흐름을 파악하기 위해서 해당 브리핑은 매우 중요하다고 생각했다.
목표
- 팀과제 요구하는 필수 기능을 우선적으로 구현(공부하기 위한 시간 확보)
- 팀과제의 의미는 못해본 기능을 하나씩 연습하며 구현해보고, 팀원의 코드를 보며 같이 연습
- 작은 기능부터 하나씩 구현해나가기. 완료된 코드 공유하고, 다음 기능 또 구현하기
- 깃 활용 협업, 강의 우선, 멘탈관리
우리 팀의 목표는 JS 기초를 확립하자! 이다.
발제에서도 그랬듯이 다음주 리액트에 본격적으로 들어가기 위해서는 Javascript의 기초가 무엇보다 중요하다.
따라서 이번 프로젝트의 주된 목적은 기초를 탄탄하게 만드는 것이고, 이를 확인하는 요소로 팀 과제를 활용할 것이다.
가이드 라인으로 제공된 필수 구현 기능을 만들고, 작성된 코드를 꼼꼼하게 분석하며 깊게 공부해 볼 것이다.
일정
다음주 월요일 팀과제 제출까지 이뤄지는 일정들을 정리해서 공유했다.
팀 일정의 흐름과 들어야하는 강의들의 시간을 체크해볼 수 있었다.
이를 통해서 어떤 페이스로 과제를 준비해야할 지 시간을 분배할 수 있었다.
▶ 24 화요일 팀 과제 시작
- 기능 구현할 방법 구상하기
- JS 개인과제 해설영상 보기
- git 특강(19시)
▶ 25 수요일
- 협업세팅
- git 세팅 및 브랜치 세팅
- js 모듈 세팅
- 구현할 기능 정하기
- 와이어프레임 구축
- 보충반 수업1 (19시)
▶ 26 목요일
▶ 27 금요일
- 보충반 수업2 (11시)
- 단체 디버깅 및 보완 사항 체크
- 좋은 개발자의 비밀 특강 (19시)
▶ 30 월요일 팀 과제 제출
- 최종 디버깅 및 코드 merge
- 제출 (~13시)
- KPT 회고 및 블로그 작성, 다면평가
- 팀과제 해설 (19시)
- 리액트 공부 들어갈 마음의 준비
필수 기능
- TMDB, 영화진흥위원회 API 중 하나 사용
- 상세페이지 이동(메인 페이지(홈) 이동 UI)
- 상세페이지 내에서 리뷰 작성 / 작성자, 리뷰, 확인비밀번호 입력 / localStorage 활용
- github PR(=Pull Request) 사용한 협업
- UX를 고려한 validation check / 영화 검색 시, 댓글 작성 시, 추가 기능 구현 시
- 기재된 Javascript 문법 요소를 이용하여 구현
보충반 OT
이번주부터 보충반, 심화반 실시간 강의가 시작된다.
보충반의 경우 기초를 다지고, 심화반의 경우 기초를 활용한 실전에 초점이 맞춰져있다.
내가 무엇을 알고, 무엇을 모르는지 판단하고 학습하기 위해서 둘 다 들어볼 예정이다.
팀 노션 작성 및 팀장 직책
====수정 필요====
-
팀과제에 필요한 정보 수집
-영화진흥위원회 API 사용법
-git 사용법
-자바스크립트 복습 가이드
-팀과제 발제 내용
++
팀장이 되니까 신경써야 할 부분이 훨씬 많다.
그렇지만 해당 부분들을 어떻게 브리핑할 지 찾아보고 생각하다보니까 거 많은 것을 배울 수 있었다.
특히 전체적인 프로젝트의 과정들을 머릿속으로 그려보게 되고, 큰 윤곽이 잡힌다.
이는 팀원이었을 때와는 다른 관점에서 바라볼 수 있었다.
이러한 점에서 팀원으로 프로젝트에 참여했을 때의 경험 또한 쌓을 수 있어서 좋았다.
모든 팀원들의 파일을 병합하고 관리하며 최종적으로 배포까지 해야하기 때문에 더 다양한 업무 형태를 직접 해보며 익힐 수 있다.
개인 과제 해설 영상 및 리팩토링
리팩토링할 내용]
focus() 매서드 활용 / searchUnput.focus();
ul, li 태그 활용
배운 내용]
map 매서드 : 배열을 돌며 함수를 적용시켜 나온 값으로 새로운 배열을 만든다
배열.map --> 결과는 배열로 나온다.
elements.join() --> 배열을 쉼표를 넣어 구분 / "Fire,Air,Wter"
elements.join("") --> 배열을 문자열로 만든다 / "FireAirWter"
elements.join("-") --> 배열을 해당 문자를 넣어 구분 / "Fire-Air-Wter"
이벤트 위임 : 하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 해준다.
이벤트핸들러
ex) addEventListner
웹에서 이벤트 전파 방법에 따라서 작동하기 때문에. 하위요소부터 전역객체(window)까지 전파 흐름
1. Capturing Phase -> 2. Target Phase -> 3. Bubbling Phase
event.eventPhase를 통해서 로그확인 가능
기본적으로 2번 이벤트를 감지해서 3번이 작동. 1번을 작동시키려면 명령필요
-event.target : 이벤트 발생한 요소
-event.currentTarget : 이벤트 핸들러가 등록되어 있는 요소
!! 이벤트 위임은 "이벤트 버블링"이라는 특징 때문에 가능.
이벤트 버블링 : 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상. !!
async 함수는 항상 Promise를 반환한다.
await 뒤에 있는 건 항상 Promise다.
await Promise는 Promise Result를 반환하며 약속이행이 될 때까지 기다린다.
다음 로직으로 흐르는 것을 방지하고 해당 로직에서 결과값이 나올 때까지 순서를 유지한다
찾아야할 내용]
다른 페이지로 이동 방법 (hidden / display none을 붙이나? 새로운 링크를 받나?)
리뷰쓰는 방법 - 노마드코더에서 활용한 localStorage 사용법
개인과제 리팩토링
새로운 깃허브 repositories 생성
협업세팅
구현해야 할 기능 구상 및 구현
reset.css / 파일 다운로드 받기
.prettierrc / Code formatter(코드 포맷터) / 확장프로그램에 검색 : Prettier - Code formatter
git 특강
강의 내용
사진 첨부
하루를 마치며
~
오늘의 한 줄
~