웹 전체적인 UI도 좀 더 웹페이지 같게 바꾸었다. 여전히 아직 뭔가 수상한 웹처럼 보이지만 그래도 그 전보다는 나아진 것 같다. 로그인 완료시 헤더에 로그인 중인 사용자의 이름이 뜬다. 계정을 선택해서 성공적으로 로그인 되면 다시 이전 화면으로 돌아온다. 로그인 된 경우 local storage를 살펴보면 access token과 로그인 중인 사용자의 email, name 등이 들어가있는 것을 확인할 수 있다. 아직 하나도 안 꾸몄다 ㅋ 이렇게 로그인 유지 기능 구현 끝 ~~~~

관련 도메인 OAuth2UserInfo package com.frombooktobook.frombooktobookbackend.security.user; import java.util.Map; public abstract class OAuth2UserInfo { // 키-값 쌍의 일반 Map에서 사용자의 필수 세부 사항을 가져오는데 사용 protected Map attributes; public OAuth2UserInfo(Map attributes) { this.attributes = attributes; } public Map getAttributes() { return attributes; } public abstract String getId(); public abstract String getEm..

드디어 로그인 유지 기능 구현 ! 이 부분에서 정말 많은 시간을 보냈다. 헤매기도 많이 헤매고 조금 힘들었지만 그만큼 다 해냈을 때 성취감은 말로 이룰 수 없었다. 일단 이전 로그인 구현은 react-google-login이라는 라이브러리를 사용해서 프론트단에서 access-token을 바로 얻게되었다. 하지만 이전 포스팅에도 적어놨듯이 이게 여간 찝찝한게 아니었다 .. 구현은 되긴 하는데 (비록 이메일과 이름만 받아오는거긴 하지만) 보안상으로도 엄청난 실수를 하는 느낌. (그치만 이 라이브러리가 존재하는 이상 어떻게 어떻게 안전하게 구현할 수 있는 방법이 있을 것 같기는 하다.) 그래서 google server에서 authorization code를 받은 뒤 백엔드 서버에 보내고, 백엔드단에서 goog..

auth.jwt package com.frombooktobook.frombooktobookbackend.auth.jwt; import lombok.RequiredArgsConstructor; import org.springframework.security.core.Authentication; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.util.StringUtils; import org.springframework.web.filter.OncePerRequestFilter; import javax.servlet.FilterChain; import javax.servlet.Se..

이제 로그인 기능 구현이다. 생전 처음 들어보는 oauth2 를 사용하느라 여기저기 블로그도 많이 돌아다니고 유튜브도 많이 들락날락거렸다. ( 인증-인가에서부터 시작해서 oauth의 역할, session, cookie, jwt 기본 개념 공부도 자연스럽게 하게 되었다. ) 책에서 spring boot로 oauth2 google api를 통해 로그인을 구현하는 예제를 봐서, 이걸 토대로 열심히 코드를 짜다가 . . . 난관에 부딪혔다. 책에서는 view를 mustache로 구현하는데, 지금 나는 프로젝트에서 react라는 다른 프레임워크를 통해 view를 구현하고 있기 때문이었다. 처음에는 뭐 큰 차이가 있겠나 싶었다. 지금 내가 현재 구현한 back oauth 방식 + 뷰는 react로 짜는 법을 열심히..

목록 보여주는 기능은 그래도 좀 수월하게 짰다. 오류가 별로 안 나서 (나더라도 이해할 수 있는 오류) 오류 때문에 지체되는 시간이 적었다. UI는 역시 아주 대충 짰다 아무래도 나 미적 감각 없는 듯 대충 어떻게 어떻게 만들고싶다는 생각은 있지만 아직은 기능부터 구현하는게 먼저인 것 같아서 일단 미뤄둔다. 아직 페이지네이션도 구현 안 했고 진짜 기본적인 것만 짰다. (그래서 수월하게 짰던 듯 ㅎ) 이제 페이지네이션 구현하고, 웹사이트처럼 보이도록 header도 달고 뒤로가기도 추가하고 해야겠다. 더보기 구현 코드 Backend - PostListResponseDto package com.frombooktobook.frombooktobookbackend.controller.post; import com...

포스트 작성 구현 전에 oauth 관련 설정 + 클래스를 만들어 놨었는데 이것 때문에 얼마나 고생했는지 ... post 관련된 controller, service 다 만들어놓고 테스트를 해보는데 계속 뚱딴지 같은 응답이 서버에서 날아왔다. json 형태도 아니고, postman 이용해서 모든 post 요청을 보낼 때마다 구글 로그인 관련 html이 redirect되어서 response로 전달되었다. 인텔리제이 내에서 테스트할 때는 expected: 200 ok , got: 302 found 가 계속 .... 뭐가 문젠지 한참 몇 시간을 들여다보고 고쳐보고 하다가 결국 그냥 oauth관련 서비스 클래스들을 다 없애고 관련 dependency까지 전부 다 삭제해주니까 완전 멀쩡히 돌아가는 테스트 ^^ 그냥 ..

package com.frombooktobook.frombooktobookbackend.controller.post; import com.frombooktobook.frombooktobookbackend.domain.post.Post; import com.frombooktobook.frombooktobookbackend.service.PostService; import lombok.RequiredArgsConstructor; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.Post..

- UserCreateRequestDto.java @Getter @Builder public class UserCreateRequestDto { private String email; private String nickname; private String password; public User toEntity() { return User.builder() .email(email) .nickname(nickname) .password(password) .build(); } } - UserControllerTest.java @SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT) public class UserControllerT..

본격적으로 프로젝트 개발에 들어가기에 앞서, 백엔드 - 프론트엔드를 연동하여 데이터를 주고받는 방법을 먼저 알아보았다. 우선 백엔드 서버는 8080, 프론트엔드 서버는 3000으로, 서로 다른 포트끼리 데이터를 전달할 것이므로 가만히 두면 CORS 에러가 발생한다. 서치해본 결과, 이를 방지하기 위해서는 프론트엔드의 package.json에 프록시를 등록하면 된다. - package.json { "name": "frombooktobook-frontend", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.4", "@testin..