[SV 1주차] 회원가입 시 이메일 인증오류

 

Minified React error #31

 

• 프론트엔드 : 백엔드가 보낸 에러 객체를 텍스트로 바꾸지 않고 그대로 화면에 그리려고 해서 터진 화면 에러
• 근본적인 원인: 백엔드에서 요청을 정상적으로 처리하지 못하고 에러 응답(timestamp, status, error, path)을 프론트엔드에게 보냈기 때문

 

---

 

백엔드에서 추적해본 부분

1. security > SecurityConfig.java

회원가입/이메일 관련 주소가 permitAll()로 허용되어있는지 확인 -> 없다면 시큐리티가 요청을 차단한 것

 

.requestMatchers("/api/login/**").permitAll()

위와 같이 로그인/회원가입 관련권한에서는 로그인, 회원가입, 마이페이지 주소만 로그인 없이 접근할 수 있도록 permitAll()이 되어있음.

이메일 인증 주소는 코드에서 확인 불가.

-> 이 상태라면 스프링 시큐리티가 이메일 인증 요청을 중간에 차단해버리기때문에 프론트엔드에서 React에러가 터짐

 

---

2. email > EmailController.java

이메일 인증 요청을 받는 URL 주소가 여기에 구현되어 있는지 확인

 

@RestController
@RequestMapping("/api/email")

위와 같이 구현되어 있는 것을 볼 수 있음

그러나, SecurityConfig.java에서는 /api/email/ 부분이 없기 때문에 차단 에러가 뜬 것

 

=> SecurityConfig.java에 .requestMatchers("/api/email/").permitAll() 이 줄을 추가하면 

이메일 인증 요청이 EmailController로 들어갈 것으로 예상됨

---

3. signup > SignupController.java

EmailController에 주소가 없는 경우에, SignupController에 회원가입용 이메일 인증 주소가 들어있는지 확인

 

---

4. email > EmailService.java

주소와 보안 설정이 다 맞는데도 에러가 난다면, 실제 메일을 발송하는  SMTP 연동 로직이 올바른지 확인 

 

private JavaMailSender mailSender; // 메일 발송을 위한 스프링 표준 도구 선언

//메일 발송 비즈니스 로직 메서드
public void mailSend(String setFrom, String toMail, String title, String content){
        //Config에서 정의한 JavaMailSender객체 사용, MimeMessage 객체 생성
        MimeMessage message = mailSender.createMimeMessage();

 

이외에도 추가적으로 try-catch문을 활용하여 실제 메일 발송 명령어와 에러 발생 시 시스템 다운을 막기 위한 예외 처리가 되어 있는 것을 확인할 수 있음 ( 여기서의 예외 처리는 요청이 서비스 레이어까지 정상적으로 도달했을 경우에만 동작함. 따라서 현재와 같은 이메일 인증 오류는 막을 수 없음 )

 

 

---

 

위의 경우에서는 Back의 코드를 보았으나 오류 해결은 production-back의 코드를 기준으로 하는 것이 맞음

IntelliJ에 production-back 코드를 클론해와서, 내 실제 네이버 계정을 연동하는 등의 환경변수 설정을 한 후, 추가 실습을 진행함

 

1. SwlugWebApplication을 Run

2. 포스트맨에 아래와 같이 실습하면 Body부분에 적은 메일로 결과와 같은 인증번호가 발송됨

---

 

 

오류 화면 (Objects are not valid as a React child)

• 상황: 백엔드 연동이 제대로 안 되었거나 에러 상태일 때, 스프링 부트가 timestamp, status, error, path가 담긴 객체(Object) 데이터를 리턴
• 원인: 리액트는 화면에 글자나 숫자가 올 줄 알고 출력하려 했는데, 뜬금없이 복잡한 객체 덩어리가 들어오니까 감당하지 못하고 화면을 하얗게 지우며 터짐

---

추가 실습으로 알게된 점

• 상황: production-back 코드를 가져와서 네이버 SMTP 환경 변수를 세팅하면, 백엔드가 메일을 발송하고 순수한 인증번호 숫자 325748을 리턴
• 결론: 올바른 환경 변수가 주입된 상태에서는 백엔드 서버 엔진과 외부 메일 연동 기능은 오류 없이 가동

-> 에러 발생 시 백엔드가 보낸 예외 객체 데이터 형식과 이를 안전하게 예외 처리(try-catch)하지 않고 화면에 바로 렌더링하려 한 프론트엔드의 방어 코드 부재가 맞물려 발생한 양방향성 버그