웹 프로젝트 - 오늘도 맑음

본 게시글은 2021년 작성된 이전 블로그에서 옮겨온 포스팅입니다.

원글 https://pjtae0328.tistory.com/36

 

 

프로젝트 명 [ 오늘도 맑음 ]

사용자의 위치를 기반으로 현재 날씨와 앞으로의 날씨를 제공하고 그에 따른 의상을 추천해줍니다.

의상 관련 게시글을 작성하고 자유로운 토론이 가능한 커뮤니티 입니다.

 

2021년 09월 23일 ~ 2021년 10월 19일

 

개발도구	IntelliJ, eclipse
DBMS	Oracle DB
개발환경	JDK1.8 Tomcat 9.0 JSP&Servlet
버전관리	Git

 

활용 해본 대표 기술 : Servlet / jQuery / AJAX

 

 

 

팀 전체 구현 기능

 

사용자 페이지

naver geolocation api 활용 IP기반 위치조회

위치에 따른 단기예보 / 중기예보 제공

중기예보 업데이트 주기에 따른 서버 캐싱기능

단기예보 사용시점 캐싱, 업데이트 주기 확인하여 업데이트 내용 없을 경우 재활용 기능

쿠키를 활용한 위치정보, 날씨정보, 의상정보 재활용

기온별 랜덤 의상 추천 (기온 상, 하한 값 기준 랜덤 출력)

마이페이지 개인정보 수정, 프로필사진 등록 및 교체기능

커뮤니티 게시판 게시 글 작성, 수정, 삭제, 검색 기능

1대1문의 글 작성, 작성자만 조회 및 관리자페이지 답변 기능

게시 글, 댓글 신고 및 신고 대상자 재제 기능

kakao지도 api 활용 위치 마킹, 해당 위치에서 특정일자 일정 등록, 수정, 삭제 기능

쪽지 발송, 수신 기능

 

관리자 페이지

최고관리자의 일반유저 관리자 설정 기능

쪽지 템플릿 설정 및 일괄발송 기능

회원관리 회원정보 검색, 제재 기능

신고관리 신고 대상글 및 댓글 확인, 대상자 제재 기능

문의 처리과정 확인 및 답글 작성 기능

게시물 검색, 삭제 기능

공지, 이벤트 게시 글 작성기능

 

 

 

 

나의 구현 기능

[담당 역할]

기능 기획, 전체 DB설계, 메인페이지, 로그인 회원가입 구현

- 중기예보 오전 6시 오후12시 업데이트 및 캐싱 구현

단기예보 지역별 조회 시에 재활용을 위한 캐싱 기능 구현

NAVER Geo Location API를 활용한 IP 기반 위치조회

로그인, 회원가입 소셜(네이버, 구글)로그인 구현

패스워드 SHA-256 암호화, 로그인 회원가입 시 데이터 RSA 공개키 기반 암호화 통신 구현

기온별 의상추천, 지역별 날씨 제공, 조회 수 기반 인기 게시글 제공

AJAX를 활용한 회원가입 실시간 서버 사이드 유효성 검증

메인, 로그인 회원가입 페이지 flex box를 활용한 반응형 웹 구축

이메일 전송, 이미지 크기 조정을 통한 썸네일 구현 등

[기여도] 35% (팀 구성원 7명)

 

 

 

내가 구현한 내용 설명

 

 

전체 erd 설계

 

화면설명: 홈 화면입니다. 모든 화면은 반응형으로 만들었습니다.

 

코드 보기 - 컨트롤러 / 위치서비스 날씨서비스

 

1. 네이버 Geo Location API를 활용하여 접속자의 IP를 사용해서 접속 위치를 특정합니다.

그리고 기상청 단기예보 정보를 통해 현재 날씨와 1시간 후 ~ 6시간 후 날씨를 하단 슬라이드로 표시합니다. (날씨, 시간대별 다른 아이콘)

기상청 API 요청 횟수에 제한이 있어서 서버에서 데이터를 캐싱하여 재활용합니다.

 

2. 성별별 기온에 맞는 옷을 무작위로 추천합니다. 하단에 새로고침 버튼을 통해 새로운 옷을 추천받을 수 있습니다.

 

3. 내가 작성한 10일 후까지의 일정을 슬라이더로 표시합니다. 기상청 중기예보 날씨 API를 통해 날씨를 받아옵니다. 클릭 시 내 일정 페이지 혹은 일정 등록페이지로 이동합니다.

중기예보는 단기예보보다 지원 범위가 넓은 단위이며 데이터가 많고 횟수 제한이 있어서 12시간 단위로 갱신하여 서버에 캐싱해두고 사용합니다.

 

4/5. 조회수가 많은 최고 게시글과 공지, 이벤트를 표시합니다.

 

 

화면설명: 로그인 페이지입니다. 반응형으로 만들었습니다.

 

코드보기 - 로그인컨트롤러 회원가입컨트롤러 소셜로그인컨트롤러 / 멤버서비스 / DAO

 

1. 일반 로그인, 네이버/구글 소셜 로그인을 구현하였습니다.

 

2. 로그인 시 헤더 상단에 회원의 프로필 사진과 닉네임, 로그아웃 버튼이 표시되며 관리자일 때 관리자페이지 버튼이 함께 노출됩니다.

 

3. 모든 로그인 과정 및 유효성 검증은 AJAX를 통해 서버와 통신하며 자바스크립트로 직접 제작한 모달창을 통해 메시지를 띄웁니다.

 

4. 로그인, 회원가입 등에 사용하는 민감한 정보는 RSA 암호화 알고리즘을 통해 브라우저에서 공개키로 암호화하고 서버에서 개인키로 해독합니다. 키 페어는 세션별로 관리합니다.

db에 저장할 때는 임의의 무작위 문자열 값과 함께 SHA-256 알고리즘으로 암호화하여 저장합니다.

 

 

화면설명: 회원가입 및 아이디, 비밀번호 찾기 화면입니다. 반응형으로 만들었습니다.

 

1. 회원가입 시 모든 입력 필드는 포커스가 해제되면 JS를 통한 클라이언트 측 유효성 검사 후에 AJAX를 통해 서버에서 한 번 더 유효성 검증 및 중복확인을 거쳐서 실시간으로 결과를 출력해줍니다.

 

2. 회원가입 절차가 마무리되면 이메일로 인증 링크를 발송합니다. 이메일 SMTP 서버는 네이버를 이용하였고 메일 내용은 html로 작성하여 발송하였습니다.

인증 링크는 30분간 유효하며 임의로 생성한 UUID를 base 64 인코딩하여 활용하였습니다.

30분간 가입정보 및 인증 링크 유지를 위해 일정 시간마다 날씨 정보를 캐싱하려고 만들어둔 타이머의 추상클래스를 상속받아 재정의 하여 이용했으며 중복검사 시에 임시 가입자 아이디 및 닉네임을 지키기 위해 id와 이메일을 각각 set에 저장해두고 중복검사 시에 해당 set을 통해서도 검사하며 인증 링크 만료 시 삭제하는 식으로 구현하였습니다.

 

3. 아이디 찾기는 가입한 이메일, 비밀번호 찾기는 가입한 아이디와 이메일을 입력할 시에 해당 이메일로 아이디 정보, 임시 비밀번호를 발송하는 식으로 구현하였습니다.

 

4. 소셜 로그인의 경우 가입된 정보가 없다면 업체로부터 받은 프로필 정보 이외에 홈페이지에서 사용해야 할 정보만 추가로 입력받고 가입이 완료되도록 구현하였습니다.