아아 진짜 너무 귀찮습니다 아주 귀찮아요 SSE로 채팅 구현하는거? 진짜 너무나도 후회가 됩니다만 어쩔수없죠 이미 벌어진 일.. N개월간 실시간 채팅 버그 픽스했는데 글쓰는데도 N주가 걸린다니… 다들 추천하지 않는다면 그 이유가 있다는 것을 다시한번 깨닫습니다.(여러분도 명심하십쇼)기존 팀바팀에서 실시간 채팅을 구현한 방식은SSE 연결 → 이벤트 발생 → 채팅 조회 요청 → 렌더링의 무한 반복이었다. 채팅처럼 잦은 이벤트가 발생할 시 다수의 인원이 데이터 조회 요청을 보내니 서버에 과부하가 걸리는건 당연지사.. 팀바팀도 팀당 3명 이상의 인원이 동시에 요청을 보내면 채팅이 어마어마하게 느려졌다. 이를 위해 백엔드도 물론 조치를 취했지만 그보다 더 중요한 것은 조회요청을 알잘딱깔센하게 보내는 것.. (이거..
팀바팀 서비스를 우리가 직접 사용하며 느낀점은 팀 피드.. 실시간이었으면 어땠을까? 였다. 우리는 프로젝트하면서 팀 피드에서 토론을 했는데 다른 팀원의 의견을 보기위해서는 새로고침이나 창 바꿈이 필요하여 팀 피드를 사용하는 것이 현실적으로 많이 불편했다.🥸우리도 우리 서비스가 불편한데 사용자는 만족할 수 있을까?🥸라는 의견에서부터 나온 팀 피드 실시간화!🎊이 글에서는 SSE를 채택한 이유와 어떻게 구현했는지를 작성할 예정이다.왜 SSE 였을까?사실 SSE를 사용하는 것 보다 웹소켓을 사용하는 편이 다양한 문제를 만날 필요 없긴 하다.(당연함;; 웹소켓이 SSE 상위호환이니까) 그럼에도 팀바팀은 SSE를 선택했는데.. 아래에서 다른 방식도 설명하면서 이유를 정리해보겠다.HTTP 프로토콜 사용HTTP ..
프론트엔드 개발을 하다 보면 한번쯤은 ‘성능을 개선 할 예정입니다.’라는 말을 하게된다. 근데 문제는? 뭘 어떻게 해야 성능이란 것이 개선되냐 이말이다. 나도 이전까지는 최적화 하면 렌더링 최적화만 생각했는데 이번에 학습하면서 렌더링이 전부는 아니라는 것을 알게 되었다. 우테코 미션과 팀프로젝트 성능최적화를 하며 학습한 내용을 성능 최적화를 하게 될 미래의 나를 위해 작성한다.프론트엔드 성능 = 로딩성능 + 렌더링 성능(페이지가 얼마나 빨리 보이나 + 사용자 인터랙션에 얼마나 빠르고 효율적이게 반응하나)성능 측정 도구Lighthouse (개발자도구)WebPageTest'프랑스 파리에서 Fast 3G 환경으로 접속했을 때성능을 낮추는 문제들성능을 낮추는 문제들은 대체로 비슷한 유형이다. 다만 해결책은 시간..
대부분의 서비스들은 JWT 방식의 Access Token을 이용해 유효한 사용자인지 확인하고 서비스 접근권한을 허가해준다.그렇다면 Access Token만을 이용하여 인증을 진행한다면 어떤 문제가 있을까?Access Token의 유효기간이 길다면 제 3자에게 Access Token을 갈취 당했을 때를 대비하기 어렵다.Access Token의 유효기간을 짧게 한다면 로그인이 풀리게 되어 사용자가 자주 로그인을 다시 해야한다.라는 문제가 발생한다.Access Token의 유효기간을 짧게하여 토큰 남용을 줄이며 사용자가 겪는 불편함을 해결하기 위해 등장한 개념이 바로 Refresh Token이다.Refresh Token과 AccessToken은 형태자체는 동일한 JWT이다. 다만 Access Token은 사용..
팀바팀의 팀 피드 기능에 무한스크롤 기능이 있어서 구현해보았다. 사실 이 기능은 레벨3때 구현했는데 레벨4와서 요구사항이 바뀌는 바람에.. 정방향 무한스크롤(아래로 스크롤 할 때 무한스크롤)과 역방향 무한스크롤(위로 스크롤 할 때 무한스크롤) 둘다 구현하는 경험을 가져서 글을 작성하게 되었다.무한 스크롤 구현나는 useInfiniteQuery와 IntersectionObserver 사용하여 구현했다. 사실 스크롤 이벤트를 이미 사용하고 있기 때문에 스크롤 이벤트로 구현해도 되긴 하는데 계속 요구사항이 바뀌고 있어 현재 스크롤 이벤트를 사용하는 컴포넌트가 삭제가 될 수 있다는 점과 다음 fetch를 진행해야하는 트리거로 사용하기에 IntersectionObserver 가 좀 더 나에겐 편해서 사용하게 되었..
# JPA란?- ORM 기술 표준으로 사용되는 인터페이스 모음- 구현된 클래스와 매핑을 해주기 위해 사용되는 프레임워크# ORM이란?class와 관계데이터베이스의 테이블을 연결한다는 뜻으로 기술적으로는 객체를 관계게이터베이스 테이블에 자동으로 영속화 해주는 것## 장점- SQL문을 작성하지 않고 Method를 통해 DB를 조작할 수 있음- 각종 객체에 대한 코드를 별도로 작성하여 가독성 높임- 객체지향적인 코드 작성 가능- 유지보수 및 리팩토링 유리- 사용하는 DB가 바뀌더라도 쿼리를 수정할 필요 없음## 단점- 프로젝트의 설계가 잘못된 경우 속도저하 + 일관성을 무너뜨림- 복잡하고 무거운 Query는 속도를 위해 별도의 SQL문을 작성해야함- 러닝커브 존재# 사용법(엔티티)## @Entity- 일대일로..
