본문 바로가기

Projects/SNS프로젝트10

[채팅]오픈채팅 구현 과정(이슈&해결) 지금 진행하고 있는 프로젝트가 SNS기능을 담당하는만큼, 채팅도 가능하게 하면 어떨까 생각했다. 그래서 생각한 것이 오픈채팅인데, 우선은 스프링부트로 채팅서버를 구현하려면 웹소켓에 대한 이해가 필요했다. 웹소켓에 대한 이해 웹소켓은 실시간 양방향 데이터 통신이 필요한 경우에 이를 가능케하는 프로토콜이다. 기존의 단방향 HTTP프로토콜과 호환되어서 양방향 통신(full duplex)을 제공하며, 일반 소켓통신과 달리 HTTP 80번 포트를 사용하기에 통상 웹소켓(Websocket)이라고 불린다. 모든 HTTP 통신에서 클라이언트는 서버에 요청을 보내고, 서버는 그에 맞는 응답을 하며 브라우저와 연결을 끊는다. 이러한 HTTP만으로 원하는 정보를 송수신할 수 있었지만, 클라이언트가 먼저 요청하지 않으면 서버.. 2022. 12. 23.
[소셜로그인] 페이스북, 구글, 네이버, 카카오 구현 프로젝트에 open auth를 지원하는 4사(페이스북, 구글, 네이버, 카카오)에 대해 소셜로그인 기능을 추가해보았다. 각각의 개발자 센터에 들어가서 application을 만들고, client-id와 client-secret id를 받았다는 전제하에 진행할 것이다. 1. pom.xml에 oath 라이브러리 추가 org.springframework.boot spring-boot-starter-oauth2-client 2. application.yml설정 scope에 적힌 public_profile, email와 같은 명칭은 정해진 형식이니 개발자센터에서 확인해야 한다. scope에는 각 리소스 서버(구글, 카카오 등)의 user DB에서 가져오고 싶은 정보를 명시한다. 네이버, 카카오와 같은 경우는 pr.. 2022. 12. 20.
[채팅] @ServerEndpoint 사용 시 DI가 안되는 문제 문제 발생 웹소켓을 이용한 채팅을 구현하는 도중 내가 정의한 @ServerEndpoint을 붙인 ChatService에서 다른 객체를 주입하지 못하는 상황이 발생했다. 즉, 아래와 같이 chatRoomService를 불러오지 못한다. @RequiredArgsConstructor @Service @ServerEndpoint(value="/chatroom/{roomId}/mychat/{userId}") public class ChatService { private final ChatRoomService chatRoomService; 원인 분석 @ServerEndPoint가 붙은 클래스는 웹소켓이 연결될때마다 객체가 생성되기 때문에 @Autowired가 설정된 멤버가 정상적으로 초기화되지 않는다. @Compo.. 2022. 12. 12.
[댓글] 댓글 구현하기(2) 댓글 구현(1) 편에서 ajax통신을 통해서 Comment객체를 제대로 불러오는 것까지 확인했다. 이제 불러온 Comment객체를 이용해서 화면에 뿌려야한다. ajax함수로 가서 done()부분에 다음과 같이 추가해준다. 이렇게 해서 실제로 댓글을 달아보면 다음과 같이 제대로 댓글이 달리지만 새로고침했을 때 다시 사라진다. --> story홈페이지를 불러올때 image와 함께 불러와야한다. 즉, Image모델에 comments 변수를 하나 만들어서 Image모델만으로 그에 딸린 댓글까지 다 볼 수 있도록 한다. Image테이블에 Comment테이블과 양방향매핑해준다. 또한 댓글을 id역순으로 불러올것이기 때문에 @OrderBy를 붙여준다. 이제 화면에 보여질 부분에 대해서만 forEach로 돌려서 모든 .. 2022. 2. 8.
[댓글] 댓글 구현하기(1) 1. 댓글 모델 생성하기 댓글에는 기본적으로 누가 썼는지, 어떤 이미지에 달린 댓글인지, 댓글 내용은 무엇인지에 관한 정보가 필요하다. ManyToOne연관관계를 사용하여 User, Image 테이블을 Eager(Default)전략으로 가져오는 방법을 사용한다. 2. ajax통신을 위해 .js(Client-side) 작성 jsp파일에 id값이 storyCommentInput-이미지번호 인 댓글작성input칸과, storyCommentList-이미지번호 인 댓글포스팅칸이 존재한다고 할때 댓글 내용과 이미지id 값을 json으로 변환한 후 서버에 전송한다. 3. APIController, Service, Repository 구성과 기능구현 이제 Server-side에서 데이터를 받아 처리하는 일만 남았다. .. 2022. 2. 7.
[회원가입] 회원가입 구현 ※ 사전에 User모델링을 마친 상태이다. jsp파일에 구현한 form태그에서 POST방식으로 요청할것이다. AuthController.java파일에서 다음과같이 PostMapping해주고 SignupDto를 사전에 만들어준다. DTO(Data Transfer Object)란 전송받을 데이터가 많은경우 이를 처리하기 위해 만든 클래스를 말하는데, 그 내부는 다음과 같다. 내부에 toEntity함수를 만들어서 받은 데이터로 user객체를 빌드하여 리턴하도록 했다. 그리고 회원가입 진행! Service단에서는 실제 회원가입 로직이 쓰여진다. 만들어진 user객체를 비밀번호를 암호화 한 후에 UserRepository에 저장한다. 근데 실제 회원가입을 진행하면 아이디가 20자가 넘으면 안되고, 같은 usern.. 2022. 1. 17.