[리액트] 로그인 이벤트 처리하기 (API 연동, 에러 처리, 비밀번호 암호화, 페이지 이동)

최종 UI

로그인 페이지 UI

이벤트 동작 정의하기 

파란색: start / end

노란색: 조건 

초록색: 조건  성공 시 수행되는 작업

빨간색: 조건 실패 시 수행되는 작업

 

플로우 차트

 

---

 

비밀번호 암호화 

비밀번호 입력 시 자동으로 암호화가 진행되고 옆의 체크박스 클릭 시 입력한 비밀번호가 보이도록 합니다. 

비밀번호 입력 시 자동 암호화 표시

 

클라이언트 에러 출력

1. 아이디 및 비밀번호 미입력

미입력 후 로그인 시도 시 아래와 같이 빨간 경고문이 출력되도록 구현할 예정입니다. 

아이디 및 비밀번호 미입력 후 로그인 시도

 

 

2. 존재하지 않은 아이디  & 비밀번호 불일치 

존재하지 않은 아이디이거나 올바르지 않은 비밀번호로 로그인 시도 시 아래와 같이 빨간 경고문이 출력되며, 비밀번호 입력란에 있던 데이터가 초기화됩니다.   

 

💡 경고문이 “아이디 또는 비밀번호 불일치”인 이유

아이디 존재 여부를 공격자에게 노출하지 않기 위해 실패 시 메시지를 통합하였습니다.

 

존재하지 않는 아이디이거나 잘못된 비밀번호 입력 후 로그인 시도

 

 

로그인 성공 

로그인 성공 시에는 메인페이지로 이동하며 백엔드에서 발급해 준 accessToken을 로컬 스토리지에 저장합니다.

로컬 스토리지 선택 이유는 아래에 설명할 예정입니다. 

로그인 성공 후 이동된 메인 페이지

 

회원가입 버튼 클릭

회웝가입 버튼 클릭 시 회원가입 페이지로 이동합니다.

버튼 클릭 후 이동된 회원가입 페이지

 

---

이벤트 처리 구현하기

비밀번호 암호화 구현

 📗참고한 자료

[React] 로그인 페이지 비밀번호 보기/숨기기 구현하기! - input type 변경

 

🔒비밀번호 숨기기

input 태그에 type을 password로 설정하여 비밀번호를 숨길 수 있습니다. 

<input 
    type="password"
/>

 

🔓 비밀번호 표시하기

사용자가 입력한 비밀번호를 확인하고 싶을 때가 있습니다. 따라서, 비밀번호 보기 체크 박스를 만들어 체크 시 비밀번호 암호화를 해제할 수 있도록 하였습니다. 

function SignInField({ baseField, showPassword, setShowPassword, setSignInInfo }) {
    const isPassword = baseField.type === "password";
    const isError = baseField.error !== "";

    return (
        <div className="flex flex-col">
            <div className="flex items-center mb-5">
                ...생략
                {/* 체크 박스 표시 부분 */}
                {
                    isPassword ?
                        <label className="flex items-center mx-5">
                            <input
                                type="checkbox"
                                className="mx-2"
                                checked={showPassword}
                                onChange={(e) => setShowPassword(e.target.checked)}
                            />
                            비밀번호 보기
                        </label> : null
                }
            </div>
            ... 생략
    );
}

 

🔄 동작 원리

 

 

 

• 체크박스 클릭: 사용자가 "비밀번호 보기" 체크박스를 클릭 (false → true)
• 이벤트 발생: onChange 이벤트 트리거
• 상태 읽기: 이벤트 핸들러에서 e.target.checked로 변경된 상태(true) 확인
• 상태 업데이트: setShowPassword로 상태 업데이트
• UI 반영: checked={showPassword}가 true가 되어 체크박스가 체크된 상태로 표시
• 타입 변경: isPassword && showPassword가 true가 되어 input 타입이 "text"로 변경되며 비밀번호가 표시

 

function SignInField({ baseField, showPassword, setShowPassword, setSignInInfo }) {
    const isPassword = baseField.type === "password";
    const isError = baseField.error !== "";

    return (
        <div className="flex flex-col">
            <div className="flex items-center mb-5">
                <label className="w-24 text-left mr-4">{baseField.label}</label>
                <input
                    name={baseField.name}
                    {/*type이 password 이고 showPassword가 true가 되며 암호화가 해제됩니다.*/}
                    type={isPassword && showPassword ? "text" :baseField.type}
                    value={baseField.value}
                    placeholder={baseField.placeholder}
                    className="pl-5 pr-5 py-2 border border-gray-300 rounded w-80 flex flex-col"
                    onChange={e => setSignInInfo(info => ({
                        ...info,
                        [e.target.name]: e.target.value,
                    }))}
                />
                
                ...생략

 

클라이언트 에러 출력

📗 참고 자료

프론트엔드의 에러핸들링

 

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

axios post 작성

export function fetchSignIn(signInInfo, setErrors, navigate) {
    axios.post(
        "http://localhost:8080/api/auth/sign-in", //url
        signInInfo,//body
        {
            headers: { "Content-Type": "application/json" } //header
        },
    )
    ...생략
}

 

에러 처리 로직 (. catch 사용)

로그인 과정에서 발생할 수 있는 에러는 크게 세 가지로 나눌 수 있습니다.

 

유효성 검증 실패: 400 Bad Request

존재하지 않는 회원: 404 Not Found

인증 실패 : 401 Unauthorized

 

fetchSignIn 함수에서는 .catch를 통해 서버 응답 에러를 잡고, 상태 코드와 메시지를 기반으로 error 객체에 담습니다.

 

👉🏻 코드 보기

export function fetchSignIn(signInInfo, setErrors, navigate) {
    api.post(
        "/auth/sign-in",
        signInInfo,
    )
        .then((res) => {
            localStorage.setItem("accessToken", res.data.token.trim()),
            setErrors({ loginIdError: "", passwordError: "", globalError: "" }),
            navigate("/");
        })
        .catch(err => {
            const errorMessages = err.response?.data;
            const Errors = {};

            //잘못된 로그인 정보를 입력한 경우
            if (err.response?.status === 404 || err.response?.status === 401) {
                Errors.globalError = "아이디 혹은 비밀번호가 일치하지 않습니다.";
            }

            //유효성 검증이 실패한 경우
            if (err.response?.status === 400) {

                errorMessages.forEach(element => {
                    if (element.includes("아이디")) {
                        Errors.loginIdError = element;
                    }
                    if (element.includes("비밀번호")) {
                        Errors.passwordError = element;
                    }
                });
            }

            setErrors(prev => ({ ...prev, ...Errors }));
        })
}

 

코드 설명:

• .catch에서 서버 응답(err.response)을 확인하고 상태 코드에 따라 적절한 메시지를 Errors 객체에 담습니다.
• 404, 401 에러는 하나의 공통 메시지를 globalError로 설정하고, 400 에러는 필드별 메시지를 구분하여 loginIdError, passwordError에 저장합니다.
• 마지막에 setErrors로 상태를 업데이트하여 화면에 표시할 준비를 합니다.

 

에러 메시지 컴포넌트

각 필드와 글로벌 에러를 보여주는 컴포넌트를 만듭니다.

 

 

• FieldErrorMessage: 아이디, 비밀번호 필드 옆에 표시
• GlobalErrorMessage: 로그인 전체 실패 시 중앙에 표시

 

function FieldErrorMessage({ value }) {
    return (
        <p
            className="font-bold text-top text-xs text-red-400 ml-28 mb-10"
        > {value}</p>
    );
}

function GlobalErrorMessage({ value }) {

    return (
        <p
            className="flex font-bold text-xs text-red-400 justify-center mt-10"
        > {value}</p>
    );
}

 

 

응답 토큰 저장하기

📗 참고자료

[React] JWT 토큰 저장 위치

 

[Spring Boot + React] 리프레시 토큰과 액세스 토큰 저장 방법 변경 (HTTPOnly 쿠키, 전역 상태관리)

 

토큰(JWT)을 저장하는 방법

• 로컬 스토리지 
• 세션 스토리지
• 쿠키

이번 프로젝트에서는 현재 상황에 맞춰 불필요한 복잡성을 줄이기 위해 로컬 스토리지에 저장하기로 결정했습니다. 

 

[이유 1]

프론트엔드 학습용 프로젝트로 관리해야 할 토큰을 accessToken 하나로 설계하였습니다.

➡️ 복잡한 인증 흐름이나 Refresh Token 관리가 필요하지 않았습니다.

---

[이유 2]

테스트를 위해 만료 시간을 짧게 설정할 예정이기 때문에 탈취당하더라도 위험이 적을 것이라는 판단을 하였습니다.

 

➡️ 사용자의 경험이 낮아지며, 만약 공격자가 만료 시간을 늘린다면 백엔드가 이를 확인할 방법이 없어 여전히 위험이 존재한다는 점은 인지하고 있습니다. 

 

로컬 스토리지의 값은 콘솔을 통해서 바로 확인이 가능합니다.

콘솔을 통해 확인한 토큰 값

 

추후 확장 가능성

향후 실제 서비스를 운영하게 된다면, 보안을 강화하기 위해 다음과 같은 방안을 고려할 계획입니다.

• 로컬 스토리지와 쿠키를 이용한 accessToken과 Refresh 토큰 저장 
• Redis에 Refresh Token 저장으로 약간의 stateful 상태를 유지해 토큰 탈취 및 조작 위험 완화

 

로컬 스토리지 사용하기 (저장 및 불러오기)

📗 참고 자료

LocalStorage로 저장, 불러오기, 삭제 (JS, React)

 

로그인 시 localStorage.setItem( "저장하고 싶은 이름", 넣고 싶은 데이터)을 통해 토큰 저장

import axios from "axios";

export function fetchSignIn(signInInfo) {
    axios.post(
        "http://localhost:8080/api/auth/sign-in",
        signInInfo,
        {
            headers: { "Content-Type": "application/json" }
        },
    )
        .then((res) =>
            localStorage.setItem("accessToken", res.data.token.trim())
        )
        .catch(err => console.log(err));
}

 

👉🏻 trim을 사용한 이유 

사용 전 백엔드에서 아래와 같은 오류가 발생하였습니다. 

JWT strings may not contain whitespace 에러 메세지

 

콘솔로 토큰 값을 확인해 보니, 백엔드와 프론트 모두에서 토큰이 여러 줄로 출력되는 것을 확인할 수 있었습니다.

• 아마 전송 과정에서 토큰이 너무 길어 줄바꿈이 발생한 것으로 추측됩니다.
• 이로 인해 JWT가 유효하지 않은 문자열로 인식되어 위와 같은 오류가 발생한 것 같습니다. 

 

Intellij 콘솔에서 찍은 Token 값

 

개발자 도구에서 찍은 Token 값

 

다른 api에서는 localStorage.getItem( "저장했던 이름")을 통해 accessToken을 가져올 수 있습니다. 

 

페이지 이동하기 ( useNavigate)

로그인 성공 시(로그인 버튼 클릭): 메인 페이지로 이동 

회원가입 버튼 클릭 시 : 회원가입 페이지 이동

 

로그인 버튼을 눌렀을 때 에러 없이 정상적으로 처리되다면 메인 페이지로 이동합니다. 

 

💡훅의 위치

useNavigate와 같은 훅은 React가 상태를 올바르게 구분할 수 있도록 컴포넌트 최상위에 위치시켜야 합니다.
따라서, 상단에서 useNavigate를 선언한 뒤, 해당 값을 fetch 함수에 props로 전달하여 사용하도록 구현했습니다.

➡️ React는 훅의 호출 순서를 기준으로 상태를 구분합니다. 

 

SignIn 컴포넌트

function SignInPage() {
    const [showPassword, setShowPassword] = useState(false);
    const [signInInfo, setSignInInfo] = useState({ loginId: "", password: "" });
    const [errors, setErrors] = useState({ loginIdError: "", passwordError: "", globalError: "" });
    const navigate = useNavigate() // navigate 할당

    const fields = [
        { name: "loginId", label: "아이디", type: "text", value: signInInfo.loginId, placeholder: "아이디를 입력해주세요.", error: errors.loginIdError },
        { name: "password", label: "비밀번호", type: "password",value: signInInfo.password, placeholder: "비밀번호를 입력해주세요.", error: errors.passwordError }
    ];

    //로그인 폼 제출 
    function handleSignInSubmit(e, signInInfo, setErrors, navigate) {
        e.preventDefault();

        setErrors({ loginIdError: "", passwordError: "" });
        fetchSignIn(signInInfo, setErrors, navigate) //api 호출 함수 
    }

 

fetchSignIn 함수

export function fetchSignIn(signInInfo, setErrors, navigate) {
    api.post(
        "/auth/sign-in",
        signInInfo,
    )
        .then((res) => {
            localStorage.setItem("accessToken", res.data.token.trim()),
            setErrors({ loginIdError: "", passwordError: "", globalError: "" }),
            navigate("/"); //이동
})

 

 

이번 과정에서 가장 고민했던 부분은 토큰 저장 방법과 백엔드와 클라이언트 간의 에러 처리였던 것 같습니다. 
아직도 에러 처리 부분은 완전히 감이 잡히지 않았고, 만약 현재 포스터에서 다룬 것보다 훨씬 다양한 에러가 발생한다면, 지금과 같은 방식은 하드 코딩이 계속 늘어나는 등 한계가 존재할 것이라고 생각합니다. 

 

다음 포스터에서는 더 많은 데이터를 다루는 회원가입 페이지 이벤트 처리를 다루면서, 다시 한번 에러 처리에 대한 내용을 정리해야 할 것 같습니다.