바딘은 Java 기반의 오픈 소스 웹 애플리케이션 개발 플랫폼으로, 개발자가 HTML이나 JavaScript를 직접 작성하지 않고도 현대적인 웹 그래픽 사용자 인터페이스를 구현할 수 있게 해준다.
바딘(Vaadin)은 Java 기반의 오픈 소스 웹 애플리케이션 개발 플랫폼이다. 개발자가 HTML이나 JavaScript를 직접 작성하지 않아도, 현대적이고 세련된 웹 그래픽 인터페이스를 구현할 수 있게 해준다.
### 선정동기
### 선정동기
가장 먼저 바딘에 관한 문서가 부족하였다. 게다가 한국어로 된 문서는 더욱더 없었다. 사람들이 바딘에 대해서 더 많이 알아주기를 바랬다.
가장 먼저 바딘에 대한 문서가 부족하는 점이 나의 눈길을 끌었다. 특히 한국어로 된 자료는 거의 없어서, 사람들이 바딘을 더 많이 알았으면 좋겠다는 생각이 들었다.
만약 급하게 개발을 해야하는데 자바 밖에 모른다면 html이나 javascript 문법을 배우기에는 벅찰 수 있다. 이런 경우에 java api만 가지고도 빠르고 쉽게 프론트엔드 영역을 개발할 수 있다는 점이 매력적으로 보였다.
또한 급하게 개발해야 할 때 Java만 알고있다면 한정된 개발 시간 내에 HTML이나 JavaScript를 추가적으로 배우는 게 부담스러울 수 있다. 이럴 때 Java API만으로 프론트엔드를 빠르고 쉽게 개발할 수 있다는 점이 매력적으로 보였다. 또한 다양한 컴포넌트를 제공하니 기본적인 뼈대를 잡고 개발을 할 수 있다는 점이 개발 생산성을 높여준다. 이 때문에 개발자가 많이 없어도 개발을 빠르게 진행할 수 있다.
### 시행착오
### 시행착오
처음에는 vaadin starter가 있는지 모르고 하나하나 의존성 설정을 하려다가 애를 먹었다. 제대로 실행은 되어도 자꾸 로그창에 warning이 떴어서 꺼림찍했다.
처음에는 바딘 스타터(Vaadin Starter)가 있는지 몰랐고, 하나하나 의존성 설정을 하느라 애를 먹었다. 중간에 필요한 기능이 추가적으로 필요하여 다시 pom.xml에 코드를 추가하고 리부트를 시켰어야 했다. 오류가 나진 않아도 로그창에 계속 경고 메시지가 떠서 찝찝했던 점이 있었다. xml 설정이 잘못된 건지 아니면 java 코드를 잘못 구현한건지 구분하기가 어려웠다. starter를 통해서 개발환경이 안정적으로 설정된된 이후에는 마음 편하게 개발할 수 있었다.
또한 프로트엔드는 정말 처음 개발해보는거라 레이아웃의 위치시키는지도 몰랐다. 그래서 폼레이아웃을 가운데로 배치하려는 과정에서 상위 레이아웃의 item 정렬 매서드를 사용해도 작동하지 않았다. 결국 몇시간 검색한 후에야 레이아웃은 마진을 통해서 정렬시켜야한다는 사실을 알게되었다.
또한 프론트엔드 개발이 처음이라 사용법을 익히는데 어려움을 겪었다. 물론 밑바닥부터 개발하는 것이 아니라 편했지만 정보가 부족하여 내가 원하는 대로 개발을 진행하기위해 자료를 찾는 데 시간을 쏟았던 것 같다. 예를 들어 레이아웃 배치를 어떤 방식으로 해야할지 몰라서 여러 방식을 시도하면서 시행착오를 겪었다. 폼 레이아웃을 가운데에 배치하려고 상위 레이아웃의 setAlignItems 같은 메서드를 통해 컴포넌트를 가운데로 배치하려고 했지만 작동하지 않았다. 몇시간을 검색한 끝에야 레이아웃은 마진으로 정렬해야 한다는 걸 알게 됐다. 한, 두번 이미 프론트엔드 개발을 해봤던 사람이라면 편하게 개발을 할 수 있을거란 생각이 들었다.
### 추가적인 구현
### 추가적인 구현
코드 설명에 대한 영상을 만들어야 했기에 강의에 개발했던 모든 기능을 다 담기에는 영상이 너무 헤비해질 것 같았다. 왜냐하면 영상을 찍는 목적이 애초에 바딘에 대한 가벼운 접근과 설명이자 가장 기본적인 기능들을 소개하는 것이었기 때문이다. 그래서 20분 분량의 영상을 만들기로 계획했고 개발했던 부분중에 소개하고 싶었던 기본 기능들을 뽑아서 간추려서 간소화한 다른 프로젝트를 만들어 영상을 만들었다. 추가적인 구현 부분은 master 브랜치에 저장을 해놓았다. 추가적인 구현부분으로는 기존에는 이메일을 작성할 때 풀네임을 적었어야 했다면 @이하 부분은 텍스트로 작성하는 것이 아닌 선택을 하는 방식으로 바꾸었다. 또한 뷰를 하나 더 만들어서 버튼을 누르면 해당 페이지로 이동하는 기능을 추가로 구현하였다.
코드 설명에 대한 영상을 만들어야 했기에 강의에 개발했던 모든 기능을 다 담기에는 영상이 너무 헤비해질 것 같았다. 왜냐하면 영상을 찍는 목적이 애초에 바딘 입문자를 위한 기본적인 기능들의의 소개였기 때문이다. 그래서 20분 분량의 영상을 만들기로 계획했고 개발했던 부분중에 소개하고 싶었던 기본 기능들을 뽑아서 간추려서 간소화한 다른 프로젝트를 만들어 영상을 만들었다.
추가적인 구현 부분은 master 브랜치에 저장을 해놓았다. 추가적인 구현부분으로는 기존에는 이메일을 작성할 때 풀네임을 적었어야 했다면 @이하 부분은 텍스트로 작성하는 것이 아닌 선택을 하는 방식으로 바꾸었다. 또한 뷰를 하나 더 만들어서 버튼을 누르면 해당 페이지로 이동하는 기능을 추가로 구현하였다.
