진행 내용

어떤걸 만들까 생각해보다가 네이버에서 영화 리스트를 보여주던게 사라진게 생각나서 한번 장르별 최신영화 Top 100을 보여주는 웹 프로젝트를 진행해보았다.

영화관련 데이터는 TMDB api 를 이용하여 영화 데이터를 가져오고 상단에 영화 이름 검색을 통해서 영화를 가져올 수 있게 해달라고 요청을 하였다.

아래는 실행 화면이다.

중간중간에 장르별로 카드 형식으로 보여주는 형식이나 웹 화면 크기에 맞춰서 변경하는 자잘자잘한 요청을 계속해서 해당 화면이 만들어졌다.

영화 카드를 클릭하면

해당 영화의 상세 내용과 예고 유튜브 영상을 가져올 수 있게 되있다. 상세 화면의 경우에도 처음에는 이미지만 가져온다던가 유튜브영상을 가져오지 못하거나 크기가 안맞는 이슈가 많았는데 이 경우에는 처음 전달을 잘 못했는지 화면을 바꿀려고 해도 제대로 못바꿔서 직접 수정을 하는 귀찮은 점이 있었다.

후기

node.js 를 써본 적이 없었는데도 ai에 맡겨서 node.js를 통한 프로젝트트를 만들 수 있는게 신기했다.

아직 다 만든건 아니지만 하면서 느낀 것은 간단한 프로젝트의 경우에는 ai에 상세하게 설명해주고 단계까지 이야기 해주면 좀 더 그럴싸하게 만들어준다는 장점이 있다. 물론 ai가 코딩하다보니 내가 모르는 기술을 사용하는 경우도 있기 때문에 ai가 짠 코드를 한번씩 읽어보면서 학습도 되는 거같다.

현재는 최신영화 기준 Top100으로 진행되지만 나중에는 AI를 추가하여서 추천영화를 넣는 것도 한번 해보고 검색 기준을 추가로 넣어보던지 여러가지 추가해볼 예정이다.

https://github.com/YunJiW/MovieRecommand

기본 v1 버전 api의 경우

/v1/join

• post 로 받아서 해당 데이터 등록진행.

/v1/join

"id" : "testID"

"password" : "testpw"

"phone" : "01012345678"

"sido" : "seoul"

"roadAddress" : "서울 성북구 무슨무슨가 887"

"zonecode" : "45678"

우편번호 서비스를 사용하기 쉽게 주소 잘 넣기.

• 나중에 프론트엔드쪽에 도입해볼 예정

Daum Postcode Service User Guide

회원 객체

• 이름
• 비밀번호
• 전화번호
• 주소

주소의 경우 하나의 객체로 묶어서 저장하기

@Embeddable 과 @Embedded 사용

• 하이버네이트에서 제공하는 임베디드 타입으로 된 주소 객체를 관리.

postMan으로 회원가입이 되는 지확인.

• 데이터를 받을때 requestBody에 받아서 json 으로 들어오게 진행

회원가입 테스트 완료

• 중복 회원가입 테스트 완료
  • 같은 회원가입 진행시 중복회원으로 오류 발생

회원가입까지 완료

• 다음 확인해야할것들

로그인 쪽 만들기.

로그인

로그인까지 만들고 마이페이지 이동하면 마이페이지 데이터 보여주기.

• 이름
• 전화번호
• 주소
• 나중에 주문 정보 보여줄 예정
  • 추후 주문 객체를 추가하면서 추가 예정

로그인의 경우 springsecurity를 사용중이기 때문에 로그인 부분은 security에서 진행.

• FE에서 데이터를 받아올려고 하니까 기본 springSecurity는 Form 을 기준으로 데이터를 전달 받다보니 Json 형식으로 받기 위해서는 filter 및 전체적으로 전부 바꿔줘야한다.

• userDetailService를 커스터마이징해서 member에 있는 데이터를 가지고 login 구현 진행.

Json을 통해 로그인을 진행할거기 때문에 fomlogin은 disabled 진행

• 기본 방식은 formlogin은 사용하지 않겠다고 설정을 추가.

로그인 방식 json으로 변경하기

• rest api 형식으로 진행하려다보니까 기본적인 form 로그인 방식이 아닌 json 형식으로 받아서 진행하려고 한다.

• 그렇기 때문에 json으로 받기 위해서는 커스텀 인증 필터를 통해서 http 요청의 json 본문에서 자격 증명이 필요하다.

public class CustomAuthenticationFilter extends AbstractAuthenticationProcessingFilter {

    private final ObjectMapper objectMapper = new ObjectMapper();

    public CustomAuthenticationFilter(String defaultFilterProcessesUrl){
        super(defaultFilterProcessesUrl);
    }
    @Override
    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException, IOException, ServletException {

        Map<String,String> authRequest = objectMapper.readValue(request.getInputStream(),Map.class);

        String username = authRequest.get("username");
        String password = authRequest.get("password");

        UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(username,password);

        return getAuthenticationManager().authenticate(authToken);
    }

}

• json으로 요청온 본문에서 username과 password를 읽어서 가져오기.

로그인 및 회원가입까지 진행되었으니 이제 메인인 상품 게시판 부분부터 상품과 주문관련해서 진행해야한다.

트러블 슈팅

• order 명령어를 생각하지 않고 만들려고 했던 것

  • 테이블이름을 orders 로 바꿔주던가 객체 자체를 orders 로 바꾸기.

• 로그인 시에 json 인증방식을 활용하는 방식을 처음 하다보니 filterchain을 잘못걸어서 설정을 아예 초기화시키고 다시하는 방식을 사용했다.

  • 로그인은 제대로 되는데 회원가입에서 access_denied 가 모든 경로를 다 열어놨을 때도 발생하여 아예 security를 초기화 시키고 다시 진행.

• springsecurity 부분은 기본적으로 form에서 지원됨
  • 그렇기 떄문에 json 인증방식을 사용하려면 필터 및 대부분을 해당 사항에 맞춰서 바꿔줘야함.

상품 등록은 판매자만 가능(개발과정에서는 전부 가능하게 하고 제대로 작동하는게 확인되면 admin만 가능하게변경)

• admin만 상품 등록,수정, 삭제 가능

• name

• category

  • 종류 객체 추가.

• quantity

• price

• type

  • enum

상품과 카테고리의 관계

• 하나의 상품은 여러개의 카테고리를 가질 수 있음
• 하나의 카테고리는 여러개의 상품을 가질 수 있음.
  • 다대다
    • 둘 사이 다대일 일대다 관계로 나타내기

공통적인 부분 BaseEntity 만들기

• id
• createDate
• modifyDate

정도는 전부 포함되어있는 공통 변수기 때문에 추상클래스인 BaseEntity를 통해서 관리 진행

• 부모클래스에 속한 모든 필드를 사용하기 위해서 @superBuilder를 사용
  • 자식 객체가 부모 객체의 필드를 builder 패턴을 사용할 수 있게 해준다.

만들어 둔후에 postman에서 해당 상품 추가가 제대로 도는 지 먼저 확인

• 아무나 신청가능하게 먼저 구현

조회시에 itemDto를 통해서 필요한 것들만 보내게

특정 상품 조회 기능 추가 진행

• 파라미터를 통해서 이름을 통해서 찾기.
• 특정이름이 포함되어있는지 확인하여 찾기를 통해서 여러개의 데이터를 가져올 수 있도록.

public List<Item> findAllByItemName(String name) {
    return itemRepository.findAllByNameContaining(name);
}

상품 수정

• item id를 이용해서 값을 수정하는걸로
  • 나중에는 admin만 가능
  • 현재 생각나는 방법은 post 를 이용해서 데이터 수정방법
  • patch 와 put 을 사용하는 방식은 나중에 해보자.

카테고리의 경우 없는 카테고리인 경우 카테고리는 만들어주기

상품 삭제

• id를 통해서 해당 id 상품을 삭제
• 현재는 개발 편의를 위해 admin이 아닌 로그인을 하지 않아도 삭제가 가능하게 진행
  • 이 부분은 주문까지 전부 완료 후 권한을 통해서 제어예정

트러블 슈팅

Jackson이 Hibernate 프록시 객체를 직렬화할 수 없는 문제로 오류 발생

• DTO를 통해서 필요한 데이터를 전달하여 직렬화 문제 해결
• 프록시 객체의 경우 직렬화가 불가능하기 때문에 DTO로 필요한 값만 넘겨줌으로써 프록시 객체가 아닌 값으로 넘겨줌.
  • 기본적으로 lazyloding을 사용중이기 때문에 프록시 객체가 넘어가게 됨
  • DTO 를 통해서 원하는 값만 바인딩 시키면서 프록시 객체가 넘어가지 않게 조정

• vscode tool을 이용해서 vue 프로젝트를 관리할 예정
• 설치 했지만 vue 프로젝트를 만드는데 오류가 발생

vue 연동하면서 발생했던 오류과 해결

• 파워쉘 보안 오류가 발생.
  • window powershell을 관리자 권한으로 켜서
  • Set-ExecutionPolicy Unrestricted 해당 코드 실행
    • 모든 스크립트를 허용처리로 바꿔줌.
    • 근데 보안상 문제가 있을거 같아서 다른 방법 이용

파워쉘이 아닌 git bash 터미널 이용

• vue create 프로젝트명
  • 프로젝트 생성 -> 프로젝트 명에 따라서 해당 프로젝트가 만들어진다.

프로젝트가 만들어진 후 에디터로 해당 폴더 오픈 후 시작

• 오픈하고나서 해당 서버가 제대로 작동하는지 확인해보고 싶은경우
  • npm run serve 를 통해 서버를 구동 해볼 수 있음.

springboot와 연동해서 사용할 것이기 때문에 springboot가 기본적으로 사용하는 8080포트를 vue 도 사용하기 때문에 vue의 포트를 8081 포트로 변경해준다.

• 변경 방법 package.json에서 serve에 뒷부분에 --port 8081을 넣어줘서 변경

간과하고 있던점

• vue 프로젝트를 springboot 프로젝트 내부에 만들어야한다는 점
  • 아무리 생각해도 바깥에서 만들면 절대 연동이 안될거 같은 느낌을 찾아보면서 느끼게 되어 자세히 보니 전부 프로젝트 내부에 만들었다는것을 알게 됨.
    • 당연하게 생각해야했던점을 아예 분리되어생성한다고 생각했다.

https://www.chiakpeach.com/

맨위에 로고 만들고 누르면 홈으로 가게

• 메뉴의 각 페이지는 누르면 이동이 가능함.
  • 상품을 구매하거나 후기 게시판이 글을 쓸려하는경우 로그인 페이지로 이동

홈을 만들어서 해당 페이지가 제대로 뜨는지 확인하고

복숭아 보이는 종류 다넣으면서 최대한 늘려보기.

기본적으로 rest api 설계를 해보고 싶어서 백엔드와 연결은 rest api로 해볼 예정이다.

api 설계

• 접근하는건 https 를 보안이 포함되게 진행
  • 역방향 프록시에만 SSL 인증서를 발급받아서 적용시키게되면 다음으로 연결되는 웹서버쪽은 SSL을 적용하지 않아도 된다.
    • 이부분이 중요점.

https://npm.도메인 ) 으로 npm 콘솔에 접근할 수있도록 추가

• 구글 정책으로 기본 https를 사용한다고 해서 추가적으로 npm 콘솔에 접근하기 위해서 SSL 인증기를 추가하여 https 를 사용하여 보안 진행.

  1. dnszi에서 *.도메인이름 을 레코드로 등록

     ​ npm.도메인네임 이 해당 ip로 전달될 수 있도록.

     • 등록이 될때까지 delay가 한 10 분정도 있어서 그 뒤에 진행하는 게좋다.
       • 기다리지 않고 하게 되면 등록이 안되어있어서 연결이 안됨.

  2. 등록한 뒤에 npm 에서 proxy host를 추가

     • npm.도메인네임으로 들어오게되면 172.17.0.1:81 로연결되게
     • 여기서 SSL 부분

• 새로운 ssl 인증을 만들어주면서 저장해준다.
  • email은 원래 작성해야한다.
    • 해당 부분을 보여주기 위해서 잠시 지웠습니다.

마찬가지로 게시판 프로젝트로 연결되는 도메인에도 ssl 인증을 추가

• 접속을 해보면 자물쇠 표시가 들어가면서 https 적용이 되는것을 확인할 수 있다.

여기까지 AWS ec2 프리티어 서버를 활용하여 배포를 진행해보았다.

• 물론 개인프로젝트이면서 가벼운 프로젝트를 배포를 진행하는 것이기 때문에 그렇게 까지 중요한 일은 아니였지만 배포를 아예 안해보는 것보다는 배포방식에 대해서 이해하는데 꽤 도움이 됬다.
• docker를 활용하여 이미지를 만들어 docker 컨테이너로 돌리는 게 훨씬 편하면서 포트 받는 것도 설정이 가능하여 직접 내가 서버에서 돌리는 것보다 훨씬 나았다.
• nginx_proxy_manager를 통해서 도메인으로 요청할때 해당 요청이 발생시에 npm에서 요청을 gui를 통해서 관리하다보니 시각적으로 설정하기도 편했고, 거기에 npm 단에서 ssl 인증 처리를 하기 때문에 뒤에 웹서버 자체에 ssl 작업을 안해도됬던것도 굉장히 좋았다.

• 이전에 설명으로 적어놨듯이 도메인을 설정하지 않는다면 기본적으로 사용성이 떨어지기 때문에 도메인을 가비아에서 사서 이용해보자.

프로젝트 테스트 용도로 했기 때문에 가비아에서 이벤트로 1년 계약시 싼 도메인을 이용했다.

가비아에서 산 도메인을 내가 현재 배포연습으로 aws ec2 서버에서 docker로 배포중인 파일에 dns 설정을 해보자.

도메인을 산 후에 도메인관리 시스템 이용

DNSZI

1. 해당 도메인을 등록 후 받은 네임서버로 가비아에 설정된 네임서버를 변경해준다.
2. 해당 ip에 도메인을 추가하기 위해서 호스트 IP관리를 통해서 내가 연결할 ip를 추가해준다.

이런식으로 가해준다. a 레코드 부분은'www.결제한도메인' 과

'결제한도메인' 으로 연결을 시도하면 해당 ip로 연결되게 하게 추가해놓고 밑에는 적용됬는지 확인.

• 제대로 적용된 모습.

도메인이 제대로 적용 됬으니 관리를 위해서 NPM을 설치해서 진행.

도커 컴포즈를 통해서 왜 npm을 관리할까?

• 효율적으로 관리하기 위해서
  • 도커 컴포즈 파일을 사용하여 코드로 인프라를 정의할 수 있다.
• 간단한 명령어
  • 컴포즈 파일에 정리하고 실행 시키는 방법은 docker-compose up -d 같이 단일 명령어로 사용이 가능하다.
• 일관된 환경을 사용가능
  • 도커 컴포즈 파일을 사용할 시 모든 개발자가 동일한 환경을 쉽게 재현 가능.

설치 과정

1. 도커 컴포즈 설치

sudo curl -L "https://github.com/docker/compose/releases/download/$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep 'tag_name' | cut -d\" -f4)/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

2. 실행 권한 부여

sudo chmod +x /usr/local/bin/docker-compose

3. 버전 확인

docker-compose --version

버전 확인을 끝으로 docker-compose가 제대로 설치되있는지 확인.

docker-compose.yml 작성

version: "3"
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80' # Public HTTP Port
      - '443:443' # Public HTTPS Port
      - '81:81' # Admin Web Port
    environment:
      TZ: "Asia/Seoul"
      DB_MYSQL_HOST: "172.17.0.1"
      DB_MYSQL_PORT: 3306
      DB_MYSQL_USER: "lldjlocal"
      DB_MYSQL_PASSWORD: "1234"
      DB_MYSQL_NAME: "nginx"
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

docker-compose 실행

• docker-compose up -d
  • -d -> 데몬 실행(백그라운드에서 실행)

http://공인ip:81 포트 연결

• npm 포트

• 처음 로그인 하면 기본적으로 임시계정이 있다.
• id : admin@example.com
• password : changeme

로그인을 하게 되면 id 부터 password 까지 새로 작성 진행

npm에서 81,80,443 포트를 관리하기 때문에 이전에 만든 80포트를 사용하는 sbb_1 도커이미지는 삭제한 뒤에

8080 포트로 들어올 경우 8080으로 연결되게 바꿔줘야한다.

도커 이미지 삭제 & 도커 컨테이너 삭제

• docker rmi -f sbb_1
• docker rm -f sbb

sbb 프로젝트로 이동하고 이전에 만든 Dockerfile을 통해서 다시 빌드 하고 도커를 run 시킬때

• docker build -t sbb

80 : 8080 으로 연결햇는데 npm에서 해당 부분을 포워딩시켜주니 8080:8080으로 변경하여 도커를 실행하기.

docker run \
  --name=sbb \
  --restart unless-stopped \
  -p 8080:8080 \
  -e TZ=Asia/Seoul \
  -e JASYPT_ENCRYPTOR_PASSWORD=$JASYPT_ENCRYPTOR_PASSWORD \
  -d \
  sbb

성공적으로 연결이 완료되었다.

이렇게 npm 을 설치하고 도메인을 연결까지 진행완료.

참고 Ref

도커 컴포즈 개념과 설치

​ : https://seosh817.tistory.com/387

DNSZI

​ : https://www.codesarang.com/10

​ : https://dnszi.com/domain_blog_tistory.html

• nginx 가 지원하는 프록시 기능을 편하게 사용할 수 있게 도와주는 솔루션

• Lest's Encrypt 와 같은 인증기관에서 SSL/TLS 인증서를 발급받아서 nginx의 설정 파이을 CLI에서 직접 수정하여 Https 로 엑세스 할 수 있도록 설정

npm을 사용하려고 보니까 현재 내 상황에서 따져봤을때, 고정 ip를 사용하는 것도 아니고 DNS 설정을 한 것도 아니기 때문에 이걸 왜 사용해야하지 라는 생각이 들었고, 찾아보니 실제로 DNS 설정을 하게 될 경우 SSL 인증이나 도메인 관리를 편하게 해준다는 것을 알게되어 사실상 깔아도 쓸수없는 의미가 되었다.

결국엔 nginx proxy manager 를 사용하는 경우는 DNS 를 내가 발급을 받은 경우에 필요한 일이 아닌가?

• 도메인 현재 없는데 과연 이게 필요한 걸까?

애초에 Nginx는 뭘까?

• 그 부분부터 알아보자.

Nginx 를 왜 사용할까?

Nginx 자체는 웹서버기 때문에 Html,Css,js,이미지 등의 정적파일은 직접 반환 가능

• 동적 처리만 apache서버에 요청을 보냄으로 connection을 줄여주는 역할로 과거에 썼었다.

Event Driven 방식

• TCP connection 연결, 유저의 http request 처리 , 커넥션의 종료가지의 모든 절차를 이벤트 개념으로 취급하고 처리
  • 워커 프로세스에게 working queue라는 이름의 처리해야할 작업이 순차적으로 담긴 큐를 처리하도록
    • 이렇게 구현하면 워커 프로세스가 놀고 있는 시간 없이 끊임없는 이벤트를 처리

Nginx는 코어 개수만큼 워커 프로세스를 만들기 때문에 워커 프로세스가 하나의 코만 이용하도록 할당

• cpu에서 프로세스를 변경하는 컨텍스트 스위칭을 거치지 않아도 되기 때문에 cpu 부하가 감소.

장점

• 동시 커넥션을 양 최소 10배 증가
• 동일한 커넥션 수일 때 속도 2배 향상
• 오래걸리는 disk i/o를 해야하는 작업의 경우 쓰레드 풀에 위임
• 가볍다.
• 동적 설정 변경가능
  • 개발자가 설정 파일을 변경하면 nginx는 그에 맞춰서 work process를 생성하고 이전 process 를 제거해줌.

단점

• 개발자가 실수로 프로세스를 종료하게되면 해당 프로세스가 관리하고 있던 모든 커넥션이 끊김.
• 개발자가 직접 모듈을 만들기 까다로움.

참고 youtube

https://www.youtube.com/watch?v=6FAwAXXj5N0&t=5s

https://sihyung92.oopy.io/server/nginx_feat_apache

java 파일 docker 파일로 만들기
- dockerfile생성 후 이미 만들기.

포트 포워딩을 통해서 80포트로 연결 시도시 springboot 포트인 8080 포트로 연결되게하기
- 연결이되면 외부에서 8080 포트로 연결되는거 끊기.

nginx porxy manager 설치 및 추가

포트포워딩을 하는 이유

• docker 파일로 만들기 전에 포트 포워딩을 진행해서 80 포트로 들어오는 경우 8080으로 넘기게 해야한다.

  • 현재 이 부분을 하지 않았기 때문에 http 요청의 경우 80포트 기본이기 때문에 해당 부분이 연결되어있지 않아서 연결 거부가 발생.

    • 헤맸던 부분

      • springboot의 기본 포트가 8080 포트인것과 기본적으로 https 작업을 하지 않았기 때문에 퍼블릭 ip로 접근 시에 연결 거부가 발생하는 것을 보고 왜 안되지하면서 꽤 많이 찾아봤었다.
        • 결론은 aws ec2 인스턴스에 해당 ip로 접근하게 되면 기본적으로 https://공인 ip.com 이쪽으로 연결을 진행하기 때문에 https 작업과 443 포트로 들어올 경우 연결되는 곳이 없기 때문에 연결거부가 발생하여 문제가 발생했었다.
        • 그렇기 때문에 아직까지는 http://공인ip.com:8080 으로 보내줘야 연결이 가능하다.
          • 이 부분 때문에 포트포워딩이 필요함.

현재 사용중인 리눅스 버전 : AWS linux 2023

검색으로 찾은 커맨드

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080

• iptables
  • 리눅스 방화벽/패킷 필터링 도구
• -t nat
  • nat 테이블 사용
• -A PREROUTING
  • PREROUNTING 체인에 규칙 추가 -> 패킷이 라우팅되기 전에 적용

뒷 부분은 80 패킷으로 들어올 경우 8080으로 리다이렉팅 해주라는 의미

포트포워딩 완료후 제대로 동작하는지 확인.

• 80 포트로 연결 시도시 해당 8080포트로 연결되는 것으로 포트포워딩이 완료되었다.

해당 프로젝트를 도커 이미지로 생성하기 위해서 Docker을 작성

FROM amazoncorretto:17
ARG JAR_FILE=build/libs/sbb-0.0.1-SNAPSHOT.jar
COPY ${JAR_FILE} app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","-Dspring.profiles.active=prod","/app.jar"]

이슈 발생

• 도커 파일을 기준으로 빌드를 통해서 이미지를 만들려니까 해당 문제가 발생

• current commit information was not captured by the build: failed to read current commit information with git rev-parse --is-inside-work-tree

• 해당 부분에 대해서 1시간 이상 찾아봤는데도 정보가 나오지가 않아서 진짜 모르겠다.

• 혹시 몰라서 gpt에도 물어봤는데 해당 도커 빌드 컨텍스트가 git 커밋정보를 읽어올려는게 실패했다고한다.

  • 그래서 해당 git clone을 한 디렉토리에서 dockerfile을 만들고 build를 했는데도 같은 위험이 뜬다.
  • 이미지는 만들어지고 실행해봤을 때

docker run \
  --name=sbb \
  --restart unless-stopped \
  -p 80:8080 \
  -e TZ=Asia/Seoul \
  -e JASYPT_ENCRYPTOR_PASSWORD=$JASYPT_ENCRYPTOR_PASSWORD \
  -d \
  sbb_1

• 도커에서 제대로 실행되고 있는 모습
  • ip를 지웠다보니 이전 이미지랑 차이가 별로없어서 페이지를 다르게

• 성공적으로 도커 이미지가 실행됬다!

참고 Ref

도커 서버 배포

• https://9keyyyy.tistory.com/39

포트포워딩

• https://velog.io/@as9587/AWS-EC2-Amazon-Linux-2023-OS-%ED%8F%AC%ED%8A%B8-%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%ED%8A%B8port-redirect-%ED%95%98%EB%A9%B0-%EB%B0%9C%EC%83%9D%ED%95%9C-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC

배포를 시작하기 전에 처리해야할 것들 사전 작업으로 해야할 것들을 적어두기.

기본적으로 yum update를 통해서 최신화 진행 완료

springboot 3.x 이상부터는 java 17을 사용하기 때문에 java 17 깔기
- 자바 깔기 완료

db는 mariaDB로 변경하고 mariaDB를 깔아주기
- (mariaDB 깔기 완료)

Docker 추가
- springboot 와 mariaDb 둘다 도커를 통해서 실행
- (mariaDb는 docker 추가 완료)

jasypt 환경변수 설정하는 법 알아두기
- 유출되면 안되는 정보들은 jasypt를 활용해서 암호화를 진행했기 때문에.
- (환경변수 설정 완료)

개인적으로 배포 테스트하면서 진행할거기 때문에 도메인은 사지않고 진행.

ngix proxy manager를 깔기
- (아직 안한 부분)

포트 포워딩하기.
- (아직 안한 부분)

기본 적으로 서버는 aws EC2 프리티어에서 진행했다.

• 서버를 설정하는 방식의 경우 프리티어이기 때문에 t2.micro 를 선택했고 그외에는 건들이지 않았다.
• 인바운드 규칙의 경우 서버 배포 테스트 용도로 사용하기 때문에 현재는 ipv4AnyWhere로 일단 모든 곳에서 접근이 가능하게 해놨다.
  • 나중에는 모든 ip가 아닌 특정 ip 만 접근할 수있도록 제한을 거는게 좋다.
    • Ec2로 들어오는 악의적인 접근을 막아주기 위해서

1. EC2 리눅스 서버에 yum 을 최신화

• sudo yum update -y

2. 자바 17 버전 설치

• sudo yum install java-17-amazon-corretto-devel
  • 가장 많이 사용된다는 jdk를 설치 진행
  • java 어플리케이션을 실행만 하려는 경우 devel 버전을 굳이 깔 필요없음.

3. 도커 설치

• sudo yum install docker -y
• 도커 버전 확인
  • docker -v

도커를 설치하고 난 뒤에 버전까지 확인 한 뒤에 활용을하려면 도커를 실행 시켜놔야한다.

• sudo service docker start

docker 그룹을 생성한 후 사용자를 추가해준다. -> sudo 없이 docker 실행이 가능하게

• sudo usermod -aG docker ec2-user
  • -a : 변경대신 정보를 추가
  • -G : 사용자계정의 그룹을 대상으로
    • 사용자 계정을 docker 계정에 포함시켜라.

docker를 실행하고 mariaDB 이미지 실행하기

# 컨테이너 실행
docker run \
  --name mariadb_1 \
  -d \
  --restart unless-stopped \
  -e MARIADB_ROOT_PASSWORD=YOURPASSWORD \
  -e TZ=Asia/Seoul \
  -p 3306:3306 \
  -v /docker_projects/mariadb_1/conf.d:/etc/mysql/conf.d \
  -v /docker_projects/mariadb_1/mysql:/var/lib/mysql \
  -v /docker_projects/mariadb_1/run/mysqld:/run/mysqld/ \
  mariadb:latest

설명

--name : 컨테이너 이름
-d : detached 모드 -> 컨테이너가 백그라운드로 실행
-- restart : 컨테이너 종료시 재시작 정책 설정
-e 컨테이너 내에서 사용할 환경변수 설정 -> mariaDB의 계정 비밀번호 넘겨주기.-> 현재는 설명용으로 비밀번호를 지워둠.

-p 호스트와 컨테이너의 포트를 연결
<호스트포트> : <컨테이너 포트> -> 호스트포트 3306으로 들어오면 해당 컨테이너 포트 3306으로 연결해줘.

-v 도커에서 마운트 볼륨 설정 -> 컨테이너와 호스트간에 데이터를 공유하거나 지속적으로 보관

restart 옵션 4가지

• no : container를 재시작 시키지않는다 -> 이게 기본 설정(옵션을 넣지않으면 이걸로 실행됨)
• on-failure[:max-retries] : container가 정상적으로 종료되지 않은 경우에만 재시작 시킴. 뒤에 max-retires에 재시작 최대 시도 횟수를 지정할 수 있음.
• always : container를 항상 재시작 -> exit code 상관없이 항상 재시작됨.
• unless-stopped: container를 stop 시키기전까지 항상 재시작.

4. git 설치

• git에 올라가있는 프로젝트를 배포서버에 클론하기.
  • sudo yum install git -y

directory를 통해서 docker에서 실행할 프로젝트를 디렉토리로 나눠두기

• sudo mkdir -p /docker_projects/sbb/project
  • 유저 계정이기 때문에 sudo를 통해서 디렉토리 생성

5. 해당 디렉토리 이동후 프로젝트 클론

public project 클론 방식

• sudo git clone (git 주소) .
  • 저장소를 현재 디렉토리에 클론 진행 -> 디렉토리가 비어있어야 가능.
• sudo git clone (git 주소)
  • 현재 디렉토리에 새로운 디렉토리를 생성하고 그 안에 저장소를 clone 진행.

private repo 클론 방식은 access token을 생성하고 해당 토큰을 넣어줘야한다.

• sudo git clone https://(token)@github.com/your/project/path.git

프로젝트 클론까지 진행하고 나서 해야할 것들.

• gitignore를 통해서 application-secret.yml을 push 가 안되게 했을 경우 해당 파일이 없어서 프로젝트를 빌드해도 오류가 발생해서 실행이 안되기 때문에 해당 파일을 추가해줘야한다.

이 문제를 해결하기 위해서 규격에 맞춰서 파일을 만들어서 올려놓았었다.

• default 내용

spring:
  mail:
    host: smtp.naver.com
    port: 465
    username: userid
    password: password
    properties:
      mail.smtp.auth: true
      mail.smtp.ssl.enable: true
      mail.smtp.ssl.trust: smtp.naver.com
      mail.smtp.starttls.enable: true

• username 과 password 에다가 해당하는 중요 정보를 넣어준다음 secret파일로 이름을 변경해줌으로써 git에는 중요정보가 유출되지 않으면서 규격을 새로 쓸 필요도 없어서 좋은 방법인거 같다.

파일 이름명을 바꾸기 위해 mv 명령어를 통해서 해당 이름을 변경

• sudo mv src/main/resource/application-secret.yml.default src/main/resource/application-secret.yml

  • 이름 변경을 통해서 해당 파일을 만들어주고 vim 을 이용해서 해당 파일의 username과 password를 넣어주기.

• 빌드를 하기위해서 ./gradlew 파일 chmod 744로 권한을 변경해서 파일소유자가 빌드를 할 수 있도록

• gradlew 파일은 gradle 실행 환경을 제공 -> 로컬 시스템이 gradle 이 설치되어 있지 않아도 gradle을 다운로드하고 프로젝트를 지정된 버전의 Gradle 사용하여 빌드.

  • sudo chmod 744 gradlew
  • ./gradlew clean build

• 빌드를 통해서 만들어진 빌드 파일을 실행하기 전 해야하는게 있다.

  • jasypt를 활용하면서 환경변수로 해당 복호화시 필요한 비밀번호를 넣어줘야한다.

6 .jasypt 환경변수를 넣어주는 방법

.bashrc 환경설정파일에 넣어주기

• bash 셸의 초기화 파일 -> 사용자가 로그인할 때나 새로운 쉘을 시작할 때 실행

• 사용자 별로 사용자 디렉토리 에 포함되는 설정파일

  • 지역적인 함수나 별칭을 작성할 때 사용되는 설정파일.

해당 파일에 밑의 환경 변수 추가

export JASYPT_ENCRYPTOR_PASSWORD=YOUR_ENCRYPTION_PASSWORD

• YOUR_ENCRYPTION_PASSWORD 에는 내가 설정한 jasypt 비밀번호를 넣어주면된다.

해당 변수를 넣어준 뒤에 서버를 재시작 하거나 Source . bashrc 와 같이 source 명령어를 통해서 즉시 적용

7. 도커 파일로 만들기 전 해당 프로젝트가 제대로 실행되는 지 확인

• 빌드 했던 파일을 실행해야하기 때문에 해당 디렉토리로 이동
  • cd /docker_projects/sbb/project
• 컴파일 된 클래스 파일 jar 파일 실행
  • 현재 테스트를 하는 것이고 실제 배포가 진행되지 않기 때문에 버그나 문제가 발생하는지 확인하기 위해서 SnapShot.jar 파일을 실행

sudo java -jar -Dspring.profiles.active=dev -Djasypt.encryptor.password=$JASYPT_ENCRYPTOR_PASSWORD build/libs/sbb-0.0.1-SNAPSHOT.jar

8. 외부에서 접속확인.

• 포트포워딩이 되어있지않기 때문에 해당 8080 port로 연결을 시도해야 연결이된다.
  • http://AwsEC2Pulicip:8080/ 링크를 통해서 이동가능
    • ip노출은 하지 않기 위해서 AwsEc2Publicip에 해당 ec2 server 가 할당받은 public ip를 넣으면 접속이 된다.
• 접속 된 모습.

여기까지 현재 진행된 모습이고 이제 남은 부분은 다음 게시물에서 진행하면서 기록할 예정.

참고 Ref.

restart 옵션 참고 ref

https://blog.leocat.kr/notes/2019/11/20/docker-restart-container-whenever-start-docker-desktop

bashrc 참고 :

https://goldsony.tistory.com/243

• 포트포워딩 진행된 이슈 찾을때

https://velog.io/@as9587/AWS-EC2-Amazon-Linux-2023-OS-%ED%8F%AC%ED%8A%B8-%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%ED%8A%B8port-redirect-%ED%95%98%EB%A9%B0-%EB%B0%9C%EC%83%9D%ED%95%9C-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC

• 팀프로젝트를 진행할 때 배포 역할을 안해봤어서 일단 개인 프로젝트를 먼저 배포해보면서 aws 웹 서버 배포에 대해서 알아가자.

배포를 시작하기 전에 처리해야할 것들

• 사전 작업으로 해야할 것들을 적어두기.

aws 서버를 만들어 준 후에 깔아줘야할 것들

• 기본적으로 yum update를 통해서 최신화 진행

• springboot 3.x 이상부터는 java 17을 사용하기 때문에 java 17 깔기

• db는 mariaDB로 변경하고 mariaDB를 깔아주기

• Docker 추가

  • springboot 와 mariaDb 둘다 도커를 통해서 실행

• jasypt 환경변수 설정하는 법 알아두기

  • 유출되면 안되는 정보들은 jasypt를 활용해서 암호화를 진행했기 때문에.

• 개인적으로 배포 테스트하면서 진행할거기 때문에 도메인은 사지않고 진행.

• ngix proxy manager를 깔기

• 포트 포워딩하기.

• 타임리프를 사용시 error/404 를 추가적으로 만들어두면 알아서 404 에러가 발생시 해당페이지를 보여준다.
  • 만약 타임리프를 사용하지 않는다면 globalerrorHandler를 통해서 오류페이지 핸들링을 해주는게 좋음.
• 타임리프를 사용하고 있기 때문에 404 페이지만 만들면 알아서 진행됨.

이전에 임시로 만들어놨던 내 정보 페이지 꾸미기.

내 정보에서 보여줘야 할 것들

• 내 정보
  • 이름
  • 성별
• 성별로 인기 정보
  • 전체 인기
  • 여성 인기
  • 남성 인기
• 호감사유별 인기

해당 데이터는 저장되어있기 때문에 가져올때 필터링 해서 가져오면된다.

@PreAuthorize("isAuthenticated()")
@GetMapping("/me")
public String me(Model model) {

    if (!rq.getMember().hasConnectedInstaMember()) {
        return rq.historyBack("먼저 본인의 인스타그램 아이디를 입력해주세요.");
    }
    InstaMember instaMember = rq.getMember().getInstaMember();

    long likesByGenderWomen = instaMember.getToLikeablePeople().stream().filter(likeablePerson -> likeablePerson.getToInstaMember().getGender().equals("W")).count();

    long likesByGenderMen = instaMember.getToLikeablePeople().stream().filter(likeablePerson -> likeablePerson.getToInstaMember().getGender().equals("M")).count();

    long typeCode1 = instaMember.getToLikeablePeople().stream().filter(likeablePerson -> likeablePerson.getAttractiveTypeCode() == 1).count();

    long typeCode2 = instaMember.getToLikeablePeople().stream().filter(likeablePerson -> likeablePerson.getAttractiveTypeCode() == 2).count();
    long typeCode3 = instaMember.getToLikeablePeople().stream().filter(likeablePerson -> likeablePerson.getAttractiveTypeCode() == 3).count();


    model.addAttribute("likes", likesByGenderWomen + likesByGenderMen);
    model.addAttribute("likesByGenderWomen", likesByGenderWomen);
    model.addAttribute("likesByGenderMen", likesByGenderMen);
    model.addAttribute("likesByAttractiveTypeCode1", typeCode1);
    model.addAttribute("likesByAttractiveTypeCode2", typeCode2);
    model.addAttribute("likesByAttractiveTypeCode3", typeCode3);
    return "user/member/me";
}

• 각 해당하는 데이터를 model에 실어서 보내주기.
  • 이 부분은 컨트롤러단이 아닌 객체 내에서 관리해도 될 거같음.

놓쳤던 부분

• like를 표시할때 만들어지는 연결되지 않은 instamember에 관해서 회원이 회원과 연결되지 않은 이미 등록된 인스타 그램 계정과 연결되지 않았을 때 연결이 되지 않았던 점 수정
  • 이미 만들어져있는 연결되지 않은 인스타 계정에 관해서 처리를 하지 않고 진행하여 발생된 중요한 오류

connect 부분

@Transactional
public RsData<InstaMember> connect(Member member, String username, String gender) {

    Optional<InstaMember> opInstaMember = findByUsername(username);

    if (opInstaMember.isPresent() && !opInstaMember.get().getGender().equals("U")) {
        return RsData.of("F-5", "이미 다른 사용자와 연결되어있습니다.");
    }

    RsData<InstaMember> instaMemberRsData = findByUsernameOrCreate(username, gender);

    memberService.UpdateInstaMember(member, instaMemberRsData.getData());
    return instaMemberRsData;

}

• 이전에는 인스타 계정이 존재만 하면 다른 사용자와 연결되어있다고 했지만 성별이 U 인경우 연결이 된 것이 아니기 때문에 해당 부분을 수정

만들어져있는 계정에 성별을 추가하는 부분

@Transactional
public RsData<InstaMember> findByUsernameOrCreate(String username, String gender) {
    Optional<InstaMember> opInstaMember = findByUsername(username);

    if (opInstaMember.isPresent()) {
        InstaMember instaMember = opInstaMember.get();
        instaMember.updateGender(gender);
        instaMemberRepository.save(instaMember);

        return RsData.of("S-2", "인스타 계정이 등록되었습니다.", instaMember);
    }

    return create(username, gender);
}

• 해당 인스타 user가 존재하는 경우 성별을 업데이트해서 다시 넣어준다.
  • 존재하지 않는 경우 create 진행

중복 호감 금지

• 내가 호감을 표현한 목록에 인스타 이름이 있는지 확인하여 있는 경우 호감표시가 불가능하도록 하면 되는 간단한 요소

if(fromInstaMember.getFromLikeablePeople().size() >= AppConfig.getLikeablePersonFromMax()){
    return RsData.of("F-1","%d명 이상에게 호감을 표시할 수 없습니다.".formatted(AppConfig.getLikeablePersonFromMax()));

}

    private boolean canLike(InstaMember fromInstaMember, InstaMember toInstaMember) {
        List<LikeablePerson> fromLikeablePeople = fromInstaMember.getFromLikeablePeople();

        LikeablePerson likeablePerson = fromLikeablePeople.stream()
                .filter(e -> e.getToInstaMember().getUsername().equals(toInstaMember.getUsername()))
                .findFirst()
                .orElse(null);

        if (likeablePerson != null) {
            return false;
        }

        return true;

    }

중복 호감을 보내는데 만약 typeCode가 다른 경우

• 호감 표시만 수정하는 방식으로 진행
  • 만약 호감 typecode 까지 똑같은 경우에만 중복 호감을 보낸다고 처리.
• 비교해야 할 것들
  • 인스타 이름 + 호감 코드

if (searchLikeablePerson != null) {
    if (searchLikeablePerson.getAttractiveTypeCode() == attractiveTypeCode) {
        log.info("중복 호감 표시");
        return RsData.of("F-1", "이미 호감을 표시한 상대입니다.");
    }

    searchLikeablePerson.modifyAttractiveTypCode(attractiveTypeCode);
    return RsData.of("S-2", "호감 수정 완료");

• 호감리스트에 있는 경우
  • 호감 표시 코드 비교후 같으면 중복 호감으로 불가능하게 진행
• 호감표시 코드는 다른 경우
  • 호감 수정 진행.

10명 이상 호감표시 금지

• 내가 호감을 표현한 리스트의 크기가 10이면 더이상 불가능

if(fromInstaMember.getFromLikeablePeople().size() >= AppConfig.getLikeablePersonFromMax()){
    return RsData.of("F-1","%d명 이상에게 호감을 표시할 수 없습니다.".formatted(AppConfig.getLikeablePersonFromMax()));

}

추가로 할 부분

• 호감 수정 부분

현재 호감 표시를 할때 중복으로 들어온 회원에 대해서 처리를 했었는데 호감 목록에서 호감을표시한 대상의 호감 이유를 바꿀 수 있어야 하기 때문에.

호감 수정 부분으로 이동하는 부분

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/modify/{id}")
    public String modify(@PathVariable("id") Long id, Model model) {
        LikeablePerson likeablePerson = likeablePersonService.findById(id).orElseThrow();

        RsData modifyLikeData = likeablePersonService.canModifyLike(rq.getMember(), likeablePerson);

        if (modifyLikeData.isFail()) {
            rq.historyBack(modifyLikeData.getMsg());
        }

        model.addAttribute("likeablePerson", likeablePerson);


        return "/likeablePerson/modify";
    }

• 수정이 가능한지 확인 후 가능하면 modifty 폼으로 이동

호감 수정 진행

@PreAuthorize("isAuthenticated()")
@GetMapping("modify/{id}")
public String modifyLike(@PathVariable("id") Long id, @Valid ModifyForm modifyForm) {

    RsData likeData = likeablePersonService.modifyLike(rq.getMember(), id, modifyForm.getAttractiveTypeCode());

    if (likeData.isFail()) {
        return rq.historyBack(likeData.getMsg());
    }

    return rq.redirectWithMsg("/likeablePerson/list", likeData.getMsg());

}

• 호감이 실패하는 경우 오류를 내보내면서 historyback 진행
• 변경이 되면 호감리스트로 리다이렉트되며 호감이 완료되었다고 알림 메시지 남기기.

호감 수정 서비스단

@Transactional
public RsData modifyLike(Member member, Long id, int attractiveTypeCode) {

    LikeablePerson likeablePerson = likeablePersonRepository.findById(id).orElseThrow();

    RsData rsData = canModifyLike(member, likeablePerson);

    if (rsData.isFail()) {
        return rsData;
    }

    likeablePerson.modifyAttractiveTypCode(attractiveTypeCode);


    return RsData.of("S-2", "호감 사유 수정이 완료되었습니다.");


}

public RsData canModifyLike(Member member, LikeablePerson likeablePerson) {
    if (!member.hasConnectedInstaMember()) {
        return RsData.of("F-1", "먼저 본인의 인스타그램 아이디를 입력해주세요.");
    }

    InstaMember fromInstaMember = member.getInstaMember();

    if (!Objects.equals(fromInstaMember.getId(), likeablePerson.getFromInstaMember().getId())) {
        log.info("권한이 없습니다.");
        return RsData.of("F-1", "권한이 없습니다.");
    }


    return RsData.of("S-1", "수정 가능");
}

• 해당 권한이 있는지 확인하는 부분과 수정이 진행되는 부분
  • 수정이 진행되는 부분은 transaction내에서 돌아가게 진행.
    • 데이터의 변경이 생기기 때문에.

• 호감도 취소버튼으로 생기는 변화들
  • likeableperson의 데이터 지우기
  • 호감도를 표현한 사람한테 있는 리스트에서 지워주기
  • 호감도 표현을 받은 사람도 지워주기.

호감도 삭제 uri 구조

/likeablePerson/delete/{id}

호감도 삭제시에 해당 uri로 접근시에 권한이 있는지 확인을 하는 코드가 필요하다.

호감도 삭제 controller 부분

@PreAuthorize("isAuthenticated()")
@PostMapping("delete/{id}")
public String deletelike(@PathVariable("id") Long id) {

    log.info("삭제 판별");

    LikeablePerson likeablePerson = likeablePersonService.findById(id).orElse(null);

    if (likeablePerson == null) {
        log.info("취소된 호감 대상입니다.");
        return rq.historyBack("이미 취소된 호감대상입니다.");
    }

    if (!Objects.equals(rq.getMember().getInstaMember().getId(), likeablePerson.getFromInstaMember().getId())) {
        log.info("권한이 없습니다.");
        return rq.historyBack("권한 없음");
    }


    log.info("삭제 가능");
    RsData<LikeablePerson> rsData = likeablePersonService.deleteLikeablePerson(likeablePerson);

    if (rsData.isFail()) {
        log.info("실패");
        return rq.historyBack(rsData.getMsg());
    }

    log.info("삭제 완료");
    return rq.redirectWithMsg("/likeablePerson/list", rsData.getMsg());
}

• id 는 고유 번호이기 때문에 id를 기준으로 해당 삭제 객체를 찾아서 가져오기.
• 현재는 컨트롤러 단에서 객체를 판별하는 작업까지 맡았기 때문에 이 부분은 서비스단으로 옮기는 게 좋아보인다.
• log의 경우 해당 컨트롤러가 제대로 작동하는지 확인 하는 용도로 추가해놨었다.

삭제 판별 서비스단으로 옮기기.

@Transactional
public RsData deleteLikeablePerson(InstaMember instaMember, Long id) {
    LikeablePerson likeablePerson = findById(id).orElse(null);

    if (likeablePerson == null) {
        return RsData.of("F-1", "취소된 호감 대상입니다.");
    }

    if (!Objects.equals(instaMember.getId(), likeablePerson.getFromInstaMember().getId())) {
        log.info("권한이 없습니다.");
        return RsData.of("F-1", "권한이 없습니다.");
    }
    String tolikeablePersonUsername = likeablePerson.getToInstaMember().getUsername();

    likeablePersonRepository.delete(likeablePerson);

    return RsData.of("S-1", "%s 님을 호감 취소하엿습니다.".formatted(tolikeablePersonUsername));
}

• 삭제판별과 삭제 진행은 service단에서 진행.

• kakao developer를 이용하여 앱을 등록하고 url 연결
• 로그인 기능 활성화 -> oauth 리다이렉트 경로 설정 필요
• Rest api 키가 생성되는게 이걸 가져와서 해당 프로젝트 yml파일에 설정으로 넣어준다.
  • cliendId에 해당 rest api키를 넣어줘야한다.
    • 단 rest api키는 노출되면 안되기 때문에 추가적으로 암호화작업을 해주던가 또는 yml 파일 분리 작업을 통해서 해당 중요한 데이터가 들어있는 내용은 안올라가게 ignore 진행 필요.

카카오 rest api를 yml에 등록하기 전에 해야할 일

Jasyspt를 사용하여 중요한 데이터들을 암호화하기 위해서 먼저 해당 설정을 먼저 jasypt를 추가하여 설정을 진행해준다.

• Gradle에 추가

implementation group: 'com.github.ulisesbocchio', name: 'jasypt-spring-boot-starter', version: '3.0.5'

• 해당 부분은 여기에서 가져올 수 있다.

• 등록되있는 gradle

  • https://mvnrepository.com/artifact/com.github.ulisesbocchio/jasypt-spring-boot-starter/3.0.5

• 해당 git

  • https://github.com/ulisesbocchio/jasypt-spring-boot

jasypt config 추가

@Configuration
@EnableEncryptableProperties
public class JasyptConfigDES {

    @Value("${jasypt.encryptor.password}")
    private String encryptKey;


    @Bean(name = "jasyptStringEncryptor")
    public StringEncryptor stringEncryptor() {

        PooledPBEStringEncryptor encryptor = new PooledPBEStringEncryptor();
        SimpleStringPBEConfig config = new SimpleStringPBEConfig();

        config.setPassword(encryptKey);
        config.setAlgorithm("PBEWithMD5AndDES");
        config.setKeyObtentionIterations("1000");
        config.setPoolSize("1");
        config.setProviderName("SunJCE");
        config.setSaltGeneratorClassName("org.jasypt.salt.RandomSaltGenerator");
        config.setIvGeneratorClassName("org.jasypt.iv.RandomIvGenerator");
        config.setStringOutputType("base64");
        encryptor.setConfig(config);

        return encryptor;

    }
}

• 문제 발생

  • jasypt 암호화 작업이 제대로 안되서 username을 인지 못하는 문제 발생.

  • 3.0.0 버전 부터 PBEWithMD5AndDES → PBEWITHHMACSHA512ANDAES_256로 알고리즘 변경이 됨

  • PBEWithMD5AndDES 를 사용하려면 해당 부분을 바꿔줘야함.

  • config.setIvGeneratorClassName("org.jasypt.iv.NoIvGenerator");

이부분을 2시간여 정도 헤맸는데 여러 블로그를 뒤져보니 해답이 나오긴 했다. -> 꼭 문서를 제대로 확인하자.

• 해당 암호 알고리즘을 사용할려는 이유는 해당 암호화를 해주는 사이트가 존재하다보니 이걸 활용해서 암호화작업을 하고 싶어서.

Oauth2.0 라이브러리 추가.

• 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임 하는 방식.
  • 구글,카카오,네이버,페이스북등에서 제공하는 간편로그인 기능

implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

카카오 rest api 문서에 필요한 데이터를 yml 에 등록한다.

  security:
    oauth2:
      client:
        registartion:
          kakao:
            clientId: ENC(CeUq2FUb7sCJtQ/UPCVqNKcZ1OHdIAE6zi9u99kVjZ7F8p5owXBJXQy3+KG6G/9r)
            scope:
              client-name: Kakao
              authorization-grant-type: authorization_code
              redirect-uri: http://localhost:8080/login/oauth2/code/kakao
              client-authentication-method: POST
            provider:
              kakao:
                authorization-uri: https://kauth.kakao.com/oauth/authorize
                token-uri: https://kauth.kakao.com/oauth/token
                user-info-uri: https://kapi.kakao.com/v2/user/me
                user-name-attribute: id

springSecurity에 oauthlogin 시도시 해당 위치 접근 허용

.oauth2Login(
        oauth2Login -> oauth2Login
                .loginPage("/member/login")
).

oauth로 처리된 데이터를 받아줄 UserServiceOauth 버전을 추가

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
@Slf4j
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

    private final MemberService memberService;

    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);

        String oauthId = oAuth2User.getName();

        String providerTypeCode = userRequest.getClientRegistration().getRegistrationId().toUpperCase();

        String username = providerTypeCode + "__%s".formatted(oauthId);

        Member member = memberService.whenSocialLogin(providerTypeCode, username).getData();

        return new CustomOAuth2User(member.getUsername(), member.getPassword(), member.getGrantedAuthorities());
    }

}

class CustomOAuth2User extends User implements OAuth2User {
    public CustomOAuth2User(String username, String password, Collection<? extends GrantedAuthority> authorities) {
        super(username, password, authorities);
    }

    @Override
    public Map<String, Object> getAttributes() {
        return null;
    }

    @Override
    public String getName() {
        return getUsername();
    }
}

• Oauth 경로로 들어오는 경우 유저가 해당 코드들로 처리되게 된다.
• providerTypeCode
  • Oauth 로그인시 어디서 인증을 했는지 날라오기 때문에 어디서 인증했는지 분류하기 위해서 providerTypeCode 분리.

public RsData<Member> whenSocialLogin(String providerTypeCode, String username) {
    Optional<Member> findMember = findByUsername(username);

    if(findMember.isPresent()){
        return RsData.of("S-1","로그인 되었습니다.", findMember.get());
    }

    return join(providerTypeCode,username,"");
}

• 이전에 같은 사람이 같은 소셜 로그인을 했는지 확인하는 코드
  • 소셜 로그인을 했었다면 그냥 그대로 로그인 했다고 넘겨주면되고, 아닌 경우 member에 해당 유저의 데이터를 멤버에 저장되게 진행해준다.

로그인 에러 발생

There was an unexpected error (type=Internal Server Error, status=500).
This class supports `client_secret_basic`, `client_secret_post`, and `none` by default. Client [kakao] is using [POST] instead. Please use a supported client authentication method, or use `setRequestEntityConverter` to supply an instance that supports [POST].
java.lang.IllegalArgumentException: This class supports `client_secret_basic`, `client_secret_post`, and `none` by default. Client [kakao] is using [POST] instead. Please use a supported client authentication method, or use `setRequestEntityConverter` to supply an instance that supports [POST].

• 로그인 인증 과정 문제에 대해서 찾아보니 Spring Security 5.8 이상버전에서는

• client-authentication-method: client_secret_post

  • 이렇게 바꿔줘야한다.

OAuth Migrations :: Spring Security

• 문서를 찾아보니 post 는 client_secret_post로 대체되어있음.

암호화 방식 참고 블로그

: https://velog.io/@shdrnrhd113/Jaypt-%EB%A1%9C-yml-%ED%8C%8C%EC%9D%BC-%EC%95%94%ED%98%B8%ED%99%94-%ED%95%98%EA%B8%B0

oauth2 로그인 사용하기 :

https://deeplify.dev/back-end/spring/oauth2-social-login

해당 api 사용 방법 설명

: https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

- 본인이 좋아하는 사람 등록 폼
  - 본인의 인스타그램 회원정보 입력을 완료한 사람만 가능
  - 인스타그램 아이디
  - 매력포인트(외모, 성격, 능력)
  - 등록되어있지않은 인스타 멤버에게도 호감표현가능하게

- 호감목록 페이지 구현

호감 표시 구현 예정

• 호감 이유를 세가지 선택
  • 외모
  • 성격
  • 능력
• 호감 표시의 경우 3개중 하나를 무조건 선택해야함.
  • 선택을 하지 않았을 경우 호감도를 선택해야합니다 메시지 나오게

인스타 정보 입력을 하지 않으면 안내메세지 표현까지 진행

• 연결이 되어있는지 아닌지를 판단해서 만약 연결되있지 않았다면 본인의 인스타그램 아이디 입력하기 버튼이 보이게
  • 인스타 계정을 연결한 경우에는 호감 표현 폼이 보이게

public boolean hasConnectedInstaMember() {
    return instaMember != null;
}

• 멤버에 boolean 함수 추가
  • instamember가 비어있다면 false 리턴

<th:block th:unless="${@rq.member.hasConnectedInstaMember}">
    <div>먼저 본인의 인스타그램 아이디를 입력해주세요.</div>

    <div>
        <a href="/instaMember/connect" class="btn btn-link">본인의 인스타그램 아이디 입력하기</a>
    </div>
</th:block>

• th:unless -> 해당 조건이 false 인 경우 출력됨.

호감을 표현한 객체를 저장하기 위한 likeablePerson 객체

• 누가 표시를 했는지
  • 인스타 멤버는 여러사람에게 호감표시가 가능
• 누가 받았는지 관계가 필요하다.
  • 인스타 멤버는 여러사람에게 호감표시를 받을 수 있다.

두개의 연관관계는 일 대 다 관계로 형성된다.

instamember 일대다 관계 표현 추가

@OneToMany(mappedBy = "fromInstaMember",cascade = CascadeType.ALL)
@OrderBy("id desc")
@Builder.Default
private List<LikeablePerson> fromLikeablePeople = new ArrayList<>();

@OneToMany(mappedBy = "toInstaMember",cascade = CascadeType.ALL)
@OrderBy("id desc")
@Builder.Default
private List<LikeablePerson> toLikeablePeople = new ArrayList<>();

인스타 멤버에 일대다 연결 작업 추가작업도 필요하지만 더 생각해봐야할 점은 호감도를 표시할 대상이 인스타 멤버로 저장되어 있지 않은 경우에 이 부분을 처리할 방도를 생각해야한다.

• 인스타 id를 기반으로 호감도를 표시하기 때문에 해당 인스타 계정이 현재 내가 만들고 있는 웹사이트에 등록되어 있지 않을 수 있기 때문에

InstaMemberService 에 추가

@Transactional
public InstaMember findByUsernameOrCreate(String username) {
    Optional<InstaMember> opInstaMember = findByUsername(username);

    if (opInstaMember.isPresent()) {
        return opInstaMember.get();
    }

    return create(username, "U").getData();
}

• instaMember에 등록되어있는 경우에는 해당 인스타 반환, 없는 경우 gender를 U로 해둔상태로 만들어둠.

호감 목록 페이지 추가

<html layout:decorate="~{/layout/layout.html}">

<head>
    <title>당신이 좋아하는 사람들</title>
</head>

<body>

<mai layout:fragment="main">
    <th:block th:unless="${@rq.member.hasConnectedInstaMember}">
        <div>먼저 본인의 인스타그램 아이디를 입력해주세요.</div>

        <div>
            <a href="/instaMember/connect" class="btn btn-link">본인의 인스타그램 아이디 입력하기</a>
        </div>
    </th:block>

    <th:block th:if="${@rq.member.hasConnectedInstaMember}">
        <ul>
            <li th:each="likeablePerson: ${likeablePeople}">
                <span class="toInstaMember_username" th:text="${likeablePerson.toInstaMember.username}"></span>
                <span class="toInstaMember_attractiveTypeDisplayName"
                      th:text="${likeablePerson.attractiveTypeDisplayName}"></span>
                <a th:href="@{|delete/${likeablePerson.id}|}" onclick="return confirm('정말로 삭제하시겠습니까?');">삭제</a>
            </li>
        </ul>
    </th:block>
</mai>
</body>

</html>

• 인스타 아이디가 인증되었을때만 보이게된다.
  • 삭제 버튼은 추가했지만 현재는 삭제는 구현되지 않았다.

호감 표시 및 호감 목록이 공용 레이아웃으로 보이게 header 에 추가

<header>
    <a href="/" class="btn btn-link">메인</a>
    <a href="/member/login" th:if="${@rq.logout}" class="btn btn-link">로그인</a>
    <a href="/member/join" th:if="${@rq.logout}" class="btn btn-link">회원가입</a>
    <a href="/member/me" th:if="${@rq.login}" class="btn btn-link">내 정보</a>
    <a href="/instaMember/connect" th:if="${@rq.login}" class="btn btn-link">본인의 인스타그램 정보 입력</a>
    <a href="/likeablePerson/add" th:if="${@rq.login}" class="btn btn-link">호감표시</a>
    <a href="/likeablePerson/list" th:if="${@rq.login}" class="btn btn-link">호감목록</a>
    <a href="javascript:;" th:if="${@rq.login}" onclick="$(this).next().submit();" class="btn btn-link">로그아웃</a>
    <form th:if="${@rq.login}" hidden th:action="|/member/logout|" method="POST"></form>
    <span th:if="${@rq.login}" th:text="|${@rq.member.username}님 환영합니다.|"></span>
</header>

pr 부분

• 본격적으로 인스타 그램 계정을 추가 하는 작업을 진행할 예정이다.
  • 현재는 진짜 인스타 계정을 연결하는게 아닌 임시로 계정을 추가해서 하는 작업을 진행할 예정
    • 후에는 test계정까지는 등록이 되게 진행해볼 예정.
    • test 계정이 아닌 다른 등록을 할려면 실제로 허가인증이 나야하는데 이게 굉장히 까다롭다...

# 할일
-  인스타그램 회원정보 입력
  -  로그인한 사람만 가능
  - 아이디
  -  성별

- 인스타 회원정보 폼 처리

인스타 계정 정보에서 필요한 것들

• 인스타 id 정보
• 성별

현재 필요하다고 생각하는 것들은 성별 과 인스타 계정의 id 정보 정도가 있다.

• 인스타 계정 등록은 로그인을 한 대상만 가능하게 진행.

@Controller
@RequiredArgsConstructor
@RequestMapping("/instaMember")
public class InstaMemberController {

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/connect")
    public String connect(){
        return "/user/instaMember/connect";
    }
}

connect.html 추가

• 어떻게 만들건지 에 대해서 추가만 진행.

<html layout:decorate="~{layout/layout.html}">

<head>
    <title>본인의 인스타그램 정보입력</title>
</head>

<body>

<main layout:fragment="main">
    <script>
        function ConnectForm__submit(form) {
            // username 이(가) 올바른지 체크

            form.username.value = form.username.value.trim(); // 입력란의 입력값에 있을지 모르는 좌우공백제거

            if (form.username.value.length == 0) {
                toastWarning('인스타그램 아이디를 입력해주세요.');
                form.username.focus();
                return;
            }

            if (form.username.value.length < 4) {
                toastWarning('인스타그램 아이디를 4자 이상 입력해주세요.');
                form.username.focus();
                return;
            }

            const $checkedGenderRadioButton = $(form).find("[name=gender]:checked");

            if ($checkedGenderRadioButton.length == 0) {
                toastWarning('성별을 선택해주세요.');
                $(form).find("[name=gender]:first").focus();
                return;
            }

            form.submit(); // 폼 발송
        }
    </script>

    <form th:action method="POST" class="p-10 max-w-sm flex flex-col gap-4"
          onsubmit="ConnectForm__submit(this); return false;">
        <div>
            <input type="text" name="username" autocomplete="off" maxlength="30" placeholder="인스타그램 아이디"
                   class="input input-bordered">
        </div>
        <div>
            <div class="form-control">
                <label class="label cursor-pointer">
                    <span class="label-text">남자</span>
                    <input type="radio" name="gender" value="M" class="radio focus:bg-red-100">
                </label>
            </div>
            <div class="form-control">
                <label class="label cursor-pointer">
                    <span class="label-text">여자</span>
                    <input type="radio" name="gender" value="W" class="radio focus:bg-red-100">
                </label>
            </div>
        </div>
        <div>
            <input type="submit" value="정보입력" class="btn btn-primary">
        </div>
    </form>
</main>
</body>

</html>

성별 선택이 안된 경우

• 성별을 선택해달라는 메시지 뜨게

const 뒤에 변수 명에 $가 붙는 이유

• jquery에서 일반적으로 구분하기 위해서 $를 붙이는 것
  • 무조건으로 $가 붙은게 jquery를 사용했다는 의미는 아니다.

jquery를 사용하지 않을 때 '$' 식별자 용도 2가지

1. document.getElementById() 함수의 바로가기
2. 템플릿 스트링
   1. ${변수명}

connectionForm 추가

@Getter
@AllArgsConstructor
public class ConnectForm {

    @NotBlank
    @Size(min = 4, max = 30)
    private final String username;

    @NotBlank
    @Size(min=1,max= 1)
    private final String gender;
}

인스타계정과 멤버는 1대1로 묶여있기 때문에 1대1 연관관계로 추가

member에 추가된 부분

@OneToOne
private InstaMember instaMember;

public void addInstaMember(InstaMember instaMember){
        this.instaMember = instaMember;
    }

• setter 대신에 addInstaMember를 통해서 확실하게 인스타계정을 추가하겠다고 명시

const 뒤 $ 참고 블로그 : https://despiteallthat.tistory.com/133

https://velog.io/@s_sangs/JavaScript-dollor-underScore

https://www.acmicpc.net/problem/1253

구현방법

• • N개의 수

    • N 은 최대 2000개

숫자의 범위는 -1000000000 ~ 1000000000



어떤 수가 다른 두 수의 합으로 나타낼 수 있다면 good

수의 위치가 다르면 값이 같아도 다른 수.



정렬이 필요한가?

- 어떤 수가 다른 두 수의 합으로 나타 낼수 있다면 이기 때문에
- 모든 수의 대한 계산이 필요하지 않을까 -> 정렬을 통해서 계산이 필요할 거 같다.



각 숫자에 대한 이분탐색을 통해서 해당 숫자를 만들수 있는지 확인하는 작업을 진행

- 이분탐색의 시간복잡도는 O(logN)이기 때문에 모든 계산보다 훨씬 빠름.



각 숫자를 만들수 있는지 이분탐색을 통해서 계산하면 끝인 문제이다.

알고리즘

• 이분 탐색

CODE

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Arrays;
import java.util.StringTokenizer;


public class Main {

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        int N = Integer.parseInt(br.readLine());

        int number[] = new int[N];

        StringTokenizer st = new StringTokenizer(br.readLine());
        for (int idx = 0; idx < N; idx++) {
            number[idx] = Integer.parseInt(st.nextToken());
        }
        Arrays.sort(number);

        int res = 0;

        //전체 숫자 확인
        for (int idx = 0; idx < N; idx++) {
            int choice = number[idx];
            int left = 0;
            int right = N - 1;
            while (left < right) {

                //같은 수가 나오면안되기 때문에 바꿔주기
                if (left == idx) left++;
                else if (right == idx) right--;

                //만약 둘이 같은 곳을 바라보면 안되기 때문에 끝내줘야함.
                if(left == right) break;

                if(number[left] + number[right] > choice){
                    right--;
                }else if(number[left] + number[right] < choice){
                    left++;
                }else {
                    res+=1;
                    break;
                }

            }
        }
        System.out.println(res);

    }
}

회원가입 후에 이동하는 곳이 로그인페이지로 이동시키는 법

• 회원가입 post를 보내고 로그인 페이지로 보내기.
  • 여기서 메시지를 추가적으로 보내고 싶은 경우
    • 메시지를 추가적으로 삽입시 한글의 경우 깨지는 현장이 존재하기 때문에 url encoding이 필요.

    // 타임리프 문법(파라미터, ? 뒤에 입력된 매개변수들)
    const params = /*[[ ${param} ]]*/ null;

    if (params.msg) {
        toastNotice(params.msg[0]);
    }

    if (params.errorMsg) {
        toastWarning(params.errorMsg[0]);
    }

• 타임리프 문법으로 ? 뒤에 입력된 매개변수를 가져와서 메시지로 보내는 스크립트.

return "redirect:/member/login?msg=" + Ut.url.encode("회원가입이완료되었습니다.\n 로그인 후 이용해주세요.");

• 회원가입 성공시 login으로 리다이렉트가 진행되면서 메시지창에 오른쪽 메시지가 사용되게 진행.

RsData 도입하기

• 규격을 만들기 위한 코드 도입.
  • 한번 규격을 잘 만들어 놓으면 여러 부분에서 사용이 가능해진다.
  • 형식의 경우 실행결과코드, 메시지, 데이터 순으로 따져보니 json 형식과 꽤 유사하다.

@Getter
@Setter
@AllArgsConstructor
public class RsData<T> {

    private String resultCode;
    private String msg;
    private T data;

    public static <T> RsData<T> of(String resultCode, String msg, T data) {
        return new RsData<>(resultCode, msg, data);
    }

    public static <T> RsData<T> of(String resultCode, String msg) {
        return of(resultCode, msg, null);
    }

    public static <T> RsData<T> successOf(T data) {
        return of("S-1", "성공", data);
    }

    public static <T> RsData<T> failOf(T data) {
        return of("F-1", "실패", data);
    }

    public boolean isSuccess() {
        return resultCode.startsWith("S-");
    }

    public boolean isFail() {
        return isSuccess() == false;
    }
}

• 아이디 중복으로 실패하는 경우 확인 방법.

  • RsData를 도입

  • //만약 존재한다면 이걸 반환
    return RsData.of("F-1", "해당 아이디(%s)는 사용중입니다.".formatted(username));
    
    //회원가입에 성공한다면 이걸 반환
    return RsData.of("S-1", "회원가입이 완료되었습니다.", member);

memberController에서 만약 실패했다는 걸 받게된 경우

• 메시지를 띄우고 다시 돌아가게 하는 스크립트 코드를 추가한다.

<script>
    alert('해당 아이디(user1)는 이미 사용중입니다.');
    history.back();
</script>

• user1으로 임시로 적용

PR 내용

https://www.acmicpc.net/problem/5052

구현방법

• 일관성이 있는지 없는지 구하는 프로그램

  • 일관성을 유지하는 방법은 한 번호가 다른 번호의 접두인 경우가 없어야한다.

번호 길이순으로 먼저 정렬을 진행.

테스트케이스는 최대 50개

전화번호의 수는 10000개

포함 여부를 확인

• 누적해서 확인 필요.

곰곰히 생각해보니 자바에서 접두어를 확인하는 함수가 존재한다는 걸 생각해냈다.

startWith 함수를 이용한 확인방법

먼저 정렬을 통해서 길이가 작은 순부터 확인 진행

• 길이가 들쑥날쑥 인거보다는 길이 정렬을 통해서 비교도 편하게된다.

• 정렬을 통해서 사전순정렬이 진행되기 때문에 특정 문자열 바로 뒷 문자와 접두어 관계일 것이다.

  • 따라서 바로 뒷 문자의 앞부분이 같은 지 확인을 해서 같으면 접두어를 포함하는 것.

• 정렬을 할때 사전순으로 정렬이 된다는 거를 까먹지 말자.

알고리즘

• Sort

CODE

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Arrays;

public class Main {

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        int T = Integer.parseInt(br.readLine());
        StringBuilder sb = new StringBuilder();

        String[] phone;
        while (T-- > 0) {
            int N = Integer.parseInt(br.readLine());
            phone = new String[N];
            for (int idx = 0; idx < N; idx++) {
                phone[idx] = br.readLine();
            }
            Arrays.sort(phone);

            if (isContains(N, phone)) {
                sb.append("YES\n");
            } else {
                sb.append("NO\n");
            }
        }
        System.out.println(sb);

    }

    //포함여부 확인
    //포함이 되어있다면 일관성이 없으므로 false
    //포함이 되어있지 않다면 일관성이 있으므로 true
    private static boolean isContains(int n, String[] phone) {

        for(int idx = 0; idx <n-1;idx++){
            if(phone[idx+1].startsWith(phone[idx])){
                return false;
            }

        }

        return true;
    }
}