활동들~/Help Todo (개인프로젝트) (7) 썸네일형 리스트형 [백엔드 기록] SSE와 소켓 Help Todo 서비스는 팀 단위 투두리스트 서비스이다. 같은 팀에서 투두리스트를 수정할 경우, 다른 팀원들의 투두리스트를 수정된 데이터로 업데이트해주어야 한다. 나는 이 부분을 웹 소켓의 Pub/Sub 방식으로 해결하려고 했다. 구독, 발행 방식을 구현하는 중, SSE라는 걸 알게 되었고, 해당 데이터 노티 기능은 SSE로 구현하는 것이 적합한거 같아 SSE에 대해 찾아보았다. SSE란 ? Server-Sent-Event의 약어로, 클라이언트가 HTTP를 통해 서버에서 자동 업데이트를 받을 수 있도록 하는 서버 푸시 기술이다. SSE ↔️ 소켓 방향성 SSE는 서버에서 클라이언트로 데이터를 전송해주는 단방향 푸시 기술이다. 소켓은 서버와 클라이언트가 서로 데이터를 주고 받을 수 있는 양방향 기술이다... [문제 기록] NEXT.JS(SSR) Error: Text content does not match server-rendered HTML. 문제 상황 프로젝트 진행 중, 팀원이 들어간 팀 페이지에서 새로고침을 할 경우, 페이지의 데이터들이 사라졌다. 해당 데이터들을 유지하고자, Zustand의 Persist를 이용해 Storage에 저장을 해주고 테스를 해보니 아래와 같은 에러가 발생하였다. 원인 분석 해당 에러코드는 SSR에서 나타나는 문제로, 서버 측의 렌더링된 결과와 브라우저에서 렌더링된 결과가 달라서, 생기는 문제이다. todoTableData는 zustand의 Persist로 생성한 저장소인데, 코드 상에서는 아래와 같은 부분에서 "?"이 문제를 발생시킨다. 해결 Zustand Persist된 데이터들은 HTML에서 ? 연사자(삼항 연산자) 혹은 && 연산자를 이용하지말고, 아래와 같이 데이터를 먼저 체크 후, 리턴해 준다. 만약,.. react JWT 토큰 저장, 가져오기 쿠키 훅 등록 위와 같이 useCookies를 가져와서 훅으로 등록 해준다. react-cookie 설치 : npm i react-cookie const [cookie, setCookie, removeCookie] = useCookies(['id']) cookie : 쿠키 변수 setCookie : 쿠키 변수 등록 removeCookie : 쿠키 삭제 'id' : id라는 이름으로 쿠키 변수 생성 쿠기 저장 및 조회 이후, 백엔드에 jwt 토큰 요청 후, 받은 토큰을 setCookie(저장할 이름, 값)으로 저장하며, 저장된 쿠키 값을 꺼낼 때는 const [cookie] = setCookie(["id"]) // ... console.log(cookie.id) 이런식으로 사용해주면 된다. Axios로 J.. [문제 기록] 클라이언트에 응답 시, JPA 양방향 객체 무한 참조 문제 상황 Team 목록을 클라이언트에 넘겨 줄때, 아래와 같이 무한 참조 현상이 나타났다. 문제 원인 코드 @RequestMapping(value = "/team/findTeamList") public ResponseEntity findTeamList(){ List allTeams = teamService.findAllTeams(); if (!allTeams.isEmpty()) { return ResponseEntity.ok().body(allTeams); } return null; } Team은 소속 멤버에 대한 테이블인 JoinTeams를 가지고 있다. 또한, JoinTeams는 Member와 양방향 관계를 가지고 있다. 이때, Team 객체의 정보를 불러올 때, JoinTeams를 가져오고, Jo.. [에러] Builder 패턴 중 NullPointExepction 프로젝트의 객체들에 Builder를 추가하고 테스트하는 중 에러가 발생하였다. 에러의 문구는 아래와 같았다... java.lang.NullPointerException: Cannot invoke "java.util.List.add(Object)" because the return value of "HelpTodo.helptodoBackend.domain.Team.getJoinTeams()" is null 에러 발생 코드 //Team 클래스 @Entity @Builder @Table(name = "team") @AllArgsConstructor @NoArgsConstructor @Getter public class Team { @Id @Column(name = "team_name") private Stri.. [개발 기록] 백엔드 Spring Security 리팩토링 시큐리티 Configguration 리팩토링 기존의 WebSecurityConfigurerAdapter 으로 설정했던 스프링 시큐리티를 SecurityFilterChain으로 리팩토링하였다. 컨트롤러 응답 리팩토링 기존에는 요청에 대한 응답을 String 문자열로만 응답했었다. 상태코드, 헤더, 바디를 설정해서 보낼 수 있도록 ResponseEntity으로 응답하도록 리팩토링하였다. (이후, 프론트엔드에도 알맞게 수정해야한다.) JWT Filter 추가 백엔드에서 Jwt를 도입하기 위해, 시큐리티 체인에 추가할 Jwt 필터를 추가하였다. JwtUtil 클래스 추가 사용한 라이브러리 : io.jsonwebtoken:jjwt:0.9.1 Jwt 클래스를 추가하였다. Jwt에 담기는 데이터들은 아래와 같다. u.. Help Todo 프로젝트 Help Todo 서비스란? Todo, Doing, Done 3가지로 나누어진 기존의 Todo List를 팀단위로 이용할 수 있도록 제작한 웹 서비스입니다. 기술 스택 1. 프론트엔드 React.js Next.js Bootstrap Styled-component zustand Axios 2. 백엔드 Spring Boot Spring Security Jpa H2(개발용), MySQL(배포용) 3. 인프라 GCP AWS (GCP를 사용 중이지만, 이후 AWS로 옮길 수도 있음) Docker Help Todo의 기능들 로그인 간단한 회원가입 로그인 팀 개설 팀 개설 (비밀번호 설정 가능) 팀 참가 투루리스트 투두리스트 테이블 생성 Todo / Doing / Done 카드 추가 Drag&Drop으로 Todo D.. 이전 1 다음
