myCalendar 개발일지

myCalendar 프로젝트

JWT (JSON Web Token)에 대한 간단한 설명

JWT는 JSON Web Token의 약자로, 웹 애플리케이션에서 사용자 인증을 위한 토큰 기반의 인증 방식입니다. JWT는 특정 정보를 JSON 형식으로 안전하게 전송하기 위해 사용됩니다. 토큰은 서버에서 생성되어 클라이언트로 전송되며, 클라이언트는 이 토큰을 사용하여 인증을 요청합니다.

JWT는 크게 세 부분으로 구성됩니다:

1. Header: 토큰의 유형과 해싱 알고리즘을 포함합니다. 예를 들면 {"alg": "HS256", "typ": "JWT"}와 같은 형태입니다.

2. Payload: 토큰에 담길 정보들을 포함합니다. 사용자의 ID, 권한, 기타 사용자 정의 정보 등을 담을 수 있습니다.

3. Signature: Header와 Payload를 Base64로 인코딩한 뒤, 서버에서 비밀 키(secret key)를 사용하여 서명합니다. 이를 통해 토큰이 위변조되지 않았는지 검증합니다.

로그인 페이지 컴포넌트 구조 설명

myCalendar 프로젝트에서 로그인 페이지를 구현하기 위해 다음과 같은 컴포넌트 구조를 사용했습니다.

LoginPage 컴포넌트

import {SetStateAction, useState} from "react";

import LoginHeader from "../Public/Header/LoginHeader";
import InputTag from "../Public/Desktop/Input/InputTag";
import SubmitBtn from "../Public/Desktop/Button/SubmitBtn";
import SocialGroup from "../Public/SocialGroup/SocialGroup";

import classes from "./Login.module.css";
import {Link} from "react-router-dom";

function Login() {
    const [id, setId] = useState('');
    const [pw, setPw] = useState('');

    const saveUserId = (event: { target: { value: SetStateAction<string>; }; }) => {
        setId(event.target.value);
    };

    const saveUserPw = (event: { target: { value: SetStateAction<string>; }; }) => {
        setPw(event.target.value);
    };

    const loginBtn = function () {
        console.log(id)
        console.log(pw)
    }

    return (
        <div className={classes.content}>
            <LoginHeader/>
            <div className={classes.header}>
                로그인
            </div>

            <div className={classes.inputArea}>
                <InputTag title="이메일" type="text" value={id} onChange={saveUserId} errorMsg={""} disabled={false} />
                <InputTag title="비밀번호" type="password" value={pw} onChange={saveUserPw} errorMsg={""} disabled={false} />
            </div>

            <SubmitBtn text="로그인" flag={false} eventBtn={loginBtn} />

            <div className={classes.funArea}>
                <div>비밀번호 찾기</div>
                <div>|</div>
                <Link to={"/signup"}>회원가입</Link>
            </div>

            <hr className={classes.line}/>

            <div className={classes.socialFunc}>
                SNS계정으로 간편 로그인
            </div>

            <SocialGroup/>
        </div>
    );
}

export default Login;

위의 코드에서 Login 컴포넌트는 로그인 페이지의 전체를 담당하는 최상위 컴포넌트입니다. 페이지의 헤더와 로그인 입력 폼, 그리고 로그인 버튼이 포함되어 있습니다. 상태 관리를 위해 useState 훅을 사용하여 id와 pw라는 두 개의 상태를 선언했습니다. 이로써 입력 폼에 사용자의 아이디와 비밀번호를 관리할 수 있습니다.

loginBtn 함수

로그인 버튼을 클릭할 때 실행되는 loginBtn 함수는 아직 실제 로그인 요청 처리는 구현되지 않았습니다. 이 함수는 추후에 서버와 통신하여 사용자의 인증을 처리하고 JWT 토큰을 발급받는 부분을 담당할 것입니다. 이 함수는 프로젝트의 기능 정의와 디자인 작업을 먼저 마치고 구현될 예정입니다.

위와 같은 컴포넌트 구조를 사용하여 로그인 페이지를 구현함으로써 사용자에게 아이디와 비밀번호 입력을 제공하고, 로그인 버튼을 통해 로그인 기능을 요청할 수 있도록 준비하였습니다.

공동 컴포넌트

자주 사용될 가능성이 있는 SocialGroup과 loginHeader, InputTag, SubmitBtn들은 별도의 공동 컴포넌트로 분리하였습니다. title과 type등을 props를 통해 전달하여 다양한 페이지에도 사용 할 예정 입니다.

결과물

로그인 페이지 작업 우선순위

로그인 페이지를 처음에 구현하는 이유는 로그인 기능을 필수로 진행해야 하는 myCalendar 서비스의 구성 때문입니다. 사용자들은 로그인을 거쳐야만 myCalendar 서비스를 이용할 수 있어야 하기 때문에, 로그인 기능은 핵심적인 부분입니다. 따라서 로그인 페이지를 먼저 작업하여 사용자 인증을 확보하고, 로그인된 사용자에게만 서비스 기능을 제공하는 것이 합리적인 방법입니다.

로그인 기능을 우선으로 구현함으로써 프로젝트의 핵심적인 부분을 먼저 구성하고, 이후에 추가적인 기능과 디자인을 진행하는 데 보다 명확한 방향성을 제시할 수 있습니다. 로그인 페이지를 먼저 만들었다는 점을 기존 포스팅에 추가하여 사용자들에게 프로젝트의 구조와 방향성을 소개하는 것이 중요합니다.

오늘은 로그인 페이지를 만들고, JWT에 대해 간단한 설명과 함께 React 코드를 작성하여 사용자 인증을 준비했습니다. 앞으로 남은 기능들도 지속적으로 구현하여 실력 향상에 노력하겠습니다. 감사합니다!