로그인 + 게시판(1: 배경 및 기능 설명)

대학교 졸업작품으로 웹을 하나 만들기로 했는데 클라이언트는 React, 서버는 node.js express 그리고 DB는 mysql을 사용하기로 했다. 그래서 관련된 무료 강의 영상을 클론 코딩식으로 공부하면서 활용해보기 위해 스스로 무언가를 만들어봐야겠다 생각했다. 가장 간단하면서 기초가 되고 Restfull한 API 방식의 흐름을 익히기에 적당하다고 생각된게 로그인 기능이였고(보안 걱정없이) 이어서 게시판까지 만들어보았다. 간단한 프로젝트를 만들면서도 컴포넌트 파일의 위치와 구조도 잘못되었다 느꼈고 설계의 중요성을 한번 더 깨닫게 되었다. 뿐만 아니라 제작하면서 간단한 로그인 기능이지만 브라우저 내 sessionStorage를 처음 사용해보게 되었고 아이디 생성이나 로그인 과정에서 어떤 알고리즘 형식인지에 따라 차이가... 많이 날 수 있겠구나 라는 생각도 하게 되었다.

간단하지만서도 스스로 무언가를 만들어보고 에러에 부딪히고 계속 도전해봐야 얻는게 많은 것 같다.   

프로젝트 구조

해당 프로젝트는 클라이언트 폴더에 리액트 파일들을 포함하고 같은 위치에 서버역할을 하는 server.js 파일을 생성하였다. 리액트의 컴포넌트 폴더에는 게시판과 로그인을 담당하는 컴포넌트들을 모두 같은 위치에 설정하였는데 간단한 프로젝트라 상관없지만 웹의 형태나 프로젝트의 크기에 따라 구성을 더 보기 좋고 깔끔하게 바꿀 필요가 있다. 필자는 기능 구현을 중심으로 공부했기 때문에 이 구조에 맞게 개발한 내용을 기술한다.  

로그인 기능으로는 로그인, 회원가입, ID/PW 찾기, 기능을 구현하였다. 회원가입에는 ID 중복체크와 비밀번호를 재확인 하도록 구현하였고 ID/PW찾기는 ID와 PW를 분리해서 찾을 수 있도록 구현하였다. 게시판에서는 로그인 상태에서만 게시글을 작성할 수 있도록 하였고 게시글을 조회하는 것은 비로그인 상태에서도 가능하게 구현하였다. 게시글 조회에서는 게시글 전체 조회, 내 게시글 조회를 만들었고 게시글을 상세하게 볼 수 있게 컴포넌트를 따로 만들었고 자신의 게시글만 삭제하는 기능도 구현하였다. 

메인 페이지

메인 페이지는 다음과 같다. 

이제 코드를 보며 기능 중심으로 설명을 이어보도록 하겠다. 

 

https://github.com/sh970901/React_Login-and-Board

GitHub - sh970901/React_Login-and-Board