인스타그램 [스프링부트]

최주호님의 인스타그램 레파지토리(front-end)를 fork 하여 진행한 프로젝트입니다.

프로젝트를 통해 프로필 페이지 구현, 좋아요 구현, 댓글 구현 및 OAuth2 까지 진행했습니다.

2023.07 ~ 2023.10

갤러리 보기

1. Git 설치 (형상관리 툴)

Git - Downloads

https://git-scm.com/downloads

설치 후 exe파일 실행시켜서 그냥 기본으로 계속 next 해서 설치해주자.

1. 프로젝트 환경설정

셋팅

git

jdk

java

sts4

환경설정

1. STS4 웹 개발 환경 셋팅

sts4 키면 런처가 켜지는데 Browse..클릭 후 원하는 폴더에 프로젝트명 폴더 생성.

윈도우의 경우에는 c드라이브에 workspace 폴더 생성 후 그 폴더에 springbootwork 폴더를 생성.

나는 폴더명을 springbootwork_sns로 잡았다.

2. STS4 환경설정

MariaDB란?

mySql에서 파생된 MariaDB

mySql이 오라클에 인수될때 mySql 개발자들이 나와서 MariaDB를 만듦. 그래서 거의 똑같다.

MariaDB 설치

Download MariaDB Server

REST API Release Schedule Reporting Bugs … Continue reading

https://mariadb.org/download/?t=mariadb&p=mariadb&r=11.1.1

windows OS 설치

들어가면

3. MariaDB 설치

sql

mariaDB

셋팅

환경설정

4. PostMan 및 JsonViewer 설치

fork 하기

인스타그램 프론단만 따로 작업해둔 프로젝트 깃소스 주소

EaszUp-Springboot-Photogram-Start

codingspecialist

주소 복사

5. 시작프로그램 다운로드(git)

셋팅

git

sts4

환경설정

application.yml 파일

이 파일의 용도를 알아야한다.

추상적이게 설명하면

음료 공장을 만드는 기술자

(1) 두번째 공장

6. yml파일 이해하기

컨트롤러란?

요청을 할 때마다 Java 파일이 호출된다.

스프링 부트는 Servlet(자바로 맵을 할 수 있는 기술)으로 만들어졌다.

Servlet 파일 자체가 자바 파일이다.

요청의 종류가 3개이면 3개의 Java 파일이 필요하다.

로그인 요청 → Login.java 파일에 요청

회원가입 요청 → Join.java 파일에 요청

게시글 쓰기 요청 → Write.java 파일에 요청

7. 스프링부트 Controller 기본 동작방식 이해하기

http 4가지 요청 방식

클라이언트가 웹서버에 요청

웹서버는 DB에 SELECT, INSERT, UPDATE, DELETE 요청을 해서 응답한다

(1) GET(동사) - 데이터 요청

(2) POST(동사) - 데이터 전송

http Body 필요 (Body에는 데이터가 담겨져 있다)

8. 스프링부트 Controller http 4가지 요청 방식

9. 스프링부트 Controller 쿼리스트링, 주소변수매핑

http body 데이터 전송하기(실습)

http header의 Content-Type 이해

쌀 포대기를 가지고 와서 두고가면 창고지기 입장에서는 저게 뭔지 풀어서 일일히 확인해야하는 번거로움이 생긴다.

내가 body 데이터를 전송할때 content-type을 명시를 해서 전달을 해야 받는 쪽에서 일을 수월하게 할 수 있다.

10. 스프링부트 Controller http body 데이터 전송하기

http 요청을 json으로 응답하기

11. 스프링부트 Controller JSON 응답하기

http 요청을 file로 응답하기

(1) .txt 파일 응답하기(기본경로는 resources/static)

(2) 스프링부트가 지원하는 .mustache 파일 응답하기

(3) 스프링부트가 버린 .jsp 파일 응답하기

.jsp 와 .mustache 파일은 템플릿 엔진을 가지고 있다

템플릿 엔진이란 html 파일에 java 코드를 쓸 수 있는 친구들이다.

12. 스프링부트 Controller HTML 응답

jsp 파일에 java 코드 사용

이 전 과정에서 a.txt파일을 응답 해봤는데 왜 템플릿 엔진을 왜 써?

java 코드 사용 가능하기 때문에

java코드 사용

13. 스프링부트 Controller JSP파일에 Java 코드 사용하기

http 요청 재 분배하기 -redirection

함수 2개가 있는데 1000줄 이후 결과 리턴하는거 까지 같은 두 함수다.

근데 결구 다른코드를 제외하고는 재사용 하는게 좋아보이는데

이때 요청한 주소는 away로 하고 응답을 home으로 응답할때를 redirection 이라고 한다.

http 상태코드 300번대

다른 주소로 요청을 분배한다.

14. 스프링부트 Controller HTTP 요청 재분배하기(redirection)

포토그램 인증 구현하기

시큐리티 세팅

photogram 프로젝트 서버 켜주고

http://localhost:8080만 쳐서 들어가도

http://localhost:8080/login 으로 진입 주소로 들어가진다.

15. 스프링부트 포토그램 인증 회원가입SecurityConfig 생성

포토그램 인증 구현하기

회원가입 구현

/photogram/src/main/webapp/WEB-INF/views/auth/signup.jsp 파일에 들어가서

이렇게 퍼블리셔가 만들어준 파일에 회원가입form 태그를 찾아준다

16. 스프링부트 포토그램 인증 회원가입 CSFR 토큰 해제

포토그램 인증 구현하기

회원가입 구현

username, password, email, name 을 받을 수 있는 Data Transfer Object를 만들거다

17. 스프링부트 포토그램 인증 회원가입 User 모델 만들기

포토그램 인증 구현하기

회원가입 구현

User 오브젝트에다가 SignupDto의 데이터를 넣을거다.

함수를 추가해주면서

18. 스프링부트 포토그램 인증 회원가입 완료

포토그램 인증 구현하기

회원가입 구현

회원가입할때 비밀번호 암호화나 권한관련해서 진행.

AuthService.java에서 회원가입 함수에 @Transactional 을 붙여주자

19. 스프링부트 포토그램 인증 회원가입 비밀번호 해시

포토그램 인증 구현하기

회원가입 구현

회원가입 관련해서 2가지 셋팅을 더 진행할 예정이다.

회원가입 관련된 데이터를 서버에 던져주면 서버가 받아서 JPA를 통해서 DB에 INSERT를 해준다

20. 스프링부트 포토그램 인증 회원가입 전처리 후처리 개념잡기

포토그램 인증 구현하기

회원가입 구현

전처리하기

AuthController.java

예시로 진행.

21. 스프링부트 포토그램 인증 회원가입 유효성 검사하기

포토그램 인증 구현하기

회원가입 구현

밸리데이션 체크 마무리를 해보자

갑자기 여기서

몇가지를 빈 상태로 가입버튼을 누르면 프론단에서 밸리데이션 체크를 따로 해주고 있는데 왜 필수값 어노테이션을 추가했는지에 대한 의문이 든다

22. 스프링부트 포토그램 인증 회원가입 @ResponseBody 사용하기

포토그램 인증 구현하기

회원가입 구현

컨트롤어드바이스에 대해서 진행

AuthController.java

23. 스프링부트 포토그램 인증 회원가입 글로벌 예외 처리하기

포토그램 인증 구현하기

회원가입 구현

공통 응답DTO를 만들거다

저번에 핸들러 관련해서 맵으로 리턴하게 만들면서 “유효성 검사에 실패함” 이라는 메세지는 띄우질 못했다.

메세지를 같이 띄우고 싶은데 map타입이라 메세지를 못던진다.

24. 스프링부트 포토그램 인증 회원가입 공통 응답 DTO 만들기

포토그램 인증 구현하기

회원가입 구현

signup.jsp에서

maxlength="20" 를 추가해주면

25. 스프링부트 포토그램 인증 회원가입 공통 응답 Script 만들기

포토그램 인증 구현하기

로그인구현

db에 쌀 유저에 대한 데이터 1개만 있도록 만들고

로그인화면하고 관련있는 signin.jsp 에서 로그인폼에

action 하고 method를 추가해주자.

26. 스프링부트 포토그램 인증 로그인 UserDetailsService 이해하기

27. 스프링부트 포토그램 인증 로그인 완료

28. 스프링부트 포토그램 인증 로그인 View 연결하기

포토그램 인증 구현하기

로그인구현

보통 세션에 저장될때는 key value 방식으로 저장되는데

시큐리티 관련된 정보가 세션에 저장될때는 저렇게

securityContextHolder → Authenticantion → PrincipalDetails → User오브젝트

이런식으로 꺼내서 써야한다… 너무 복잡해진다.

29. 스프링부트 포토그램 인증 로그인 세션정보 확인해보기

30. 스프링부트 포토그램 인증 회원정보수정 시큐리티 태그라이브러리

포토그램 인증 구현하기

회원정보 수정 구현

이제 회원정보 수정을 진행 할거다.

update.jsp 부분에서 프로필 수정 form태그 부분에

PUT 같은 경우는 이렇게 넣어서 진행 할 수 없다.

31. 스프링부트 포토그램 인증 회원정보수정 Ajax 사용하기

포토그램 인증 구현하기

회원정보 수정 구현

DB에 Update를 진행해볼거다.

전에 UserUpdateDto.java에서

entity만들면서 수정이 필요했다고 한 이유가

32. 스프링부트 포토그램 인증 회원정보수정 완료

33. 스프링부트 포토그램 인증 회원정보수정 유효성 검사하기

34. 스프링부트 포토그램 인증 회원정보수정 Optional 처리하기

35. 스프링부트 포토그램 구독하기 연관관계 개념

36. 스프링부트 포토그램 구독하기 모델만들기

포토그램 구독하기

구독하기, 구독 취소하기 API를 만들거다

데이터만 리턴하는 컨트롤러를 생성할거다

web 폴더 안 api 폴더 안에 SubscribeApiController.java 생성

구독하기와 구독취소하기 틀을 만들어줬다

37. 스프링부트 포토그램 구독하기 구독,구독 취소 API 만들기

포토그램 구독하기

postman으로 테스트 하기전에 DB에 유저 데이터가 없기 때문에

3명을 가입시켜주자

ssar / cos / love 이렇게 가입시켜준다

38. 스프링부트 포토그램 구독하기 예외처리하기

포토그램 구독하기

기존에 SecurityConfig.java에서

를 막아줬었는데 이번에 /api/** 도 추가해준다.

39. 스프링부트 포토그램 구독하기 API 주소 시큐리티 설정

프로필 페이지 구현

1.포토 이미지 등록

-multipart/form-data

-UUID

40. 스프링부트 포토그램 프로필 페이지 Image 모델 만들기

프로필 페이지

프로필 페이지

이미지 업로드하는 컨트롤러를 완성할거다

ImageController에 imageUpload함수를 만들어주는데

Image.java에 있는 caption도 받고 파일(postImageUrl를 받는게 아니라)을 받을거다

41. 스프링부트 포토그램 프로필 페이지 Image 서버에 업로드하기

프로필 페이지

프로필 페이지

upload 라는 폴더를 왜 포토그램 프로젝트 내부에 안두고 외부에 뒀냐면

포토그램에는 Java코드가 있다

42. 스프링부트 포토그램 프로필 페이지 upload 폴더를 프로젝트 외부에 두는 이유

프로필 페이지

프로필 페이지

이미지 저장 경로와 캡션 내용을 이제 데이터베이스에 저장해볼거다.

ImageService.java에

이렇게 쓰면 빨간 오류 찍 난다….

43. 스프링부트 포토그램 프로필 페이지 Image DB에 업로드하기

프로필 페이지

44. 스프링부트 포토그램 프로필 페이지 Image 유효성 검사하기

프로필 페이지

프로필 페이지

업로드한 이미지를 뷰 화면에 랜더링 해볼거다.

프로필화면으로 이동하게 하는 함수를 찾아서 이미지 데이터도 같이 넘겨줘야한다.

UserController.java

45. 스프링부트 포토그램 프로필 페이지 양방향 매핑 이해하기

프로필 페이지

프로필 페이지

이제 전달받은 데이터를 화면에 알맞게 출력만 해주면된다.

들어가면 엑박이 뜬다.

46. 스프링부트 포토그램 프로필 페이지 Image 뷰 랜더링하기

프로필 페이지

47. 스프링부트 포토그램 프로필 페이지 open in view 개념잡기

프로필 페이지

프로필 페이지

이제 회원정보 변경 누르면

no session 오류가 뜬다.

48. 스프링부트 포토그램 프로필 페이지 회원정보 수정 오류 해결하기

프로필 페이지

프로필 페이지

게시물 갯수을 노출해보겠다.

49. 스프링부트 포토그램 프로필 페이지 게시물 개수 뷰 랜더링하기

프로필 페이지

50. 스프링부트 포토그램 프로필 페이지 DTO로 페이지 완성하기

프로필 페이지

구독하기 뷰 랜더링

1. 구독상태

2. 구독자수

구독자 수 값을 체크하기 위해 UserProfileDto 에

51. 스프링부트 포토그램 구독정보 뷰 랜더링 구독정보 완성하기

구독정보 뷰 렌더링

구독 정보 뷰 랜더링

구독하기 버튼을 누르면 구독이 취소되고 구독하게 만들거다.

profile.jsp 에서 구독관련 버튼을 보면은

해당 클릭 함수가 있는 js로 간다.

52. 스프링부트 포토그램 구독정보 뷰 랜더링 구독 및 구독취소 구현하기

구독정보 뷰 렌더링

구독 정보 뷰 랜더링

구독정보 클릭할때 구독자 정보가 뜨게 만들어준다.

profile.jsp에서

퍼블이 만든 함수가 profile.js에 있다

53. 스프링부트 포토그램 구독정보 뷰 랜더링 구독 모달 정보를 위한 API 만들기

구독정보 뷰 렌더링

구독 정보 뷰 랜더링

구독정보 관련해서 쿼리를 짜볼거다.

ssar로 로그인하고 cos의 프로필가서 구독자 정보를 가져올거다

54. 스프링부트 포토그램 구독정보 뷰 랜더링 조인과 스칼라 서브쿼리

구독정보 뷰 렌더링

55. 스프링부트 포토그램 프로필 페이지 DTO로 페이지 완성하기

프로필 페이지

56. 스프링부트 포토그램 구독정보 뷰 랜더링 QLRM 라이브러리로 DTO 매핑하기

구독정보 뷰 렌더링

구독 정보 뷰 랜더링

profile.jsp에 구독정보 모달을 호출하는 함수는

57. 스프링부트 포토그램 구독정보 뷰 랜더링 구독모달 정보 렌더링 완료

구독정보 뷰 렌더링

58. 스프링부트 포토그램 구독정보 뷰 랜더링 구독 모달 정보에서 구독 및 구독취소 구현하기

구독정보 뷰 렌더링

59. 스프링부트 포토그램 스토리페이지 포토리스트 API 만들기

스토리페이지

스토리 페이지

2. Ajax로 포토 리스트 가져오기

스토리 로드 하는 js에 가서 ajax로 데이터를 불러올거다.

우선 임시로 셋팅해서 확인

60. 스프링부트 포토그램 스토리페이지 포토리스트 뷰 렌더링하기

스토리페이지

스토리 페이지

3. 페이징 처리하기

지금 뿌려주는걸 3개씩 뿌려주게 페이징 처리를 할거다.

ImageApiController.java

61. 스프링부트 포토그램 스토리페이지 페이징하기

스토리페이지

스토리 페이지

스크롤로 당기면 3건을 더 로드할수있게 수정해본다

story.js에 스토리 스크롤 페이징하기로 써져있는 주석으로 가서

62. 스프링부트 포토그램 스토리페이지 스크롤 페이징 로딩 구현하기

스토리페이지

63. 스프링부트 포토그램 좋아요 구현 Likes 모델 만들기

좋아요구현

좋아요 구현

2. 좋아요 API 만들기

likes 폴더 안에 LikesRepository.java 인터페이스 생성

service 폴더 안에 LikesService.java 생성

64. 스프링부트 포토그램 좋아요 구현 좋아요 및 좋아요취소 API 구현하기

좋아요구현

좋아요 구현

3. 좋아요 구현하기

현재는 모든 타임라인에 하트가 눌려져있어서 내가 하트를 누른 글에만 하트가 빨간색이게 해줘야한다

active가 있으면 빨갛게 하트가 되고 없으면 흰색 하트로 변경된다

65. 스프링부트 포토그램 좋아요 구현 좋아요 뷰 랜더링

좋아요구현

좋아요 구현

좋아요 카운트를 처리한다

Image.java에다가

카운트를 위한 컬럼 하나 추가. (DB에는 추가하지 않는다)

66. 스프링부트 포토그램 좋아요 구현 좋아요 카운트 뷰 렌더링

좋아요구현

67. 스프링부트 포토그램 좋아요 구현 좋아요 구현 완료

좋아요구현

좋아요 구현

무한참조 버그를 잡아보자..

전에도 계속 테스트하면서 무한참조때문에 갑자기 타임라인에 구독 이미지들이 안뜨는 현상이 있었는데

이번에 잡아본다

application.yml에서

68. 스프링부트 포토그램 좋아요 구현 무한참조 버그 잡기

좋아요구현

인기 페이지 구현

좋아요가 있는 사진들을 순서대로 출력 (좋아요가 많은 순으로 출력)

ImageController.java로 와서 인기페이지를 구현할거다

기존의 popular 함수에 추가해준다

69. 스프링부트 포토그램 기타 기능 구현 인기 페이지 구현 완료

기타 기능 구현

유저 프로필 페이지 좋아요 카운트 구현

70. 스프링부트 포토그램 기타 기능 구현 프로필 페이지 좋아요 카운트 구현

기타 기능 구현

71. 스프링부트 포토그램 기타 기능 구현 프로필 페이지 유저 사진 변경

기타 기능 구현

72. 스프링부트 포토그램 댓글 구현하기 Comment 모델 만들기

댓글 구현하기

Comment 서비스 만들기

service 폴더에 CommentService.java 생성

73. 스프링부트 포토그램 댓글 구현하기 컨트롤러, 서비스 만들기

댓글 구현하기

댓글 쓰기

story.js에서 getStoryItem 함수에

댓글 달기 관련 소스가 있다

id 부분의 뒤에 1 숫자가 고정되서 id로 변경해준다

74. 스프링부트 포토그램 댓글 구현하기 댓글쓰기 Ajax 함수 만들기

댓글 구현하기

이제 실제로 댓글 값을 받아서 DB에 insert 해볼거다

dto 폴더 안에 comment 폴더 생성 후 CommentDto.java 생성

CommentApiController.java

75. 스프링부트 포토그램 댓글 구현하기 댓글쓰기 완료

댓글 구현하기

이제 내가 쓴 댓글을 맵핑해준다

그 전에 유저 데이터 중에 유저가 등록한 images 에 대한 데이터는 필요가 없다!

Comment.java 에서 @JsonIgnoreProperties 추가해주자

76. 스프링부트 포토그램 댓글 구현하기 뷰 렌더링

댓글 구현하기

이제 삭제버튼 누를때 삭제가 되야한다.

그리고 x 버튼 자체가 본인이 쓴 댓글에만 보이게 해줘야한다.

그럴려면 principalId 값이 필요한데

header.jsp 에서 body 태그 바로 밑에

77. 스프링부트 포토그램 댓글 구현하기 댓글 삭제하기

댓글 구현하기

78. 스프링부트 포토그램 댓글 구현하기 유효성 검사하기

댓글 구현하기

AOP 처리

유효성 검사 AOP 처리

Aspect Drientied Programming

79. 스프링부트 포토그램 유효성검사 자동화 AOP처리 1탄

유효성검사 자동화

ValidationAdvice.java에 이어서 aop 작업을 해준다

함수의 매개변수에 어떤게 있는지 알아볼수있는 작업을 해준다

다시 타임라인에 가볼려니까

80. 스프링부트 포토그램 유효성검사 자동화 AOP처리 2탄

유효성검사 자동화

81. 스프링부트 포토그램 OAuth2 페이스북 로그인 앱 등록 및 앱 설정

페이스북 로그인

82. 스프링부트 포토그램 OAuth2 페이스북 로그인 회원정보 받기

페이스북 로그인

이제 회원정보를 가지고 회원가입을 할거다

OAuth2DetailesService

근데 페이스북 로그인할때마다 회원가입시키면 안된다

한번 회원가입된 유저라면 있는 유저인지 체크해줘야한다.

83. 스프링부트 포토그램 OAuth2 페이스북 로그인 구현 완료

페이스북 로그인

84. 스프링부트 포토그램 최종테스트

최종테스트