1주차) 미티어랑 친해지기!
☄️목차
- Meteor Framework란
- Meteor Framework로 작성된 주소록
- 폴더 구조
- Client 코드
- Server 코드
- Meteor 구버전 vs Meteor 최신버전 비교
미티어 프레임 워크란?
미티어 프레임 워크는 쉽게 말해
클라이언트(브라우저) - 애플리케이션 서버(미티어서버) - 데이터베이스 (내장된 몽고디비)까지 하나로 구성된
자바스크립트로 이루어진 풀스택 플랫폼입니다.
즉 서버와 클라이언트간의 간격이 좁고, 자바스크립트에 대한 경험만 풍부하다면 초반 러닝커브가 그렇게 높지 않아 빠르게 Meteor프로젝트를 이해할수 있고, 숙달만 된다면 미티어 플랫폼 자체를 만들고 관리하는것도 어렵지 않을것입니다.
또한 다음과 같은 주요 장점들이 있습니다.
1. 웹 애플리케이션을 모바일로 쉽게 변환
Meteor와 Apache Cordova의 강력한 통합으로 인해 큰 투자
없이 웹 애플리케이션을 스마트폰 앱으로 빠르게 전환할 수 있습니다.
모바일 환경은 하이브리드 앱 형태로 배포되기에 따로 컴파일 환경을 구축하지 않아도 됩니다
이는 따로 모바일을 구성해야하는 수고와 비용을 감소 시킬수 있습니다.
2. 실시간 업데이트
미티어는 실시간 업데이트. 즉 변경사항의 모든것은 데이터베이스와 화면에 즉시 출력됩니다.
이러한 방식 덕분에 빠르게 버그와 오류를 수정할수 있으며
궁극적으로는 협업에 있어 모든 구성원들이 즉각적인 업데이트를 통해 개발에 오류를 줄일 수 있기에 빠른 생산성을 기대할 수도 있습니다.
대표적인 실시간 업데이트 기능중 하나인 발행/구독(Publish/Subscribe) 은 다음 주소록 만들기에서 좀더 이야기 하겠습니다.
주소록 기본 세팅 및 구조
METEOR 2.6
현재 미티어의 최신 버전은 2.6버전(2022-02-01)입니다.
미티어 설치하기
npm install -g meteor를 통해 미티어를 설치 한 후. 터미널을 통해 프로젝트가 생성될 폴더에 들어갑니다.
최신버전에는 이전과 다르게 미티어의 랜더링 엔진이 blaze가 아니라 react가 기본으로 설정되어있습니다.
blaze나 vue와 같이 다른 것을 사용하고 싶다면 meteor create --blaze 프로젝트명을 적으시면 됩니다.
그 뒤 미티어 프로젝트를 생성하는 명령어를 적습니다
meteor create 프로젝트명다른버전을 설치하고싶다면?...
만약 2.6버전이 아닌 1.6버전과 같은 하위버전으로 미티어 프로젝트를 구성하기 위해선 어떻게 하나요?
meteor create 프로젝트명 --release 1.6 을 통해 설치 할수 있습니다. 하지만 1.9이전 버전들은 Let'sEnscrpt의 보증서가 만료되었기 때문에 1.9이전 버전의 해당 프로젝트에서 미티어를 실행하거나, 미티어 명령을 사용하기 위해선 NODE_TLS_REJECT_UNAUTHORIZED=0 meteor run 과 같이 NODE_TLS_REJECT_UNAUTHORIZED=0 를 미티어 명령어 앞에 꼭 붙여주셔야지 작동합니다.
폴더에서 해당 프로젝트가 생성된 폴더로 들어갑니다.
폴더의 구조
구현한 프로젝트의 해당 폴더와 폴더의 대략적인 설명은 다음과 같습니다
imports/
api/
checkPatterns.js # check모듈을 이용한 입력값 검증 함수
links.js # 몽고디비와의 연결 및 데이터요청에 대한 검증 과정 함수
listPublication.js # 주소록 데이터를 '발행' 하는 함수
ui/
AddressList.jsx # 주소록 리스트 컴포넌트
AddressListItem.jsx # 주소록 리스트 컴포넌트의 목록 컴포넌트
InsertAddress.jsx # 주소를 등록하는 컴포넌트
LoginForm.jsx # 로그인과 회원가입을 위한 컴포넌트
client/
main.js # 클라이언트의 최초 진입점
server/
main.js # 서버의 최초 진입점 및 서버코드 동작클라이언트
미티어 콜렉션 생성
import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
export const AddressBook = new Mongo.Collection('addressBook');
미티어에 내장되어있는 몽고디비의 데이터를 다루기 위해 콜렉션을 생성합니다.
import { Mongo } from 'meteor/mongo'; 를 작성하여 몽고디비 모듈을 가져온 후,
몽고 DB주소록 콜렉션을 addressBook 으로 명명하고, 이 주소록을 미티어 콜렉션으로 사용하기 위해 AddressBook 으로 명명합니다.
미티어 콜렉션은 몽고디비 콜렉션과 1:1로 맵핑됩니다. 즉 미티어 콜렉션이 다루는 대상은 몽고디비에 있는 도큐먼트입니다.
클라이언트 화면구성
import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { InsertAddress } from './InsertAddress';
import { AddressList } from './AddressList';
import { LoginForm } from './LoginForm';
export const App = () => {
const userLogin = useTracker(() => Meteor.user());
const logout = () => Meteor.logout();
return(
<>
{userLogin ?
<>
<div className="user" onClick={logout}>
{userLogin.username} 사용자 이름을 누를시 로그아웃됩니다
</div>
<InsertAddress />
<AddressList/>
</>
:
<LoginForm />
}
</>
)
}
컴포넌트는 다음과 같이 나누었습니다.
Blaze로 구현할 경우 컴포넌트를 Blaze Template라 생각하시면 됩니다.
크게 주소록을 넣는 부분(InsertForm), 주소록을 보여주는부분(AddressList)이 존재하며,
AddressList는 자식으로 주소록의 목록인 (AddressListItem)을 가지고 있습니다.
클라이언트 로그인 상태에 따라 화면 보여주기
리액트와 미티어의 데이터를 교환하고, 미티어의 상태에 따라 리액티비티 시켜주기 위해
useTracker 를 불러 옵니다
Meteor의 데이터를 사용하기 위해선 react-meteor-data 를 사용해야합니다. 리액트는 프론트엔드 렌더링 라이브러리이기 때문에 미티어 데이터가 들어오고 나가는것에는 반응을 하지 않기 때문에 미티어와 리액트 두 영역을 통합 시키고, 변경이 일어날때마다 미티어의 Tracker. 를 사용하기 위해 사용합니다.
클라이언트에서 로그인시 미티어의 리액티비티에 의한 DOM 변경 동작은 다음과 같습니다
- 로그인으로 인해 Meteor.user가 변화함
Meteor.user: 로그인된 사용자. 로그아웃될 경우 변경됩니다.
- 변화한 데이터가 감지되어 리액트가 DOM을 업데이트한다.
- 실제 DOM이 변경된 부분이 업데이트된다.
그리고 Meteor의 내장 함수를 사용하여 현재 사용자가 로그인 되어있는지 판단하여 리턴하고, 그 값에 따라 주소록을 보여줍니다.
... 생략
const userLogin = useTracker(() => Meteor.user());
const logout = () => Meteor.logout();
...생략
비로그인시, 로그인창과 회원가입창이 보인다.
클라이언트 로그인 및 회원가입
회원 가입 부분은 간단하게 meteor/accounts-base 로 구현하였습니다.
따라서 해당 모듈이 필요하기 때문에, 터미널 창에서 meteor add accounts-base 를 입력하여 모듈을 다운받습니다.
로그인 및 회원가입 컴포넌트인 LoginForm.jsx를 살펴보면.
//imports/ui/LoginForm.jsx
import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
...
const [regiUser, setRegiUser] = useState({ //회원가입의 input state 초기값입니다.
username: '',
password: '',
})
const registUser = () => {
Meteor.call('insertNewUser', regiUser); //회원가입 위해서 서버 메소드를 부른다
Meteor.loginWithPassword(regiUser.username, regiUser.password); //그 뒤 로그인
};
const handleRegiChange = (e) => { //회원가입을 위한 input값이 변할때마다 state가 변하는 함수입니다
const newRegiUser = {
...regiUser,
[e.target.name] : String(e.target.value)
}
setRegiUser(newRegiUser)
}
//...registUser 함수가 회원가입을 처리하는 부분입니다.
사용자로 부터 입력받은 기본적인 아이디와 비밀번호를 입력받아
서버에 사용자를 가입시키는 Meteor.Method를 Meteor.call을 사용해 호출합니다.
//server/main.js
import { Meteor } from 'meteor/meteor';
import {Accounts} from 'meteor/accounts-base'; //회원가입에 필요한 모듈을 서버에 import
...
Meteor.methods({ //회원가입용 미티어 메소드
insertNewUser: function(newUserData){
if (!Accounts.findUserByUsername(newUserData.username)) {
Accounts.createUser(newUserData);
}
}
})
클라이언트에서는 서버의 Main.js를 Import 시키는것이 원천적으로 불가능 하기 때문에,
서버에서 Meteor.methods를 작성후, 클라이언트에서 요청하여 서버측에 회원가입을 요청합니다.
서버에서 insertNewUser라는 이름의 메소드는,
Accounts.findUserByUsername 로 사용자 아이디 조회시, 존재하지 않으면
Accounts.createUser(newUserData) 입력받은 값으로 아이디와 비밀번호를 만듭니다.
//LoginForm.jsx
const submit = e => {
e.preventDefault();
Meteor.loginWithPassword(username, password);
};로그인 시에는 Meteor.loginWithPassword(유저아이디, 유저패스워드) 로 Meteor 내부 함수를 사용하여
Meteor.user 를 변화시킵니다.
클라이언트 주소록 입력 컴포넌트
import React, { useState } from 'react';
import { Meteor } from 'meteor/meteor';
import { AddressBook } from '../api/links.js'
import {NotEmptyString, EmailString, PhoneStirng, BirthdayString } from '../api/checkPatterns'입력값 검증을 위해 검증함수를 불러옵니다
import {NotEmptyString, EmailString, PhoneStirng, BirthdayString } from '../api/checkPatterns'검증 함수를 불러오는 부분
import { check } from 'meteor/check'
export const NotEmptyString = Match.Where((el) => { //사용자 정의 패턴.
check(el, String);
return el.length > 0 ;
})
export const EmailString = Match.Where((el) => {
check(el, String);
return /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/.test(el);
});
export const PhoneStirng = Match.Where((el) => {//000-0000-0000
check(el, String);
return /^\d{3}-\d{3,4}-\d{4}$/.test(el);
})
export const BirthdayString = Match.Where((el) => { // yyyy/mm/dd
check(el, String);
return /^(19[7-9][0-9]|20\d{2})\/(0[0-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])$/.test(el);
})api/checkPatterns.js
검증함수는 check 모듈을 사용해서 구현했습니다.
meteor add check 를 통해 모듈을 다운로드 합니다.
Math.Where은 익명함수를 받아 '사용자 정의 패턴'을 반환하는데,
이에 반환된 패턴값은 check 의 두번째 매개변수에 사용되어 첫 번째 매개변수값을 검사하는데 사용합니다.
위의 함수들은 특정한 패턴을 정규표현식을 사용해 검증하는 함수입니다.
//ui/InsertAddress.jsx
//...생략
import {NotEmptyString, EmailString, PhoneStirng, BirthdayString } from '../api/checkPatterns'
import { check } from 'meteor/check'
//...생략
export const InsertAddress = () => {
const [userAddress, setUserAddress] = useState({ //삽입될 값 state 초기값입니다
name:'',
phone:'',
email:'',
company:'',
birthday:'',
owner: Meteor.userId()//현재 로그인한 사용자의 아이디를 같이 넣어준다.
});
const handleOnChange = (e) => { //입력값의 input값이 변할때 state에 넣어주는 함수입니다
const newAddress = {
...userAddress,
[e.target.name] : String(e.target.value)
}
setUserAddress(newAddress)
}
const InsertUserAddress = () => { //입력값을 검증 후, 삽입하는 함수입니다.
try{
check(userAddress.name, NotEmptyString);
check(userAddress.email, EmailString);
check(userAddress.phone, PhoneStirng);
check(userAddress.company, NotEmptyString);
check(userAddress.birthday, BirthdayString);
} catch(err){
alert('입력하신 값을 확인해주세요 ERR : ' + err.message);
return;
}
AddressBook.insert(userAddress);
setUserAddress({
name:'',
phone:'',
email:'',
company:'',
birthday:'',
owner: Meteor.userId()//현재 로그인한 사용자의 아이디를 같이 넣어준다.
})
}
//...생략위 코드 중에서 InsertUserAddress 부분이 사용자가 입력한 데이터를 삽입하는 함수입니다. 해당 부분에서
Try...Catch 문으로 사용자의 입력값을 검증하여 삽입한 뒤, Input 값을 초기화 시킵니다.
클라이언트 주소록 조회
발행과 구독
미티어에서는 클라이언트안에 미니몽고라는 DB를 가지고 있습니다.
미니몽고에서 subscribe 신청을 하여 몽고디비에서 원하는 값을 publish 받게되면,
클라이언트는 몽고DB를 바라보는 것이 아니라 미니몽고를 통해 CRUD를 하게 됩니다.
클라이언트 프로그램은 미니몽고의 데이터를 사용하여 거의 모든 화면을 구성하게 되고, 이때 서버의 데이터를 클라이언트로 동기화 시켜주는 구조가 바로 발행과 구독입니다.
미티어는 기본적으로 autopublish 라는 패키지가 깔려있어, 서버에 존재하는 모든 컬렉션의 모든 다큐먼트를 브라우저상으로 내려줍니다.
이는 보안적으로 매우 위험하고 미티어 측에서도 개발용으로만 사용하라고 명시하고있습니다.
따라서 브라우저에서 사용될 데이터를 발행 Publication 하고 사용될 곳에서 구독 Subscription 해야합니다.
Blaze 엔진을 사용한다면 간단하게 구현가능하지만, React에서는 조금 더 추가해야합니다.
일단 meteor remove autopublish 명령를 통해 해당 패키지를 지워줍니다.
그뒤, 우리는 몽고디비 컬렉션(addressBook)을 미티어 컬렉션에선 AddressBook으로 정의했습니다.
따라서 해당 AddressBook을 발행시켜줍니다.
//imports/api/listPublication.js
import { Meteor } from 'meteor/meteor';
import {AddressBook} from './links';
Meteor.publish('AddressBookData', function() {
const userId = this.userId; //현재 로그인한 사용자 아이디에 접근하기.
if(userId){
return AddressBook.find({owner:userId}, {sort: {name:1}});
}
});위 코드에서는
AddressBookData 라는 이름으로 이전에 정의한 미티어 컬렉션인 AddressBook 을 발행 시켜주는데,
AddressBookData 안에는 AddressBook 을 조회하여 값을 가져올 예정입니다.
또한 간단하게 로그인한 사용자가 등록한 본인 소유의 주소록만 볼 수 있도록 owner 가 현재 로그인한 사용자인 목록들만 조회하겠습니다.
다만 지금은 연습을 위해 데이터 삽입시 모든 데이터가 현재 로그인한 사람이 등록한 주소이도록 데이터 삽입시 약간 추가할것입니다.
이때 주소록 '목록'들이기 때문에 Map 함수를 사용하여 가져온 데이터들을 UI로 가공해 뿌려주기 위해
find() 함수를 사용하여 몽고디비 커서형태로 가져옵니다.
https://docs.meteor.com/api/collections.html#Mongo-Collection-find
이제 발행을 위한listPublication.js 을 서버쪽에서 불러와 발행해 줍시다
// server/main.js
//...생략
import '../imports/api/listPublication'
//...생략주소록 UI 부분에서 발행받은 데이터를 구독합니다
// imports/ui/AddressList.jsx
import React, { useState, useRef, useEffect } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { AddressBook } from '../api/links'
import AddressListItem from './AddressListItem'
export const AddressList = () => {
const[count, setCount] = useState(10)
let limit = AddressBook.find({}).count();
const listLoading = (num) => useTracker(() => {
let helper = Meteor.subscribe('AddressBookData');
let listFinder = AddressBook.find({},{limit: num}).fetch()
return {
isLoading : !helper.ready(),
listFinder: listFinder
}
});
const {isLoading, listFinder} = listLoading(count);
//... 생략
}
AddressList 의 listLoading 이란 함수를 보시면 미티어와의 데이터 교환을 위해 useTracker를 사용합니다.
handler 를 통해 발행된 AddressBookData를 구독하고, listFinder 를 통해 AddressBook의 데이터를 Fetch명령을 통해 가져옵니다.
데이터의 전달 과정
- Meteor.subscribe를 호출 할 시, 서버로 조회조건과 함께 데이터 구독 요청이 전달 됩니다.
- 미티어 서버는 전달받은 인자를 조회조건으로, 몽고DB에서 데이터를 조회합니다.
- 조회한 데이터를 순차적으로 클라이언트에 전달하고, 각 도큐먼트 별로 보내주지만, 데이터간 순서는 보장하지 않습니다.
- 데이터가 전달이 완료 될 시, 메세지(ready)를 보내 데이터 전송이 완료됫음을 알려줍니다.
- 데이터 전송이 완료되었을시 이를 감지할수 있는데, blaze에선 Tracker.autorun으로, React에서는 useTracker로 변경을 감지할 수 있습니다
그 뒤, 발행된 데이터가 준비 되었는지 판단하는 isLoading 에 따라 아이템 목록을 그려줍니다.
반복적인 객체이기에 key값으론 _id값을, props로는 listFinder의 현재 인덱스에 해당되는 데이터를 보내줍니다.
// imports/ui/AddressList.jsx
<tbody>
{
isLoading
?
<tr><td>LODAING</td></tr>
:
listFinder.map( data =>
<AddressListItem key={data._id} data = {data}/>)
}
</tbody>그리고 더보기 버튼을 누를경우 다음 데이터 30개를 더 불러 와 붙여줄수 있도록 버튼 이벤트를 추가합니다.
// imports/ui/AddressList.jsx
//...생략
const moreAddress = () => {
if(count >= limit){ //limit = AddressBook.find().count()
return;
}
setCount(count+30)
}
//...생략클라이언트 주소록 아이템 리스트
부모인 AddressList 로 받은 data를 토대로 화면을 그려줍니다
import React, { useState } from 'react';
import { AddressBook } from '../api/links.js';
import { check } from 'meteor/check';
import {NotEmptyString, EmailString, PhoneStirng, BirthdayString } from '../api/checkPatterns' //검증 함수.
const addressListItem = ({data}) => { // 부모로 부터 받은 data
const [modify, setModify] = useState(true); //수정모드 판별 State
const deleteAddress = (_id) => AddressBook.remove(_id);
const [userInfo, setUserInfo] = useState({ //기본 값
name:'',
phone:'',
email:'',
company:'',
birthday:''
})
const handleModify = () => { //수정시, 창 토글, 초기값 세팅
setModify(modify => !modify);
setUserInfo({
name: data.name,
phone: data.phone,
email: data.email,
company: data.company,
birthday: data.birthday
})
}
const handleModifyCancle = () => {//수정 취소시, 창토글, 초기값 비우기
setModify(modify => !modify);
setUserInfo({
name: '',
phone: '',
email: '',
company: '',
birthday: ''
})
}
const handleModifySave = () => {
try{
check(userInfo.name, NotEmptyString);
check(userInfo.email, EmailString);
check(userInfo.phone, PhoneStirng);
check(userInfo.company, NotEmptyString);
check(userInfo.birthday, BirthdayString);
} catch(err){
alert('입력하신 값을 확인해주세요 ERR : ' + err.message);
return;
}
AddressBook.update({_id: data._id} , {$set: userInfo}); //객체에 저장된것으로 업데이트
setModify(modify => !modify); //토글 닫기.
}
const handleAddChange = (e) => {
const newUserInfo = {
...userInfo,
[e.target.name] : String(e.target.value)
}
setUserInfo(newUserInfo)
}
return (
modify ?
//수정 모드가 아닐때 보여지는 화면
:
//수정 모드 일때 보여지는 화면
)
}
export default addressListItem;deleteAddress : data를 판별할수있는 data_id값을 사용해 몽고디비에서 해당 데이터를 지워주는 함수입니다.
이곳에서도 수정시, 데이터 검증이 필요하므로 check 모듈과, 검증함수가 정의되어있는 코드를 import하여 검증합니다.
서버
데이터 삽입,수정,삭제 권한
클라이언트에서 일어나는 모든 데이터요청: insert, update, remove를 자유롭게 사용할수 있도록 해주는 insecure 패키지를 삭제합니다. 이를 삭제하면 데이터의 Read만 가능합니다.
meteor remove insecure따라서 컬렉션별로 컬렉션.allow 컬렉션.deny 를 사용하여 데이터에 대한 접근 권한을 설정해야합니다.
- Allow: 등록된 경우를 제외하고 다른경우에는 접근 제한
- deny: 설정된 조건을 제외한 나머지를 모두 허가.
데이터에 대한 권한을 설정하는 부분은 imports/api/links.js 에 정의되어있습니다
// imports/api/links.js
import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
export const AddressBook = new Mongo.Collection('addressBook');
if(Meteor.isServer){
AddressBook.allow({
insert(userId, doc){
return(userId && doc.owner === userId);
},
update(userId, doc, fields, modifier){
return (userId && doc.owner === userId);
},
remove(userId, doc){
return(userId && doc.owner === userId);
},
})
}예를들어 AddressBook 에 접근하여 insert 메소드를 호출할 경우, AddressBook.allow 내부에 insert함수를 거치게 됩니다.
현재 로그인한 유저의 아이디와 insert 할 주소록의 owner필드가 userId와 같을경우
(우리는 insert할때 기본값으로 현재 로그인 한 우저의 아이디를 넣어주도록 설정했습니다)
삽입이 가능하도록 합니다.
그외에 update, remove 역시 같은 이벤트를 부여합니다.
Meteor Method
//...server/main.js
Meteor.methods({ //회원가입용 미티어 메소드
insertNewUser: function(newUserData){
if (!Accounts.findUserByUsername(newUserData.username)) {
Accounts.createUser(newUserData);
}
}
})
Meteor.methods({
makeFixtureData (userId){
for(let i = 0 ; i < fixtures.length ; i++){
fixtures[i]['owner'] = userId;
AddressBook.insert(fixtures[i])
}
return '완료되었습니다'
}
})
Meteor.methods({
makeFixtureData2 (userId){
for(let i = 0 ; i < 10 ; i++){
fixtures[i]['owner'] = userId;
AddressBook.insert(fixtures[i])
}
return '완료되었습니다'
}
})
회원가입 및 데이터를 쉽게 넣기 위해 정의한 Meteor.methods 입니다.
Meteor.methods 는 쉽게 말해 서버에서 정의한 메소드를 클라이언트에서 호출하여,
클라이언트 데이터를 서버측으로 전송할수 있습니다.
우리는 위에 LoginForm.jsx 에서 서버측 로그인 메소드인 'insertNewUser' 를 호출했듯,
Meteor.methods 를 호출하기 위해서는 Meteor.call('메소드이름', function(){}) 를 사용하여 호출할수 있습니다.
미티어 구버전(1.6) vs 현재버전(2.6)
기본 엔진이 다릅니다
이전버전의 기본 렌더링 엔진은 Blaze 지만, 현재는 기본적으로 React 가 깔립니다.
리액트에 대한 전반적인 지식이 부족해 처음 구현에 많은 어려움이 있었습니다.
반드시 모듈을 불러와야합니다.
이전버전에서는 lib 폴더를 클라이언트와 서버가 묵시적으로 공유하기에 따로 설정해야할 부분이 없었으나,
이제는 필요한 함수나 컬렉션 정의파일을 필요한 클라이언트나 서버에서 import 시켜야합니다.
마치며... 그리고 개인적인 생각
전체 소스 코드는 해당 위치에 있습니다
https://github.com/fnrkp089/Meteor_React
미티어는 죽었을까요?
미티어를 다루면서 든 생각은
2016~2017년도 자료에서 거의 다 머물러 있다는 점이다.
리액트 관련해서도 막 Hooks로 넘어가는것을 지원하는 글밖에 보이지않고
stackoverflow든 한국 커뮤니티든 왠만한 양질의 자료를 찾는것이 매우 힘들었다.
정말 간단한 프로젝트를 하나 만들기엔 좋지만 여러가지 문제가 산재하고, 아직도 옛버전의 모듈을 의존하고 있고, 작업이 중단된 패키지들도 많다.
물론 투자를 받아 활로를 받은것은 좋긴 하지만... 가장 큰 문제인 최신 자료가 적다는것이 문제이다.
미티어를 사용하면서 신기한점도 많았지만... 작업하는 동안 정말 많이 힘들어서 다시 이친구를 보게 될지는 모르겠다.
