[REACT] 회원가입 파트에서 백앤드와 통신했던 코드

버튼이나 여백 다듬기 전에  초안느낌으로 통신만 가능하게 만들어둔 html과 css기반 화면 창

디자인은 영상 평가 (2차 평가) 또는 3차 평가가 가까워진다면 더 수정해부도록하고!

 

이제 통신을 위해 마지막으로 리액트를 얹었는데 마이 개발 순서는 늘 

html -> css -> js과 함께 통신 코드 짜기 ~.~ 즉 통신이 가장 마지막 순서였고

이미 짜여진 반듯한 창 내에서 통신 코드를 짜는 게 맘이 편해서 자연스레 이 흐름대로 개발했다

 

 

.

어쨌든 가장 골치 아프지만 어떻게 보면 가장 기본 중에 기본인 회원가입 통신 3가지를

오늘부로 막을 내렸던 것 

 

보이나요 나의 console 창,, 아름다움이,,

 

이런 예뿌장한 콘솔창이 뜨기 전까지는 아래와 같이 구질구질한 창만 계속 봐야했었다ㅠ

 

 

어찌됐건

 

백엔드와의 통신 모두 성공 (code=0)했고, 회원가입에서 가입이 정상적으로 완료됐다면 로그인 창으로 랜딩되는 것 까지

import { useNavigate } from 'react-router-dom';

사용해서 해결했다 !.! 사실 오늘 하루종일 붙잡고 있던 것이 어떤 함수를 써서 페이지를 랜딩시킬지였는데

리액트 버전에 따라서 함수 지정하는 것들이 달랐기에 앞으로 오류가 나면 버전을 먼저 보고 해당 함수를 끌고 올 것을 또또 각인하묘

 

useHistory으로 오류가 난 것을 useNavigate로 깔꼼히 해결했다

이제 새로운 커밋을 할 수 있게되어서 굉장히 설레고 흥분했지만

이제 accesstoken, localstorage 모두 담고 헤더에도 차곡차곡 담아야해서 갈 길이 멀ㄷㅑ

그치만 기분은 좋기에 정리를 좀 해부자

 

---

우선!

 

회원가입 시 백엔드와 필요한 통신 코드는 총 3개 였는데,

1. 이메일로 인증 코드 전송하는 것

2. 이메일 인증 코드 작성 시 맞으면 code=0/성공 값 반환해주는 것 (틀릴 시 failure 코드 통신 받아서 컨솔창에 에러 입력)

3. 회원가입 버튼 클릭 시 해당 정보가 db로 등록이 되는 것

 

그리고 프론트만의 통신 코드라고 하면

1. 각 상황에 맞는 alert, console 값 띄우기

2. 회원가입 버튼 클릭 시 회원가입이 된다면, 로그인 페이지로 랜딩되는 것 

 

회원가입 성공하고 (2. 회원가입 버튼 클릭 시 회원가입이 된다면, 로그인 페이지로 랜딩되는 것) 하고 싶은데 계속 중복되는 이메일이라고 가입된 이메일이라고 떠서 광기로 내 모든 이메일을 총동원해서 db 등록하고 로그인 페이지 랜딩시키는 과정 연습했었다 찐광끼 약 7개 메일은 사용한 것 같다

본인장 통신을 위해 메일을 새로이 팠음니다 박새로이ㅋㅋ

---

*error*

 

여기서 2번 [이메일 인증 코드 작성 시 맞으면 code=0/성공 값 반환해주는 것 (틀릴 시 failure 코드 통신 받아서 컨솔창에 에러 입력)] 에서 오류가 계속해서 났었다 이거 참 피란오빠와 나의 골칫거리였다 

그치만 엊그제에 문제를 해결했는데 이는 백에서 post 가 아닌 get을 사용해서 코드를 짰기 때문이었다

POST 하세요!!

 

백엔드 지식과 http 통신 규약, api 명세서 공부 등 7월에 나름 차곡차곡 쌓았다고 생각했는데 막상 개발 들어감과 동시에 프론트 코드밖에 집중하지 못해서 api 명세서에서 이상함을 못느끼고 있다가,, 쩌 오류 골칫거리때문에 온갖 블로그와 내 친구 gpt에게 물어본 결과 이런 결과 !포!스!트! 사용해라는 결론이 나왔고 백에서 이를 고치자마쟈 통신이 되었던 것 😽 그래서 프론트도 백 기초 지식을 쌓고 백도 프론트 기초 지식을 쌓고 무엇보다 이론도 중요하다는 걸 새삼스레 또 배운다 저는뇨 이론보다는 실전에 첨벙첨벙 뛰어들고 개념을 주워담듯이 익히는 편이었는데 웹 개발할 때나 머신러닝 모델 만들 때나 저엉말 어떤 프로젝트를 들어갈 때에든 기초 지식을 초반에 단단하게 잡는 게 중간에 안 헤메는 제일 좋은 방법이었ㄷㅏ 모름을 인정하고 익히고 성장하자

 

---

api 명세서 바탕으로 어떻게 코딩을 하는냐!? 1번 과정 기억을 회상해서 글을 써부겠다

 

* 백엔드 API 명세서

 

User 이메일 인증 번호 전송

HTTP request

- POST /v1/users/email

 

* 프론트

 

이메일 인증 번호 전송 API 처리 함수 -> sendEmailVerification

 

[ user_actions.js 파일 _ 통신 파일 코드 ]

export function sendEmailVerification(email) {

return async (dispatch) => {

try {

const response = await axios.post('/v1/users/email', { email });

console.log(response.data);

// 서버로부터 인증번호 전송 성공 시

dispatch({ type: 'EMAIL_VERIFICATION_SENT', payload: response.data });

console.log('이메일 인증 번호가 전송되었습니다.');

} catch (error) {

console.log(error.response);

// 서버 오류 등 요청 실패 시

dispatch({ type: 'EMAIL_VERIFICATION_FAILURE', payload: error.response });

}

};

}

 

[ RegisterPage.js 파일 _ 로직 코드 ] _ onEmailVerificationHandler 함수는 이메일 칸이 차있는지 확인하는 함수

 const onEmailHandler = (event) => {

setEmail(event.currentTarget.value);

};

 

 

const onEmailVerificationHandler = () => {

const emailPattern = /\S+@\S+\.\S+/;

if (!Email) {

alert('이메일을 먼저 입력해주세요.');

return;

}

if (!emailPattern.test(Email)) {

alert('올바른 이메일 형식을 입력해주세요.');

return;

}

dispatch(sendEmailVerification(Email))

.then(() => {

alert('인증코드가 발송되었습니다. 이메일을 확인하세요.');

setIsEmailVerified(true);

setVerificationCode(''); // Reset verification code input field

localStorage.setItem('isEmailVerified', JSON.stringify(true));

})

.catch((error) => {

if (error.response) {

alert(error.response.data.message);

} else {

alert('서버 오류가 발생했습니다.');

}

});

};

 

 

[ RegisterPage.js 파일 _ 버튼 클릭 HTML 코드 ]

<div>

<label>Email</label>

<input type="email" value={Email} onChange={onEmailHandler} />

<button className="button12" type="button" onClick={onEmailVerificationHandler}>

인증번호 발송

</button>

</div>

 

 

 

 

요렇게 하시면 된답니다아 파일 하나하나 함수 하나하나 설정하고 오류 고치는 과정이 힘들지만

메일이 직접 오구 통신이 성공했을 때는 그 어느때보다 기쁘답니댜

---

본론으로 코드로 넘어가부자!

 

우선 첫번째 통신에서 user_actions.js 파일에서는 sendEmailVerification 함수 지정

통신코드 입력 파일을 따로 만들어주었는데, 이렇게 따로 빼서 만들면 나름 통신과 화면 창이 분리가 되어서 보기 좋다는 장점과

약간의 귀찮음의 단점이 있다 어쨌둔 코드를 보자

// 이메일 인증 번호 전송 API 처리 함수

export function sendEmailVerification(email) {

return async (dispatch) => {

try {

const response = await axios.post('/v1/users/email', {email });

console.log(response.data);

// 서버로부터 인증번호 전송 성공 시

dispatch({ type: 'EMAIL_VERIFICATION_SENT', payload: response.data });

console.log('이메일 인증 번호가 전송되었습니다.');

} catch (error) {

console.log(error.response);

// 서버 오류 등 요청 실패 시

dispatch({ type: 'EMAIL_VERIFICATION_FAILURE', payload: error.response });

}

};

}

두번째 통신에서 user_actions.js 파일에서는 verifyEmailVerification 함수 지정

// 이메일 인증 번호 인증 API 처리 함수

export function verifyEmailVerification(email, certificationNum) {

return async dispatch => {

try {

const response = await axios.post('/v1/users/email/verify', {

email: email,

certificationNum: certificationNum

});

const responseData = response.data;

if (responseData.code === 0) {

dispatch(emailVerificationSuccess(responseData));

console.log(responseData);

console.log('이메일 인증이 완료되었습니다.');

alert('이메일 인증이 완료되었습니다.');

}

else {

dispatch(emailVerificationFailure(responseData));

console.log(responseData);

alert('이메일 인증에 실패하였습니다.')

}

 

return responseData; // 이부분이 중요합니다. responseData를 반환하여 handleVerifyEmail 함수에서 사용합니다.

} catch (error) {

console.log(error.response);

dispatch({ type: 'EMAIL_VERIFICATION_FAILURE', payload: error.response });

throw error; // 이 부분은 오류가 발생하면 throw를 통해 handleVerifyEmail의 catch로 넘어갑니다.

}

};

}

세번째 통신에서 user_actions.js 파일에서는 registerUser 함수 지정

export const registerUser = (userData) => async (dispatch, getState) => {

try {

const response = await axios.post('/v1/users/sign-up', userData);

if (response.data.code === 0) {

const responseData = response.data;

console.log(responseData);

alert('가입이 정상적으로 완료되었습니다.');

dispatch({

type: REGISTER_USER,

payload: responseData

});

console.log('가입이 정상적으로 완료되었습니다.');

 

return true; // 회원가입 성공시 true 반환

} else {

alert(response.data.message);

return false; // 실패시 false 반환

}

} catch (error) {

if (error.response) {

alert(error.response.data.message);

}

return false; // 실패시 false 반환

}

};

이처럼 백엔드 api 명세서를 바탕으로 코드 0을 성공값으로 입력해주었고,

RegisterPage.js 코드에 이러한 함수들을 끌고 와서 함수 맺어주고 버튼에 끌어와주는 등의 방식을 이용했다

 

 

회원가입 버튼 클릭 시, 회원가입이 완전히 성공되었다면 로그인 페이지로 랜딩시켜주는 코드는 아래와 같고,

RegisterPage.js 코드에서 이를 작성했다

const onSubmitHandler = async (event) => {

event.preventDefault();

if (!Email || !Name || !userPw || !phoneNum) {

alert('모든 필드를 입력해주세요.');

return;

}

if (!/\S+@\S+\.\S+/.test(Email)) {

alert('유효한 이메일 주소를 입력해주세요.');

return;

}

const userData = {

email: Email,

name: Name,

phoneNum: phoneNum,

userPw: userPw,

emailAuth: true

};

const isRegistered = await dispatch(registerUser(userData));

if (isRegistered) {

navigate('/v1/users/sign-in'); // useNavigate Hook을 통해 페이지 이동

}

};

 

RegisterPage.js 내 기특한 코드들 다 불러오고싶지만 200줄이 넘는 이슈로 그만 불러오도록하고

열시미 커밋을 하도록하자

 

그렇게 db에 등록된 내 개인정보

 

아 - 수고했다 이제 토큰 담구 스토리지 담아부쟈 〰️ 🖤

 

 

 

아 근데 잠시만 

기술블로그 볼 때마다

~하자 / 이제 ~해보자 

라는 말투만 보여서 다들 진취적이다,, 바뿌다,, 라고 생각했는데 왜 내가 이 말투를 쓰고있능거지

 

움

이 말투를 쓰는 이유는

정말 통신과 웹개발에 급급하기때문에 가보자는 말과 동시에 내가 전진하려는 힘을 얻기 위한 원동력의 말투라고할까나뭐시기쬬ㅎ시기

어쨌둔

포스팅

안

녕