본문 바로가기

Spring

[Next JS] Commerce Project #6 What to do? Google OAuth 회원가입 기능(Sign Up) 만들기 데모 로그인 버튼 클릭 구글 로그인 팝업창이 뜨면, 로그인 로그인 성공 새로고침하면 로그인된걸 볼 수 있음 데이터베이스 실제 정보가 들어간걸 확인 할 수 있음 Flow Google Login Google OAuth를 사용해 credential을 가져옴 View에서 Next JS API 요청 End Point : /api/auth/google-sign-in method : GET parameter : credential Nest JS에서 Spring 서버로 POST request End Point : localhost:8080/api/user/signIn payload : 회원정보 (username/email/imgUrl) .. 더보기
[Next JS] Commerce Project #4 What to do? 전체 상품목록 화면 2 정렬기능 검색기능 데모 영상 예제데이터 모카루 사이트를 활용해서 예제 데이터 생성 다운 받은 쿼리를 data.sql에 넣어주면, 앱이 실행될 때마다 해당 쿼리가 실행 insert into product (id, name, img_url, category, description, created_at, modified_at, created_by, modified_by, price) values (1, 'Cheese - Mozzarella, Buffalo', 'https://picsum.photos/id/1000/1000/600/', 'ELECTRONICS', '{"blocks":[{"key":"hfme","text":"test edit","type":"unstyl.. 더보기
[Next JS] Commerce Project #3 What to do? 전체 상품목록 화면 Paginiation Category 데모영상 Back End 코드 수정 data.sql mockroo라는 사이트를 활용해 예제 데이터 생성 Spring 앱을 실행할 때 DB에 예제 데이터를 넣도록 data.sql에 insert 쿼리 작성 insert into product (id, name, img_url, category, description, created_at, modified_at, created_by, modified_by, price) values (1, 'Cheese - Mozzarella, Buffalo', 'https://picsum.photos/id/1000/1000/600/', 'ELECTRONICS', '{"blocks":[{"key":".. 더보기
[Next JS] Commerce Project #2 What to do? 상품 목록 상세페이지 및 수정페이지 뼈대 만들기 Carousel 구현하기 상품 조회하기 상품 설명수정하기 데모 영상 Index 페이지 - Carousel 조회 페이지 - 상품 설명 조회 수정 페이지 - 상품 설명 수정 Back-End Project 이전 포스팅에서 Notion API를 사용했었다. 하지만 막상 사용해보니 너무 불편했다;; 그래서 Spring Boot로 간단한 Back-End Project를 만들어보았다. application.yaml Local PC에 My SQL을 설치하고, Commerce라는 데이터 베이스를 미리 생성 해당 데이터 베이스 연결정보를 적음 spring: datasource: url: jdbc:mysql://localhost:3306/commerce .. 더보기
[Spring] 간단한 SNS 만들기 #10 What to do? 포스팅 수정/삭제 기능 뷰 작성하기 기존에 작성한 Back-End 코드를 일부 수정하고, Front-end(React)코드 작성 마이페이지에서 내가 작성한 포스팅들을 확인할 수 있고, 여기서 포스팅의 수정 및 삭제가 가능 오류수정 (Repository) 이전에 @Query에서 작성한 쿼리에서 오류가 발생해서 앱이 실행이 안되었다. navieQuery=True 옵션을 주면 앱을 실행시켰을 때 잘 되서 해결된 줄 알았는데, 실제로 뷰 삭제를 동작하는 과정에서 오류가 발생했다. 원인은 컬럼명의 대소문자 구분을 못해서 일어난 오류였다. 단순히 removed_at → removedAt 로 쿼리를 수정하는 것으로 문제를 해결했다. CommentRepository.java @Repository .. 더보기
[Spring] 간단한 SNS 만들기 #9 What to do? 팔로우 기능 만들기 팔로잉, 언팔하는 뷰 기능 개발은 TODO 데모영상 마이페이지에서 ⓐ 내가 팔로우하는 사람 ⓑ 나를 팔로잉 하는 사람 List를 보여줌 팔로우 기능 데모영상 Domain FollowingType.java A라는 유저가 팔로우 관계를 조회할 때, ① A가 팔로우하는 사람을 조회할지 ② A를 팔로우하는 사람을 조회할지 구분이 필요 구분을 위해 public enum을 정의 @Getter @AllArgsConstructor public enum FollowingType { LEADER("팔로잉 당하는 사람"), FOLLOWER("팔로잉 하는 사람"); private final String description; } FollowingEntity.java Trouble Sh.. 더보기
[Spring] 간단한 SNS 만들기 #8 What to do? 좋아요 기능개발하기 기능구현한 모습 포스팅에 좋아요 누르면 포스팅은 다시 조회했을 때 좋아요가 표시됨 ⓐ 좋아요 누른 후, 좋아요 누름 → 좋아요 취소 ⓑ 좋아요 누른 후, 싫어요 누름 → 좋아요 취소 & 싫어요 감정표현 유형 EmotionType 없음 / 좋아요 / 싫어요 getOpposite : 반대되는 감정표현을 return @Getter @AllArgsConstructor public enum EmotionType { NONE("없음", 0L), LIKE("좋아요", 1L), HATE("싫어요", 2L); private final String description; private final Long seq; public EmotionType getOpposite(){ retu.. 더보기
[Spring] 간단한 SNS 만들기 #7 What to do? 포스팅 검색기능 만들기 제목, 본문, 해쉬태그, 글쓴이 검색기능 구현하기 검색기능 구현한 모습 검색유형 정의 검색유형 NONE : 검색사용 안함 → 전체 포스팅 조회 TITLE: 제목검색 HASHTAG : 단일 해쉬태그 (Exact Match) CONTENT : 본문 검색 NICKNAME : 닉네임 (Exact Match) SearchType.java @Getter @AllArgsConstructor public enum SearchType { NONE("검색사용 안함"), TITLE("포스팅 제목"), HASHTAG("단일 해쉬태그"), CONTENT("포스팅 본문"), NICKNAME("포스팅 작성자 닉네임"); private String description; } Reposit.. 더보기

티스토리툴바