웹 종합 페이지

프로젝트를 하게 된 계기

항해99에서 하는 첫 프로젝트로 토이 프로젝트를 진행하게 되었다

저번 첫 연습 프로젝트의 경험을 통해 배운점을 유의하며 진행하기로 하였다

우리 조는 프론트로만 이루어진 조였는데 저번에 연습 프로젝트를 할때는 프론트 보다는 백에 치중된 경향이 있어

이번에 프로젝트를 만들때는 프론트만으로만 만들어 보기로 하였다

 

프로젝트 개요

자바스크립트와 CSS , HTML 의 구조를 이해하고

자바스크립트 알고리즘을 더욱 이해하기 위해 게임을 1인 1게임 제작하여 페이지 배포

 

프로젝트 일정

일정	내용
6.5	프로젝트 기획
6.6	도메인 설계, 개발환경 세팅
6.6 ~ 6.8	개발 시작 및 각 작업 branch → develop branch로 merge
6.8 ~ 6.9	발표 및 코드 리뷰

 

프로젝트 기획

게임페이지

• 게임1 민승→ 초성 맞추기(훈민정음)
  • 입력 키워드는 ㄱ-ㅎ 랜덤으로해서 출제
  • 정답은 API나 정적으로 , 데이터 베이스나 등으로 정답을 모아둠
  • 틀릴때까지 계속 순서가 돌아감 정확히는 목숨이 없어질때까지
• 게임2 은석→ 카드뒤집기 게임
  
  • 카드 개수 지정 12장 , 16장 20장
  • 그림전체 보여주기 버튼 (옵션)
  • 첫째 사람부터 맞추기
  • 짝을 맞추지 못한 마지막사람이 탈락!
  • 다시하기버튼
• 게임3 소현→ 라이어 게임
  
  • 분류 적어도 3개 예) 음식, 운동 , 인물 , 동물 -인원수 선택
  • 버튼클릭하면 라이어 , 단어가 보이게 → 다음으로 넘기기전에 버튼클릭해서 까만화면
  • 1바퀴가 지났습니다 , 2바퀴가 지났습니다. 라이어를 선택하시겠습니까
  • 라이어 찾음버튼 → 분류페이지
• 게임4 민지→ 베스킨라빈스 31 
  • 베스킨라빈스 31 = 사용자지정
  • 3개만 입력할수있게 < > 최대 3번까지
  • 전체숫자 화면에 크게 띄워지게
  • 조건
    • 전에사람이랑 같은 숫자는 안됨 → 전에사람이랑 같은 숫자를 할시 탈락
    • 31 = 사용자지정 이 처음 나오는 사람은 탈락
    • 버튼 클릭횟수 다음사람한테 안보여주게

 

개발환경 세팅

https://github.com/sixteamha

sixteamha

 

• 민승님이 프로젝트를 만들고
• 6toy프로젝트를 만든후 각 브렌치에서 작업
• 각 작업 완료후 Develop 브런치에 merge
• Develop 브런치에서 Main으로 merge후 배포

 

다이어그램

 

시연

https://www.youtube.com/watch?v=B9_XwX1CBZs

 

후기

트러블 슈팅 

쿼리스트링사용 - template 재활용을 위해 쿼리스트링을 사용하였는데 쿼리스트링을 이용해 보는것이 처음이라 너무 해맸다. 구글검색으로 쿼리스트링을에 대해 공부하면서 플젝을 제작하였다

 

로컬스토리지 사용 - 백엔드 사용을 배제하기 위해 로컬스토리를 적극적으로 사용하였는데 로컬스토리지에서 값을 가져올때 string형식으로 되어있다는 사실을 자꾸 잊어먹어 값을 사용하는데 애를 먹었다 콘솔로 type을 계속 찍어보며 로컬스토리지 사용 개념을 이해하니 잘 사용할 수 있게 되었다

 

수많은 templates - 라이어게임을 만들려다보니 많은 페이지를 많들어야 해서 최대한 재활용 하는 방법을 찾고 싶었다. 팀원들과 대화를 통해 재활용하는 여러 방법이 있다는 것을 알게 되었고 그 중 쿼리스트링을 이용하여 중복된 페이지나 재활용이 가능한 페이지들을 재활용 하여 template의 개수를 줄였다

 

아쉬웠던점과 느낀점

게임을 완성하고 나서 보니 template의 개수도 더 재활용 가능할 것 같고 코드도 더 깔끔하게 만들 수 있었는데 시간이 부족해서 아쉽다 template 안에 내용도 복잡하고 정리가 안되어 있어서 부족한점이 너무 많았다 팀원분들과 코드리뷰를 하며 defer 속성의 사용과 fetch할때 await을 잘 사용하는 것 함수용 컴포넌트 사용하기 등의 조언을 받았는데 시간이 더 있다면 이러한 점을 추가하여 더 나은 프로젝트를 만들고 싶다

부족한 점이 너무너무 많지만  내가 오롯이 도움을 받지 않고 코드를 짜 프로젝트를 완성하니 힘들었지만 너무 만족스럽다

개발하는 것이 너무 재밌어서 얼른 더 많이 공부하고 개발하여 빨리 제대로 된 개발자가 되고 싶다