의문점 공부하기 102

💻 메세지 구별(P&S)

Problem: 채팅할때 내가 보낸 메세지와 상대방이 보낸메세지를 구분하는 로직을 추가해도 작동하지 않음 Solution: senderd와 received로 구별한 로직을 보내는 sender, received가 아닌 ID값으로 바꿔서 received의 ID값이 내 ID와 다르면 상대측 메세지로 표시되도록 로직 변경 Why? 구분하는 로직을 sender와 received로 나눠서 나와 상대방을 구별했으나, stomp방식으로 인해 모든 메세지는received로 반환이 되어 모든 메세지가 상대방으로 표시됨

💻 로그인 이슈3(P&S)

Problem: 로그인 직후 로그인 처리가 되지 않던 이슈. 유저가 소셜로그인을 하면 redirect로 연결되는 oauth2/ 경로는 OAuth2RedirectHandler로 연결되어 토큰값을 확인하고 Login 처리가 되어야 하지만 바로 페이지에 반영되지 않던 이슈가 발생 Solution: Client의 로직. login(소셜로그인) -> handler(토큰o) -> login(로그인완료) How: OAuth2RedirectHandler에서 토큰을 확인 한 후에 window.location으로 login을 다시 시도하여 Token 값이 포함된 경우 로그인이 성공하게끔 해결

💻 로그인 이슈(P&S)

Problem : 구글 로그인 이후 카카오,네이버 developers에서 토큰을 받아오지만 토큰에서 email,name 등 칼럼값들이 추출이 안되어 로그인이 실패했던 문제가 발생 Solution : 소셜타입 마다 info를 두어서 각자에 맞는 객체형태로 받을 수 있게정제하여 받는 attributesResponse를 설 How: 카카오,네이버,구글 로그인을 provider 로 구분하여 각 타입에 맞는 service를 생성하여 db에 유저 정보를 저장

🧾로그인에 대해 ++

클라이언트 사이드 vs 서버사이드 소셜로그인을 구현하는 방법은 크게 두 가지다. 하나는 클라이언트 사이드에서 플랫폼과 정보를 주고 받는 것이고, 다른 하나는 서버사이드에서 정보를 주고 받는 것이다. 클라이언트 사이드는 1) 클라이언트에서 정보를 플랫폼에 발송 2) 플랫폼에서 클라이언트로 토큰 발송 3) 클라이언트에서 서버로 토큰 전달 4) 서버에서 토큰을 가지고, 플랫폼에 유저 정보를 요청 5) 유저 정보와 서버에서 생성한 자체 토큰을 클라이언트로 전달하는 과정으로 진행된다. 서버 사이드는 1) 클라이언트에서 정보를 플랫폼에 발송 2) 플랫폼에서 서버로 토큰 발송 3) 서버에서 토큰을 가지고 플랫폼에 정보 요청 4) 유저 정보와 서버에서 생성한 자체 토큰을 클라이언트로 전달하는 과정으로 진행된다. 클라이..

JPA

JPA: Java Persistence API JPA는 자바 진영에서 ORM 기술 표준으로 사용하는 인터페이스의 모음 ORM이란? ORM은 DB와 실제 객체간의 간격을 매핑해주는 Object Relational Mapping 기술 +DB의 CRUD 동작을 모두 메소드로 처리할 수 있게 한다. JPA는 인터페이스의 모음으로, 구현체가 따로 없다. 일반적으로 사용되는 구현체는 Hibernate가 존재 JPA를 왜 써야하나? JPA 장점 Query문 작성 실수를 피할 수 있다. Query같은 경우는 컴파일 시, 오류가 여부 검사가 어렵다 실제로 해당 쿼리가 동작하는 기능이 수행되어야 하기 때문에, 배포 후 오류가 발견된다면...? 협업 상황 시, 다른 사람 코드를 이해하기가 더 쉽다. JPA 단점 정형화 되어..

🧾프로젝트할때 고려할거

젠킨스 자동배포/수동배포 - Jenkins란 지속적 통합 및 지속적 배포(CI/CD)를 지원하는 도구, 소프트웨어 개발 및 배포 프로세스를 자동화하고 최적화하는 데 사용된다. 자동 배포 (Automated Deployment): 자동 배포는 CI/CD 파이프라인의 일부로 작동하며, 코드 변경 사항을 자동으로 테스트하고 배포 소스 코드 변경이 주기적,트리거에 따라 자동으로 배포 배포 프로세스는 사람의 개입 없이 자동화되며, 대개 스크립트 또는 도구를 사용하여 정의된다 장점: 속도와 일관성- 빠르고 일관된 배포 프로세스를 통해 소프트웨어 업데이트가 신속하게 이루어지고, 사람의 개입을 줄여 오류 감소 지속적인 배포 가능- 새로운 변경 사항이 항상 배포 가능한 상태로 유지 단점: 복잡성: 자동 배포 파이프라인을..

🧾 채팅 (Emotion Connector)

**STOMP 메시징 프로토콜을 사용한 메시지 전달 과정** 1. **메시지 송신 (SEND)**: 클라이언트는 메시지를 생성하고 이를 발신자(Sender)로서 서버로 보냄 2. **메시지 수신 및 라우팅 (Controller)**: 서버는 @MessageMapping 어노테이션이 적용된 컨트롤러에서 메시지를 수신하며, 메시지의 내용을 분석하고 처리 3. **목적지 설정 (Destination)**: 발신자는 메시지에 목적지(destination)를 지정합니다. 이 목적지는 메시지를 전달할 위치를 나타냅니다. 예를 들어, "/topic/someTopic" 또는 "/app/someApp"과 같은 경로를 사용 4. **메시지 라우팅 (Routing)**: 목적지가 "/topic"으로 설정된 경우, 메시지는 ..

🧾얼굴인식 (Emotion Connector)

.사용자가 채팅방에 입장하려하면 사진찍는 모달창이 뜬다. 컴포넌트가 마운트 되는순간 카메라 권한을 요구하고 권한이 수락되면 즉시 카메라에 찍히는 영상을 화면에 출력한다. 입장버튼을 누르면 영상을 캡쳐하여 이미지파일로 만든후 axios로 만든 이미지파일을 백엔드 서버로 보낸다 백엔드 서버는 파일을 받아서 네이버 클라우드 얼굴인식 API로 넘긴다. 얼굴인식 API는 받은 파일을 분석하여 결과값을 다시 백엔드 서버로 전송한다. 백엔드 서버는 감정분석 결과값을 처리하여 프론트서버로 전송한다 프론트서버에서는 백엔드서버로부터 받은 감정정보를 통해 사용자를 해당 감정에 맞는 채팅방으로 입장시킨다. 이동할때 컴포넌트가 디스마운트 되는순간 카메라 접속을 끊는다

🧾로그인(Emotion Connector)

사용자가 소셜 로그인 요청을 시작 백엔드는 OAuth 인가 요청을 위해 해당 소셜 로그인 제공자의 인가 엔드포인트로 리디렉션 사용자는 소셜 로그인 제공자의 로그인 페이지로 리다이렉트 사용자가 소셜 로그인을 완료하면, 인증 서버로부터 Authorization Code가 응답 백엔드는 Authorization Code를 사용하여 엑세스 토큰을 요청 백엔드는 엑세스 토큰을 획득 엑세스 토큰을 사용하여 유저 데이터를 소셜 로그인 제공자의 리소스 서버에서 요청 획득한 유저 데이터를 DB에 저장하고, JWT 엑세스 토큰을 생성 엑세스 토큰을 프론트엔드 리다이렉트 URI의 쿼리스트링에 담아 리다이렉트 프론트엔드는 토큰을 저장하고, API 요청 시 헤더에 Authroization: Bearer {토큰}을 추가하여 요청..