TIL/넷마블문화재단

[TIL-23/230914][넷마블문화재단] 미니 프로젝트 - 회원가입 기능 구현(JSP, MySQL)

prao 2023. 9. 15. 00:52
반응형

오늘은 오후 6시부터 개인 일정이 있어서 6시 이전까지 공부했던 내용을 정리하겠다.

 

우선 저번에 HTML, CSS 및 간단한 Javascript를 공부하고 실습용으로 만들었던 클론코딩 홈페이지에 최근에 공부한 Servlet, JSP를 이용하여 백엔드 기능을 구현하려고 시도했다.

 

간단하게 프로젝트를 소개하겠다.

 

프로젝트 소개

  • 레퍼런스: 넷마블문화재단
  • 선택이유
    1. 원하는 웹 서비스를 구상하고 구현하기 전, 기초 HTML, CSS 및 백엔드 기능을 구현해보면서 공부했던 내용을 학습하기 위함.
    2. 최대한 간단하면서 원하는 기능(프론트엔드: 반응형 웹 / 백엔드: DB 연동, 회원가입, 로그인, CRUD 게시판 등)을 구현
    3. 장기 프로젝트가 아닌 단기 프로젝트로 학습용도로 적절하다고 판단하에 채택
  • 개발기간: 9/14 ~ 9/21(총 8일간)
  • 사용기술
    • 프론트엔드: HTML, CSS, Javascript
    • 백엔드: JSP, Servlet(추가예정)
    • 데이터베이스: MySQL
  • 구현기능
    • 회원관련
      1. 회원가입
      2. 로그인
    • 게시판
      1. 공지사항
      2. 뉴스룸

홈페이지 소개

현재는 HTML, CSS 위주로 구성된 홈페이지

프로젝트를 진행하면서 JSP가 필요한 부분은 JSP를 추가하여 동적 웹으로 구현할 것이고, 아직 수정 단계.

메인화면
  • swiper, slider를 활용한 반응형 웹

메인페이지

 

소개  
  • 소개: 반응형 웹

소개페이지

  • 지도: 카카오 지도 API를 활용한 지도 추가

지도API

 

활동
  • Slider를 활용한 반응형 웹

활동

소식
  • 공지사항: 현재는 HTML + CSS + JS로 구현. JSP로 DB를 연동하여 글 작성 및 수정이 가능하도록 추가 예정

여기서부터 9/14(목) 4시간 정도 개발한 내용이다.

먼저 기존에 없었던 재단회원 탭과 로그인 / 회원가입 탭을 만들고 회원가입 기능 먼저 개발하였다.

 

개발 과정은 Member VO(Value Object)를 만들었고 MemberDAO를 생성하여 MySQL DB와 연결하였다.

DAO와 DO 관련 개념은 아래 링크를 참고 바람.

https://prao.tistory.com/entry/DAO-DTO-VO-ENTITY

 

DAO, DTO, VO, ENTITY

개인 프로젝트를 진행하다가 회원가입 기능을 구현하는데 MemberForm을 따로 분리하여 구현하는 것과 폼 없이 엔티티를 직접 등록과 수정 화면에서 사용하는 것의 차이에 대해 궁금해졌고, 알아보

prao.tistory.com

중간에 연결 과정에서 MySQL connector jar파일의 위치를 잘못 지정하여 에러가 발생했으나, 구글링을 통해 해결할 수 있었다.

 

또한 join.jsp 페이지를 만들어 기본적인 method를 post로 설정하고 action으로 joinAction.jsp(null 방지, 중복확인 등 회원가입 관련)을 설정한 form을 만들었다.

 

그리고 form 안의 input 태그에 DB에 만들어둔 member table의 컬럼명에 맞게 name 속성을 설정하여 입력한 값을 joinAction.jsp로 전달하게 하고, 전달된 값이 joinAction에서 지정한 if문을 타고 현재 로그인 여부, 중복 여부, 널값 여부 등의 검사를 거쳐 이상이 없을 경우 MySQL DB로 값을 전달하여 회원가입이 가능하게끔 설계하였다.

 

아래에 회원가입 페이지와  DB에 저장된 내용을 첨부한다.

회원
  • 회원가입 페이지: 기능 위주로 먼저 구현하기 위해 UI는 마지막에 수정 예정

회원가입 페이지
값이 DB에 제대로 저장됨

지금 이렇게 글을 적으면서 살펴보면 매우 간단한 기능이다.

하지만 JSP를 사용하여 DB와 연동하여 회원가입 기능을 구현하는 것이 처음이었다.

그렇기에 중간에 에러도 발생하였고 로직을 이해하는데 시간이 소요되었다.

 

이전까지 기초가 부족하다는 생각에 계속 강의를 듣고 조금 더 실력을 쌓고 프로젝트를 해보자는 생각만 계속하였다.

확실히 부족한 실력이라도 프로젝트를 해보니 만들어가는 재미도 있고 내가 어느 부분이 얼마나 부족한지 알 수 있었다.

 

직장을 다니다가 그만두고 준비하는 것이기에, 뒤가 없다는 생각으로(실제로 돌아갈 곳이 없다...) 공부하고 있는데 가끔 빠르게 취업하는 사람들을 보면서 나의 공부 방법을 의심하는 순간들을 마주한다.

좋은 멘토가 있다면 좋겠지만, 현실적으로 만나기 힘든 상황이기에 기회가 된다면 우아한 테크코스와 같은 교육 프로그램에 참여하여 뛰어난 멘토님들과 동료들에게 많이 배우고 싶다.(매우 높은 경쟁률을 과연 뚫을 수 있을까...)

 

혹여 안된다면 최근에 지속하던 개발 기초지식(네트워크, 컴퓨터 구조 등) 공부를 좀 더 깊게 하면서, 실제로 내가 고민하고 구현한 나만의 웹사이트를 구현해보려 한다.

 

아무튼 9월 21일까지는 지금 진행하는 미니 프로젝트에 전념하면서 공부했던 내용들을 최대한 구현할 수 있도록 하고, 기존에 하던 Spring 공부로 돌아갈 것이다. 오늘의 TIL은 여기서 마치겠다.

반응형
저작자표시 비영리 변경금지