김미썸코딩

1. 사용자의 카카오로그인 아이디인 이메일주소를 웹의 아이디로 설정한다. 2. 만약 카카오로그인으로 로그인하는 것이 처음인 경우, 필수정보(닉네임 등)를 설정하기 위해 회원정보수정창으로 이동한다. 3. 만약 카카오로그인이 처음이 아닌 경우, 일반로그인과 같다. [설정] 가장 먼저 kakao developer에 로그인해서 애플리케이션을 하나만든다. 그러면 해당 애플리케이션은 아래처럼 앱키를 받는다. 이 중 아무거나 선택해서 사용하면 되는데 난 JavaScript 키를 사용했다. 아래의 플랫폼을 클릭한다. 플랫폼을 클릭한뒤 아래로 내리면 Web 설정이있다. 여기서 내 사이트 도메인 주소를 추가한다. (하나밖에 안됨) 난 원래 http://localhost:8081 이었는데 NCLOUD에 호스팅한 이후로 NC..

다른 사람 프로필 사진을 누르면 그 사람의 프로필 페이지로 이동이된다. 다른 사람 프로필 페이지에선 최초로 쪽지를 보낼수 있고, 쪽지함에서 쪽지를 보낼수도 있다. 다만, 새로운 메세지가 왔을 때 실시간으로 바로 반영이 되지 않고, 새로고침이 실행될때 반영이 되기때문에 몇초마다 페이지 전체 혹은 일부가 리로드 되는 코드를 추가해야한다. *** 순서 *** 1. 구현 완료 모습 2. DB 테이블 구축 3. 코드 3-1. JSP 3-2. Controller 3-3. DAO 3-4. TO 3-5. SQL(mapper) 1. 구현 완료 모습 1) 다른 사람 프로필에서 메세지 보내기 2) 메세지함에서 메세지 보내기 2. DB 테이블 구축 #######메세지 관련 DDL######### create table mes..

사진자랑 게시판(게시판명: picture)의 '무한스크롤', '검색' 기능을 예로 들었다. 검색한 경우에도 똑같이 무한 스크롤이 적용되어야 하므로 무한스크롤과 검색 기능을 같이 구현하였다. *** 순서 *** 1. 구현 완료 모습 2. 코드 2-1. JSP 2-2. Controller 2-3. DAO 2-4. TO 2-5. SQL(mapper) 1. 구현 완료 모습 1) 무한 스크롤 2) 검색 검색 결과 갯수와 검색 결과가 출력된다. 검색 결과가 많은 경우, 무한스크롤로 구현된다. 2. 코드 2-1. JSP > views > picture > picture_list.jsp ▶ 검색란, 무한스크롤로 가져온 리스트가 들어갈 부분 html 제목 내용 작성자 위치 검색 글쓰기 글쓰기 ${totalRow } 개의..

사진자랑 게시판(게시판명: picture)의 '댓글' 기능을 예로 들었다. picture 게시판에선 카드리스트에서 카드를 클릭하면 나오는 모달창에서 댓글 아이콘을 클릭해야 댓글들을 볼 수 있고, 댓글과 대댓글 작성이 가능하다. 자신이 작성한 댓글은 인스타그램처럼 수정은 불가능하고 삭제만 가능하다. *** 순서 *** 1. 구현 완료 모습 2. DB 테이블 구축 3. 코드 3-1. JSP 3-2. Controller 3-3. DAO 3-4. TO 3-5. SQL(mapper) 1. 구현 완료 모습 모달창에서 댓글 아이콘을 클릭해야 댓글을 볼 수 있고, 댓글 작성이 가능하다. 다음은 답글 작성 과정인데 댓글 작성도 이와 유사하다. 내가 작성한 댓글은 삭제 버튼이 나온다. 2. DB 테이블 구축 #사진자랑 게..

사진자랑게시판(게시판명: picture)의 '좋아요'기능을 예로 들었다. picture 게시판은 카드 리스트가 있는데 카드리스트에서 카드를 누르면 카드의 상세내용 모달창이 뜬다. 카드 리스트와 모달창에서 하트를 누르는게 모두 가능하도록 구현한다. *** 순서 *** 1. 구현 완료 모습 2. DB 테이블 구축 3. 코드 3-1. JSP 3-2. Controller 3-3. DAO 3-4. TO 3-5. SQL(mapper) 1. 구현 완료 모습 위처럼 카드들이 나열된 형태의 게시판이다. 카드를 누르면 해당 카드의 모달창이 뜨도록 구현하였다. 여기서 '좋아요'기능은 하트svg 로 구현하였다. 아래처럼 리스트에서 하트 클릭이 가능하고.. 카드를 클릭하면 나오는 모달창에서도 하트클릭이 가능하다. 2. DB 테..

[Spring - WebSocket을 활용한 채팅 서비스 구현] : 네이버 블로그 (naver.com) [Spring - WebSocket을 활용한 채팅 서비스 구현] 안녕하세요!! 이번 포스팅은 Spring WebSocket을 이용하여 채팅을 구현해보겠습니다. 여러 웹 사이트에... blog.naver.com Spring - WebSocket (실시간 연결 상태, 알람, 채팅 등) (tistory.com) Spring - WebSocket (실시간 연결 상태, 알람, 채팅 등) ---------------------------------WebSocket---------------------------- WebSocket - 브라우저와 웹서버간의 전이중통신을 지원하는 프로토콜이다. - HTML5버전부터 ..