슈러그 홈페이지 개선점

1. 회원가입 시 이메일 인증 오류

 

 

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btimestamp%2C%20status%2C%20error%2C%20path%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

 

- Minified React error #31 (리액트 에러 31번: 객체 렌더링 불가능 오류)

- at vo (...), at e (...), at wl (...) 문구들은 'Call Stack Trace (호출 스택 추적)' 정보

 

• main.f90cadac.js:2:97654 의미: 현재 배포되어 있는 리액트의 압축된 소스 코드 파일(main...js)의 2번째 줄, 97,654번째 글자에서 정확히 크래시(Crash)가 터졌다는 네비게이션 주소
• 코드가 영어 한 글자(vo, e, wl)인 이유: 실제 개발자가 짠 리액트 함수 이름은 EmailVerificationComponent 같은 정상적인 단어였을것. 하지만 서버에 배포할 때 용량을 줄이고 코드를 숨기기 위해 빌드 도구(Webpack 등)가 코드를 외계어처럼 압축(Minify/Uglyfy)해 버렸기 때문에 저렇게 깨진 것처럼 보이는 것
• 결론: 이 회색 박스는 "리액트 내부 소스 코드의 아주 깊숙한 연산 과정까지 에러가 연쇄적으로 타고 올라와서 결국 프론트엔드가 뻗음

 

리액트에게 저 {timestamp, status, error, path}라는 문제의 객체를 던진 주체:  스프링 부트(Spring Boot) 백엔드 서버

+)스프링 부트는 서버 내부에서 예기치 못한 치명적인 에러(예: 메일 발송 기능 에러 등)가 터졌을 때, 개발자가 따로 예외 처리(Try-Catch)를 커스텀하게 해두지 않으면 무조건 저 4가지 Key를 가진 JSON 객체 리포트를 자동으로 생성해서 반환

 

-----요약-----

1. 회원가입 이메일 인증 요청이 백엔드로 들어감.

2. 백엔드 내부에서 메일 서버(SMTP) 연동이 터지면서 에러 발생.

 

 

 

3. 백엔드 개발자가 예외 처리를 안 해두는 바람에, 스프링 부트가 {timestamp, status, error, path}가 담긴 에러 객체를 리액트에게 던짐.

4. 리액트 개발자 역시 백엔드 응답 데이터가 '객체'인지 '글자'인지 유효성 검사를 안 했기 때문에 , 그 에러 객체를 받고 화면을 그리려다 Minified React error #31을 내며 웹사이트 전체가 다운(Crash)

 

 

 

---

 

2. 비밀번호 재설정 오류

 

 

- 가입시 사용한 이메일 넣었을 때 ( 시스템 내부 정보 노출 문제 )

 

---

 

- 가입시 사용하지 않은 이메일 넣었을 때 ( 계정 열거 취약점 )

 

---

 

3. 마이페이지

 

마이페이지로 들어가면 추가 인증없이 바로 가입한 정보 노출

-> 전화번호 이메일 등을 마스킹처리하거나, 비밀번호 재확인(추가인증단계) 도입

 

 

---

 

4. 지원 페이지 날짜 표기 오류

 

- HTML 코드를 손으로 직접 바꾸는 하드코딩 방식으로 관리?

- 데이터 매핑 오류?

---

 

5. 블로그 내 게시글 이미지 로드 실패

 

- DB 내 이미지 상대 경로 설정 오류?

- 서버 내 업로드 폴더 위치 불일치(정적 리소스 매핑 문제)?

 

 

 

 

---

 

 

오류라고 하기는 좀 그렇고,, 

 

+) 가입 시 닉네임 중복이 되는지 여부 -> 입력하자마자는 오류메시지가 뜨지않음 최종 가입버튼 클릭시에 오류메시지가 뜨는지 안뜨는지는 알수없음 ( 이메일 인증오류때문에 최종 가입버튼까지 못감)

 

+) 정보 수정 운영진에게 문의 -> 이메일이나 연락처 등은 유저가 마이페이지내에서 2차인증을 거쳐 직접 바꿀 수 있도록 하기