전영호의 개발 블로그

[TIL]

( Graphviz 의 공식 사이트 )

구현 목표)

Graphviz 라는 노드들을 연결하여 그래프를 그려주는 툴을 기반으로 사용자의 앱 이동 경로를 시각화하기로 하였다.

Graphviz 는 공식적으로는 java 를 지원하지 않지만 감사하게도(?) 자바를 통해 객체 형태로 노드들을 관리하고 시각화할 수 있게끔 오픈소스로 Graphviz 를 변형해둔 깃허브 주소를 발견해서 해당 소스를 토대로 개발을 진행하였다.

⬇️ Graphviz in JAVA 오픈소스 Github ⬇️

구현 과정)

우선, 결과부터 얘기해보자면 아래에 기술하는 첫번째의 방법으로는 구현을 실패하였고 차선책으로 사용한 두번째 구현 방법으로 구현에 성공하였다.

1️⃣ 순수 자바코드로 구현 시도

해당 오픈소스 사용 방법으로는 해당 오픈소스 의존성을 추가하고 자바 코드로 노드를 시각화하려면 아래와 같이 가변형 그래프객체(그래프에 노드를 추가하는 형식이 아니라 한번에 그래프를 생성하는 경우는 MutableGraph 객체를 사용하지 않아도 된다)를 생성하고 가변형 노드객체를 선언하여 추가하는 형식으로 이용하면 된다.

<dependency>
    <groupId>guru.nidi</groupId>
    <artifactId>graphviz-java</artifactId>
    <version>0.18.1</version>
</dependency>

( 의존성 추가 )

import guru.nidi.graphviz.attribute.Color;
import guru.nidi.graphviz.engine.Format;
import guru.nidi.graphviz.engine.Graphviz;
import guru.nidi.graphviz.model.MutableGraph;
import guru.nidi.graphviz.model.MutableNode;
import static guru.nidi.graphviz.model.Factory.*;

import java.io.File;
import java.io.IOException;

public class GraphExample {
    public static void main(String[] args) {
    
        try {
            // MutableGraph 객체 생성
            MutableGraph g = mutGraph("example1").setDirected(true);

            // 개별 노드 생성
            MutableNode nodeA = mutNode("a").add(Color.RED);
            MutableNode nodeB = mutNode("b");

            // 노드를 그래프에 추가
            g.add(nodeA);
            g.add(nodeB);

            // 노드 간 링크 추가
            nodeA.addLink(nodeB);

            // 그래프를 PNG로 렌더링 후 파일로 저장
            Graphviz.fromGraph(g).width(200).render(Format.PNG).toFile(new File("example/ex1m.png"));
            
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

( JAVA 코드로 객체화하여 그래프를 생성하는 방법 )

여기서 각 객체를 선언 및 사용하는 부분에서는 Graphviz 모듈을 사용하지 않지만 .render() 메소드 부분에서는 직접적으로 Graphviz 의 모듈 중 하나인 dot 명령어를 사용하므로 Graphviz 를 프로젝트가 돌아갈 운영체제에 설치한다.

⬇️ MAC, Linux Graphviz 설치 방법 ⬇️

# ⬇️ MAC 설치 ⬇️
brew install graphviz

# ⬇️ Linux 설치 (Debian 계열 - Ubuntu) ⬇️
sudo apt install graphviz

# ⬇️ Linux 설치 (Redhat 계열) ⬇️
sudo dnf install graphviz

그리고 코드를 실행시켜주기만 하면 되는데 ( dot is not defined ) 오류가 이클립스의 콘솔에서 발생하였고 Graphviz 를 설치했음에도 이클립스에서 프로젝트를 실행할 경우 내장된 dot 명령어를 찾지 못해 환경변수 설정까지 진행을 시켜봤지만 동일한 오류가 계속 발생하였다.

( 이클립스 프로그램 내의 환경변수 설정도 지정해줬지만 동일하게 dot 명령어를 찾지 못했다. )

혹시 몰라 터미널에서 dot -V 명령어를 통해 dot 명령어가 정상적으로 실행되는지 확인해보았지만 터미널에서는 정상작동하는 것을 볼 수 있었다.

그래서 다음 방법을 찾아보다가 아래와 같은 방법으로 구현을 진행하게 되었다.

2️⃣ 자바에서 shell 명령어를 사용하여 구현

public class GraphExample {
    public static void main(String[] args) {
    
        ArrayList<String> routerTypeList = new ArrayList<>();
        ArrayList<String> currentPathList = new ArrayList<>();
        String command = "export PATH=\"$PATH:/usr/local/bin\"; echo 'digraph {";
        
        
        try {
            for (int i = 0; i < 앱이동경로MapList.size(); i++) {
                routerTypeList.add(앱이동경로MapList.routerType);
                // 쉘에서는 경로를 나타내는 / 를 사용하면 오류를 뱉기 때문에
                // 이동경로(ex. /home) 과 같은 \ 를 추가하여 이스케이프 문자로 처리함
                if(앱이동경로MapList.currentPath.charAt(0) == '\\') {
                    currentPathList.add('\"' + 앱이동경로MapList.currentPath + '\"');
                }else {
                    currentPathList.add('\"' + 앱이동경로MapList.currentPath + '\"');
                }
            }
			
			for(int i=0; i<currentPathList.size(); i++) {
				if(i==0) {
                	// 앱 내 이동경로가 1개인 경우 경로를 추가하지 않고 node 하나만 출력하기 위해
                    // 커맨드에 해당 노드 경로만 추가
					if(currentPathList.size() == 1) {
						command += currentPathList.get(0);
					}
					continue;
				}else {
                	// 만약 커맨드 내에 노드 -> 노드(ex. a -> b) 이동이 이미 중복 선언되어 있다면
                    // 중복 이동 그래프를 그리는 것을 방지하기 위해 커맨드를 추가하지 않음
                    // 이 부분을 제거하면 모든 중복 경로이동의 화살표가 표현됨
					if(!command.contains(currentPathList.get(i-1) + "->" + currentPathList.get(i) + " ")) {							
						command += (currentPathList.get(i-1) + "->" + currentPathList.get(i) + " ");
					}
				}
				
			}
			
            // svg 파일을 생성할때 사용할 랜덤한 uuid 를 생성
            // API 요청은 비동기로 작동하기 때문에 중복 요청의 경우의 수를 생각
			String uuid = UUID.randomUUID().toString();
            
            // sh shell 로 전송할 커맨드를 작성
            // -Tsvg 옵션으로 svg 파일로 그래프를 생성
            // -Nshape=rect 로 모든 노드를 사각형으로 표현
            // -o {파일명} 을 통해 파일의 이름 선언
			command += "}' | dot -Tsvg -Nshape=rect -o " + uuid + ".svg;";
			
            // 명령어를 실행할 ProcessBuilder 객체를 생성
			ProcessBuilder builder = new ProcessBuilder();
			String homeDirectory = System.getProperty("user.dir");
			log.debug("##### homeDirectory ::: {}", homeDirectory);
			File graphDir = new File(homeDirectory, "graph");
			if(!graphDir.exists()) {
				if(!graphDir.mkdir()) {
					log.error("##### fail to mkdir ::: {}", graphDir.getAbsolutePath());
				}
			}
			
			builder.directory(graphDir);
			
            // sh 쉘로 커맨드 실행
			builder.command("sh", "-c", command);
			Process process = builder.start();
			
            // 에러 발생 시 커스텀된 StreamGobbler 를 사용하여 sh shell 내의 에러를 읽어
            // 콘솔에 출력함
			StreamGobbler errorGobbler = new StreamGobbler(process.getErrorStream(), System.err::println);
			Executors.newSingleThreadExecutor().submit(errorGobbler);
			
			log.debug("##### success make graph ::: {}/{}.svg", graphDir.getAbsolutePath(), uuid);
			
			int exitCode = process.waitFor();
			assert exitCode == 0;
			
            // 생성된 파일을 읽어와 Base64 로 인코딩하여 문자열로 변환한 뒤 응답
			File graphFile = new File(graphDir, uuid + ".svg");
			if(graphFile.exists()) {
				try {
					byte[] graphContent = Files.readAllBytes(graphFile.toPath());
					String encodedGraph = Base64.getEncoder().encodeToString(graphContent);
					message = encodedGraph;
				}catch(IOException e) {
					message = "";
					e.printStackTrace();
				}
			}else {
				message = "";
			}
			
            // 생성된 svg 파일을 삭제 및 삭제되지 않은 경우 log 출력
			if(!graphFile.delete()) {
				log.debug("##### fail to delete graphFile ::: {}", graphFile.getAbsolutePath());
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			message = e.getMessage();
		} finally {
		}
		return returnJson(message);
    }
}

( 그래프 생성 코드 )

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.function.Consumer;

public class StreamGobbler implements Runnable {
	
	private InputStream inputStream;
	private Consumer<String> consumer;
	
	public StreamGobbler(InputStream inputStream, Consumer<String> consumer) {
		this.inputStream = inputStream;
		this.consumer = consumer;
	}
	
	@Override
	public void run() {
		new BufferedReader(new InputStreamReader(inputStream)).lines().forEach(consumer);
	}
	
}

( 쉘 내 에러를 받아올 StreamGobbler 커스텀 )

⬇️ 결과물 ⬇️

Redux 사용 방법

Redux 를 사용하는 이유 )

: props 드릴링을 방지하기 위하여 사용! Redux 를 사용하면 props 를 사용하지 않고도 State 공유가 가능하다!

redux 를 사용하지 않고 props 를 넘기는 경우 props 가 필요한 하위 컴포넌트까지 최초 선언된 컴포넌트 부터 하위의 하위 컴포넌트까지 이어 받아 전달해야하기 때문에 props 의 복잡도가 증가하며 유지보수가 힘들어진다.

또한 최하위 컴포넌트에서 props 의 State 를 변경하게 되면 해당 State 를 하위로 전달하기 위해 props 로 받아온 컴포넌트까지 불필요한 재렌더링 문제가 발생한다.

function App() {
  const [user, setUser] = useState("Alice");
  console.log("🔄 App 렌더링");

  return <Parent user={user} setUser={setUser} />;
}

function Parent({ user, setUser }) {
  console.log("🔄 Parent 렌더링");
  return <Child user={user} setUser={setUser} />;
}

function Child({ user, setUser }) {
  console.log("🔄 Child 렌더링");
  return <GrandChild user={user} setUser={setUser} />;
}

function GrandChild({ user, setUser }) {
  console.log("🔄 GrandChild 렌더링");
  return (
    <div>
      <h1>Hello, {user}!</h1>
      <button onClick={() => setUser("Bob")}>Change User</button>
    </div>
  );
}

redux 를 사용하지 않은 경우

GrandChild 컴포넌트에서 전달받은 user props 가 변경될 시 모든 컴포넌트에서 렌더링 콘솔이 출력된다.

1. Redux 설치

더보기

1. Redux 는 React 버전 18.1.0 이상부터 제대로 사용할 수 있으므로 package.json 에서 react 와 react-dom 버전을 확인한다.

 

 

 

2. Redux 설치

npm install @reduxjs/toolkit@1.8.1 react-redux

 터미널을 켜서 프로젝트 디렉토리로 접속한 뒤 위 명령어를 입력하여 redux 를 설치

2. Redux 세팅 및 Redux State 사용 방법

더보기

1. Store.js 작성

 

 

 

2. Provider 와 생성한 store 를 index.js 에서 import 하여 전체 컴포넌트를 Provider 컴포넌트로 감싸준 뒤 store 를 설정

 

 

 

 3. store.js 에 선언하고 싶은 State 를 생성한 뒤 reducer 에 등록 ( Redux 에 State 선언 )

 

 

 

 4. 해당 State 를 필요한 곳에서 불러와서 사용하기

 

 

 

 

5. 여러 State 를 사용하는 경우

3. Redux State 변경 방법

더보기

1. 변경 함수를 store.js 에 선언한 뒤 export

 

 

 

2. 변경할 컴포넌트에서 useDispatch 함수를 사용하여 store.js 의 State 데이터의 변경을 요청하여 사용

 

 

 

 

 

 

3. State 변경 함수를 여러개 선언하여 사용하기

 

 

Redux 를 사용할때 유의할 점

1. State 변경함수는 직접 호출하는 것이 아닌 useDispatch 를 사용해 호출하는 형태로 사용해야 한다.

2. State 를 변경할때 매개변수를 전달하여 사용하는 경우 매개변수를 꼭 payload 함수를 사용해 해당 매개변수의 값을 꺼내와서 사용해야 한다.

3. js 파일을 분리하여 State 를 여러 파일에 분리하여 사용할 수 있다.

- TIL -

구현 목표)

타임리프를 사용해서 간단하게 회원을 관리할 수 있는 백오피스 페이지를 구현해보려 한다.

타임리프(Thymeleaf)란?

타임리프는 Java 기반의 서버사이드 템플릿 엔진으로써 현재 지원이 거의 중단되어버린 JSP 의 대안으로 떠오르는 템플릿 엔진이다.

JSP 가 jar 형태의 빌드를 지원하지 않고 war 형태의 빌드만 지원했던 반면 타임리프는 jar 와 war 형태의 빌드를 모두 지원한다.

또한 서버가 없는 서버리스 형태로도 템플릿을 실행시킬 수 있다는 장점이 있다.

구현 코드)

- login.html, login.js -

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Login</title>
    <link rel="stylesheet" th:href="@{/css/login/login.css}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="login-container">
        <h2>Admin Login</h2>
        <form id="login-form">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
        <div id="error-message" class="error-message" style="display: none;"></div>
    </div>

    <script th:src="@{/js/login/login.js}"></script>
</body>
</html>

document.getElementById("login-form").addEventListener("submit", async function (event) {
    event.preventDefault();

    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    try {
        const response = await fetch("https://api.random-chat.site/admin/login", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `username=${username}&password=${password}`
        });

        if (response.ok) {
            const token = response.headers.get("Authorization").replace("Bearer ", "");
            localStorage.setItem("jwtToken", token); // JWT 저장
            window.location.href = "/admin/dashboard"; // 대시보드로 리디렉션
        } else {
            const errorMessage = document.getElementById("error-message");
            errorMessage.textContent = "Invalid username or password";
            errorMessage.style.display = "block";
        }
    } catch (error) {
        console.error("Error during login:", error);
    }
});

- LoginController -

package com.randomchat.main.controller.backOffice;

import com.randomchat.main.domain.users.Users;
import com.randomchat.main.jwt.JWTUtil;
import com.randomchat.main.service.backOffice.AdminLoginService;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequiredArgsConstructor
public class LoginController {

    private final AdminLoginService adminLoginService;
    private final JWTUtil jwtUtil;

    @GetMapping("/admin/login")
    public String showLoginPage() {
        // template 디렉토리 하위의 login.html 렌더링
        return "login/login";
    }

    // 로그인 처리
    @PostMapping("/admin/login")
    public ResponseEntity<String> handleLogin(@RequestParam("username") String username,
                                              @RequestParam("password") String password,
                                              HttpServletResponse response) {

        Users user = adminLoginService.adminLogin(username, password);

        if(user != null) {
            // jwt 생성하여 반환
            String jwtToken = jwtUtil.createJwt(user.getEmail(), user.getNickname(), user.getRole().name(), user.getGender().name(), 60*60*1000L);
            response.addHeader("Authorization", "Bearer " + jwtToken);

            return ResponseEntity.ok("Success login");
        }else {
            // 로그인 실패
            return ResponseEntity.status(401).body("Fail login");
        }

    }
}

- AdminLoginService -

package com.randomchat.main.service.backOffice;

import com.randomchat.main.domain.users.Role;
import com.randomchat.main.domain.users.Users;
import com.randomchat.main.repository.users.UsersRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;

import java.util.Optional;

@Service
@RequiredArgsConstructor
public class AdminLoginService {

    private final UsersRepository userRepository;
    private final BCryptPasswordEncoder bCryptPasswordEncoder;

    public Users adminLogin(String username, String password) {
        Optional<Users> optionalUser = userRepository.findByEmail(username);
        if(optionalUser.isEmpty()) {
            System.out.println("AdminLoginService.class >>> 해당 이메일로 가입된 로그인 정보가 없음");
            return null;
        }else {
            Users user = optionalUser.get();
            if(bCryptPasswordEncoder.matches(password, user.getPassword()) && user.getRole().equals(Role.ADMIN)) {
                System.out.println("AdminLoginService.class >>> admin 권한을 가진 유저(" + user.getEmail() + ") 로그인 성공");
                return user;
            }else {
                System.out.println("AdminLoginService.class >>> 로그인 권한을 가지지 않은 유저가 로그인 시도 : " + user.getEmail());
                return null;
            }
        }
    }
}

- SecurityConfig -

더보기

 백오피스 로그인 페이지 경로와 css, js 파일의 경로를 렌더링하기 위해 전체 허용 설정

 

이후 dashboard 하위의 기능은 /admin/dashboard 하위 경로로 관리할 예정

 

전체 접근은 가능하게 설정하고 세부 기능 api 에서 Role 값을 기준으로 요청을 걸러낼 예정이다.

 

그렇다면 실제 관리자 dashboard 에서는 페이지 로드 시 토큰 값을 백엔드 측으로 보내 관리자인지 검증하게끔 하는 코드를 추가하여

관리자 경로의 일반 유저의 접근을 차단하는 방법의 구현이 필요하다.

- TIL -

구현 목표)

타임리프를 사용해서 간단하게 회원을 관리할 수 있는 백오피스 페이지를 구현하고 있는데 이때 관리자를 토큰 값을 기준으로 판별하는 코드가 추가되었다.

이 코드를 테스트하기 위해 미리 관리자를 생성할 필요가 있었고 서버 실행 시점에 초기화 작업을 위해 사용되는 @PostContruct 어노테이션을 활용해서 기본 admin 계정을 생성해보고자 했다.

구현 코드)

package com.randomchat.main.service;

import com.randomchat.main.domain.users.Users;
import com.randomchat.main.repository.users.UsersRepository;
import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Component;

@Component
@RequiredArgsConstructor
public class CreateDefaultAdmin {

    private final BCryptPasswordEncoder bCryptPasswordEncoder;
    private final UsersRepository usersRepository;

    @PostConstruct
    public void createDefaultAdmin() {

        // 관리자 계정이 존재하는 경우 관리자 계정 생성을 패스
        if(usersRepository.findByEmail("admin").isPresent()) return;

        String email = "admin";
        String password = bCryptPasswordEncoder.encode("admin");
        String nickname = "admin";

        Users user = new Users();
        Users admin = user.createAdmin(email, password, nickname);

        usersRepository.save(admin);
    }

}

CreateDefaultAdmin.class 를 생성하여 컴포넌트로 선언

createDefaultAdmin() 메소드를 생성하여 @PostConstruct 어노테이션을 붙여줌으로써 CreateDefaultAdmin 빈이 초기화 되고 의존성 주입이 완료된 시점에 해당 메소드를 실행하게 설정

서버 실행 시 시작되는 코드이므로 admin 계정이 이미 존재하는 경우(서버를 재부팅하거나 재배포하는 과정) 관리자 계정을 생성하지 않고 넘어가게끔 if 문을 사용해서 관리

- TIL -

문제 발생)

package com.randomchat.main.domain.email;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.NoArgsConstructor;
import org.hibernate.annotations.CreationTimestamp;

import java.time.LocalDateTime;

@Entity
@Getter
@NoArgsConstructor
public class EmailVerification {
    public EmailVerification(String email, String verificationCode) {
        this.email = email;
        this.verificationCode = verificationCode;
        this.isVerified = false;
    }

    @Id
    @GeneratedValue
    private Long id;

    @Column
    private String email;

    @Column
    private String verificationCode;

    @Column(nullable = false)
    private boolean isVerified;

    @CreationTimestamp
    @Column(nullable = false)
    private LocalDateTime attemptTime;

}

위 코드는 현재 이메일 인증을 관리하는 테이블의 구조이다.

attemptTime 컬럼은 이메일 인증을 시도한 시점의 시간을 저장하는 컬럼인데 5분 내 이메일 인증 시도 횟수를 아래와 같이 COUNT 를 사용하여 출력해보려 하였지만 몇 번을 요청하든 0회로 찍혀서 나오는 오류가 발생하였다.

혹시 Hibernate 에서 쿼리를 Insert 하는 순간에 attempt_time 컬럼이 비어있는 상태로 넘어가는지 로그를 확인해보았지만 정상적으로 Insert 는 실행되는 모습이다.

@CreateTimeStamp 어노테이션을 사용하면 jpa 를 사용하여 save() 메소드를 사용해 객체의 데이터를 데이터베이스에 저장하는 시점에 Hibernate 가 해당 어노테이션을 인식하고 자동으로 값을 채워넣어 주는 형태이기 때문에 save() 메소드를 사용해 저장하는 나는 당연하게도 값이 누락될 리는 없었다.

저장된 값을 확인해보려 MySQL 을 실행하였다.

( 로그로 확인할 수 없는 이유는 save() 메소드 실행 시 값이 채워지기 때문에 생성된 객체의 getter 를 사용해서 데이터를 뽑아도 출력되지 않기 때문 )

MySQL 을 열어 확인해보니 attempt_time 의 값은 채워지는데 시간대의 설정이 올바르게 되어있지 않는 듯 하였다.

우선적으로 attempt_time 의 값을 채워주는 Hibernate 는 JDBC 의 시간대 설정을 따른다고 검색을 통해 알아냈다.

시간대를 서울 기준으로 변경한 뒤 다시 api 요청을 보내보니 정상적인 한국 시간 기준으로 attempt_time 이 저장되는 것을 확인할 수 있었다.

- TIL -

문제 발생)

잘 구현해 놓았던 JWT 토큰을 검증하던 로직에서 아래와 같은 에러가 발생하였다.

해당 내용에 대해 구글링을 해보니 이 에러의 원인으로 의심되는 부분이 한 군데 발견되었다.

바로 authenticate 메소드를 가진 객체인 AuthenticationManager 객체인데 이 부분에서 순환 참조 오류가 발생한 것을 확인할 수 있었다.

구글링 결과 AuthenticationManager 의 경우 프록시 객체 상태로 사용하면 안되고 명시적으로 메소드를 사용하여 객체를 생성하여 반환한 뒤에 사용해야

한다는 것을 확인했다.

그렇지만 나는 아래와 같이 이미 SecurityConfig.class 에 명시적으로 authenticationManager 메소드를 통해 AuthenticationManager 를 빈 객체로

등록해 놓은 상황인데.... 이 객체를 사용하는 부분에서 내가 선언한 객체가 아닌 프록시 객체를 사용한다는 부분을 확인하게 되었다.

SecurityConfig.class)

package com.randomchat.main.config.security;

import com.randomchat.main.jwt.JWTFilter;
import com.randomchat.main.jwt.JWTUtil;
import com.randomchat.main.jwt.LoginFilter;
import com.randomchat.main.repository.users.UsersRepository;
import com.randomchat.main.service.jwt.CustomUserDetailsService;
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {
    // AuthenticationManager 가 인자로 받을 AuthenticationConfiguration 객체 주입
    private final AuthenticationConfiguration authenticationConfiguration;
    private final JWTUtil jwtUtil;
    private final UsersRepository usersRepository;
    private final CustomUserDetailsService customUserDetailsService;


    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    // AuthenticationManager Bean 등록
    public AuthenticationManager authenticationManager(AuthenticationConfiguration configuration) throws Exception {
        return configuration.getAuthenticationManager();
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                // 폼 로그인 비활성화
                .formLogin(formLogin -> formLogin.disable())

                // HTTP Basic 인증 비활성화
                .httpBasic(httpBasic -> httpBasic.disable())

                // CSRF 보호 비활성화 (Token 인증 방식에서는 불필요)
                .csrf(csrf -> csrf.disable())

                // CORS 커스텀을 적용하는 메소드
                .cors(c -> {
                    CorsConfigurationSource source = request -> {
                        CorsConfiguration config = new CorsConfiguration();
                        config.setAllowedOriginPatterns(List.of("*"));
                        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE"));
                        config.setAllowedHeaders(List.of("*"));
                        config.setExposedHeaders(List.of("*"));

                        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
                        corsSource.registerCorsConfiguration("/**", config);
                        return config;
                    };
                    c.configurationSource(source);
                })

                // 세션 비활성화
                .sessionManagement(session -> session
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                )

                // H2 콘솔 접근 허용
                .headers(headers -> headers
                        .frameOptions(frameOptions -> frameOptions.sameOrigin())
                )

                // 경로별 권한 인증 설정
                .authorizeRequests(auth -> auth
                    // 메모리를 사용하는 H2 데이터베이스의 접속 경로를 오픈
                    // http://localhost:8080/h2-console 경로로 콘솔 접근 가능
                    .requestMatchers("/h2-console/**", "/login", "/register/**").permitAll()
                    .requestMatchers("/chat/**", "/room/**", "/send/**", "/enter/**").permitAll() // 채팅 관련 엔드포인트 접속 허용 설정
                    .requestMatchers("/admin").hasRole("ADMIN")
                    .anyRequest().authenticated()
                )

                .addFilterAfter(new JWTFilter(jwtUtil), LoginFilter.class)

                // 커스텀 로그인 필터를 등록
                .addFilterAt(new LoginFilter(authenticationManager(authenticationConfiguration), jwtUtil, usersRepository), UsernamePasswordAuthenticationFilter.class);

        return http.build();
    }
}

그렇다면 여기서 프록시 객체를 사용하지 않고 현재 사용방식과 다른 방식으로 AuthenticationManager 객체를 명시적으로 선언하여 사용하는 방법에 대해 구글링을 해보았다.

( 문제를 해결할 수 있게끔 도와주신 블로그에 무한한 감사를 드립니다.... )

정말 친절하게도 위의 블로그에서 DaoAuthenticationProvider 라는 객체를 사용해서 AuthenticationManager 를 생성하는 방법에 대해 설명해주고 있었고 나는 이 방법을 사용해보기로 하였는데 뭔가 이상함을 느꼈다....

위 블로그에서 작성해놓은 방법은 UserDetailsService 를 커스텀 구현한 서비스와 커스텀된 비밀번호 인코더가 필요한 부분이었는데 현재

SecurityConfig.class 에 비밀번호 인코더는 BCryptPasswordEncoder 객체를 반환하는 메소드를 통해 사용중인데 아무리 찾아봐도 이전에

구현해놓은 커스텀 CustomUserDetailsService 클래스가 보이질 않는다....

난 분명히 UserDetailsService 인터페이스를 구현한 CustomUserDetailsService 구현체를 작성했던 기억이 나는데 도통 보이질 않는다...

혹시 몰라 깃허브의 커밋 로그를 들어다 보았다.

스프링 시큐리티를 커스텀하면서 CustomUserDetailsService 클래스를 푸쉬했었고, 그 다음 JWT 토큰 커스텀 커밋 로그까지도 해당 클래스는

살아있었는데 이메일 인증 로직을 커밋한 로그를 살펴보니 아래와 같이 해당 서비스가 삭제되어 있는 모습을 확인할 수 있었다.

아마도 코드를 정리하다가 CustomUserDetailsService 를 삭제한 모양이다....

위 클래스가 없으니 당연히 아래의 authenticationManager 메소드에서도 객체를 생성하여 반환할때 UserDetailsService 구현체를 불러오지 못해

프록시 객체로 동작 되는 것이 당연하였다....

삭제된 CustomUserDetailsService 파일을 다시 작성한뒤 메소드는 건들이지 않고 로직을 실행시켜 보았고 성공적으로 토큰을 받아오는 것을 확인할 수 있었다.

랜덤 채팅을 구현하면서 화상 랜덤 채팅을 구현할때 토큰 값으로 사용자를 분류할 생각이었는데 이 오류를 잡는데 2주가 넘는 시간이 소비되었다...

이제 다시 토큰 값으로 사용자를 구분할 수 있게 되었다!

- TIL -

구현 목표)

현재 프로젝트의 경우 www.random-chat.site 로 접속 시에는 정상적으로 React 프로젝트의 루트 경로가 정상적으로 서빙되지만

www.randocm-chat.site/randomchat 과 같은 경로는 정상적으로 React 프로젝트로 서빙되지 않고 아래와 같이 Nginx 의 404 페이지가 서빙되는

문제가 발생했다.

오늘은 세부 경로를 기입하고 이동할때 정상적으로 세부 경로로 서빙되게끔 nginx 를 세팅해 볼 것이다.

docker-compose.yml 파일 설정 변경)

더보기

 

세부 경로의 경우 nginx 에서 서빙해주는 부분이다 보니 직접적으로 nginx 의 html 부분의 파일들을 react 의 파일들과 매핑해주는 작업을

해야했다.

 

Nginx 의 nginx.conf 파일 설정 변경)

더보기

nginx.conf 작성

 

 nginx.conf 파일 내에 리액트 프로젝트로 서빙해주는 location / 부분에

 

root 경로를 명시적으로 표현해주고, index 파일 또한 명시적으로 표현해주었다.

 

이후 try_files 를 통해 요청한 URI 의 파일이 존재하지 않을 경우 /index.html 로 해당 URI 를 리다이렉트하여

SPA 내에서 경로를 처리할 수 있게 도와주는 코드를 작성했다!

 

 

 

 도커 컴포즈 종료 및 재빌드

$ sudo docker-compose down
$ sudo docker-compose up --build -d

도커 컴포즈를 종료시킨 뒤 빌드 변경사항을 반영하여 다시 빌드

코드 반영 결과)

이 코드를 구현함으로써 대화가 종료된 이후 다시 초기 채팅방으로 돌아갈 수 있는 구조를 생성할 수 있게 되었다!

▼ 사이트 방문하여 확인하기 ▼

- TIL -

문제 발생)

서버 피씨를 실행시키면 Docker Compose 가 자동으로 실행되게끔 설정되어 있는데 아래와 같이 nginx 의 도커 컨테이너가 먼저 실행되어 포트의 충돌이 일어나는 현상이 발생되었다.

문제 해결)

nginx 도커 종료 및 재실행 disable 처리

더보기

1) nginx 도커 종료

$ sudo systemctl stop nginx

 

 

 

2) nginx 도커 상태를 확인하여 inactive (dead) 로 작동 중지 확인

$ sudo systemctl status nginx

 

 

 

 3) nginx 도커 재실행 disable 처리

$ sudo systemctl disable nginx

 

 

 

 4) 서버 피씨 재부팅 후 80포트 점유 중인 프로세스 확인

$ sudo lsof -i :80
$ sudo docker ps

80포트 점유중인 프로세스 확인, 활성화된 docker 컨테이너 확인