AWS, GCP, Docker를 활용한 애견 서비스 포탈 회고록

🔥 프로젝트 소개

▶ 애완동물을 기반으로 하는 서비스 포탈을 구현하는 프로젝트

▶ 개발기간

2020년 11월 ~ 2021년 1월

▶ 팀 구성

Front-End & Back-End: 4명 (성유빈, 이주엽, 이솔지, 이기태)

▶ 개발 스케줄 관리와 소통을 위해 사용한 프로그램

스케줄 관리 프로그램: Slack,Discode
소통 프로그램: Slack

🧐 구현 영상

https://youtu.be/nK3 sgnpixzQ

🎆 내가 맡은 역할

Front-End & Back-End

메인 페이지
1. 메인 페이지의 헤더 UI 구현과 메인 페이지의 동영상 편집
2. 리액트 라우터를 사용하여 불필요한 렌더링 최소화

커뮤니티 페이지

1. 커뮤니티 페이지의 게시판 UI 구현

2. 커뮤니티 페이지의 기본적인 글쓰기, 수정, 삭제 기능 구현

로그인 페이지
1. 로그인 UI 구현
2. Rest API 활용한 소셜 로그인기능 (카카오, 네이버)
3. 로그인 시 JWT토큰 생성으로 자동 로그인 구현
4. 시큐리티 활성화로 권한별 페이징 처리
5. 로그인의 유효기간이 만료되면 자동 로그아웃 구현

회원가입 페이지
1. 회원가입 시 Kakao Postcode API를 통한 주소값 가져오기
3. 회원가입 UI 구현

Jupyter Notebook
1. Selenium과 BS4를 사용하여 사료 데이터를 크롤링

💬 잘한 점 / 아쉬운 점 / 해결 or 개선 방법

🎇 잘한 점

팀원과의 소통

우리 팀은 전반적으로 모든 팀원과 소통이 잘되었다. 아침마다 5분 회의를 통해 서로 계획을 공유하며 하루를 시작하였다. 이 덕분에 서로 어떤 개발을 진행 중이고 어떤 어려움에 처해있는지까지 다 알고 있었다. 피드백 또한 서로 바로 전달할 수 있어서 실수를 빠르게 발견했고 덕분에 처음부터 방향을 잘 잡을 수 있었다. 정말 잘한 부분이 많지만, 우리 팀이 성공적으로 프로젝트를 마칠 수 있었던 이유 중 가장 큰 부분이 소통이라고 생각하기 때문에 제일 처음으로 적었다. 물론 각자의 역할이 있었지만, 팀원들의 지혜가 합쳐졌기에 자신의 역할을 충분히 해낼 수 있었다고 생각한다.

백엔드와 프런트 업무의 통합

백엔드업무와 프론트 업무를 나누지 않은 것은 우리 모두 같은 업무를 통해 처음부터 끝까지 각자 맡은 바를 다하는 것에 대한 목표가 있었기 때문이었다. 프런트업무를 통한 웹사이트 구성과 그에 따른 기능을 불어넣는 백엔드의 작업은 정말 많은 시간이 들었지만 그만큼 뜻깊었다.

첫 번째로 프론트업무를 하며 사용자 편의에 따른 구성에 대해 생각하는 시간을 통해 구성도에 대한 중요성을 배웠다. 어느 위치에 따라 보이는 이미지, 위치에 따라 받아들이는 느낌이 달라 이것을 조정하는데 많은 공을 들였다.

두 번째로 세심한 테이블의 짜임이 중요하다는 것을 배웠다. 처음 DB 모델링을 짤 때 고민을 하고 회의를 통해 짜임새 있는 테이블구성도를 만들려고 노력하였지만, 프로젝트의 진행될수록 계속 수정해야 하는 부분이 생겼고 깔끔하지 못한 부분이 나타났다. 정말 너무 아쉬운 부분이었다. 이 부분에서 팀원들과 얘기도 많이 하고 수정도 많이 하여 그 과정을 다시 정리하고자 많이 노력한 것 같다.

🎇 아쉬운 점

리펙토링

아직 숙련되지 못한 주니어개발자이기 때문에 생기는 부분이긴 하지만 처음으로 프로젝트를 구성할 때에는 많은 아이디어와 무언가를 이루고 싶은 욕구가 많이 있었다.
기능 단위로 구현 목표를 잡았는데 처음에는 계획한 대로 기능구현을 하는 완벽한 프로젝트가 될 수 있을 것 같은 생각이 들었었다. 하지만 막상 프런트엔드/ 백엔드 순으로 프로젝트를 진행하며 처음부터 쉽지 않다는 것을 느꼈다. 웹페이지를 구성하는 첫 부분부터 보이는 것이 다가 아니라는 것을 깨달았다. 계속해서 사용자 입장에서 생각하려고 애썼다.

또한 첫 기능을 구현하며 팀원들한테 코드를 보여줬을 때 생각보다 내가 아는 것이 다른 사람으로서는 어렵고 복잡하고 길다고 느껴진다는 것을 알게 되었다. 우당탕 작동은 하지만 보는 사람이 힘든 코드였다. 그 후 코드를 짜고 기능을 구현할 때 주석을 깔끔히 쓰고 보기 쉬운 코드를 만들기 위해 노력하였다. 어떤 코드이고 어떤 기능을 구현할 때 이것이 실행되는지 누구나 보기 쉽게 하고자 하는 마음이 정말 중요한 것이다. 아직도 부족하지만, 코드에 주석을 꼭 달고 보기 쉽게 작성하고자 항상 신경을 써야겠다고 느꼈던 경험이 되었다.

🎇 해결 or 개선 방법

천천히 확실한 것만큼 중요한 게 없다.

잘하고 싶은 마음에 많은 기능구현을 하고자 달려가다 보니 나에게 남는 게 없다는 생각이 강하게 들었다. 중요한 기능구현을 다 하고 뒤돌아보니 기본이 탄탄하지 못한 것에 대한 후회가 많이 들었다. 더 많은 기능을 빠르게 구현하고 싶은 욕심이 생기는 것은 당연하지만 기본을 깊게 공부해서 코드를 파는 것이 더 중요한 것이다. 경험이 쌓이면서 자연스럽게 구현 속도는 빨라지고 할 수 있는 것도 늘어나겠지만, 기초부터 쑥쑥 천천히 할 때 더 힘이 있을 것이다. 항상 이것을 명심해야겠다.

앞으로도 내 코드를 돌아보며 공부를 하고 계속 발전해 나아갈 때 그 폭이 클 것이다. 기능구현에 만족하는 것이 아니라, 내가 어떻게 구현하였는지 점검하며 개발해 나가야겠다.

🌝 기록하고 싶은 코드 / 함수 / 로직

import  { React,useEffect,useState } from "react";
import "../../styles/Login.css";
import { Link } from 'react-router-dom';
import axios from "axios";
import Kakao from "./Kakao";
import NaverLogin from "./Naver";
import { useNavigate } from 'react-router-dom';
import { API_BASE_URL } from "../../Api-config";



function Login() {
    const navigate =  useNavigate();
    const [memberId, setMemberId] = useState("");
    const [memberPw, setMemberPw] = useState("");
    
    function handleLogin(e){
        e.preventDefault();
        if(memberId === "" || memberPw === ""){
            window.alert("아이디와 패스워드를 확인해 주세요")
            return;
        }
        try {   
            axios.post(API_BASE_URL+"/api/Login",null,
                {   
                    params:
                    {
                        memberId:memberId,
                        memberPw:memberPw,
                    },
                })
                .then((res) =>{
                        if(res !== undefined && res !== null){
                            localStorage.setItem('access_token',res.data.accessToken);
                            const {accessToken} = res.data;
                            
                            axios.defaults.baseURL = 'http://localhost:3000';
                            axios.defaults.headers.common['Authorization'] = accessToken;
                            axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

                            if(localStorage.getItem('refresh_token') === null){
                                localStorage.setItem('refresh_token',res.data.refreshToken);
                            }
                            if(res.status === 404 || res.status === 500 || res.status === 403){
                                window.alert("잘못된 로그인 입니다.");
                                navigate("/");
                            }
                            if(res.status === 200){
                                axios.defaults.headers.common["Authorization"]=`Bearer ${accessToken}`;
                                axios.post(API_BASE_URL+"/api/me")
                                .then((res)=>{
                                    console.log(res);
                                }).catch((error)=>{
                                    console.log(error);
                                })
                                navigate("/");
                            }
                            
                        }else{
                            console.log("Login res localstorage Null Value");
                            window.alert("로그인 토큰값이 없습니다.");
                            document.location = "/Login";
                        } 
                })
        }catch(error){
            alert("로그인 실패");
            if(error.statusCode === '401'){
                console.log("401 오류 입니다.");
            }else if(error.statusCode === '403'){
                console.log("403 오류 입니다.");
            }
        }
    }
    useEffect(()=>{
        console.log("--- 로그인 페이지 렌더 중 --- ")
    },[])

    return(
        <div className="LoginContainer">
            <div className="MainSection">
                <div>
                    <h1 className="LoginBody">로그인 및 회원가입을 시작합니다.</h1>
                </div>
                <div className="MainLogin">
                    <input type="text" id="memberEmail" name="memberEmail" placeholder="아이디를 입력해주세요" maxLength={"30"} 
                     onChange={(e)=>{setMemberId(e.target.value);}}
                     />
                </div>
                <div className="MainLogin">      
                    <input type="password" id="memberPW" name="memberPW" placeholder="비밀번호를 입력해주세요"
                    onChange={(e)=>{setMemberPw(e.target.value);}}
                    />
                </div>
                <div className="MainLogin">
                    <button id="Membersubmit" type="button" onClick={handleLogin}>로그인</button>
                </div>
                <div className="LoginStartButton">
                    <div className="loginStart">
                         <button type="button"  className="LoginKakao">
                                <Kakao/>                       
                         </button>
                         <NaverLogin className="naver"/>
                	</div>
                	<button type="button" className="LoginEmail">
                         <div className="LoginEmailStart">
                              <Link to="/Registeration" className="LoginEmailStart"> 회원가입 시작하기</Link>
                         </div>  
                    </button>
                </div>
            </div>
        </div>
    )
}
export default Login;

코드설명

AXOIS를 통해 SpringBoot와 Rest API통신을 하기 위한 로그인 부분입니다.
1. 로그인했을 경우 백엔드에서 AccessToken과 RefreshToken이 생성이 되고 그 순간부터 유효기간 카운트가 시작됩니다.

2. 받아온 AccessToken는 헤더에 RefreshToken값은 LocalStorege로 저장됩니다.
2. 저장된 토큰값들로 자동로그인 자동 로그아웃의 기능을 할 수 있습니다.

Axois : Node.js와 브라우저를 위한 Promise기반 HTTP 클라이언트입니다.

2022 - 11 - 02