[Node js](express) 회원가입&로그인 구현

node js의 express js를 활용하여 회원가입과 로그인을 구현해 보았다.

간략하게 설명하자면,

 

1.먼저 루트로 접속을하면 환영인사와 함께 로그인과 회원가입 버튼을 표시한다.

 

2.회원가입을 누르면 회원가입을 할 수 있는 form과, 제출버튼이 포함된 페이지가 표시되고(메인으로 이동하는 버튼도 함께),

name,password를 받아 회원가입을 처리하게 되는데, mysql에 동일한 name이 존재하면 '동일한 name의 사용자가 존재합니다'라는 메세지를 ajax를통해 새로고침없이 띄워주고 동일한 name이 존재하지 않으면 회원가입을 정상적으로 처리했다는 ajax를 띄워준다.

(실제로 database에 등록된다.)

 

3.로그인을 누르면 로그인을 할 수 있는form,제출버튼이 포함된 페이지가 표시되고,

name이 db안에 존재하지 않으면 없는사용자라고 ajax로 알려주고,

name은 존재하는데 password가 다르면 비밀번호가 다르다고 ajax를 통해 알려준다.

로그인에 성공하면 session을 유지하기위한 정보를 담아주고, 

이 session이 유지될 경우에만 볼수있는 hiddenpage를 보여준다.

 

4.로그아웃을 클릭하면 session을 끊어주고, 초기화면으로 바꿔준다.

 

 

먼저, 원하는 editor를 선택하고 project환경을 구축한다.

 

(1)초기설정

터미널에서 해당 프로젝트 폴더로 이동한 후, npm init을 해준다.

그럼 package.json이라는 파일이 생성되는데, 이 파일은 프로젝트의 중심이 된다.

 

 

dependencies항목을 살펴보면 여러 모듈들이 설치되어 있는데,

이는 npm install (설치를 원하는 모듈) --save를 통하여 설치할 수 있다.

이때 --save옵션은 다른 환경에서도 프로젝트에 필요한 프로그램을 npm install 명령어로 한번에 설치할 수 있게

package.json 파일의 dependencies항목에 추가해주는 역할을 한다.

회원가입 및 로그인을 위해 설치한 모듈들을 간략히 살펴보자면,

 

1.body-parser란, post로 들어오는 정보들을 받기위한 모듈이다.

 

2.ejs란,template engine중 하나 인데, template engine이란 template과 data를 분리하여 사용하기 위한 모듈이다.

이를 사용하면 유지보수가 더 편리해 질 수 있다.

 

3.express란, node js 의 핵심 모듀인 http와 connect 컴포넌트를 기반으로하는 빠르고 간편한 웹 프레임 워크로, 

사용하면 개발에 상당히 용이하다.

 

4.express-session,express-mysql-session은 세션을설정과 관리를 위한 모듈이다.(로그인을 하면 그 로그인이 어떻게 

유지 될건지, 로그아웃을하면 세션을 어떻게 버릴건지 에대한)

 

5.mysql은 database인 mysql을 node js 와 연결해주기 위한 모듈이다.

 

6.nodemon이란, 코딩을 하다보면 많은 수정이 필요한데 이때 마다 서버를 매번 껏다 키는게 아니라 자동적으로 재시작 할 수 있게

해주는 모듈이다.

 

 

(2)routing

프로젝트의 크기가 커질수록, 구현하고자 하는 기능들이 많아질수록 정돈되어있지 않으면 어디서 어떤기능을 구현했는지 찾기에 어려움이 있을수 있고, 중구난방으로 코드를 위치시켜 놓으면 가독성이 떨어지므로, 깔끔하게 기능별로 나누기 위함이다.

 

 

나의 폴더 구조이다.

라우터 안에는 login,logout,main,register과 같이 한눈에 기능을 파악할 수 있게 이름을 지은 폴더들을 생성한다.

각각의 폴더안에는 각각의 기능을 구현하기위한 js파일들을 만들어준다.(폴더명과 파일명을 동일하게 만들었다.)

그리고 각각의 js파일들을 모듈화 시킨 후, router안에 있는 index.js란 파일을 통해 각각의 기능을 구현한 js파일로의 접근이 가능하게 라우팅을 하였다.

 

 

 

위의 코드는 router폴더안에 main폴더안에 main.js이다.

보이는 바와 같이 해당 파일을 module화 시켰다.

이런 모듈화 과정을 각각의 js파일에도 동일하게 적용시켜준다.

 

 

4,5,6,7라인을 보면 아까 모듈화시킨 것들을 불러와 

router.use('경로',login)로 해당 경로로 들어오는 것들은 뒤의 login에서 처리해주겠다는 것을 명시한다.

즉, 기능 하나를 추가할 때마다 그 기능이 포함된 js파일을 모듈화 시키고, router/index.js에서 라우팅 해준다.

 

 

 

 

최종적으로 프로젝트의 루트디렉토리의 index.js(시작 파일) 에서 router폴더 안의 index.js만 require하면,

순차적으로 타고들어가 결국, 원하는 기능을 담은 js파일에 도달하게 된다.

 

 

(3)메인페이지 구현

루트로 접속했을때, session정보가 있으면 hidden.ejs를 렌더링 해주고, 그렇지 않으면(로그인 되어있지 않으면) main.ejs를 렌더링해준다.

 

 

(4)회원가입 구현

먼저 mysql모듈을 사용하여 나의 mysql과 연동을 시켜준다.

회원가입 form 에서 제출을 누르게 되면 ajax통신(post)을 하게 되는데,

이는 router.post()로받는다. 회원가입을 처리하기위해 쿼리문을 날려주는데 이때, escape를 사용하여

보안에 조금더 신경을 썼다. 만약 user_info라는 테이블에서 입력받은 name을 발견하면 response에 실패를 뜻하는

'fail'을 보내주고 만약 아니라면 db에 데이터를 추가해주고 성공을 뜻하는 'ok'를 보내준다.

 

fail이든 ok든 응답은 서버츠측에서 보낼때 stringfy시켜 보내기 때문에, 다시 json형식으로 xhr.responseText를 복구 시켜주고, 안에 들어있는 내용에따라 출력을 달리해준다.

 

 

(5)로그인 구현

로직이 회원가입과 유사하다. 다른점은 세션설정을 하는 부분이다.

 

이와같이 세션 기본설정을 해주고,

 

 

만약 회원정보가 일치한다면, req.session을 통하여 원하는값을 설정해주면 된다.

 

 

(6)로그아웃

로그아웃은 이와같이 delete로 삭제해주고 req.session.save(function(){})을 해주는데, 이렇게 callback으로 해주어야,

변경된 사항들이 save되고 응답으로 메인페이지를 redirect해준다.

 

 

(7)결과화면

 

초기화면(로그인 되지 않았을 경우)

 

db에 동일한 name이 존재하므로 위와같이 출력됨

 

 

맨밑에 forexample회원이 추가된 것을 확인할 수 있다.

 

로그인에 성공하면 위와같이 secretpage가 나타난다.

 

로그아웃을 하면 다시 초기화면으로 돌아온다.