싱크트리란?
노코드 블록 툴이다. 간단하게 블록을 맞추는 형태로 되어있고 은근 지원하는 기능이 많아서 간편하게 백엔드를 구축할 수 있었다.
참가 이유
학교에서 동기들과 함께 스터디를 진행하던 도중 싱커톤을 발견하게 됐고 다양한 증권사의 API를 무료로 사용해 볼 수 있어서 참가를 했다.
팀 구성
우리팀은 안타깝게도 Frontend 개발자로만 구성이 되어있었다..
근데 백엔드를 해보고 싶어서 싱크트리를 다뤄보게 되었다.
대회 동안 만든 API 들이다. CRUD 기능을 구현했다.
DB도 선택을 했어야하는데 싱크트리 영상에 올라와 있는 AirTable을 사용하기로 했다.
다만 1년전에 변경 사항이 있어서 토큰 인증 부분이 유튜브와 살짝 달랐지만 크게 어려움은 없이 연동을 했다.
대부분 유튜브 영상을 보면 해결이 되게 해놨고 유치원과정 10분짜리 10개만 봐도 할 수 있었다.
(2시간짜리 영상은 굳이 안봐도 됐다.)
예시
<block xmlns="https://developers.google.com/blockly/xml" type="helper_code_section">
<statement name="statements">
<block type="variable_create">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">retData</field>
</block>
</value>
<next>
<block type="helper_document_comment_note">
<field name="message">set airtable url</field>
<next>
<block type="variable_create">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">url</field>
</block>
</value>
<next>
<block type="variable_set">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">url</field>
</block>
</value>
<value name="variable_value">
<block type="string_concat">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="2"></mutation>
<value name="target">
<block type="primitive_string">
<field name="VALUE">https://api.airtable.com/v0/</field>
</block>
</value>
<value name="ADD0">
<block type="variable_get">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">appId</field>
</block>
</value>
</block>
</value>
<value name="ADD1">
<block type="primitive_string">
<field name="VALUE">/bookmark/</field>
</block>
</value>
</block>
</value>
<next>
<block type="helper_document_comment_note">
<field name="message">airtable api</field>
<next>
<block type="operator_restful">
<value name="ID">
<block type="primitive_string">
<field name="VALUE">f6e603ca01570a570951ca0ba0577581</field>
</block>
</value>
<statement name="protocol">
<block type="protocol_create">
<value name="unit">
<block type="protocol_unit_http_ssl">
<value name="method">
<block type="miscellaneous_protocol_method">
<field name="method">get</field>
</block>
</value>
<value name="endPoint">
<block type="protocol_end_point_url">
<value name="url">
<block type="variable_get">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">url</field>
</block>
</value>
</block>
</value>
</block>
</value>
<value name="header">
<block type="collection_hashmap">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="2"></mutation>
<value name="ADD0">
<block type="parameter_create">
<value name="key">
<block type="primitive_string">
<field name="VALUE">Content-Type</field>
</block>
</value>
<value name="value">
<block type="miscellaneous_protocol_content_type">
<field name="content-type">application/json</field>
</block>
</value>
<value name="datatype">
<block type="miscellaneous_parameter_type">
<field name="parameter-type">string</field>
</block>
</value>
<value name="description">
<block type="primitive_string">
<field name="VALUE">Content-Type</field>
</block>
</value>
<value name="required">
<block type="primitive_boolean">
<field name="VALUE">true</field>
</block>
</value>
</block>
</value>
<value name="ADD1">
<block type="collection_pair">
<value name="key">
<block type="primitive_string">
<field name="VALUE">Authorization</field>
</block>
</value>
<value name="value">
<block type="string_concat">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="2"></mutation>
<value name="target">
<block type="primitive_string">
<field name="VALUE">Bearer</field>
</block>
</value>
<value name="ADD0">
<block type="convert_hex_decode">
<value name="value">
<block type="primitive_string">
<field name="VALUE">20</field>
</block>
</value>
</block>
</value>
<value name="ADD1">
<block type="variable_get">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">apiKey</field>
</block>
</value>
</block>
</value>
</block>
</value>
</block>
</value>
</block>
</value>
<value name="body">
<block type="collection_hashmap">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
</block>
</value>
</block>
</value>
</block>
</statement>
<statement name="contexts">
<block type="response_context_create">
<value name="status-code">
<block type="primitive_null"></block>
</value>
<value name="header">
<block type="collection_hashmap">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
</block>
</value>
<value name="body">
<block type="collection_hashmap">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
</block>
</value>
</block>
</statement>
<next>
<block type="helper_document_comment_note">
<field name="message">fetch airtable response data</field>
<next>
<block type="variable_create">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">response</field>
</block>
</value>
<next>
<block type="variable_set">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">response</field>
</block>
</value>
<value name="variable_value">
<block type="share_input">
<value name="data">
<block type="primitive_string">
<field name="VALUE">f6e603ca01570a570951ca0ba0577581</field>
</block>
</value>
</block>
</value>
<next>
<block type="variable_create">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">retData</field>
</block>
</value>
<next>
<block type="variable_set">
<value name="variable_name">
<block type="primitive_string">
<field name="VALUE">retData</field>
</block>
</value>
<value name="variable_value">
<block type="collection_hashmap-get">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="2"></mutation>
<value name="array">
<block type="primitive_string">
<field name="VALUE">response</field>
</block>
</value>
<value name="ADD0">
<block type="primitive_string">
<field name="VALUE">response</field>
</block>
</value>
<value name="ADD1">
<block type="primitive_string">
<field name="VALUE">body</field>
</block>
</value>
</block>
</value>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</next>
</block>
</statement>
</block>
유튜브에 있는 예시 request 코드이다. 이걸 그냥 싱크트리 작업 공간에 붙여넣기 하면 블록들이 생성된다.
왼쪽은 기본 제공 오른쪽이 rest Api 호출시 필요한 블록이다.
적절히 블록을 맞추면 되지만 코드를 작성하는게 익숙한 사람은 오히려 불편할 수도 있었을 것 같다.
참가후기
우선 블록을 맞추는데 또각 소리가 나는데 되게 쾌감이 있다.
사실 회사에서 인턴을 하면서 백엔드와 소통하는 부분이 되게 많았는데
잘 모르다보니 어느정도인지 감이 잘 잡히지 않았었는데
이번에 싱크트리로 백엔드를 구현하므로써 백엔드에 대한 전반적인 이해를 할 수 있게 되었다.
통신에 대한 어느정도 기초 지식과 json 을 parsing 하는 능력만 있다면 금방 구현할 수 있는 툴인 것 같다.
airtable을 다루기 위해서 airtable 공식문서도 읽어봤다.
CRUD 기능 구현에 어려움이 있다면 여길 참조하면 된다.
https://airtable.com/developers/web/api/update-record
Airtable | Everyone's app platform
Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free.
airtable.com
이번 추석 연휴가 길었어서 인턴하는 동안 진행할 수 있었던 것 같다.
모르는 것이 있으면 카페에 글을 남기면 진짜 칼답해주신다.
싱크트리 운영진분들도 많이 고생하셨을 것 같다.
그리고 우리 팀도 열심히 한 만큼 좋은 성적이 나왔으면 좋겠다 :)
결과물
FINSET(Financial Summary Easy Tool)
made by : Team Provider
deserted-breath-68c.notion.site
https://youtu.be/HEEIkYTTqcI?si=wLqd2tQ3zsJ63viQ