[VMap] 자체 서버를 구축해보자 (2)

1. 어제 학교에서 포트를 막아놨다는 사실을 깨닫고 빨리 내일이 됐으면 좋겠다는 생각을 했다.

 

아침 1교시 수업이 끝나자마자 교수님께 찾아뵈었고 절차 알아오면 바로 승인해주시겠다고 확답을 받았다!

 

2. 학교 포털을 통해 포트 신청을 마치고, 신청서를 제출하고 왔다. 오늘 안에 승인이 날거라고 하셨다.

 

3. 당장이라도 외부 서버에 연결을 하고 싶지만, 당장은 기다려야하기 때문에 어제 스프링에 맞춰 리팩토링 하던 코드를 마저 건들기로 했다.

 

3-1. thymeleaf 오류

계속 thymeleaf 경로를 찾을 수 없다는 오류가 나서 build.gradle 등등 여러가지를 만져봤으나 해결되는 것이 없었다.

스프링부트 빌드 중 오류 질문드립니다 ㅠㅠ - 인프런 | 질문 & 답변

그랬다가 해당 글을 발견하여 수행하였고 오류를 해결할 수 있었다.

 

원인은 내가 view 패키지를 따로 생성하여 view 페이지를 작성했던 것..

view 페이지는 resource 에 들어가야 한다는 사실을 간과하고 있었다 ㅠㅠ

index.html 정상 접속 확인

 

그런데 해결되지 않은 문제가 계속 있었다.

 

3-2. 자동 주입을 할 수 없습니다. 'Model' 타입의 bean을 찾을 수 없습니다.

controller 에서 view 로 제대로 연결이 안돼있었는데, 이유는 다음과 같았다.

 

@Controller 어노테이션은 @Component 어노테이션을 따르고 있기 때문에, 자동 주입을 따른다.

정확하진 않지만, Model 은 자동주입을 따르는 인터페이스 속성이기 때문에, @Autowired 어노테이션을 적용할 경우 자동 주입이 두번 이루어지게 되어 오류가 발생하는 것 같았다.

 

위와 같이 @Autowired 어노테이션을 삭제하면 model 에 자동주입이 가능하게 된다!

번외로, @Controller 에는 자동 주입이 포함되어 있기 때문에 @Configuration 어노테이션 또한 필요 없다..

 

스프링(Spring) 빈 수동등록, 자동등록 하는법

 

3-3. Controller 와 View 가 연결되지 않았던 이유

이 오류는 수정하는데 매우 오래 걸렸다. 계속 작동을 하지 않았기 때문..

내 코드에서 Controller 와 View 가 연결되지 않았던 이유는 세가지나 있었다.

 

우선, 첫번째는 3-1의 문제였고,

두번째는 변수명을 잘못 설정했었다.

 

 

Controller 코드에서 model 에 주입되는 attributeName 과 view 에서 thymeleaf 에 주입한 변수명이 서로 일치하지 않았기 때문이다.

현재 코드에서는 transcription 으로 서로 통일시켜준 모습이다.

 

두번째까지 수정하고 나서는 이제는 진짜 되겠지 하고 코드를 빌드했지만 여전히 해결되지 않았었다.

 

localhost:8080/transcribe.html 이 접속이 안되어 컨트롤러와 뷰가 제대로 연결이 안된건지 테스트하기 위해 index.html 에 접속하여 테스트를 진행해보았다.

 

조금 이해가 안됐었는데,

localhost:8080/ 에서는 index.html 이 정상적으로 접속됐지만, localhost:8080/index.html 에서는 404 오류가 발생했다.

 

오류의 원인은 위 사진과 같이 Mapping 주소를 "/" 로 해주었기 때문이었다.

나는 index page 는 당연히 저절로 연결이 되는거라 생각했고, 원인을 알게 되니 왜그랬을까 싶었다.

 

index.html 로 mapping 을 해주니 정상적으로 index.html 이 접속되었다.

 

근데 신기하게도 index.html 만 수정했을 뿐인데 그 뒤로 transcribe.html 도 정상적으로 접속되었다.

이건 원인이 무엇일까..?

 

예전에 테스트로 진행한 zoom 녹화 audio wav 파일이 text 로 변환되어 페이지에 출력된 모습이다. 화자분리도 된 모습이다. 내용이 텍스트로 변환된게 뻘하게 웃겼다.

 

4. 텍스트로 저장하기

우리의 프로세스는 사용자가 STT 를 통해 변환된 텍스트를 서버에 전송하면, 서버는 그 텍스트를 받아 서버 스토리지에 저장해야된다.

 

우선 우리는 회원정보를 갖고 있기 때문에, 해당 회원이 해당 시간에 저장된 회의 내용임을 분리하기 위해서 사용자 아이디-시간 순으로 파일명을 설정하여 저장하도록 했다.

 

@PostMapping("/saveText")
public ResponseEntity<String> saveText(@RequestParam("userId") String userId,
                                       @RequestBody String text) throws IOException {

    // 회원 정보를 통해 파일 이름 생성
    String fileName = "transcription_" + userId + "_" + new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss").format(new Date()) + ".txt";
    String filePath = "./transcriptions/" + fileName;

    try {
        // 생성된 파일에 텍스트 저장
        FileWriter fileWriter = new FileWriter(filePath);
        fileWriter.write(text);
        fileWriter.close();

        return new ResponseEntity<>("Text saved successfully for user " + userId, HttpStatus.OK);

    } catch (IOException e) {
        e.printStackTrace();
        return new ResponseEntity<>("Error saving text for user " + userId, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

 

또한, transcribe.html 이 실행될 때 해당 메소드가 실행되도록 transcribe 메소드에 saveText 메소드 호출 명령을 추가해주었다.

 

결과

텍스트가 경로에 저장된 모습을 확인할 수 있었다.