깃을 이용해보기 위한 미니프로젝트 [공룡 게임 사이트]

                                              ☄️

                   🦖

         🦖                          🦖             

    🦖          🌋                     🦖                🌋      🦖

---

프로젝트 마감 후 회고

 

깃을 이용해보기위해 조를 짜 미니프로젝트를 진행해보았다.

미니프로젝트였지만 스프링을 다 이해하고 돌입하게 아니어서 파일구조부터 컨트롤러 구성까지 시행착오가 많았고, 시행착오가 많았던 만큼 스프링에 대해 공부도 많이 됐던 프로젝트다. 사실 여전히 깃은 잘 모르겠지만.. 모르는 만큼 본격적인 프로젝트에 들어가기 전 공부를 해야겠다고 다짐한다! ㅠ

또, 앞으로는 얼마 남지 않은 기간이지만 날마다 그날 작성한 코드들을 압축해 관리하는 습관을 들여야할것 같다. 

그렇게 해놓지 않으니 스프링 JDBC 방식이 뭐였는지 mybatis가 뭐였는지 구별이 안된다. 둘을 제대로 알고 넘어간게 아니라 하날 공부하는 와중에 다른 걸 또 배우니 머리 속에서 정리가 안되는 거다. 그래도 시험을 보며 잘 정리할 기회를 얻어서 다행.. 블로그에도 두 방식을 나눠 정리를 잘 해둬야겠다. 

 

이런저런 팀원들의 사정으로 내가 거의 다 해냈던 프로젝트인데 그래서인지 애정이 정말 크다. 

내가 만든 프로젝트라고 자신있게 말할 수 있을 것 같다. 아주 작은 규모라도 끝을 냈다는 것에 의의를 두고 자신감을 가져야겠다. 회고는 이쯤에서 끝내고 3~4일 가량이었지만 고생했던 프로젝트를 끝냄 기념으로 기록해보려 한다. 

---

---

 

프로젝트 주제 : 공룡게임을 할 수 있는 사이트

 

간단한 조작을 통해 누구나 공룡게임을 즐길 수 있고, 회원가입을 하면 본인의 랭킹을 확인할 수 있습니다.

 

기간 ) 0801 ~ 0804

팀원 ) 강유나, ____, ____

 

역할 )

강유나 : 컨트롤러 구현, 회원가입 DAO, VO, Service 기능 구현, jsp파일 css, html, javascript 공룡 게임 구현, 파일 정의서, 화면 정의서 작성

____ : jsp파일 css, html 디자인, 공룡 게임 수정, 팀원에게 깃 사용법 전파

____  : 랭킹 페이지 구현

 

 

☄️ 구현할 페이지 : 게임을 할 수 있는 메인화면, 로그인, 회원가입, 랭킹 확인

 

패키지/ 자바 파일 정의서

shoppingmall 폴더에서 작업 ) -> 초기에는 shoppingmall 이름으로 프로젝트를 모든 조가 일괄적으로 만들었기 때문에 이름이 이렇다.

 

src > main > wabapp 에는 화면을 띄울 jsp 파일이 들어갑니다.

index.jsp → 메인 화면으로 바로 공룡게임을 할 수 있는 화면이 보여집니다.

login.jsp → 로그인 화면입니다.

memberjoin.jsp → 회원가입 화면입니다.

ranking.jsp → 회원들의 게임 점수를 기반으로 랭킹이 매겨집니다.

 

 

자바 파일 및 JSP 파일 정의서 수정

각 기능은 동일하지만 보다 정리된 파일 구조입니다.

-> 컨트롤러를 이해하고 훨씬 더 간결해진 파일 구조다. 

 

 

sql deverloper 에서 작업 )

kit3 계정을 만들어 회원 정보를 담을 테이블과 회원의 점수를 담을 테이블 생성

reate table member(
    id varchar2(15) primary key,
    pass varchar2(20) not null,
    name varchar2(200) not null
    );

create table board(   
    id varchar2(200) primary key,
    score number not null,
    content varchar2(200),
    num number
    );

alter table board 
    add constraint board_mem_fk foreign key (id)
    references member (id);
    
create sequence seq_board_num2
    increment by 1
    start with 1
    minvalue 1;
    
select id,score,content
from (select * from board order by score desc)
where rownum <=20 ;

 

 

화면정의서

 

메인 화면 ( index.jsp )

 

로그인 화면 ( login.jsp )

 

회원가입 화면 ( memberJoin.jsp )

 

랭킹 화면 ( ranking.jsp )

 

 

 

☄️ 실제 구현 화면

 

함께 공유해요 

-> 프로젝트를 하며 새롭게 알게됐던 부분, 함께 나누고 싶은 부분을 '함께 공유해요'라는 이름으로 발표해보았다.

 

• 스프링에서 정적자원 삽입하기

스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된다. 이 때 404에러가 발생하게 된다.

따라서 CSS, JavaScript, Image 같은 정적 자원들에 대해 URL을 따로 주어야 하는데 이를 지원해주는 녀석이 mvc:resources이다. 이 태그를 DispatcherServlet에 등록해줘야 사용할 수 있다.

 

어떻게 game jsp에 자바스크립트를 넣었는지에 대한 자세한 설명 참조

스프링(Spring)에서 자바스크립트(JavaScript) 사용 방법

 

 

• 공룡게임 참고 - 코딩애플 유튜브영상

 

 

• 공룡게임 수정

 

로그인을 실행하게 될 경우, 바로 게임 화면으로 이동하면서 게임이 시작되는 부분이 있었다. 이것은 유저의 순발력을 요구하는 플레이가 될 수 있지만, 실제로 게임을 즐기는 유저 입장에서는 굉장히 불쾌할 수 있는 요소중 하나이다. 적어도 게임에 입장하게 되면, 바로 조작할 수 있게 진행해주었어야했었다고 생각했다.

 

참고 문서 :

tabindex=1, tabindex=0, tabindex=-1

 

HTML의 tabindex 속성과 키보드 포커스

 

 

• 이 속성은 문서의 탭 순서 안에서 현재 요소의 순번을 결정한다. 값은 0부터 32767 사이의 숫자여야 한다. 브라우저는 값 앞에 0이 붙어있으면 무시해야 한다.

canvas.tabIndex = 1;
canvas.style.outline = "none"; // 포커스 시 테두리 없애기

 

canvas 에 tabIndex = 1; 을 설정함으로서 로그인에 성공 후, 인게임에 진입하게 되면 가장 먼저 선택을 받을 수 있다.

하지만 이렇게 된다 해도 바로 게임에 진입할 수 있는 상태가 아니기 때문에 focus를 설정해 페이지 진입시, 클릭이 되어있는 상태로 만들어줘야한다. 

// 문서가 준비된 후 캔버스에 포커스 추가
window.onload = () => {
	canvas.focus();
};

window.onload 로 dom이 다 불러와진 경우 자동으로 canvas에 focus를 실행하도록 설정했다.