Spring Framework·Oracle 기반의 취미 모임 서비스 웹사이트

대한상공회의소 서울기술교육센터의 자바기반 빅데이터 시각화 시스템 개발 반에 다니며 백엔드 프로그래밍에 대해 공부했다.

 

그동안은 프론트엔드 위주로 진행했다면 이번에는 완전히 웹사이트를 구축할 수 있게 되었다. '코드로 배우는 스프링 웹 프로젝트' 책의 내용을 기반으로 학습했고, 학습한 내용을 바탕으로 프로젝트를 진행했다. 프로젝트 주제는 '소모임'이라는 오프라인 모임을 도와주는 모바일 커뮤니티 플랫폼 서비스를 모티브로 하였다.

 

주제: 취미 모임 서비스 웹사이트 구축

사용 언어: Java / HTML5 / CSS3 / JavaScript

개발 환경: Spring Tool Suite 3

데이터베이스: Oracle Database

개발 기간: 21/05/13 – 21/05/25

프로젝트 목표:

① 사용자 로그인 (네이버아이디로그인 이용)

② 모임 개설 및 가입

③ 게시판 기능 (글 등록 · 수정 · 삭제 · 댓글)

④ 마이페이지 (개설 및 가입한 모임)

 

프로젝트를 본격적으로 시작하기 전, 프로젝트 계획서, 요구사항 정의서, 스토리보드, db설계, 간트차트, 플로우차트 등 여러가지를 꾸며서 제출했는데 음 아직까지는 이것들이 굳이 필요한 큰 프로젝트는 아니라서 그런지 딱히 별 필요성을 못느꼈다. 그래도 해보는데 의의가 있으니뭐 . 그래도 스토리보드랑 db설계는 이전 프로젝트할 때에도 해봤고 반드시 필요하다고 생각이 든다.

 

화면 설계서는 개발하기 전에 미리 그려놓은 것이 있긴 한데 어디갔는지 없어져서 다시 그렷다 ..... 그래서 설계가 아니고 이미 만들어진 화면 요약집이 되어버렸다.

 

db 설계는 생각보다 안 순조로웠다... 처음에 너무 메모리를 적게 할당해줘서 계속 오류나고 수정하고 그랬다.. 힘들었다 ㅠㅠ 다음에는 그냥 엄청 많이 메모리를줘야겠다. 진짜 한치의 오차도 없는 컴퓨터놈 -_- 시퀀스도 자꾸만 2부터 시작해서 엄청 헤맸다..

 

진짜진짜 만드는데 고생한 구성도. ... . ㅠㅠㅠㅠ 

어찌저찌하다보니까 코드가 돌아는 가는데 뭐가 어디로 가고 이런걸 완벽하게 이해를 못해서 처음 개발할때 힘들었고 구성도 그리는데는 더 힘들엇다 .... 이게 맞는지 틀린지 아무도 모르고 물어볼 사람도 없다는게 더더더 나를 힘들게 했다. 구글에 검색해서 진짜 다양한 구성도와 구조를 봤는데 사람마다 설명해 놓은것도 조금씩 다르고 그려놓은 건 조금 많이 달라서 어떤걸 참고해야 할지 생각하는 시간이 구성도 그리는 시간보다 배는 더 든것 같다..

아무튼 아직도 맞게 한 지는 모른다.

 

주요 코드를 ppt에 넣으려고 했는데 처음에 사실 너무 뭐가 많아서 이걸 언제 다넣지 이러고 있었다.. 그래서 1/3만 넣었다. 진짜 내가 한 부분만 넣었다. 참고를 여기저기에서많이 해서 그걸 내가 한 것처럼 쓰기에는 양심이 많이 찔렸다 ..

크게 group, board, login, mypage 이렇게 4부분으로 나눠서 작업을 진행했다.

board는 진짜 책을 그냥 베껴왔고, login은 네이버아이디로그인을 사용했다. group은 board 조금 베끼고 나머지는 직접 구성했다. mypage는 찐으로 직접했다. 아, board에 있는 댓글 구현한 부분은 직접 완성했다 ^^ 뿌듯해

 

코드 설명이랑 화면 캡쳐 없이 코드만 있어서 굳이 여기에 올릴 필요는 없을 것 같다 .....

 

- 많이 오류가 났던 부분에 대해 잠깐 되돌아보는시간을 가지겠습니다.

1) 변수명!!!!!!!!!! 안맞아서 오류나는 거 굉장히 많았음

2) 어노테이션!!!! commentVO만들때 @data 안써서 그냥 왜 안되는지도 모르고 계속 안됨...

3) mapper.xml 에서 쿼리문에 자꾸 세미콜론 붙이기.. 자꾸 까먹음

4) db에 들어갈때 메모리 할당량 부족해서 안됐던거 ........ 

5) 세션에 저장된 id값 받아와서 쿼리문 돌리는거. 

6) 페이지 이동할때 경로 안맞아서 오류나는 것.

7) 이미지 업로드!!!!!!!!!!!!!1 경로랑 refresh 바로 안되어서 엑박뜨는거 진짜 극혐 ....

8) 컨트롤러에 get없어서 404나오는거

9) 컨트롤러, 서비스, 매퍼, vo 변수랑 메소드 이름 안맞아서!!!!111 오류

10) 모달!! 안돼서 그냥 빼버림..

 

+ 열심히 해서 얻은 것

1) 글자수 초과했을때 뒤에 잘리게 하는 함수

2) login/logout 바뀌게 하는 태그 <c:choose>

3) 세상은 넓고 html 태그는 많다.

4) #{ }, ${ }는 무적이다.

5) 컨트롤러는 중요하다.

6) 컨트롤러에서 스크립트태그 쓰는법

7) 구글엔 모든 것이 있다.

8) 부트스트랩 짱이다.

9) 댓글기능구현하며 얻은 스프링 지식 ..?

10) '이게되네' 와 '이게안되네'

 

** 이미지 관련 **

* 파일 업로드 패스 설정

servlet-context.xml

<!-- 업로드 패스 설정 -->
<beans:bean class="java.lang.String" id="uploadPath">
  <beans:constructor-arg value="C:\spring\Project\src\main\webapp\resources"/>
</beans:bean>

value 부분을 자신의 경로에 맞게 설정해준다.

* 이미지 업로드 후 출력 해결

- 프로젝트 자동 refresh: Window - Preferences

- 알림창 시간 지연: Thread.sleep()

GroupController.java

@PostMapping("/register")
public String register(groupVO group, MultipartFile file, RedirectAttributes rttr, HttpServletResponse response) throws Exception {

    String imgUploadPath = uploadPath + File.separator + "imgUpload";
    String ymdPath = UploadFileUtils.calcPath(imgUploadPath);
    String fileName = null;

    if (file.getOriginalFilename() != null && file.getOriginalFilename() != "") {
        fileName = UploadFileUtils.fileUpload(imgUploadPath, file.getOriginalFilename(), file.getBytes(), ymdPath);
        group.setG_img_src(File.separator + "imgUpload" + ymdPath + File.separator + fileName);
        group.setG_thumb_src(File.separator + "imgUpload" + ymdPath + File.separator + "s" + File.separator + "s_" + fileName);
    } 
    else {
        fileName = "";
        group.setG_img_src(fileName);
        group.setG_thumb_src(fileName);
    }

    log.info("register: " + group);
    service.register(group);
    rttr.addFlashAttribute("result", group.getG_no());

    response.setContentType("text/html; charset=UTF-8");

    PrintWriter out = response.getWriter();

    // ****************
    Thread.sleep(2000);
    // ****************

    out.println("<script>alert('개설되었습니다.');" 
                + "location.href='http://localhost:8080/list';"
                + "</script>");

    out.flush();
    out.close();

}

 

** db연결 관련 **

- oracle 11g 8080 포트 변경

오라클 11g의 경우 기본적으로 8080 포트를 이용하는데, 웹 개발시 많이 사용하는 톰캣의 기본 포트도 8080이기 때문에 두 포트가 겹치게 되어 두개중 하나의 포트를 변경해야 한다. 나는 오라클 포트번호 변경!!

oracle system 계정으로 접속

[포트번호 변경]

- 현재 사용하는 포트번호 확인
select dbms_xdb.gethttpport() from dual;

- 포트번호 9090으로 변경
exec dbms_xdb.sethttpport(9090);

[book_ex 계정 생성]

- 계정 생성
create user book_ex identified by 1234
default tablespace users
temporary tablespace temp;

- 권한 부여
grant connect, resource, dba to book_ex;

- jdbc 연결

   root-context.xml
   
   <!-- Root Context: defines shared resources visible to all other web components -->
   <bean id="hikariConfig" class="com.zaxxer.hikari.HikariConfig">
      <property name="driverClassName"
         value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
      <property name="jdbcUrl"
         value="jdbc:log4jdbc:oracle:thin:@localhost:1521"></property>
      <property name="username" value="book_ex"></property>
      <property name="password" value="1234"></property>
   </bean>

 

진짜 프로젝트의 연속과 함께 스프링 프레임워크라는 모두가 처음 사용해보는 툴로 진행을 하다보니 다들 지치고 힘들어했다. 사실 처음에는 그냥 하기도 싫었다. 중간중간에는 힘들고 짜증나는 부분도 있었고 ㅋㅋ 그래도 하다보니 재미있고 생각보다 진도가 빠르게 나가서 더 해보자는 생각이 들었다. 이제 좀 이해하고 할만하다는 생각이 들때쯤엔 프로젝트를 마무리해야할 시기였다. 시간이 조금 더 많았다면 더 다양한 기능들을 구현할 수 있었을 텐데 그 부분이 조금 많이 아쉽다.......... 목표한 것을 완벽하게 완성하지는 못했지만 어느정도 현실과 타협하고 무사히 마무리한 나에게 박수를 백번 쳐주고 싶다 짝짝짝*33 + 짝 ... ..............

 

그래서~~ 이번 프로젝트는 한계점이랑 참고자료 부분이 중요하다고 생각한다!!!!

마지막으로 시연영상 ~,~

https://youtu.be/i0XJxwBdFPE

 

아자아자

 

빠라삐리뽀