spectrum learns to dig

왜 Vulcan인가요? 유명한가요? 이걸 배워도 괜찮은 건가요? 취직은 잘 되나요? 회사에 필요한가요? 많이들 쓰나요? 앞으로 유망한가요? 항상 강의(보통 국비지원인 무료 수강)를 할때마다 자주 들었던 질문인데요. vulcan은 제 생각엔 이 질문들에 대해 모두 "예"일수도 "아니오"일수도 있다고 생각합니다. 왜냐면 vulcan는 framework이며 제품으로 치면 반쯤은 조립이 된 제품으로 구성한 IKEA 같은 거라서 팝업 스토어나 전시실에 있는 걸 보고 구성하거나 아니면 처음부터 하나하나 자신이 구성하듯이 Apollo, AutoForm(aka. smartForm), Collection2, Email Templating, GraphQL, Meteor, MongoDB, React, Router, Server-sided rendering 등등 각각 검증된 요소들로 웹앱을 만들 수 있습니다. 질문에 대한 답을 드리자면 vulcan 자체는 "아니오"일 수도 있지만 vulcan에 들어가는 요소들은 "예"라고 할 수 있는 것들이 꽤 많습니다. 웹은 프로그래밍 분야 중에서도 제법 오래되고 안정된 분야이면서 동시에 대중적인 인기를 업고 많은 실험과 혁신을 시도하고 있는 분야이기도 합니다. 사용자 입장과 달리 만드는 사람 입장에선 눈에 보이는 부분(frontend)에서부터 보이지 않는 부분(backend)까지 세심하고 정밀하게 고려해야하고 오랜기간 웹에 노출된 노련한 사용자들은 당신이 어떤 부분이 부족한지 금방 알아차립니다. 이 부분은 만드는 사람 입장에선 꽤 괴로운 일입니다. 기술의 변화는 빠르고 학습해야할 양은 늘어나며 구현해야할 디테일은 더욱 엄격하게 평가받습니다. Vulcan은 대부분 최신(Cutting edge) 기술들로 가득하며 각각 기술에 대해 깊은 이해가 있다면 좀 더 예리하게 만들 수 있지만 최소한의 학습양으로도 당장 작동하는 결과물을 만들 수 있습니다. ...

이번엔 아주 간단합니다. 왜냐면 Posts 쓰기를 할 것이고 우리는 SmartForms를 이용해서 끝낼려고 하거든요. Component를 또 만듭시다. 이름은 PostsNewComponent가 좋겠군요. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsNewComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/PostsNewComponent.jsx  conflict packages/spectrum-simplebb/lib/components/index.js ? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite     force packages/spectrum-simplebb/lib/components/index.js 이제 다 할 줄 아시죠? vulcan g component 를 써서 진행합니다. HomeComponent.jsx 에도 추가해야겠네요. import React, { Component } from 'react'; import { registerComponent, Components } from 'meteor/vulcan:core'; class HomeComponent extends Component {   render () {     return (       <div>         Find me at packages/spectrum-simplebb/lib/components/HomeComponent.jsx         <Com...

지난 번 글까지 잘 따라오셨으면 사용자 하나와 Posts 하나를 얻은 상태입니다. 그럼 이제 Posts가 있으니 브라우저 화면에서 보도록 합시다. 먼저 Posts의 목록을 보여줄 Component를 만들어봅니다. 이름은 PostsListComponent가 좋겠군요. 이젠 알아서 하시죠. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsListComponent ? Component type Class Component ? Register component Yes 하고 PostsListComponent를 만듭니다. 그리고 HomeComponent.jsx안에 PostsListComponent를 넣어 봅니다. import React, { Component } from 'react'; import { registerComponent, Components } from 'meteor/vulcan:core'; class HomeComponent extends Component {   render () {     return (       <div>         Find me at packages/spectrum-simplebb/lib/components/HomeComponent.jsx         <Components.PostsListComponent />       </div>     );   } } registerComponent('HomeComponent', HomeComponent); export default HomeComponent; render가 반환값의 마지막 부분에 <Components.PostsListComponent /> 를...

지난 번 글에서 열심히 Posts 모델을 만들어 보았습니다. 이것들을 실제로 graphQL을 사용하여 다루기 위해 graphQL 도구를 사용해봅니다. http://localhost:3000/graphiql 를 한번 열어봅시다. 뭔가 깔끔한 것이 떴습니다. GraphQL은 듣기로 JSON 같은 걸로 지지고 볶는 구조라고 들었습니다. 한번 본능에 이끌려 이것저것 해봅니다. {} 를 한번 치고 자동완성을 위해 중간중간 ctrl+space도 눌러보고 해봅시다. http://imgur.com/0c9BkRK  새창에서 열기 의식에 흐름에 따라 query와 mutation이라는게 오른쪽 Documentation Explorer에 있고 자동완성한 내용을 cmd+click해서 내용을 보고 인자를 아무거나 넣고 ctrl+enter로 실행하는 것까지 해봤습니다. 실제로 Full로 Query를 쓰고 Query Variables(아래쪽 Query Variables 클릭하면 확장됨)까지 넣으려면 query postsListQuery($terms: JSON) {   PostsList(terms: $terms ) {     _id     title     body     userId     createdAt   } } * Query Variable {   "terms": {   } } 위와 같이 하면 됩니다. 오른쪽 결과 창을 보면 내용물이 없습니다. 당연합니다. 모델만 만들었기 때문이죠. 오른쪽 Documentation Explorer를 한번 살펴봅시다. 친절한 익플띵 ROOT TYPES 에 query하고 mutation이 보입니다. query는 SiteData: Site UsersList(   terms: JSON   offset: Int ...

조금 어려울지도 모릅니다. 이제까지 쉽게쉽게 왔습니다만 여기서부터 갑자기 이것저것 많이 나옵니다. 그러니 너무 상심하지말고 차분하게 따라가봅시다. 신나는 백엔드의 세계에 오신 걸 환영합니다 :) 글쓰기를 구현하기 위해 Posts라는 모델을 만들어봅시다. 여담이지만 N개의 목록으로 구성하는 것들을 Collection이라고 하는데 보통 복수형인 s를 뒤에 붙여서 만드는 것이 일반적입니다. 첫글자를 대문자로 시작하는 Camel Notation도 사용합니다. $ vulcan g model 하고 쳐봅니다. 패키지 이름 선택하고 나서 Model name을 입력합니다. resolvers와 mutations는 디폴트 No로 엔터엔터하시고나면 ? Add a custom property to the collection (y/N) 라고 나옵니다. $ vulcan g model ? Package name spectrum-simplebb ? Model name Posts ? Add custom resolvers No ? Add custom mutations No ? Add a custom property to the collection (y/N) 소스를 수정해서 해도 되지만 우리는 아무것도 아는게 없으니 custom property를 줘서 만들어봅시다. 글쓰기에서 중요한 게 무엇일까요? 잘 생각이 나진 않지만 최소 "제목", "본문글" 정도는 있어야겠다는 생각이 듭니다. 일단 y 하고 title, body를 각각 String 타입으로 생성해봅시다. ? Add a custom property to the collection Yes ? Property name title ? Property is hidden No ? Property label Title ? Property type String ? Property is optional No ? Property viewable by Guests ? P...

순서를 무얼 먼저 할까 잠깐 고민해보았는데 역시 화면에 무언가 보이지 않으면 답답하다. 그래서 이번엔 두 가지를 구현해보고자 한다. component 생성 router 생성 별것 아니지만 순서를 잘못 이해하면 혼란스러울 수도 있다. 다행히 본인(^ㅡ^)이 잘 정리해드릴 것이므로 걱정하지 마시라. 1. Component 생성 최초의 화면 구성 요소인 component. 즉 Home을 만들자. 이름은 HomeComponent라고 하자. XxxxComponent 형식으로 작성하면 이름으로 구분이 가서 알아보기 좋다. vulcan g component 라고 쳐서 component를 생성해보자. $ vulcan g component ? Package name (Use arrow keys) ❯ spectrum-simplebb 인간은 오타의 동물이다. vulcan g component까지만 치고 화살표(라고 해봤자 지금은 하나밖에 없겠지만)로 선택하고 엔터 눌러주자. ? Component name HomeComponent ? Component type (Use arrow keys) ❯ Pure Function   Class Component Component name으로 HomeComponent를 입력하고 나면 Component type을 고르라고 하는데 어짜피 Meteor는 babel이 있으므로 Class Component를 사용하자. 아래 한번 누르고 Class Component를 선택. 엔터. 그리고 yes yes (y 엔터)하면 $ vulcan g component ? Package name spectrum-simplebb ? Component name HomeComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/HomeCom...

vulcan application은 package 기반이다. 그래서 제일 먼저 해야할 일은 package를 만드는 것. g(generate) pakcage 명령을 사용하자. $ vulcan g package spectrum:simplebb ? Package name spectrum:simplebb    create packages/spectrum-simplebb/package.js    create packages/spectrum-simplebb/lib/client/main.js    create packages/spectrum-simplebb/lib/server/main.js    create packages/spectrum-simplebb/lib/server/seed.js    create packages/spectrum-simplebb/lib/modules/index.js    create packages/spectrum-simplebb/lib/components/index.js    create packages/spectrum-simplebb/lib/modules/routes.js To activate your package, run: meteor add spectrum-simplebb 어째서인지 spectrum이라는 namespace를 줬는데 spectrum-simplebb로 생성이 된다. 기분이 나쁘다. PR을 언젠가 해야지하는 생각만 하고 손으로 고치자. ./packages/spectrum-simplebb/package.js 를 열고 Package.describe({   name: 'spectrum-simplebb', }); 이 부분을 : 을 적용해서 고쳐주자. Package.describe({   name: 'spectrum:simplebb', });...