'다이어트 관리 웹' 팀프로젝트 [2차] - 서블릿/jsp 로 CRUD 게시판 만들기

 

 

전 게시물 : 1차 프로젝트 일지 ▼

https://xmclsdhfkrrhks.tistory.com/99?category=578648

 

 

 

프로젝트 설명

• 프로젝트명 : 0칼로리
• 기술 스택 : Java, Javascript, jQuery, CSS, HTML, jsp, OracleDB
• 개발 환경 : Eclipse, JDK 11.0.15, Apache Tomcat 9.0, Maven
• 설명 : 다이어트 관리 웹 애플리케이션 개발
  • 1차에 이어 2차 프로젝트 까지 '다이어트 관리 홈페이지' 주제로 작업 했다. 주제는 팀원들이 다이어트 경험이 있고, 공통 관심사가 있어 정하게 되었다
  • 홈페이지에서 쉽고 간편하게 사용자가 자신의 다이어트 관리를 하기 위해 만들어진 사이트 이다
• 팀원 5명, 팀장 1명(나) 으로 구성된 팀이다
• 수업시간에 배운 서블릿 과정, 오라클DB 지식을 활용해 게시판 CRUD 기능을 활용하는 프로젝트이다
• 나는 깃헙에 따로 업로드 하였고, 팀원들은 깃헙이 아직 어려울 것 같아 카톡으로 공유하였다

 

 

깃헙 주소 (코드 보기)

• 개인 백업 공간
  • https://github.com/yimenbin0126/zeroCalorie_private
  • (내가 한 지분은 여기에 모여있다)
  • 혹시나 생길 파일 충돌을 막기 위해 따로 백업 공간을 마련해두었다
  • 그런데 이번 2차 때는 팀원 전부 깃헙을 활용하지 않고 카톡을 활용하다 보니, 내가 작업한 작업 과정은 여기에 몰려있다
• 팀 프로젝트 공간
  • https://github.com/yimenbin0126/zeroCalorie
  • 2차 최종파일 (팀 전체 구현 이미지를 넣었음)
  • 이후에 팀원분들이 수업진도(스프링)를 나가면서 아직 서블릿으로 작업하고 있기 때문에 계속 작업 현황은 올라오고있다.
  • (카톡으로 파일/작업현황을 공유 하고 회의도 했었다) ▼

 

 

 

느낀점

• 배운 점
  • 보안의 중요성 (ex. ajax)
    • form 데이터로 보내기
      • 회원가입을 할때, 로그인을 해서 데이터를 넘길 때, 나는 꼭 적어야 할 사항을 javascript 로 유효성 검사, 미입력 막기를 구현다.
      • 선생님의 2차 프로젝트 피드백으로,  "javascript 로 구현한 유효성 검사는 개발자 도구로 조작이 가능하고, 클라이언트 뿐만 아니라 서버단에서도 막아줘야 한다" 는 얘기를 듣고 3차 때 보완해야겠다는 생각이 들었다.
      • => ajax 기능 활용하자!
        
        • ajax는 새로고침 하지 않고, 서버단과 소통할 때 이용 가능한 방법이기 때문에
        • ajax -> 서버 -> ajax (성공?실패?) -> 성공이면 뷰단 변화 / 페이지 이동. 이런식으로 활용하면 된다
    • 회원의 필수 입력사항
      • 회원 가입, 또는 결제수단 등에 적는 본인정보는 개인의 사생활, 보안과 연결되어 있기 때문에 미입력 사항이 포함되어야한다는 피드백을 받았다.
      • 회원가입에 적는 회원들의 정보는 팀원들과 같이 공유해서 쓰는 데이터이기 때문에, 3차 때는 팀원들과 상의해서 필요없는 정보는 미입력 상태로 저장할 수 있도록 하고, 비밀번호에도 암호화 기능을 넣을 계획이다.
  • 협업의 중요성
    • 회의시간이 적어 아쉬움
      • 회의에 참여하지 않는 팀원, 너무 바빠 회의에 참여하지 못하는 팀원, 열정이 넘치고 늘 적극적인 팀원도 있었고 수업 진도도 나가야 하니 시간이 빠듯했다.
      • 그런 팀원들 사이에서 나오는 불만사항. 팀장으로써 조곤조곤 잘 조율하고 전달하고 싶었으나 소통이 내 마음대로 잘 전달되지 않는다는 점을 느꼈다. 잘 귀기울여주는 것도 좋지만 때로는 팀장으로서 마감시간을 두고 지시를 해야할 때가 있다.
    • 3차 때 부터는 깃헙 쓰기
      • 현재 3차를 나가면서 팀원분들의 상황을 지켜보고 있는데, 아무래도 실시간으로 파일을 합치다보니 대부분 전보다 회의도 많이 갖게되고 더 소통할 시간이 많아져서 좋았다.
      • 그래서 3차때는 깃헙을 활용해 실시간으로 파일을 쉽게 공유하는 방법을 택할 것이다.
    • 지시를 내리는 역할 수행
      • 학원에 나오는 학생분들은 대부분 성인분들이고, 사회생활도 오래 하셨던 분들이 많다. 하지만 다들 다양한 환경에서 학원을 오신것이기 때문에, 학원에 오는 마음가짐도 달랐다. 1차 때는 팀원들의 얘기를 들어주고, 각자의 사정을 이해하고 공감하는 것에 집중을 했었다.
      • => 그러면 팀원들 모두 적극적으로 팀작업에 참여하고, 자신이 맡은 일은 책임지고 잘 해올 줄 알았다. 한 사람이 맡은 바를 해오지 않으면, 다른 팀원이 고생하게 된다는 걸 깨달았다. 어떤 팀원에게는 딱 잘라서 지시를 내려야 하는 분들도 있었기에 이 부분을 3차때 실천하기로 했다.
  • 커넥션풀
    • 스프링 개인 프로젝트를 작업하면서, 오라클 DB와 연결해 회원 정보를 관리하는데 서블릿 기능으로 DB와 연결하는 방법은 1차, 2차 때가 처음이었다.
    • 그런데 게시판 CRUD 기능을 구현하면서 코드가 점점 길어지고 복잡해지니 비효율적이란 생각이 들었다. 그래서 스프링 학습 과정을 예습해보니 스프링이 왜 편하고 많이 쓰이는지 느낄 수 있었다. 또 서블릿으로 작업하면서 DB 연결에 쿼리문을 작동하는 것, 업데이트하는 메서드 등 여러가지 익힐 수 있어 후에 스프링의 함축 의미를 이해하는 데 좋았다.
• 특이사항
  
  • 새로운 팀원의 등장
    • 새로운 팀원분이 두 분 들어오셨다
      • 두분의 성향을 파악하며 회의를 했고 빠르게 2차 프로젝트가 마무리 되었다.
      • 팀 파일을 합치면서 생길 수 있는 충돌 상황과, 각자의 코드성향을 파악하기에 걸리는 시간을 고려하지 못했던 게 아쉬웠다. 1차 때보다 2차 때 난이도가 올라가는데, 각자의 진도가 달라 도와주고 하다보면 시간이 금세 지나갔다.
      • 팀프로젝트를 포트폴리오로 활용하고 싶은 팀원의 의견을 고려해서 같은 주제로 각자 페이지를 만들었다. 그 중에 비슷한 의견이 있는 팀원들은 공통 페이지를 작업하기로 했다.
    • 팀원이 4명에서 6명으로 늘고나서, 모든 팀원의 의견을 전부 반영하기 어려웠던 점이 아쉬웠다.
      • 어떤 분은 수업이 잘 안맞으신지 학원이나 회의에 자주 빠지시거나, 수업 진도에 어려움을 느끼셔서 몇 번 수업 과정을 상기시켜 드리려고 도와드렸다.
      • 이 부분을 선생님께 살짝 공유해서 피드백을 받았었는데, 잘 못따라가는 팀원이 있다면 끝까지 선생님처럼 알려주는 역할이 아닌 마감 기한을 두고 일단 작업을 시키거나 동기를 이끌어내도록 유도하는 역할을 해야한다고 하셨다.
  • 팀원들의 성향
    
    • 팀원분들은 나이도 천차만별이고, 수료 후 취업에 대한 의지도 다 다르다. 그래서 각자 상황에 맞게 이해하는 노력도 필요하나, 자극이 필요한 팀원도 있었다. 또 한 사람이 갑자기 빠지게 되면, 다른 한 사람은 팀의 기획된 일을 마무리하려고 작업량이 늘어 힘들어질 수 밖에 없다.
    • 나는 되도록 서로의 DB가 겹치지 않고, (불러올 때 충돌나지 않기 위해) 페이지가 겹치지 않았으면 하는 이유는, 되도록 모든 팀원이 적극적으로 작업에 참여하면 좋겠으나, 중간에 개인 사정으로 학원을 그만둘 것 같은 팀원분도 있었고, 그 중에 남아있는 팀원은 피해를 보면 안되기에 각자의 작업을 나누기로 의견을 많이 냈었다.
    • 하지만 2차 때 다행히도 팀을 잘 끌어갔고, 팀원들 중에 그만둔 사람은 아직 없다. 현재 3차 프로젝트 준비를 하며 각자 작업을 이어가고 있다.
• 각자 맡은 역할
  • 나 : 로그인, 회원가입 기능, 고객센터 게시판 (CRUD 기능)
  • 팀원A : 캘린더 기능 (달력에 날짜마다 할일 일정 CRUD(수정/삭제/추가) 기능 넣기), 마이페이지
  • 팀원B : 캘린더 기능 (웹페이지 전반 css, 달력 CRUD 기능), 마이페이지 css
  • 팀원C : 마이페이지 - 회원정보 변경 (프로필 사진 변경 기능 빼고)
  • 팀원D : 커뮤니티 게시판 - 게시판 CRUD
  • 팀원E : 캘린더 내 회원 검색 구현
• 회의
  • 회의는 이틀에 한번씩 했던거 같다
    • 초반엔 다들 구현하고싶은 기능을 알아보고, 나는 같이 참고할만한 노션 사이트를 만들어 팀 전체 계획을 공유했다. 회의도 노션에서 진행했는데, 하루하루 메모하지 않으면 까먹을 것 같아 기록을 중요하게 생각했는데 팀원들에게도 엄청 낯설게 다가가진 않은 거 같아 다행이다
  • 팀의 목적
    • 팀장이 되면서 팀을 이끌어가는 데엔 양보와 존중이 가장 중요하다고 생각했다. 그래서 잘 못 따라오는 팀원을 기준으로 맞춰, 프로젝트 스케일을 정하기로 했다.
    • 하지만 열정이 넘치는 팀원도 있어서 전체적인 주제를 잡고 각자 하고싶은 기능을 구현 하되, 너무 개인플레이로 가지 않도록 서로 수정된 사항을 적극적으로 공유하기로 했다. 또 톡방에 톡이나 공지를 올리면 꼭 확인 흔적을 남기자는 약속도 있었다.

 

 

프로젝트 구성

• 작업기간 : 2022.09.02 ~ 2022.09.26 (1주~3주)
  • 1주차 : 상의/탐색 기간 (역할 분담, 구현 기능 공부..)
  • 2주차 : 각자 직접 쿼리를 짜며 서블릿 프로젝트 완성하기
  • 3주차 : 팀 파일 합치기
• 인원 : 6명
• 주제 : 다이어트 관련 개인 기록 사이트
• 이름 : 0칼로리

 

 

 

내가 한 작업물

• 로그인, 회원가입, 고객센터 게시판(관리자용)

 

로그인

• 사용자 아이디와 비밀번호를 통해 로그인
• 아이디, 비밀번호가 다 맞아 떨어지는 회원 수가 1명 이상으로 체크되면 로그인이 가능
• 로그인 후 'OO님 환영합니다.' 와 로그아웃 버튼이 뜸

 

 

회원가입

• 회원가입하는 곳
• 프로필 사진을 업로드 하면 파일 이름+이미지 미리보기 보는게 가능하다
• 전부 입력 필수값으로 만들었고, 자바스크립트에 유효성 검사를 넣어 에러메시지가 안뜰 때 회원가입이 가능하게 했다

 

 

고객센터 게시판 (CRUD)

• 관리자만 글쓰기 가능한 자주하는 질문 게시판
• 게시판 CRUD 기능 (쓰기, 수정, 삭제)

고객센터 메인 페이지

고객센터 회원정보관리 페이지 (관리자 글쓰기 버튼)

글 상세보기 (관리자일경우 글수정, 글삭제 버튼이 보임)

관리자 글쓰기 (카데고리 두개 중 선택 가능)

관리자 글수정