Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

토이 프로젝트 시작하기에 앞서 정리하는 글

2019.08.27
핫한 길다란

새로운 기술을 공부하거나 기존 기술에 개념이 모호할때마다 항상 토이프로젝트를 통해 개념을 정리하고 확립했습니다. 지금까지는 이러한 과정을 항상 머리속에 담아두고 진행했었는데, 이번에는 기록으로 남겨보려고 합니다.

주제 선정

기본개념을 확립하는데 TODO애플리케이션을 만드는것도 하나의 방법이지만 지속가능한 애플리케이션으로 적합하지 않다는 생각이 들었습니다.

프로젝트에 대한 주제는 매일 항상 생각하며 번뜩이는 아이디어가 있다면 적어두곤합니다. 그 중에서 프로젝트를 통해 습득하고 개념을 적립하고 싶은 기술을 적용하기에 적합하며 규모도 크지 않게 느껴지는 주제를 선정하였습니다.

저는 출퇴근시간 혹은 피크타임에 개발에 관련된 글을 많이 읽는편입니다. okky, velog, awesome-devblog, brunch 다양한 플랫폼에 접속해서 끌리는 제목이나 관심이 많은 분야의 포스트를 찾아보곤합니다.

여기서 느끼는 문제점이 한눈에 모든 최신글들을 파악하기 어렵다는 점입니다. 물론 awesome-devblog에서 잘 정리하여 제공해주고 있지만 속도가 좀 느린감이있고 자주 오류가 발생하더군요.. 😪

그래서 이라한 문제점에 대한 해결책으로
readmoa(리드모아)라는 개발 관련된 글들을 모아서 편하게 볼수있는 애플리케이션을 주제로 선정하였습니다.

image.png

프로젝트의 시작을 알리는 도메인 구매는 언제나 두근두근 합니다 😊

기술

최근 Vue에 대해 다시한번 복습하고 정리했습니다. 이전에 개발했던 codepresso라는 애플리케이션이 있었지만 당시 CSS에 대한 이해가 부족하여 부트스트랩에 의존하였고 그결과 JQuery가 끼어들어 퓨어한 자바스크립트를 활용한 애플리케이션이 완성되지 못했고 결국 devhyun으로 리메이킹되었습니다.

이번 기회에 프론트프레임워크인 Vue에 대해 다시한번 정리하고 개념을 확립하려고 합니다.
(추후 React 공부에도 좋은 영향이 있을거라 생각합니다.)

아래는 욕심을 조금 보태 정리한 프로젝트 기술 스택입니다.

  • VueJS
  • Express
  • Typescript
  • Jest, Mocha Jasmine
  • Sequelize, TypeORM
  • MySQL
  • AWS

VueJS

먼저, SEO는 크게 고려하지 않아 NuxtJS를 생각하지 않았습니다. 다른 사이트의 글정보를 파싱해야하는데 검색엔진에 이 내용이 제 애플리케이션으로 노출되는건 적합하지 않다고 판단하였습니다. 단지 메인페이지 같은 경우 간단하게 소개하거나 홍보해야하는 부분이 필요하기에 prerender를 도입하면 적당하다고 생각했습니다.

Express

자바스크립트로 백엔드 API를 구성하기에 가장익숙하고 편한 Express를 선택하였습니다. 그 동한 공부하면서 구현했던 코드들을 다시한번 살펴보고 리팩토링하는 시간을 가져보려고합니다.

Typescript

개인적으로 가장 학습해보고 싶은 부분입니다. 현업에서도 많이 사용하고 있는 추세이고 규모가 커질수록 코드관리에 어렵다는 Javascript의 특징을 잘 보완해줄수 있는 영역이라고 생각합니다.

Jest, Mocha, Jasmine

이번에는 단순히 화면단에서 잘 작동하는지 눈으로 확인하는것 뿐만아니라 코드화하여 테스트 코드를 작성하고 관리해보고 싶습니다. 각 라이브러리의 장단점을 파악해 하나를 선정하여 진행하겠습니다.
(토이프로젝트에 테스트코드를 적용하는것이 처음이다보니 백엔드에 한정하려고 합니다.)

Sequelize, TypeORM

이전 프로젝트에는 대부분 mybatis를 사용했었습니다. 특히 Javascript에서 mybatis를 사용하니 xml코드도 지저분한 느낌이있었고 가져온 데이터를 재 가공해야하는(라이브러리에서 지원하지 않습니다.) 별도의 객체 맵핑과정이 필요해 번거롭다는 인식이 강했습니다. 다양한 라이브러리를 찾던도중 ORM 쪽을 고려하였고 Sequelize, TypeORM중 하나를 선택하여 진행할 생각입니다.

MySQL

사실 다른 데이터베이스도 많이 있지만 아직까지는 MySQL이 편하다고 생각합니다. 물론 파싱된 데이터를 보관하는데는 NoSQL쪽도 좋은 대안이 될수 있지만 러닝커브도 있고 디비설계의 복잡성이나 여러가지 측변에서는 RDB를 사용하는 쪽으로 선택했습니다.

AWS

예전에 GCP를 사용해봤었는데 한국리전이 없어 속도가 조금 늦었던걸 경험했었습니다. 이번 프로젝트는 AWS를 사용하여 디플로이를 진행할 예정입니다.

위의 기술 스택대로 진행이 될지는 확실치는 않지만 최대한 노력하려고 합니다.

마치며

처음에는 React를 공부해서 프로젝트를 진행하려고 했으나, 기존에 공부했었던 Vue를 좀더 정리하고 Javascript를 이해하는 방향으로 변경했습니다. 특히 설계와 테스트라는 부분에 많은 비중을 두고 진행하면 큰 도움이 되지 않을까 라고 생각합니다.

이번 프로젝트는 과거에 했단 다양한 토이 프로젝트보다 좀더 시간이 필요할것 같습니다.

2개의 댓글

  • WooHyeok Jeon
    선택

    WooHyeok Jeon2019.12.18

    안녕하세요. 백엔드개발자가 되고싶은 취준생입니다. 그런데 학부 때 프로젝트와, 해외 인턴을 갔다왔지만 직무와 연관이 없어 경쟁력이 없는 것 같습니다. 찾아보던 중 이 사이트를 찾게 되었고 기술 스택을 보니 요즘 기업에서 원하는 역량이 모두 있는 것 같아 저도 이런 사이트를 만들어 보고 싶습니다. 저는 해당 기술 스택 중 1개도 아는 것이 없는데 데브현 사이트와 비슷한 방식으로 만들고싶은데... 1~2개월만에 하기에는 무리일까요?...

  • Hyunho Kim
    선택

    Hyunho Kim2020.01.05

    @WooHyeok Jeon

    답변이 늦어서 죄송해요 ㅠ
    사실 기술 스택은 중요하지 않다고 생각해요! 가장 자신있는 기술로 개발해서 조금씩 시작해보시는건 어떨까요?
    조금 더 자세한 이야기나 궁금하신점 있으시면 메일 보내주시면 답변해드릴게요
    화이팅입니다 !

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

연관 포스트 (4건)

목록으로 가기