개인 웹페이지를 한번 만들어보고 싶었다. 그런데 공부를 해야 할 것이 너무 많았다.

당연히 헤쳐 나가야 할 산이지만, 백엔드와 프론트엔드 모두 개발하면 커버해야 할 범위가 넓어 상당히 큰 장벽으로 다가왔다.

그래서 개발하면서, 어려운 부분들을 일정부분 해결해 주어 웹 개발에 한걸음 더 다가갈 수 있게 도와주는 것이 있었으면 했다.

그렇게 Wraplify를 만들게 되었다

wraplify는 풀스택 웹 개발을 더 쉽게 해주는 라이브러리이다. 

DB의 테이블 별 CRUDL 컴포넌트를 자동으로 생성해준다. 

(CRUDL: create, read, update, delete, list 줄임말 로, 데이터를 다루는 가장 기본적인 4가지 방법에 list를 추가한 것이다.) 

CRUDL을 지원해준다는 것은 데이터를 다루는 가장 기본적인 방법을 모두 완성된 형태로 제공해준다는 말이다. 

즉, 사용자가 데이터를 다룰 때 원하는 행동을 CRUDL다섯가지의 조합으로 대부분 커버할 수 있다.

물론 wraplify 말고도 시중에는 이미 풀스택 웹 개발을 쉽게 해주는 것들은 몇 가지 있다.

우리가 사용한 aws amplify도 개발자를 위한 편의를 제공한다. 다만 기능이 한정적이다. 

그리고 Backend까지는 개발에 도움을 주지만 프론트엔드 개발은 오로지 사용자의 몫이다.

웹 페이지를 만든다는 점에서 약간의 유사성이 있는 서비스도 있다.네이버의 모두, wix같이 아예 완성된 기성품 웹페이지를 커스터마이징 하는 서비스가 그렇다. 

그렇지만 해당 서비스들은 완성품 자체를 사는 것이다. 웹 페이지를 개발하는 것은 아니다.  따라서 독립적으로 판매되는 해당 서비스 도구를 다룰 줄 알아야 한다.

그리고 코드를 다루는 것이 아니라, 말 그대로 서비스를 이용하는 것이기 때문에 완성된 결과물만 받아볼 수 있기에 개발적 확장성은 기대하기 어렵다. 

또한 정해진 DB 구조를 사용해야 하므로, 사용하고자 하는 목적에 제공되는 DB Schema에 맞지 않는다면 사용할 수 없다. 

우리는 react와 javascript등 웹 개발에 있어 자주 쓰이는 기술을 그대로 사용한다.

따라서 wraplify를 쓰고자 한다 해도 추가로 알아야 할 것은 wraplify에서 제공하는 props외에는 없다. 

그리고 library를 제공해주는 것이기 때문에, 코드 어디에 사용해도 좋다.

사용한 기술 스택: react, javascript, aws amplify

우리 프로젝트를 이용할 때 사용자와 wraplify는 위의 flowchart 순서를 따라간다.

wraplify init을 하면, wraplify가 프로젝트 이름을 받아와 amplify 콘솔의 앱 이름으로 설정을 해준다. 그리고 AWS Cognito를 이용한 Authentication, AWS Appsync를 이용한 DB와 API 등 프로젝트를 구동 시키는데 필요한 요소들을 자동으로 설정해준다. 설정이 완료되면, GUI 기반의 DB Schema 수정 페이지를 연다. User가 해당 창에서 설정을 완료하고, terminal에서 엔터를 입력하면 자동으로 방금 설정한 DB Schema를 amplify 서버에서 불러온다. 불러온 정보를 재가공하여 schema.js파일에 저장하고, 해당 파일을 기준으로 테이블별로 create, read, update, delete, list export component를 생성하는 과정을 통해 DB의 각 테이블별로 CRUDL 컴포넌트가 만들어진다.

Schema를 수정하고 싶은 상황이라면, wraplify editmodel을 입력하면 된다. Wraplify가 GUI 기반의 DB schema수정 페이지를 오픈한다. User가 해당 창에서 설정을 완료하고, terminal에서 엔터를 입력하면 자동으로 방금 설정한 DB Schema를 amplify 서버에서 불러온다. 이를 재가공하여 CRUDL컴포넌트를 재생성한다.

김동현(팀장): API & push with default headless, package init, DB Object Class, Auth Class/Component

강지인: int & auth headless, parser, DB Object Componet (C, D)

이나현: configure headless, parser, DB Object Component (R, U, L)

개발 schedule

(1) 다운로드가 편리하고, 응용 가능성이 뛰어나다

Npm 서버에 등록되어 있기 때문에 누구나 편리하게 npm install wraplify 한 줄이면 자신의 코드에 적용시킬 수 있다. 응용 가능성이 아주 높다. 앞서 언급한 wix등 처럼 하나의 완성품 템플릿을 제공하는 서비스가 아니기 때문에 원하는 모양으로, 원하는 만큼, 원하는 위치에 wraplify를 사용할 수 있다.

(2) 웹 개발 장벽을 한층 낮춰준다

wraplify는 업데이트를 거치면 다양한 템플릿을 제공하여 더더욱 편리해질 가능성이 농후하다. 그리고 개발자들은 단순히 템플릿을 사용하기만 하는 것이 아니라, 만들어진 템플릿을 자신이 원하는 대로 수정할 수 있다. 따라서 wraplify를 사용하여 공부한다면, 자유롭게 수정할 수 있는 완성된 기본 뼈대를 제공받는 것이므로 개발 실력을 향상시키는데 많은 도움이 된다. 만들어진 템플릿을 기본으로, 조금씩 자신의 코드로 수정해 나가며 스택별 공부가 가능하다.

(3) 개발 시간을 단축시킬 수 있다

실무진들은 wraplify를 응용하여 개발한다면 사용하지 않았을 때 보다 개발 시간도 굉장히 단축될 것이다. 많은 언어에서 Stack, queue등 자료구조를 라이브러리처럼 제공해주는 것과 마찬가지로 단순한 create, delete, update등의 역할을 wraplify에 맡겨버린다면 개발 시간이 상당히 줄어들 것이다. 그리고 코드의 블록화를 증진시키는데 wraplify가 한 몫을 할 것이라 믿어 의심치 않는다.

(4) 자신의 아이디어를 구현해내기 쉬워진다

웹 개발에 뛰어드는 많은 학생들이 자신의 프로젝트를 만드는데 많은 난관에 봉착하게 된다. 우리의 wraplify와 함께한다면 맞닥뜨린 난관을 넘어서 자신이 만들고자 하는 것을 더 쉽고 빠르게 만들 수 있다. 컨텐츠의 차별성, 경쟁력은 아이디어다. 물론 자신의 아이디어를 구현해내는 능력도 중요하다. 그렇지만 점차 로블록스와 같이 아이디어만 있다면 자신이 원하는 게임을 초등학생도 쉽게 구현할 수 있는 툴이 나오고 있다. 따라서 우리 wraplify가 기술에 대한 이해는 부족해도 만들고자 하는 것이 많은, 아이디어가 넘쳐나는 학생들에게 가장 도움이 될 것이다.

npm wraplify 링크

https://www.npmjs.com/package/wraplify