티스토리

DevelopLSB

검색하기

블로그 홈

DevelopLSB

developlsb2dwb.tistory.com/m

민뇌 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Java] SpringBoot : 기념일 날짜 계산하기(util.Date, sql.Date, Calendar 변환, 지난 일 및 남은 일 계산, list 정렬) 목적 특정 날짜를 기준으로 오늘까지 일(days)수와 특정 날짜까지 남은 일수 구하기 기념일 계산을 위해 시작일을 기준으로 100일, 200일, ~년 ··· 단위 구하기 오늘까지의 일수 이상의 기념일만 4개씩 보이도록 구현 진행한 프로젝트의 마이페이지에 등록된 날짜를 기준으로 기념일을 보여주는 기능이 필요했다. 가진 정보는 회원이 등록한 날짜 하나이므로 해당 값을 통해 자동으로 이후 날짜를 계산해주는 흐름을 만들어보도록 하자. 완성된 화면은 아래와 같다. 만약 시간을 몇 달 돌려보면 아래와 같다. 보통은 DB에 등록되어 있는 날짜 데이터를 어떤 모델에 담아 가져온 후 작업을 하게되지만, 날짜를 테스트하기 위해 아래 과정을 진행해줬다. [Java] @RequestMapping("/mypage/main.do.. 공감수 0 댓글수 0 2023. 7. 27.
[JavaScript] SpringBoot : 다중 이미지 Ajax 전송(Ajax DB 테이블 생성, Ajax promise, <form> + Ajax 데이터 전송) 목적 다중 이미지 Ajax 전송 기능 구현 데이터 + Ajax 데이터 동시에 서버 전송 처리 비동기 방식 순차 처리를 위한 promise 사용 이전 글에서 다중 이미지 미리보기 처리과정을 정리했다. 폼을 다시 보면 아래와 같은데, 텍스트와 이미지를 한번에 서버로 전송해야 하는 구성이다. 이전 글과 같은 방식으로 이미지를 입력 받고, 다른 텍스트들이 채워지면 submit 버튼(게시)이 활성화 되도록 했다. submit을 하게되면 텍스트 데이터는 태그에 의해 POST 방식으로, 이미지 배열은 Ajax에 의해 POST 방식으로 서버에 넘겨주도록 만들었다. 하나씩 정리해보자. [JSP] 우선 태그 구조는 아래와 같다. 관련 설명은 여기 제목 사진 파일선택 해시태그 장소 게시 흐름을 보기 위해 적어두지만 따로 설.. 공감수 0 댓글수 0 2023. 7. 24.
[JavaScript] SpringBoot : 다중 이미지 미리보기(<input type = "file">, 이미지 리스트 동적 생성, 이미지 추가 및 삭제) 목적 파일 여러개 미리보기 기능 구현 미리보기 이미지 클릭시 이미지 삭제 미리보기 이미지들을 서버에 전송할 수 있도록 배열에 저장 이번 프로젝트에서 메인 기능 중 하나인 갤러리는 여러 이미지를 서버에 보내고, 서버로부터 여러 이미지를 받아와서 화면에 뿌려줘야 한다. 가장 처음 단계는 태그를 통해 이미지 파일을 받아서 화면에 미리보기 표시를 해주는 것이다. JS로 어떻게 처리했는지 정리해보도록 하겠다. 결과화면은 아래와 같다. [JSP] 파일선택 우선 JSP 쪽의 태그는 위와 같다. 이전에 프로필 사진 기능 구현 내용을 정리하면서 이미지를 받는 태그의 name을 잘 설정해줘야 한다고 했다. 이유는 Spring에서 해당 name을 가지고, 전달받은 모델의 setter를 찾아 매핑하기 때문이다. 만약 Ajax.. 공감수 1 댓글수 1 2023. 7. 23.
[JavaScript, CSS, jQuery] SpringBoot : 캐러셀, 이미지 터치 슬라이드 목적 화면 터치를 감지하여 터치 드래그 시 이미지 슬라이드 전환 기능 구현 이전 글에서 한 화면에 꽉 차는 한 페이지 자체를 슬라이드 하는 기능을 만들어봤다. 페이지 슬라이드 기능에서는 터치를 감지해서 화면을 전환하지 않았지만, 상세 글 보기에 나오는 이미지 캐러셀은 인스타그램 게시물처럼 횡방향 터치 이동 시 전환되도록 만들고 싶었다. 아직 데이터가 없어서 이미지 소스나 개수 등을 동적으로 생성해서 처리하진 않은 상태지만, 슬라이드 기능이 메인이므로 정리해보도록 하겠다. 완성본은 아래와 같다. [HTML] 먼저 html 태그 구조는 아래와 같다. 야경 본 날 반포 한강공원 제목영역과 라디오 버튼은 흐름을 모두 보기 위해 가져왔고, 메인인 슬라이드 이미지 영역은 아래 그림과 같다. 태그 ID를 표시하기 위.. 공감수 0 댓글수 0 2023. 7. 18.
[JavaScript, CSS] SpringBoot : 페이지 슬라이드 목적 페이지 전환없이 좌우 슬라이드 기능 구현 스크롤 위치에 상관 없이 폼이 슬라이드로 등장했다가 제거시 슬라이드로 사라지도록 함. JavaScript와 css만 이용 진행중인 프로젝트의 갤러리 메인 페이지에서 글쓰기 버튼을 누르면 화면 오른쪽에서 슬라이드로 폼이 등장하는 기능을 만들고 싶었다. 나중에 웹뷰 앱으로 전환할 생각인데, 모바일 앱 UI상으로 페이지 새로고침은 자연스럽지 않으니 자연스레 연결해주는게 좋아보였기 때문이다. 근데 뭐.. 기본적으로 JS와 CSS, HTML밖에 다룰 줄 몰라서 여러 방법을 찾아봤으나.. 해결하지 못했다. fadeIn, fadeOut은 페이지 호출시에 opacity 조절을 통해 나름 자연스러워 보이게 할 수 있지만 슬라이드는(보기에는 별다를게 없어보이는데..) 어떻게 .. 공감수 0 댓글수 0 2023. 7. 15.
[JavaScript] SpringBoot 프로젝트 : 장소 검색(Kakao 지도 API) 목적 카카오 지도 API를 이용해 장소를 검색하고 주소를 찾아본다. 지도나 마커 표시 없이 장소 검색 목록만 가져와서 표시한다. 갤러리 형태의 게시판을 만드는데 글을 등록할 때 장소를 검색해서 함께 등록할 수 있는 기능을 만들고자 했다. 카카오지도 샘플에는 검색과 더불어 마커를 지도에 표시하는 기능도 있지만, 여기서는 검색된 목록과 주소만 필요하여 필요 없는 코드는 제거하고 기록을 남겨두도록 하겠다. 우선 미완 상태지만 현재 페이지 모습은 아래와 같다. 제일 하단에 위치한 장소를 입력하는 과정을 알아보겠다. [Kakao 지도 API] 일단 카카오지도 API 를 사용하기 위해서는 API KEY가 필요하다. KEY 발급을 위해 카카오 개발자사이트에 가입하자. https://developers.kakao.co.. 공감수 1 댓글수 1 2023. 7. 14.
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 인증번호 확인(JavaScript $ sign, resultView) 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난글에서는 네이버 이메일 기준 계정 설정, spring 설정 및 이메일 전송 처리 전반에 대해 정리했다. 이번 글에서는 Ajax로 리턴받은 인증번호와 회원이 메일을 통해 확인한 인증번호가 일치하는지 확인하고, 모든 값이 정상적으로 입력되었을 때 회원 정보가 DB에 등록되는 과정을 살펴보며 마무리하도록 하겠다. [데이터 흐름도] [MailController] Ajax 요청을 받은 컨트롤러의 코드를 다시 보자. @Controller public class MailController { @Autowired private MailService mailService; @Autowir.. 공감수 1 댓글수 0 2023. 7. 9.
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 이메일 전송(Naver메일 설정, JavaMailSender, MIME, SMTP) 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 이번 글에서는 이메일을 전달 받은 서버에서 인증번호를 생성하고 메일을 보내는 과정을 알아보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [이메일 설정] 먼저 SpringBoot를 기반으로 하고 있기에 dependency 추가와 설정을 해줘야 한다. 먼저 pom.xml에 dependency를 먼저 추가해보자. 다음은 application.yml에 설정을 해줘야 한다. 여기서는 네이버 메일을 사용했으므로 아래와 같다. username에는 발신 메일 주소(ex. test@naver.com)이 들어가고 password에는 해당 계정의 비밀번호가 들어가면 된다. 노출되면 안되므.. 공감수 0 댓글수 0 2023. 7. 8.
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 이메일 폼(<select>,<option>, JavaScript 변수, scope) 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난글까지는 회원가입 과정 중 아이디 중복확인 및 비밀번호 재확인, 전화번호 자동 하이픈(-) 기능을 살펴봤다. 이번 글부터는 이메일 인증 관련 부분에 대해 다뤄보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [JSP] 먼저 폼을 어떻게 구성했는지 보겠다. 이메일 처리 전반 또한 이전 프로젝트에서 팀원이 작성해둔 코드를 거의(일부 변경) 그대로 가져온 것이다. 서칭해보니 팀원도 다른 포스트를 참고하여 작성한 것 같아 첨부한다. 참고 : https://devofroad.tistory.com/43 이메일 @ naver.com gmail.com daum.net hanmail.. 공감수 0 댓글수 0 2023. 7. 7.
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 비밀번호 재확인, 전화번호 자동 하이픈(정규표현식) 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난 글에서는 아이디 중복체크 과정에 대해 정리했다. 이번 글에서는 흐름도엔 나와있지 않지만 JS로 비밀번호 재확인 과정과 전화번호 입력 시 자동으로 하이픈(-)을 넣어주는 기능을 정리해보도록 하겠다. [비밀번호 재확인] 우선 비밀번호 재확인부터 보자. [JSP] 비밀번호 비밀번호 재확인 디자인을 위한 태그를 제외하면 비밀번호 관련 코드는 위와 같다. 이전 글에서 설명했던 Spring 태그를 통해 비밀번호를 입력받았다. path가 곧 id와 일치하니 해당 id명만 기억하면 된다. [JavaScript] JS에서는 먼저 가입자가 최소 비밀번호 길이를 충족했을 때, 비밀번호 일치.. 공감수 0 댓글수 0 2023. 7. 1.
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 아이디 중복확인 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난 글에서는 전체적인 회원가입 과정 흐름과 가입 폼 태그 및 세부사항 등을 살펴봤다. 이번엔 회원가입 시 입력한 아이디 중복체크 과정을 알아보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [JSP] 다시 아이디 부분 태그를 보면 아래와 같다. 아이디 간단히 흐름을 먼저 설명하자면, 회원이 아이디 입력 후 "중복체크" 버튼 클릭 JS에서 Ajax로 서버에 회원이 입력한 아이디 전달 요청 받은 컨트롤러는 회원이 입력한 아이디가 DB에 있는지 확인 아이디 유무에 따라 문자열을 담은 Map 객체 반환 정도로 볼 수 있다. 일단 버튼 태그는 아래와 같았다. id로 confir.. 공감수 0 댓글수 0 2023. 6. 29.
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 회원가입 폼(<form:form>, <form:input>, <form:errors>, validation) 목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 두 번째 SpringBoot 프로젝트를 진행하면서 회원가입, 로그인 기능 구현을 맡았었다. 이전 프로젝트에서 다른 팀원이 진행했던 회원가입 기능 구현 코드를 거의 그대로 가져와서 이 프로젝트에 맞게 조금 변형하여 사용했는데, 이후 프로젝트를 위해 작성된 코드들을 하나씩 뜯어보고 리뷰해보도록 하겠다. 데이터 흐름은 다음과 같다. [데이터 흐름도] 회원가입 과정에서 필수적인 두 가지가 있다. 하나는 아이디 중복체크이고, 또 하나는 이메일 본인인증이다. 추가로 전화번호 입력과 비밀번호 확인도 있지만 해당 부분들은 JS에서만 처리 가능하여 흐름도엔 넣지 않았다. 이후 다루게될 내용엔.. 공감수 0 댓글수 0 2023. 6. 28.
[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(5) - PagingUtil 클래스 목적 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현 리스트 게시판 페이징 처리 받은 코드 리뷰 이제 마지막으로 PagingUtil 클래스 내부 코드를 보도록 하자. 이전 글에서 페이징 처리에 필요한 값들을 구하는 식을 봤으니, 이제 코드를 보면 쉽게 이해가 갈 것이다. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [PagingUtil 클래스] 우선 클래스 내부 코드를 보기 전 어떤 인자를 넘겨줬었는지 다시 보자. 아래는 컨트롤러에서 PagingUtil 객체를 생성하는 부분이다. PagingUtil page = new PagingUtil(keyfield, null, currentPage, count, 5, 5, "pointList.do"); 각 인자들이 무엇인지 앞에서 설명했지만.. 공감수 0 댓글수 0 2023. 6. 21.
[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(4) - 페이징 처리 수식 유도 목적 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현 리스트 게시판 페이징 처리 받은 코드 리뷰 우선 PagingUtil 클래스의 코드를 보기 전에 어떤식으로 동작하는지 알아야 한다. 이를 위해 이번 글에서는 페이징 처리에 필요한 수식을 유도해보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [페이징 처리] 우선 페이징 처리를 위해 어떤 값들이 필요한지 보자. 아래 계산들을 위해서 다음 값들은 필수적으로 가지고 있어야 한다. 현재 페이지 전체 게시물 개수 한 화면에 보여줄 게시물 수 한 화면에 보여줄 페이지 번호 수 [전체 페이지 수] 먼저 전체 게시물의 개수를 알고 있고, 한 페이지에 몇 개의 게시물씩 보여줄지 정했다면 전체 페이지 수를 구할 수 있다. 예를 들어, 전체 게시.. 공감수 0 댓글수 0 2023. 6. 20.
[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(3) - DB에서 리스트 불러오기(Mapper.xml, Generics, ROWNUM) 목적 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현 리스트 게시판 페이징 처리 받은 코드 리뷰 지난 글에서는 요청 받은 컨트롤러가 DB 내 테이블에서 페이징을 위해 원하는 행의 개수를 가져오는 과정을 살펴봤다. 이번에는 이어서 리스트를 불러오는 과정을 살펴보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. 컨트롤러의 코드를 다시 보자. [Controller - pointList.do] @RequestMapping("/mypage/pointList.do") public ModelAndView pointList(@RequestParam(value = "pageNum", defaultValue = "1") int currentPage, @RequestParam(value = "key.. 공감수 0 댓글수 2 2023. 6. 17.
[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(2) - DB 리스트 개수 가져오기(@RequestParam, ModelAndView, xml) 목적 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현 리스트 게시판 페이징 처리 받은 코드 리뷰 지난 글에서는 jsp가 컨트롤러에 어떤식으로 요청을 보내고, 받은 데이터는 어떻게 화면에 표시하는지 살펴봤다. 이번엔 요청 받은 컨트롤러가 데이터를 어떻게 처리하는지 알아보자. [데이터 흐름도] 데이터 흐름은 다음과 같다. 처음 포인트 페이지에 접근할 때 경로는 다음과 같았다. [Controller - pointList.do] 해당 경로로 매핑된 코드는 다음과 같다. 포인트 리스트를 표시하는데 필요한 코드들만 보도록 하겠다. @RequestMapping("/mypage/pointList.do") public ModelAndView pointList(@RequestParam(value = .. 공감수 0 댓글수 0 2023. 6. 16.
[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(1) - 페이징 화면에 보여주기 목적 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현 리스트 게시판 페이징 처리 받은 코드 리뷰 어떤 프로젝트를 진행하든 게시판 형태를 기반으로 하는 웹페이지가 대부분이다. 가장 기본적인 게시판 CRUD 중 read에 해당하는 코드들을 정리하고, DB에서 읽어온 데이터들을 페이징 처리하는 과정까지 알아보자. 마이페이지 개발 당시 회원이 이용권을 결제하면 일정 비율을 포인트로 전환해 사용할 수 있게 했다. 마이페이지 내에서 결제 내역과 적립 포인트 내역을 확인할 수 있는 페이지를 예로 처리과정을 알아보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. 설명하자면, jsp에서 페이징 버튼이 클릭되면, 클릭된 페이지와 검색필드가 GET방식으로 컨트롤러에 전달된다. 컨트롤러는 전달받은 검.. 공감수 0 댓글수 0 2023. 6. 15.
[Java] SpringBoot 프로젝트 : 프로필 사진 기능 구현(6) - 이미지 Ajax 전송 데이터 처리(@ResponseBody, @ModelAttribute) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록 관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 지난 글에서는 JS에서 FormData 객체를 통해 Ajax 방식으로 데이터를 컨트롤러에 전송하는 방법을 알아봤다. 이번 글은 마지막 과정인 컨트롤러에서 전달 받은 데이터를 처리하고 DB에 저장하는 코드를 보자. 데이터 흐름도는 다음과 같다. [데이터 흐름도] 이전 글에서 Ajax를 이용해 컨트롤러에 이미지 데이터를 넘겨줬다. [JavaScript - Ajax처리] 상기를 위해 코드를 다시 보면 다음과 같다. //파일 전송 let form_data = new FormData(); form_data.append('upload',.. 공감수 0 댓글수 0 2023. 6. 12.
[JavaScript] SpringBoot 프로젝트 : 프로필 사진 기능 구현(5) - 이미지 Ajax전송(FormData, Ajax parameter) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록 관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 지난 글에서는 JS로 회원이 업로드한 이미지 미리보기 기능까지 알아봤다. 이번엔 업로드한 이미지를 Ajax 방식으로 컨트롤러에 전송하는 방법과 이미지 등록 취소시 코드를 보자. 데이터 흐름도는 다음과 같다. [데이터 흐름도] 이전 글에 이어 JavaScript 코드를 보자. 먼저 기억해야할 태그들은 다음과 같았다. 닫기 변경 [JavaScript] JS로는 총 세 가지 기능을 구현했다고 했다. 내용은 다음과 같다. 회원이 input 태그를 통해 이미지 파일을 선택했을 때, 파일 크기 확인 및 화면에 선택한 이미지 미리보기 이미.. 공감수 0 댓글수 0 2023. 6. 11.
[JavaScript] SpringBoot 프로젝트 : 프로필 사진 기능 구현(4) - 이미지 미리보기(input type = "file", FileReader) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록 관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 지난 글까지는 기본이미지 또는 DB에 저장되어 있는 이미지를 가져와 JSP에 표시하는 과정을 살펴봤다. 그 과정에서 I/O Stream, VO, Mybatis, Tiles, AbstractView, Base64 encoding 등의 개념들도 짧게나마 정리했다. 이번 글 이후부터는 회원이 프로필 이미지를 등록하거나 수정할 때 처리과정을 알아보겠다. 데이터 흐름도는 다음과 같다. [데이터 흐름도] 일단 JSP쪽 코드부터 보자. [JSP] JSP의 코드는 아래와 같은데, 프로필 이미지와 관련된 태그들만 적었다. 프로필 사진 변경 닫.. 공감수 1 댓글수 0 2023. 6. 11.
[Java] SpringBoot 프로젝트 : 프로필 사진 기능 구현(3) - 추상 클래스(AbstractView, Tiles, Base64) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록 관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 지난 글에선 jsp가 컨트롤러에 이미지를 요청하면, 컨트롤러에서 기본이미지 또는 DB에서 꺼낸 이미지를 바이트 배열로 변환하여 모델에 저장하는 과정까지 살펴봤다. 이번 글에서는 컨트롤러가 마지막에 리턴하는 AbstractView인 imageView 클래스를 살펴보자. 데이터 흐름도는 다음과 같다. [데이터 흐름도] 상기를 위해 컨트롤러의 photoView.do로 매핑된 부분의 코드를 다시 보자. [Controller - photoView] @RequestMapping("/mypage/photoView.do") public St.. 공감수 0 댓글수 0 2023. 6. 10.
[Java] SpringBoot 프로젝트 : 프로필 사진 기능 구현(2) - 이미지 불러오기(Oracle DB, BLOB, MyBatis) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록 관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 지난 글에 이어서 이번에는 회원이 등록한 이미지가 있을 때 DB에서 어떻게 꺼내오는지 살펴보자. 데이터 흐름도는 다음과 같다. [데이터 흐름도] 지난 글에서 jsp가 MypageController에 요청을 보냈을 때 일어나는 처리까지 살펴봤다. 이제 회원이 등록해둔 프로필 이미지가 있는 경우 DB에서 불러오는 과정을 보자. [Controller - photoView] @RequestMapping("/mypage/photoView.do") public String getProfile(HttpSession session, Http.. 공감수 0 댓글수 1 2023. 6. 9.
[Java] SpringBoot 프로젝트 : 프로필 사진 기능 구현(1) - 이미지 byte[] 처리(FileInputStream, ByteArrayOutputStream) 목적 회원제 웹사이트 개발시 거의 필수적으로 사용되는 프로필 사진 등록 및 수정 기능 구현 프로필 이미지 등록관련 DB, Java, JS 처리 총 정리 일부 받아서 쓴 코드 리뷰 진행했던 프로젝트들의 코드를 다시 보며 시간을 들였던 기능들을 정리하고 있는데, 생각보다 이미지 처리하는 부분들이 어렵게 느껴졌다(기초가 없으니까..). 파일 처리나 이미지 처리 등을 담당해주는 코드를 받아서 적용만 했던터라 세부 내용에 대해 깊이 탐색해보지 않았던 것도 큰 요인으로 생각된다. 지금이라도 좀 더 자세히 기록을 남겨두기 위해 프로필 이미지 처리 관련 작업들을 몇 부분으로 나눠 작성해보겠다. [데이터 흐름도] 우선 큰 틀에서 어떤 과정을 거쳐 데이터가 변환되고 흘러가는지 그려보면 다음과 같다. 간략히 설명하자면, 마.. 공감수 0 댓글수 0 2023. 6. 8.
[Java, JS] SpringBoot 프로젝트 : 잔여시간 계산 및 차감 Ajax 처리 목표 시간권 구매 회원이 좌석 입실 시 실시간 잔여시간 차감 기능 구현 setInterval 사용하지 않아야 함. 페이지 이동 간 시간 계산이 지속적으로 이루어져야 함. 페이지 이동, 새로고침 등에 의해 시간 누수가 발생하지 않아야 함. [기본 로직] 모든 페이지에서 지속적으로 시간 계산이 이루어져야 하므로, 모든 페이지에 따라다니는 메뉴바에 JS파일 링크 JS세션에 입실했을 때 시간을 저장 JS의 Date 객체를 통해 현재 시간을 구함. 입실시간 - 현재시간 결과가 60이 되면, 즉 60초가 지나면 DB와 화면을 업데이트하는 function을 만들어 실행 퇴실 시 세션에 저장된 입실시간 제거 [문제점] JS는 유니티 update함수처럼 프레임마다 실행시켜주지 않아서 실시간 처리가 불가능→setInter.. 공감수 0 댓글수 1 2023. 6. 6.
[Java] SpringBoot 프로젝트 : LocalDate 활용 일주일 누적 시간 구하기 구현하고자 했던 기능 정의 로그인 한 회원의 마이페이지에 해당 회원의 주간 공부시간을 일별 그래프로 보여준다. 해당 주(ex. 2023.06.05(월)~2023.06.11(일))가 지나면 다음 주(ex. 06.12(월)~06.18(일)) 날짜가 그래프 하단에 표시된다. 회원이 하루에 입/퇴실을 여러번 한 기록 모두 그 날 하루의 누적 시간에 포함된다. DB에 회원의 총 누적 공부 시간과 일별 공부시간은 초기화 하지 않는다. 정리하면, 주가 바뀔 때 마다 DB에 저장된 시간 관련 데이터를 초기화 하지 않고 해당하는 주 데이터만 불러와서 그래프에 보여준다. [JAVA_controller] 일주일에 해당하는 날짜와 일별 누적 시간을 담아둘 배열을 선언했다. String[] setThisWeek = new St.. 공감수 0 댓글수 0 2023. 6. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.