풀스택 플랫폼인 meteor는 기본적으로 account(로그인, 회원가입 등)에 대해서도 간단한 태그 하나로 구현할 수 있도록 기능을 제공하고 있습니다. 하지만 실제 프로젝트에서는 이 기본 기능 이외에 사이트에 맞게 account를 수정해야 할 경우가 종종 발생할 것입니다. 이 강좌는 이런 account에 대한 사용자 정의 작성에 대한 강좌가 되겠습니다. 이 강좌에서 meteor에 대한 기본 설명을 모두 하기는 어렵겠지만 필요한 부분에 대해서는 간단하게 추가 설명을 해보도록 하겠습니다.
이 강좌에서 다룰 Meteor의 account 기능으로는 회원가입, 로그인, 이메일 인증, 비밀번호 분실 변경메일 보내기, 소셜 로그인 이 되겠습니다. 사실 이메일을 통한 회원 인증만 하더라고 구현하기 위해서는 꽤 노력이 필요하고, 소셜 로그인(facebook, twiter, google, kakao)의 경우는 지금은 많은 사이트에서 기본으로 사용하는 기능이지만 막상 구현해 보려고 하면 이것도 꽤 삽질?이 필요한 기능인 것을 많은 분들이 공감하실 겁니다. Meteor에서는 이 모든 기능들이 기본 API로 제공되기도 하고, 설치 패키지를 통해 쉽게 구현할 수 있도록 해주고 있습니다. 사실 소셜 로그인 기능만으로도 Meteor를 한번쯤 사용해볼 가치가 있다고 개인적으로는 생각합니다. 자 그럼 본격적으로 강좌를 시작해 보겠습니다.
위의 설치가 끝나면, client, server 폴더 내의 설치시 기본적으로 제공되는 파일들은 삭제해 줍니다.
폴더구조에 대해서 간단히 설명해 드리자면, client와 server는 각각 해당 폴더에 들어있는 파일들은 클라이언트측과 서버측에서 호출이 가능한 파일들입니다. 폴더에 넣어 두는 것으로 파일들의 실행위치가 결정됩니다. 그리고 lib 폴더의 경우 이 두곳에서 모두 사용할 필요가 있는 공통 파일들을 넣어두는 곳입니다.
사실 이 방법은 현재 meteor 가이드에서 기본적으로 추천하는 방식은 아닙니다. 현재는 es6 의 기본 문법인 import, export 를 통한 필요한 파일들을 불러오고 내보내는 방식을 추천하고 있습니다. 하지만 예전 방식(폴더별로 넣어두면 자동으로 실행위치에 따라 실행되는)이 갖는 편리함이 있어 개인적으로는 아직까지 예전방식을 주로 사용하고 있습니다. 나중에 es6방식으로도 강좌를 정리해 보도록 하겠습니다. (솔직히 말하면 import, export를 사용하는 방식이 아직 서툽니다. ㅡㅜ )
# 기본 폴더 구조
1
2
3
4
5
6
meteorAccount
├── .meteor
├── client
├── lib
├── node_module
└── server
2. 라우터 설계(url 주소에 따른 화면 전환)
제일 처음 할 일은, 일단 처음 시작페이를 만들고, 거기서 로그인 또는 회원가입 페이지로의 화면전환 페이지를 만드는 것부터 시작해 보겠습니다. 쉽게 말해 흔히 하는 간단한 라우팅 작업을 해보는 것입니다.
미티어는 기본적으로 router를 제공하고 있지 않지만, 설치 페키지를 통해서 사용자가 router를 선택해 설치할 수 있습니다. 이번 강좌에서는 현재 제일 많이 사용된다고 판단되는 flow-router를 설치 후 사용하도록 하겠습니다.
프로젝트 폴더에서 터미널 또는 cmd창을 열고 아래 설치패키지 관련 명령어를 입력해서 필요한 패키지를 설치하도로록 하겠습니다.
meteor의 경우 다양한 front-end 프레임워크를 지원하는데, 이번 강좌에서는 meteor의 기본 프론트엔드 프레임워크인 blaze를 사용할 것임으로 필요한 blaze-layout도 함께 설치하겠습니다.
참고로 meteor는 meteor add 패키지이름 이런식으로 필요한 패키지를 사용할수 있습니다. 위의 명령어를 프로젝트가 있는 폴더경로의 터미널창에서 입력하시면 됩니다. 참고사이트는 meteor에서 사용할 수 있는 컴포넌트를 모아놓은 사이트 입니다. 이 사이트에서 필요한 기능들을 검색해 보시면 많은 기능들이 기본적으로 지원되고 있는 것을 확인 할 수 있을 것입니다.
아래 폴더 구조를 참고하여 새로 폴더 및 파일들을 만들어 줍니다. 참고로 meteor의 blaze의 경우 template방식으로, 같은 이름의 html, js, css 가 함께 작동하는 구조입니다. login.html에 html구조의 템플릿을 만들고, 여기서 사용할 js 파일의 경우 login.js를 만들어 사용하면 되는 구조가 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
meteorAccount
├── .meteor
├── client
│ ├── styles
│ │ └── main.css
│ ├── change-password.html
│ ├── change-password.js
│ ├── main-layout.html
│ ├── main-layout.js
│ ├── home.html
│ ├── home.js
│ ├── login.html
│ ├── login.js
│ ├── recover-password.html
│ ├── recover-password.js
│ ├── register.html
│ └── register.js
├── lib
│ ├── checkPattern.js
│ └── routes.js
├── node_module
├── public
└── server
├── accounts.js
└── accountsMails.js
사용할 css 요소를 client/styles/main.css 에 파일을 만들고, 아래 style파일을 복사에 붙여넣기를 사용하여 적용합니다. bootstrap을 기본으로 하고, 조금 수정하여 사용할 예정입니다. bootstrap 역시도 아래를 참고로 패키지를 설치하여 사용 할 수 있습니다.
이제 라우터 설정을 해보겠습니다. 기본적인 라우터 설정은 아래와 같습니다. 아래 내용을 참고로 해당 위치에 파일을 만들고 소스를 입력해 주시면 됩니다.
lib/routes.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
FlowRouter.route('/', {
name: 'home',
action: function() {
BlazeLayout.render('mainLayout', {
content:'home'
});
}
});
FlowRouter.route('/login', {
name: 'login',
action() {
BlazeLayout.render('mainLayout', {
content: 'login'
});
}
});
FlowRouter.route('/register', {
name:'register',
action: function() {
BlazeLayout.render('mainLayout', {
content: 'register'
});
}
});
라우터에 대해서 조금 설명 드리면, 아래의 내용을 예로 http://localhost:3000/register 주소로 url을 입력하면 regiger라는 template이 mainLayout이라는 곳에 보여 진다는 의미를 가집니다. 다시 설명 하자면, url주소에 따라 home, login, register 등의 페이지로 이동하게 하는 기능을 합니다.
1
2
3
4
5
6
7
8
FlowRouter.route('/register', { // url 경로
name:'register', // 해당 라이팅 이름
action: function() {
BlazeLayout.render('mainLayout', { // template이 뿌려질 위치
content: 'register' // template 이름
});
}
});
다음은 위에 잠시 설명한 주소에 따라 템플릿을 뿌려줄 일종의 부모 템플릿을 설정하는 파일이 되겠습니다. client/main-layout.js 에 파일을 만들고 내용을 입력해 주세요.
main-layout.html
1
2
3
4
5
<template name="mainLayout">
<div class="container">
{{> Template.dynamic template=content }}
</div>
</template>
다음으로 아래 소스들은 각각 login.html, register.html 그리고 home.html로 이루어진 기본 페이지가 되겠습니다.
참고로 아래와 같이 pathFor 'login' 이렇게 a 태그에 입력해 주면 http://localhost:3000/login 처럼 주소에 + 이동할url 형태의 링크 주소를 만들어 주게 되는 문법입니다.
이제 설정이 완료 되었습니다. 기본 주소인 localhost:3000/ 을 브라우저에 입력하고 화면이 나오는지 확인해 보세요. 그리고 localhost:3000/login , localhost:3000/register 로 주소를 변경해 해당페이지로 잘 이동하는지 확인 보시면 됩니다.
