Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

프로젝트 데브현

2019.10.06
핫한 길다란

주니어 개발자로서 취업준비를 위한 포트폴리오 고민을 많이 하게 됩니다.
기술 스택, 아이디어 정말 멋지게 만들고 싶은 의욕이 매우 강하죠.

이번 기회에 끝판왕 프로젝트를 기획하게 되었고 아래의 요소들을 중점적으로 고민하였습니다.

  1. 써보고 싶은 다양한 기술을 적용해보자
  2. 기능구현도 중요하지만, 견고한 설계와 유지보수를 고려하며 코딩하자
  3. 쓸모 있거나 쓸 수 있는 걸 만들어보자

이러한 고민을 바탕으로 프로젝트 데브현을 기획하였고, 단계별로 기능을 구현하면서 브랜딩 + 개발 블로그 + 자기관리 기능으로 확장된 웹 애플리케이션을 개발하였습니다.

기획

처음에는 개인 브랜딩을 목표로 간단한 소개를 중점적으로 기획하였으나, 한 번에 모든 걸 보여주는 것이 더 의미가 있을 거 같아 개발 블로그 기능을 추가하였습니다.

개발을 진행하면서 개발 일지 작성을 위해 Notion을 사용하였습니다. 데이터양이 많아지니 유료로 사용해야 했는데, 필요한 기능만 직접 구현해보자는 생각으로 스케줄, 태스크, 노트 기능까지 확장하였습니다.

기술 스택

처음 개발은 Java로 입문하였지만, Javascript에 흥미를 가지고 공부를 하고있었습니다. 특히 소규모 애플리케이션에서는 Java가 어울리지 않은 느낌이 강했고 JS의 개발 생산성이 기술선택에 있어 매력적으로 작용하였습니다.

초기 개발

초기에는 조금 친숙한 아래의 기술들로 시작하였습니다.

  • AWS EC2
  • NodeJS(Express)
  • Handlesbar.js
  • MySQL(mybaris)
  • JQuery
  • CSS

프론트엔드 프레임워크 VueJS 혹은 ReactJS에 대해서도 고민하였지만 SEO등 해결해야 할 이슈가 있고 아직 학습 정도가 부족하다고 판단되어 템플릿 엔진을 사용하였습니다.

리팩토링

1차 개발이 완료되고 리팩토링하면서 아래의 기술로 변경되거나 추가되었습니다.

  • mybatis => Knex.js
  • jsdoc
  • fxjs
  • webpack

에디터 코드 블록에서 ${}가 Insert되지 않는 이슈로 mybatis에서 Knex.js로 마이그레이션 했고, 함수형 프로그래밍을 공부하면서 fxjs라는 라이브러리를 적용해보고 싶었습니다. 그리고, 코드 가독성을 위해 브라우저에서 ES6를 사용하기 위한 webpack를 도입하였습니다.

기능

크게 클라이언트와 관리자 기능으로 구분되어 있습니다.
클라이언트의 경우 기능보다는 디자인 및 퍼블리싱에 중점을 두었으며,
관리자에는 핵심기능이 구현되어 있습니다.

클라이언트

웹 디자인, 크로스 브라우징, UX를 고려한 설계 등...
내세울 건 없지만 사용자가 보는 화면이니깐 최대한 깔끔하게 만들려고 노력했습니다.

포스트 내비게이션 기능

image.png

마크다운 에디터의 h1, h2, h3에 따라 들여쓰기가 적용되며 클릭 시 해당 콘텐츠로 스크롤 되는 기능

연관 포스트 기능

image.png

대부분의 블로그에서 제공하는 다른 글감들 제공
시리즈로 엮긴 글은 모아서 제공

관리자

대시보드, 스케줄, 태스크, 노트, 블로그 관리 기능이 구현되어 있습니다.

대시보드

image.png

태스크 및 일정을 한눈에 파악
서버 및 도메인 기간 확인

스케줄

image.png

tui-calendar 라이브러리를 활용한 일정관리 애플리케이션

태스크

image.png

그룹형 TODO 애플리케이션

노트

image.png

마크다운 에디터로 작성한 노트 기능

블로그 포스팅

image.png

tui-editor 라이브러리 커스터마이징
외부 사이트를 활용한 맞춤법 검사
이모지 피커 적용, 임시 저장 기능

보완점

블로그에 댓글기능이 빠져 있습니다. 소셜 로그인을 통한 댓글 작성기능을 추가할 예정입니다. 또한, 관리자 페이지의 경우 반응형으로 제작되어 있지 않습니다. 추후 관리자 전용 애플리케이션을 고려하고 있습니다.

학습 포인트

이번 프로젝트를 진행하면서 학습한 내용입니다.

  • ES6를 활용한 애플리케이션 개발
  • Javascript 이해도 향상
  • Express 구조와 미들웨어 활용
  • Webpack 사용
  • 웹 디자인 & 퍼블리싱

특히 이번 프로젝트를 통해 JS에 대한 특징을 체험하고 이해할 수 있었습니다. 그리고 다양한 웹디자인 시안을 살펴보았고 UI/UX에 대해 고민해보았으며, 직접 퍼블리싱을 해본 첫 프로젝트였습니다.

마치며

기획에서부터 개발까지 두 달에 걸친 긴 여정이었지만, 개발된 애플리케이션에 대해 만족하고 사용하고 있습니다. 앞으로 필요한 기능이 있다면 기획하여 추가 개발하여 가장 의미 있는 포트폴리오로 남기고 싶습니다.

여기까지 프로젝트 데브현에 대한 소개였습니다.
감사합니다.

0개의 댓글

로그인을 하시면 댓글을 작성할 수 있어요 !

연관 포스트 (5건)

목록으로 가기