✔ 매일 오전 9:00부터 15분씩 회의 진행 후 역할 분담
💻 DAY 1 : 초기 시작화면, 질문 화면, 결과창 화면 레이아웃 작성, GitHub repository 생성 및 Commit 메세지 규칙 설정
| main | 버전별 브랜치 |
|---|---|
| dev | 개발용 브랜치 |
| 개발자별 브랜치 | 개발자별 담당기능 브랜치 |
💻 DAY 2 : 시작화면의 마우스 이벤트, 질문 클릭 시 클릭 이벤트와 점수계산 및 결과값 산출 JS 개발, GitHub branch 생성하여 작업 효율 극대화
1. 초기화면
✔ 화면에 공백이 많아 지루함을 달랠 수 있도록 커서를 따라다니는 이벤트를 생성하였다.
✔ JavaScript를 기반으로 한 라이브러리인 p5.js 오픈 소스를 활용하여 마우스에 storing input 이벤트 적용
2. 질문화면
✔ 질문과 대답의 문구는 JS에서에서의 배열 변수를 통해 결과 클릭(선택) 시마다 받아오도록 하였으며, 질문이 종료되면 결과화면으로 이동하도록 설정하였다.
3. 결과창
✔ 결과창에서는 선택한 답에 따라 결과가 출력되도록 하였으며, 공유를 위한 링크복사기능과 다시 테스트를 하고싶은 사람을 위해 다시하기 기능을 넣었다.
✔ 캔버스 크기를 화면 전체에 적용 windowWidth와 windowHeight 변수를 사용하여 캔버스 크기 지정
✔ 화면 맨 뒤에 이벤트 배치 CSS z-index 속성을 사용하여 캔버스의 쌓이는 순서 변경함 (z-index 속성 값이 작을수록 쌓이는 순서가 뒤로 배치)
✔ 깃허브를 통한 웹페이지 생성 HTML과 연결된 참조 연결 상대경로 지정을 형식에 맞추어 지정
✔ 페이지 크기에 따른 내부 아이템 크기조절
flexbox 사용으로 뷰포트나 동적레이아웃에 적용되도록 코딩
✔ 김성훈: 프로젝트를 통해 배운 내용을 잘 복습할 수 있었고, 브랜치 전략을 도입해서 협업 방식에 대해 많이 배울 수 있었습니다.
✔ 이준희 : 평상시 자주 하던 테스트를 직접 구현하게되어 감회가 새롭고 즐거웠다. 깃에 대해 많은것을 깨닫고 HTML,CSS,JS 학습한것을 사용하며 더 알아가게되었던 귀중한 시간이었습니다.
✔ 김민수 : 팀원들에게 기존에 제가 깃을 이해한대로 적용하자했는데 알고보니 가짜뉴스여서 레파지토리를 새로 만들기도 했습니다. 이런 시행착오 덕분에 더 이해를 할 수 있게 되었습니다.
✔ 조윤나 : 수업에서 배운 내용을 직접 코드로 구현해보면서 한번 더 리뷰해볼 수 있었고, 개인 깃허브 브랜치에 소스 코드 업데이트 작업을 통한 효율적인 협업 방식을 배울 수 있는 좋은 기회였습니다.