SPRING

[스프링] 쇼핑몰 - 비동기 장바구니 [2]

전 글에선 비동기 장바구니 부분의 추가 ( insert ) 부분을 작성했다. 이제 장바구니 목록과 삭제 부분을 작성해보려고 한다. 이번글에선 장바구니 목록 ( header 부분의 비동기 목록 ) 과 장바구니 뷰 (주문으로 넘어갈 수 있는 장바구니 페이지 ) 를 같이 설명해보겠다. 장바구니 header 목록 부분은 비동기로, 장바구니 뷰 페이지는 동기 방식으로 구현되었으나, 같은 mapper를 사용한다. (나중에 장바구니 뷰도 비동기로 할 걸 하는 후회가...) 먼저, 구현한 기능이다. 상품의 옵션별로 장바구니에 추가가 가능하고, 옵션이 중복되면 넣지 못하도록 구현했다. 장바구니에 추가 된 상품의 가격은 TOTAL 부분에 합쳐서 보이도록 했으며, 삭제하기 버튼을 누르면 해당 옵션이 삭제된다. Mapper ..

[스프링] 쇼핑몰 - 비동기 장바구니 [1]

이번 쇼핑몰 프로젝트에서 , header 부분에서 장바구니 목록을 보고, 상품내용페이지에서 상품을 장바구니에 넣고, 장바구니에 담긴 상품을 삭제하고, 담긴 상품의 총액이 변경되도록 하는 장바구니 부분을 비동기로 구현했다. 이번 프로젝트에서 가장 어려웠던 부분을 꼽자면 단연 이 비동기 장바구니 부분이라고 생각한다.. 구현할 때는 왜 이렇게 어려울까, 내가 아직 실력이 많이 부족하구나 등등 고민을 많이 하며 시간을 타 로직보다 많이 들여 구현을 했는데 , 나중에 검색해보니 쇼핑몰 프로젝트에서 어렵다고 꼽히는 로직이 장바구니라고 들었다... 그래도 혼자 힘으로, 내 머리속에 그려진 로직대로 설계해서, 성공적으로 구현을 완료하고나니, 뿌듯하기도 하고, 실력 항샹에 도움이 많이 됐다. ( 특히 js부분..) 로직..

[스프링]쇼핑몰 - 상품 등록

이번 프로젝트는 남성의류 쇼핑몰이다. 스프링과 오라클 , jsp를 사용해 구현했다. 저번 프로젝트에서 구현했던 회원이나 게시판등의 기능들도 구현했지만 쇼핑몰 기능 부분만 작성해보려고 한다. 먼저 로직의 설명이다. 기본정보에서 상품페이지에 표시 될 정보들을 입력한다 ( 카테고리 , 제목 , 내용 등...) 기본정보를 입력 후 , 옵션설정에서 옵션추가를 눌러서 원하는 만큼의 옵션과 수량을 입력 할 수 있다. 상품자체의 수량이 아닌, 상품의 옵션 ( 95, red / 100,blue ) 등 같은 제품이라도 옵션에 따라 수량이 다를 수 있기 때문 에, 쇼핑몰 재고관리의 편의성을 높이기 위해 이런 방식으로 구현했다. 다음은 이미지 설정이다. 메인이미지와 서브이미지를 올릴 수 있다. 로직순서는 상품테이블에 inse..

스프링에서 ajax 사용의 유형들

저번 프로젝트를 진행하면서 , ajax를 일부로 많이 사용해봤는데 , 역시 익숙하지 않은 방식이라 손에 겨우익은, 한가지 방식만을 사용해서 데이터를 주고 받았다. (그냥 map으로 넘기기) 프로젝트를 마무리하고 , 부족했던 부분이라고 생각했던 JS와 ajax를 더 공부하면서 여러가지 ajax의 데이터를 서버로 넘기는 유형들을 알게 되었고, 아 이렇게 사용했으면 훨씬 코드를 간결하고 , 개발자인 내가 정말 읽기도 , 사용하기도 편했겠구나.. 하고 느꼈다. 특히 success 부분을 사용해서, 프로젝트를 좀 더 이쁘게(?) 만들 수 있었을텐데... 라고 많이 생각이 났다. 일단 Ajax를 사용할때엔, @RequestMapping 이아니라 @ResponseBody 또는 @RestController를 이용했다...

IceWater 커뮤니티 프로젝트 마무리

IceWater 기능 구현이 마무리 됐다. 추가한 거의 모든기능에 대한 글을 작성했다. 누구에게 알려주기 위한 친절한 글은 아니였지만 , 그래도 글을 쓰기위해 머릿속에서 다시한번 정리하고, 로직을 생각하며 글을 생각한 덕분에 시간은 많이 걸렸지만 훨씬 깊은 이해를 하게됐다. 특히, 이해를 통한 응용에 참 많은 도움을 받았다. 중간엔 블로그에 이런 글로써 기록하는게 의미가 있을까 싶었지만, 나중을 위한 기록을 포함, 복습에도 좋았다. * 회원가입 비동기 유효성 검사 비밀번호 암호화 이메일 인증 -인증 비밀번호 암호화 * 로그인 인터셉터 활용 - 세션부여 - 자동로그인 - 로그인,비로그인시 접속 제한 아이디 찾기 비밀번호 찾기 - (임시비밀번호 메일) 소셜로그인 * 게시판 다중게시판 페이징 검색 정렬 - 최..

[스프링] 커뮤니티 관리자 페이지

Spring farmework로 구현한 , 커뮤니티 IceWater의 마지막 기능이다. 이제 AWS를 이용해 배포를 하면 끝이다. 처음부터 관리자페이지는 회원관리 외의 기능을 생각하지 않고 구현해서 간단하다. 회원목록, 회원정지 (기간설정) , 포인트부여, 관리자 지정, 회원삭제, 공지사항 목록, 공지사항 등록 , 해제 기능이다. 따로 어려운 부분은 없고, 그냥 쿼리에 입력값을 받아서 처리하는 부분뿐이라 설명은 생략하겠다.. Mapper.xml update MP_MEMBER set MEMBER_RANK = 1 where MEMBER_ID = #{memberId} SYSDATE ]]> select MEMBER_SANCTIONTIME from MP_MEMBER where MEMBER_ID = #{member..

[스프링] 소셜로그인 구현 - 네이버

이번엔 소셜로그인을 구현했다. 이제 관리자 페이지만 만들면 커뮤니티 프로젝트가 마무리 된다. 마지막으로 AWS EC2로 배포를 하고, 프로필이미지나 첨부파일 기능을 위한 로컬위치 변경과 몇가지 설정을 해주면 끝이다. 네이버 개발자센터로 가서 API 이용설정 Service URL 설정 Callback URL설정 을 해준다. Service URL은 http://localhost:8080로 적어줬고, callback URL은 로그인 연결시 , 호출할 URL을 적어주자. 로그인이 연결되어 데이터가 넘어오면 URL로 컨트롤러에서 해당값을 받아서 DB에 insert하거나, select해서 이미 insert되있다면 세션값을 줘서 로그인 시키는 등의 방법으로 활용하면 되겠다. Pom.xml com.github.scri..

[스프링] 커뮤니티 알림목록

전 글의, 웹소켓을 이용한 실시간 푸시알림과 같이 구현한 기능이다. 웹소켓의 값을 이용해 db에 저장되게 하기엔 지금 프로젝트를 마무리 할 시간에 너무 촉박하고, 아직은 웹소켓 사용에 익숙해지지 않았기 때문에 , ajax를 이용해서 구현했다. 뷰 var memberId = ${login.memberId}; //알람목록 function alramList(){ console.log("alramList") var memberId = "${login.memberId}"; $.ajax({ url : '/board/alramList', type : 'get', data : {'memberId' : memberId }, dataType : "json", success : function(data){ var a='';..

[스프링] 커뮤니티 실시간 푸시알림 - 웹소켓

이번엔 커뮤니티 실시간 푸시알림을 구현했다. 일단 대략적인 기능 설명을 해보자면, 커뮤니티 전역에서 사용하는 Header include 부분에 웹소켓기능을 추가해서, 로그인하면 어느부분에서든 실시간으로 웹소켓이 연결이되고, 글작성자의 글에 댓글, 좋아요, 스크랩, 댓글작성자의 댓글에 좋아요,채택 등의 로직이 일어났을 때, 작성자에게 푸시알림이 가고, 알림들을 모아놓고 볼 수 있는 모달창에서 최대 6까지 알림을 볼 수 있고( 최신순 ) 모달창의 버튼에는 알림이 몇개 왔는지 개수가 보이고, 알림을 클릭해서 해당하는 게시글에 들어갈때, 같은 게시글의 알림들은 모두 한번에 없어진다. 푸시알림은 웹소켓을 이용해서 만들었으며, 알림확인 부분은 ajax를 이용해서 만들었다. 웹소켓에 전해지는 이벤트의 데이터를 이용해..

[스프링] 메인페이지,인기글 구현 (블라인드 참고)

이번엔 블라인드처럼 메인페이지를 꾸며보았다. 토픽베스트에는 내 프로젝트에 맞춰서 글작성 후 7일 미만의 게시물 중 , 가장 높은 추천수를 받은 게시글순으로 출력, 아래의 카테고리별 베스트는 2일미만의 게시물 중 추천수 순으로 출력한다. 기능상으로는 어느정도 비슷하게 구현이 됐지만, 디자인이..ㅜㅜ 눈물이다.. 원래 디자인은 생각을 많이 하지 않고 기능적인 구현을 우선한 프로젝트지만 , 결국 완성하고 나면 디자인이 이뻐야 같은 기능이라도 더 돋보이게 되는 것 같다. 다음 프로젝트는 무조건 좋은 템플릿을 선정해서 꾸며보려고 한다. 일단 토픽베스트이다. Mapper.xml SELECT a.BNO, a.TITLE, a.CONTENT, a.WRITER, a.REGDATE, a.HIT, a.REPLYHIT, a.B..