Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(2-1) – Login Component 만들기

Kakao Maps API 분석을 어느정도 하고 간단하게 로그인 컴포넌트를 만드려고 했다.
근데 하나도 안간단했음..;
공부한 내용을 포함해서 이번 프로젝트 모든 커밋이 있는 레파지토리 참고가능

일단 구조를 로그인 하지 않은(로그인 세션이 유지되지 않은) 상태에서 접속 했을 경우
회원가입을 위한 화면이 보여지고 아이디가 있는 경우에 로그인 버튼을 눌러 로그인 컴포넌트로 화면이 전환된다.
로그인 성공시 메인 화면으로 넘어간다.

위 계획을 세우고 로그인 컴포넌트를 쉽게 생각하고 만들다가 생각보다 많은게 필요한 계획이라는 것을 알았다. 먼저 필요한 추가 라이브러리 나열하면

• react-router ( 컴포넌트 전환용 다른 방법이 있으나 이게 제일 간단할 것 같았음)
• axios (API를 통해 데이터를 받기위해 필요했음)

많다고 생각했는데 두개밖에 없다… redux는 조금 알아보니 프로젝트 규모가 크지 않아서 사용할 필요가 없다고 생각했다. 귀찮기도 하고! 근데 곧 쓸 것 같음

아무튼 먼저 회원가입 컴포넌트를 만들자

import React, {Component} from "react";

class Join extends Component{
    render(){
        }
        return(
            <div id ="join">
                <form id="loginForm">
                    <h1>OLLoc</h1>
                    <span className="loginText">친구들의 지도에 그려진 사진과 글을 보려면 가입하세요</span>
                    <button className="mainBtn">facebook으로 로그인</button>
                    <div id="line">또는</div>
                    <input
                        className="textInput"
                        placeholder="휴대폰 번호 또는 이메일 주소"
                        name="mail"
                    />
                    <input
                        className="textInput"
                        placeholder="성명"
                        name="name"
                    />
                    <input
                        className="textInput"
                        placeholder="사용자 이름"
                        name="userName"
                    />
                    <input
                        className="textInput"
                        placeholder="비밀번호"
                        name="passWord"
                    />
                    <button className="mainBtn">가입</button>
                    <span className="loginText">가입하면 OLLoc의 약관, 데이터 정책 및 쿠키 정책에 동의하게 됩니다.</span>
                </form>
                <div id="checkMem">
                    계정이 있으신가요? <span id = "loginBtn" onClick={this.changeView} >로그인</span>
                </div>
            </div>
        );
    }
}

export default Join;

이어서 로그인 컴포넌트를 만들자

import React, {Component} from 'react';

class Login extends Component{
    render(){
        return(
            <div id ="login">
                <form id="loginForm">
                    <span id="prevBtn"><i className="fas fa-arrow-left"></i></span>
                    <h1 id="mainTitle">OLLoc</h1>
                    <span className="loginText">친구들의 지도에 그려진 사진과 글을 보려면 가입하세요</span>
                    <button className="mainBtn">facebook으로 로그인</button>
                    <div id="line">또는</div>
                    <input
                        className="textInput"
                        placeholder="휴대폰 번호 또는 이메일 주소"
                        name="mail"
                    />
                    <input
                        className="textInput"
                        placeholder="비밀번호"
                        name="name"
                    />
                    <button className="mainBtn">로그인</button>
                    <span className="loginText">가입하면 OLLoc의 약관, 데이터 정책 및 쿠키 정책에 동의하게 됩니다.</span>
                </form>
            </div>
        );
    }
}

export default Login;

input type을 password로 하지 않은 이유는 아직 개발 단계여서 내가 편하려고…
로그인 폼은 인스타그램을 따왔으며 한번에 다 하기엔 글이 너무 길어질 것 같아서
다음 글에 이어서 애니매이션을 주기위한 react-router 설정을 얘기하겠다.