[ICT 학점연계 프로젝트] 웹 개발 업무

2022년 3월 인턴으로 들어와서 2달이라는 시간이 지났을 시점, 개발 업무를 받았다.

 

실질적인 실무 업무로서 제안서 작성에 일부분이지만 참여해보기도 하고 사업 제안 제출 업무, 제안 발표 참관 등을 경험했다.

자신의 진로 방향성 확립을 위해 다양한 개발 언어와 프레임워크를 사용해보는 Open API 과제를 진행하며 프론트엔드와 백엔드 중 더욱 흥미를 느끼는 부분을 찾아보고 java 기반의 Spring을 처음으로 사용해보았다.

어렵게 느껴지는 부분도 많았고 흥미로운 부분도 많았던 거 같다.

담당 매니저님으로부터 개발 업무를 지시 받았을 때 Spring 사용 경험이 많지 않았기에 어려움이 예상되기도 했지만 처음으로 개발 업무를 지시 받아 설레임이 컸다.

내가 작성한 코드와 작업 화면은 보안상의 이유로 첨부하지 못하지만 지시 내용을 수행하기 공부했던 내용을 정리해보겠다.

 

• nativeQuery를 활용해서 쿼리문을 작성하여 CRUD연동을 했다.
• Html에서 Controller의 Model 객체를 사용하기 위해 Thymeleaf를 사용했다.

 

- 공통 작업 내용: 파트너 페이지와 관리자 페이지에 동일하게 작업한 내용

 

1. 회원가입 기능

• DTO 클래스를 생성해서 DB테이블에 저장될 내용들을 Html에 input으로 받아 Post 전송하여 Controller에서 Service 클래스의 signUp메소드를 실행하여 회원가입 기능을 수행한다.
• 패스워드의 경우, 암호화하여 저장하고 가입일자의 경우, CURRENT_TIMESTAMP를 사용해서 저장했다.
• ID 중복 검사 기능은 회원가입하고자 하는 ID값을 DB에 검색해서 count(*)가 0일 때, 중복검사를 통과할 수 있게 했다.

 

2. 로그인 기능

• Post방식으로  Controller에 로그인할 아이디와 비번을 Service클래스의 login메소드를 실행하고 return을 boolean형으로 받는다.
• True일 경우, 로그인한다.

 

3. 세션 기능

• 로그인 유지 기간 설정, 로그아웃, 세션정보를 이용해서 데이터를 다루기 위해 세션 기능을 이용했다.
• js session storage를 이용해서 구현했지만 서버에서 session 정보를 가지고 있어야했기에 Spring의 HttpSession을 사용해서 로그인 시 setAttribute로 세션을 생성했다.
• 로그인 유지 시간을 늘리기 위해 setMaxInactiveInterval을 사용했다.
• 로그아웃시 removeAttribute로 세션을 제거했다.
• session을 중복되지 않는 데이터를 사용하여 DB에서 필요한 정보를 찾을 수 있도록 했다.

 

- 파트너 페이지: 기존 퍼블리싱 파일을 바탕으로 디자인 수정과 기능구현 업무

 

1. 회원 정보 출력

• Model 객체에 로그인한 회원 정보를 저장하고 Thymeleaf를 이용해서 넣어주었다.
• 회원정보를 출력하는 화면에서 수정도 가능해야 하기 때문에 form의 input의 value값으로 넣어주었다.

 

2. 회원 정보 수정

• 패스워드가 있는 경우, 첨부파일을 삭제하고 새로운 파일을 업로드 하는 경우에 따라 실행되는 메소드들이 다르게 로직을 짰다.

 

3. 회원가입 첨부파일

• input을 2개 생성해서 하나는 js를 이용해서 업로드된 파일명이 표시될 수 있도록 했다.
• 다른 하나는 label의 for을 이용해서 파일 첨부하기 기능을 만들었다. 

 

- 관리자 페이지: 디자인과 퍼블리싱 파일이 정해지지 않아 화면을 만들고 기능구현

 

1. 화면 구성

• 사용해본적이 있는 디자인들을 활용해서 구성하고 관리하는 목적에 맞게 sidebar를 만들어 쉽게 조작할 수 있도록 했다.

 

2. 업체 목록 출력

• findAll메소드를 사용해 테이블에 저장된 모든 행을 가져와 Pageable를 홀용해서 페이지 처리를 해주고 화면에 목록을 출력했다.

 

3. 상세보기

• jquery-modal를 사용해 modal창으로 상세보기 창을 출력했다.
• idx를 param으로 보내서 idx를 통해서 해당 행의 데이터를 모두 출력하고 수정할 수 있도록 했다.

 

4. 계정 관리

• 관리자에도 등급이 있다.(root or sub)
• root 관리자가 관리자들의 계정을 관리할 수 있게 하려면 권한이 root로 로그인 했을 경우에만 관리자 계정 관리 탭이 display 되도록 css로 처리하였다.

 

5. 검색 기능

• 목록의 경우 원하는 데이터를 빠르게 조회할 수 있도록 검색 기능을 추가하였다.

 

- 공부하게 된 내용

 

1. Spring

• 협업을 했기 때문에 nativeQuery를 사용한 부분이 많았지만 저번 Spring 프로젝트를 통해서 다음에 사용해보고 싶었던 JpaRepository를 사용해봤다.
• Spring 프레임 워크를 이용해서 CRUD 기능을 구현이 익숙해졌다.

 

2. CSS

• 퍼블리싱된 파일의 디자인을 변경하고 관리자페이지의 화면을 만들어보면서 CSS에 관한 공부를 할 수 있었다.
• 복잡하게 얽혀있지 않다면 디자이너분이 요청대로 빠르게 수정할 수 있었다.

 

3. Jquery

• 자바스크립트의 라이브러리인 Jquery를 사용해서 show, hide, modal 등을 사용해 편리하게 기능을 구현했다.

 

4. 본인인증(작업된 코드와 실행해보며 로그를 확인)

• 회원가입을 하면서 아임포트 휴대폰 본인인증을 연동하는 부분이 있다.
• 버튼에 js function으로 연결하고 ajax로 http 요청을 보냈다.
• CallbackController로 요청이 들어오면 uid값과 accessToken을 이용해 iamport로 부터 본인 인증을 한다.
• 결과를 response로 리턴해 사용한다.

 

5. S3 분산 스토리지(작업된 코드와 실행해보며 로그를 확인)

• applicatoin.yml에 aws설정에 자신의 IAM키, 버킷 이름, region 등을 입력해준다.
• AmazonS3Config 설정 클래스를 만들어 yml파일에 작성한 값들을 읽어와 객체를 만들어 Bean으로 주입한다.
• S3Service 클래스를 만들어 Upload와 Delete와 관련된 코드를 작성한다.
• 회원가입시 업로드한 첨부파일을 MultipartFile 형으로 Controller에 던져지고 convert를 거쳐 Storage에 저장되고 저장된 url을 DB에 저장한다.
• 이렇게 저장된 url을 이용해서 이미지를 다운로드해서 사용한다.