[멋쟁이사자처럼 지원페이지] #2 React 프로젝트와 Spring boot의 연결 - (자원 충돌 방지를 위한 경로 설정)

React 연동하기

 너무 힘들었다 ㅠㅠ React는 3000번 포트, Spring boot는 8080에서 돌아가는데, 이를 연결해줘야 했다. 이렇게 한 이유는 Spring boot로 Restcontroller만을 구현하고 싶었다. API를 결합력 높게 만들고 사용하기 쉽게 만들어야 좋은 웹 페이지를 구현할 수 있다고 생각이 들었다. (전 방식처럼 jsp페이지를 쏴주는 컨트롤러도 만들지 않아도 되기에 정말 좋았다.)

 

 솔직히 RestAPI만을 만드니 프로젝트 자체가 깔끔해보였다. 각 Entity(테이블)에 관한 CRUD와 추가적인 Service만을 구성하니 코드 자체가 읽기 편해지고 유지보수가 쉬워졌다. BaseEntity를 기준으로 각 Entity가 상속 받는 형식으로 개발을 진행했는데 신세계였다. 중간중간 수정 요청이 들어와도 코드 몇개만 손보면 완벽했다.

 

 조금 어려웠던건 React를 Spring boot 안에 넣고 프로젝트를 배포해야 한다는 것이다. 프록시 설정은 사실 다음과 같은 간단한 코드로 해결됐다.

 

"proxy": "http://localhost:8080",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]

 

 중요한건 리액트 자원을 배포시에 classes/public 폴더로 넣어줘야 했다. 다음과 같은 의존성을 추가해 해결했다.

 

<plugin>
    <artifactId>maven-antrun-plugin</artifactId>
    <executions>
        <execution>
            <phase>generate-resources</phase>
            <configuration>
                <target>
                    <copy todir="${project.build.directory}/classes/public">
                        <fileset dir="${project.basedir}/[React 폴더]/build"/>
                    </copy>
                </target>
            </configuration>
            <goals>
                <goal>run</goal>
            </goals>
        </execution>
    </executions>
</plugin>

 

문제해결

 문제는 여기서 생겼다. 나는 다음과 같은 코드로 자동메일 시스템을 만들었다.

 

public void sendAcceptMail(List<AcceptEmailDto> acceptEmailDto) throws MessagingException {

        for (AcceptEmailDto mailInfo:
                acceptEmailDto) {

            MimeMessage message = javaMailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(message, true);

            helper.setTo(mailInfo.getEmail());
            helper.setSubject("강남대학교 멋쟁이사자처럼 서류전형 결과 공지");

            //템플릿에 전달할 데이터 설정
            Context context = new Context();
            context.setVariable("name", mailInfo.getName());
            context.setVariable("interviewDate", mailInfo.getInterviewDate());
            context.setVariable("interviewLocation", mailInfo.getInterviewLocation());
            context.setVariable("interviewTime", mailInfo.getInterviewTime());

            //메일 내용 설정 : 템플릿 프로세스
            String html = templateEngine.process("acceptEmail.html",context);
            helper.setText(html, true);

            helper.addInline("image1", new ClassPathResource("templates/images/_.png"));
            helper.addInline("image2", new ClassPathResource("templates/images/.jpg"));

            //메일 보내기
            javaMailSender.send(message);
        }
    }

 

 여기서 ClassPathResource 메소드를 통해 이미지를 파일을 가지고 오게 되는데 앞에 붙는 기본 경로가 classes이다. 결국 배포되는 target폴더 밑에는 classes/templates 폴더가 생기고 이는 개발시 resources폴더 밑에 있는 자원들이 가게 되는데, react폴더를 불러오기 위해 기본 html 탐색 경로를 public으로 설정하면 resources폴더 밑에 있는 자원들을 가지고 오지 못하게 된다.

 

 이걸로 500 error, white label error가 떠서 한 2일은 고민했던 것 같다. 결국 target을 뜯어보고 경로를 눈치 챈 후에 리액트 프로젝트 파일인 frontend폴더 밑에 메일 템플릿을 넣었다. 그러니 갑자기 intellij IDE에서 빌드할 때 해당 자원을 가지고 오지 못하고 maven package 명령어로만 자원을 target폴더에 넣게 되었다. 그래서 매번 프로젝트를 실행할 때 package명령어를 사용했다.