[TIL-30/230921][넷마블문화재단] UI 수정 및 페이지 에러 해결

프로젝트 완성

드디어 프로젝트를 마무리했다.

JSP와 Servlet은 평소에 써보지 않은 기술이라 유튜브로 벼락치기 공부하고 진행한 프로젝트였기에 아쉬운 부분이 많은 프로젝트였다.

프로젝트는 프론트 1명의 인원과 함께 진행하였고, 아래와 같이 만들었다.

 

기능적으로는 회원가입, 로그인 ,CRUD 게시판을 구현하였는데, 아무래도 처음으로 만들다보니 공부하고 구현하고 하는데 많은 시간이 들었다. 

 

공부한 자료는 뉴렉처님의 JSP, Servlet 강의와 나동빈님의 JSP 강의에서 배운 내용을 미리 만들어둔 html + css + javascript 화면을 업데이트하여 jsp로 만들어 동적 웹 페이지를 구현했다.

 

JSP, Servlet이 어떤 기술인지 이번 기회를 통해 간단하게 맛을 봤기 때문에 앞으로 할 프로젝트는 내가 실제로 취업을 한다면 사용하고 싶은 기술 스택인 Spring을 이용하여 MVC 패턴으로 제대로 구현해보고 싶다. 오늘은 프로젝트를 마무리하며 깃허브 커밋과 관련 내용을 정리하였다.

🚐 MINI PROJECT 🚐

🏷프로젝트명: 넷마블 문화재단

화면 구현 + 서버 구현을 통한 웹페이지 클론 코딩

🖥️ 프로젝트 소개

넷마블 문화재단을 참고하여 만든 웹사이트입니다.

🗓️ 개발 기간

• Frontend - 23.08.02(수) ~ 23.08.08(화) (7일)
• Backend - 23.09.13(수) ~ 23.09.21(목) (9일)

🍳 사용 기술

• Frontend - HTML + CSS + JavaScript
• Backend - Java(JSP + Servlet)
• Server - Tomcat
• Database - MySQL

📌 주요 기능

• 회원가입(User)
  • 회원 전용 기능(게시판 이용)
  • 로그인
  • 로그아웃
• 소셜 미디어(자유게시판)(Board)
  • 게시글
    • 쓰기
    • 읽기
    • 수정
    • 삭제
  • 댓글(Comment)
    • 읽기
    • 수정
    • 삭제
  • 추천(Like)

ERD Diagram

📺 화면 소개

메인화면

회원가입

로그인

게시판

글쓰기

글보기

공지사항

글보기

SQL Script

create table USER
(
    userID       varchar(20) not null
        primary key,
    userPassword varchar(20) not null,
    userName     varchar(20) null,
    userGender   varchar(20) null,
    userEmail    varchar(50) null
);

create table BBS
(
    bbsID        int           not null
        primary key,
    bbsTitle     varchar(20)   null,
    userID       varchar(20)   not null,
    bbsDate      datetime      null,
    bbsContent   varchar(2048) null,
    bbsAvailable int           null,
    constraint BBS_USER_userID_fk
        foreign key (userID) references USER (userID)
);

create table BOARD
(
    boardID        int           not null
        primary key,
    boardTitle     varchar(50)   null,
    userID         varchar(20)   not null,
    boardDate      datetime      null,
    boardContent   varchar(2048) null,
    boardAvailable int           null,
    boardCount     int           null,
    likeCount      int           null,
    constraint BOARD_USER_userID_fk
        foreign key (userID) references USER (userID)
);
create table COMMENT
(
    commentContent   varchar(300) null,
    commentID        int          not null
        primary key,
    userID           varchar(20)  not null,
    commentAvailable int          null,
    commentDate      datetime     null,
    boardID          int          null,
    constraint COMMENT_USER_userID_fk
        foreign key (userID) references USER (userID),
    constraint comment_ibfk_1
        foreign key (boardID) references BOARD (boardID)
);

create index boardID
    on COMMENT (boardID);

create table LIKEY
(
    userID  varchar(20) not null,
    boardID int         not null,
    constraint LIKEY_USER_userID_fk
        foreign key (userID) references USER (userID),
    constraint likey_ibfk_1
        foreign key (boardID) references BOARD (boardID)
);

create index boardID
    on LIKEY (boardID);

🏛 커밋 컨벤션

🧬 타입

"태그: 제목"의 형태, : 뒤에만 space(공백)가 있음에 유의할 것

태그 이름	설명
Feat	새로운 기능을 추가할 경우
Fix	버그를 고친 경우
Design	CSS 등 사용자 UI 디자인 변경
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	급하게 치명적인 버그를 고쳐야하는 경우
Style	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Refactor	프로덕션 코드 리팩토링
Comment	필요한 주석 추가 및 변경
Docs	문서를 수정한 경우
Test	테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X)
Chore	빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
Rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
Remove	파일을 삭제하는 작업만 수행한 경우

✏️ 제목

제목의 처음은 동사 원형

1. 총 글자 수는 50자 이내
2. 마지막에 특수문자 삽입 X
3. 제목은 개조식 구문
4. 첫 글자는 대문자
5. "Fix", "Add", "Change"의 명령어로 시작

🖊️ 예시

Feat: "게시판 기능 추가"

✏️ 본문

본문은 한줄당 72자 이내

1. 본문 내용은 양에 구애받지 않고 최대한 상세히 작성
2. 본문 내용은 어떻게 변경했는지 보다 무엇을 변경했는지 또는 왜 변경했는지를 설명

🖊️ 예시

Feat: "게시판 기능 추가"

1대1 문의 게시판 기능 구현
공지사항 게시판 구현

✏️ 꼬리말

optional이고 이슈 트래커 ID wkrtjd

1. "유형: #이슈 번호" 형식으로 사용
2. 여러 개의 이슈 번호를 적을 때는 쉼표로 구분
3. 이슈 트래커 유형은 다음 중 하나를 사용
   • Fixes: 이슈 수정 중(아직 해결되지 않은 경우)
   • Resolves: 이슈를 해결했을 때 사용
   • Ref: 참고할 이슈가 있을 때 사용
   • Related to: 해당 커밋에 관련된 이슈번호(아직 해결되지 않은 경우)
     ex) Fixes: #45 Related to: #34, #23

 

내일부터는 우테코 숫자야구 미션 구현을 해볼 계획이다.

JSP, Servlet, Spring, JPA 등 자바를 이용한 기술을 공부한다고 자바 언어에 대한 공부와 객체 지향에 대한 공부를 최근에 소홀히 하였는데 내일부터는 잠시 중단했던 테코톡과 네트워크 그리고 자바에 대한 공부를 다시 해볼 생각이다. 

 

목표로 하는 시험들이 다가오고 있는데, 잘 해낼 수 있을거라는 믿음을 가지고 앞으로 나아가자. 화이팅!

---

참고자료

* 커밋 컨벤션 규칙: <https://overcome-the-limits.tistory.com/6>
* 좋은 커밋을 위한 약속: <https://meetup.nhncloud.com/posts/106>