[Kernel360 1기] 해커톤 후기

커널 360 해커톤 후기

 

지난 번 Boot-up 프로젝트에 이어서 약 4일 동안 해커톤 과정을 진행하였습니다.

이 게시물에선 해커톤 프로젝트에 참여한 경험을 간단히 회고하도록 하겠습니다.

모든 프로젝트의 과정에 참여한 게 아니므로, 제가 참여한 부분에 대해서만 기술하겠습니다 🙂

 

내 인생 첫 해커톤

---

빠른 시간 안에 MVP를 구현해 내는 개발자의 마라톤 해커톤. 이번 커널 360 과정에 들어와서 처음으로 경험해 보게 되었습니다.

해커톤 프로젝트는 최소한의 기술적 완성도를 가진 결과물을 단시간에 만들어 봄으로써 자신의 기술적 실력을 파악하고, 빠른 학습에 대한 경험을 습득하기 위한 프로젝트입니다.

특히 프로젝트를 하면서 코드의 품질, 기술적 협업을 이해하는 것을 목표로 한 프로젝트이죠.

지난 부트업 프로젝트와 마찬가지로 2일차 일정이 마무리된 후 팀장을 제외한 팀원이 교체가 되는 과정이 있었습니다. 그래서 클린 코드를 지향한 파악하기 좋은 코드를 작성하는 것도 중요하고, 새로운 팀에 들어가 빠르게 그 프로젝트에 적응하는 능력 또한 요하는 과정이었습니다.

많은 크루 분들이 지난번 팀원이 교체가 되는 경험을 호평하였고, 지난번에 저는 경험하지 못했기 때문에 이번에는 팀원으로 들어가고자 하는 마음이 강했습니다.!

다행히(?) 주제가 선정되고 팀장이 선정됨에 따라 저는 마음에 드는 팀을 골라 들어갈 수 있었답니다.

아래에서는 이번에 참여한 두 프로젝트의 내용을 소개하도록 하겠습니다.

 

미니스토리(Mini-story)

---

🔴 프로젝트 소개

---

티스토리 같은 블로그 서비스를 만들어볼까

 

나만의 작은 티스토리를 목표로 게시글을 작성하여 게시할 수 있는 나만의 블로그 서비스를 구상하고 또 개발하게 되었습니다.

기존에 Spring 프레임워크는 사용할 줄 알았지만 깊은 이해도는 없었고 특히 Spring-boot 환경에서의 작업이 처음이라 이렇게 기본적인 CRUD 를 프로젝트에 참여할 수 있어서 감사했습니다.

우선 1일차에는 부트업 프로젝트와 같이 기획에 시간을 많이 썼는데요, 이번 설계가 인상적이었던 점은 모든 설계 과정에 모든 팀이 참여하였다는 점이었습니다.

먼저 기능 명세서를 함께 작성하고 그에 따른 개발에 사용할 스택을 정하고 ERD를 그려나갔습니다.

그리고 1일차 저녁부터 직접적인 개발에 들어갔습니다!

 

🟠 화면 설계

---

피그마로 그린 와이어 프레임...

 

지난번 부트업 프로젝트의 경험을 토대로, 화면 설계를 통해 필요한 기능을 설계하는 것이 효율적이라고 판단해서 주요 기능들이 포함된 화면을 함께 구성하는 시간을 가졌습니다.

이번에는 지난번보다 조금 더 디자인 친화적인 툴인 Figma 를 사용해서 함께 구성하였습니다. 특히 피그마를 사용하니 팀 단위로 같은 워크스페이스 안에서 작업을 할 수 있어 협업 능률이 올랐습니다.

이렇게 간단히 UI/UX를 설계한 후 본격적으로 기능 명세서를 작성하였습니다.

 

🟡 기능 명세서

---

ministory 기능 명세서

기능 명세서는 부트업 프로젝트 때와는 다르게 화면별이 아닌 도메인 별로 나누어 작성하도록 노력하였습니다.

지난 경험과 마찬가지로 Notion 을 활용하여 작업하였습니다.

 

🟢 ERD

---

설계한 ERD

 

그리고 기능 명세서의 기능을 바탕으로 ERD를 작성하였습니다.

팀장님과 팀원들의 도움으로 지난 부트업 프로젝트보다 조금 더 구조화된 ERD를 작성할 수 있었습니다.

지난번과는 다르게 ERD Cloud 라는 플랫폼을 사용해서 함께 작업한 경험도 새로웠습니다.

 

🔵 기술 스택

---

위의 내용을 종합하여 필요한 기능에 맞는 기술들을 선택하여 기술 스택을 정하였습니다.

프론트엔드 기술로는 Vanilla javascript, jquery, thymeleaf를 사용했고,

백엔드 기술로는 java, Spring-boot, Spring Data JPA

데이터베이스는 MySQL을 사용하기로 정하였습니다.

 

내가 기여한 부분

---

저는 위에서도 언급했다시피 Spring-boot 환경에는 익숙하지 못한 상황이어서 팀원들의 도움을 많이 받아야만 했습니다.

다만 프론트엔드 화면에서 javascript 나 jQuery 라이브러리를 사용해 서버에 요청을 보내는 경험이 있어 제가 그 부분에 있어 팀원들에게 기여할 수 있다고 판단하였습니다.

또한 이전에 회사에서 근무할 때 Daum Open Editor를 서비스에 적용한 경험이 있어, 이 경험을 살려서

게시글 작성 기능을 담당하여 개발하기로 하였습니다.

미니스토리 에디터

 

우선 마크다운 문법으로 게시글을 작성하고, 해당 게시글을 마크다운 형식 그리고 HTML 형식 두 가지로 저장하여 게시글을 출력할 때는 HTML을, 게시글을 수정할 때는 Markdown을 불러오도록 설계를 하였습니다.

그래서 해당 기능을 모두 만족하는 중국의 오픈소스 마크다운 에디터인 Editor.md 를 사용하였습니다.

해당 라이브러리 파일을 서버에 저장하고 소스를 수정하여 저희 서비스 위에서 동작하도록 수정하고 해당 게시글이 작성되었을 때 제목, 카테고리, 작성한 Markdown 코드와 출력되어야 할 HTML 코드를 Spring-boot 서버와 비동기 방식 (AJAX) 으로 통신하여 데이터를 주고받는 경험을 할 수 있었습니다.

또한 Spring-boot 안에서 기본적으로 CRUD 로직을 어떻게 구성하는지를 경험할 수 있었고, 특히 Spring-Data-JPA 를 통해 인터페이스 만으로 DB에 쿼리문을 작성하여 보내는 경험이 굉장히 신기했습니다.

시간이 부족해서 이 기능밖에 완성하지는 못했습니다.

다만, 나름 이 서비스의 핵심 기능이라고 생각했고 멋진 기능을 완성하고 나갈 수 있어서 감사했고 또 많은 것을 배워서 짧은 시간에 Spring-boot 환경에 적응할 수 있었습니다.

또 바랐던 점은 다음번 팀이 바뀌면 백엔드에서 동작하는 새로운 기능을 만들고자 하는 목표가 생겼었습니다.

 

KERNEL LIBRARY(KERNEL360 작은 도서관)

---

🔴 프로젝트 소개

커널 라이브러리(내가 만든 로고..ㅎ)

 

커널 라이브러리는 커널 360 구성원들 간 책을 돌려볼 수 있도록 도서를 등록 및 대출 반납 서비스를 제공하는 프로젝트였습니다.

3일차부터는 팀이 랜덤으로 배정되었는데, 거의 같은 기술 스택을 사용하는 프로젝트로 와서 다행이었습니다.

해당 프로젝트는 이미 기획과 설계가 완료된 프로젝트였어서 간단한 인수인계 후 바로 개발에 들어가게 되었습니다.

 

내가 기여한 부분

---

저는 먼저 책을 서비스에 등록하는 책 등록 기능을 담당해서 개발하였습니다.

먼저는 간단하게 form 을 작성하고 Form-Data를 submit 해서 서버와 통신하는 기본적인 구조의 CRUD 기능을 먼저 작성했습니다.

 

특별히 전 팀에서 원했던 특별한 백엔드 기능을 구현하는 경험도 함께 할 수 있었는데요,

책을 조금 더 간편하게 등록할 수 있도록 QuaggaJS라는 바코드 리더 라이브러리를 사용해서 WEB 브라우저에서 제공하는 MediaDeviceAPI의 Stream 객체와 연결하여 책의 바코드를 읽어서 해당 책의 ISBN을 추출하는 기능을 프론트엔드 단에서 먼저 구현했습니다.

 

이후 비동기 통신 (AJAX) 으로 해당 ISBN을 요청에 보내어서 서버에서 Google Books API로 요청을 보내고 해당 응답으로 책의 모든 정보를 받아 모든 책 등록에 필요한 정보를 자동으로 가져오는 기능을 추가하였습니다.

해당 기능을 통해 서버에서 OPEN API로 요청을 보내고 응답을 받는 과정, API 키를 안전하게 보관하는 방법 등을 배울 수 있었답니다.

또 빠르게 해당 기능을 완성시켜 3일차에 추가적으로 회원가입 기능을 개발하였고

4일차에는 모든 백엔드 로직을 웹 페이지와 연결시키고 페이지에 스타일을 입히는 프론트 작업까지 마치고 프로젝트를 성공적으로 마무리할 수 있었습니다.

 

프로젝트 후기

---

먼저 부트업 프로젝트에서 느끼지 못했던 개발의 재미를 느낄 수 있어서 너무 만족스러웠습니다.

특히 스프링 부트 환경은 처음이어서 자신이 많이 없었는데, 크루 분들의 많은 도움으로 금방 적응할 수 있었고 제가 열심히 해서 만든 기능을 시연하면서 다른 크루 분들에게 인정받을 수 있어서 되게 뿌듯한 경험이었습니다.

 

아쉬운 점도 있었는데요, 회원가입을 진행할 때도 Spring-security 등의 기술을 사용해서 비밀번호를 안전하게 해싱 하여 데이터베이스에 저장해야 하는데요, 이런 부분 없이 보안상의 취약점을 가진 채로 기능을 개발하였습니다…

또한 모든 기능을 완료하긴 했지만 클린 코드를 지향하는 목표와는 거리가 먼 코드들이 탄생하였습니다..

(며칠 만에 뚝딱 이쁜 프로젝트를 만드는 분들 진심 존경합니다..)

 

그래도 해커톤 프로젝트를 통해 너무너무 즐거운 시간이었고, 특히 마지막에 저희 프로젝트가 1등을 해서 상도 받고 팀원들이랑 치킨 파티도 즐길 수가 있었답니다.

 

또 프로젝트를 진행하면서 저도 그렇고 많은 크루 분들이 어려움과 난관을 봉착하기도 한 것 같은데, 이 부분을 또 나중에 커널360 과정을 수료하고 난 후 얼마나 달라졌을지 더 기대하게 되는 점이기도 하였답니다.

 

이후로는 1달 동안 진행되는 E2E 프로젝트 가 진행되는데요, 이때는 아쉬운 점들을 보완해서 멋진 프로젝트를 배포까지 완료한 상태로 후기를 남길 수 있도록 노력하도록 하겠습니다!