Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

프로젝트 리드모아

2019.10.10
핫한

Javascript에 대한 이해와 Frontend Vue를 학습하기 위해 진행한
토이 프로젝트 리드모아에 대해 정리하는 포스팅입니다. 🚀

기획

초기 기획을 깊게 고민하지 않아서 실용적인 부분은 많이 부족합니다. 초기 설정했던 목표인 플랫폼 글 모아 보기 기능에 충실하게 개발되었습니다.

기능에 대한 욕심이 많았지만, 기술 스택을 학습하는 게 주목적이었기 때문에 최대한 심플하게 구성하였습니다.

기술

앞서 「토이 프로젝트 시작하기에 앞서 정리하는 글」에서 언급한 기술들을 사용하면서 느낀 점들 입니다.

Typescript

처음으로 Typescript를 프로젝트에 적용해보았습니다. 타입을 뚜렷하게 제공해야 한다는 점에서 객체 지향언어인 Java와 흡사한 느낌을 받았고 크게 거부감은 없었습니다.

다만, Npm에 올라와 있는 다양한 라이브러리를 활용할때 d.ts파일이 없는 경우가 많아 타입 지정이 어려운 점이 있었습니다.

Vue

기존 방식과 달리 Vue와 Typescript를 적용하기 위해 vue-property-decorator를 사용한 Class기반의 컴포넌트를 적용하였습니다. 처음에는 어노테이션 데코레이터가 익숙하지 않아 어려웠지만, 공식 문서를 보면서 쉽게 적용할 수 있었습니다.

컴포넌트는 리엑트 스타일인 프레젠테이션 컴포넌트와 컨테이너 컴포넌트로 구분하여 작업했습니다. 그리고, styled-compoment를 적용해보았는데 JS 변수를 CSS에 활용할수 있는 부분이 매력적이었다고 느꼈고, 조금 더 활용법을 찾아보고 공부해야할 필요성을 느꼈습니다.

Vue의 싱글파일 컴포넌트(.vue)가 추구하는 방향이 브라우저에서 작업하는 Html + CSS + Javascript의 느낌과 유사했고 React보다는 러닝커브가 낮은 것 같습니다.

Test

사실 이번 프로젝트에서 테스트 코드를 적용해보려고 했습니다만, 적절한 사용법을 찾지 못해 보류하였습니다. 😭

NodeJS의 Express는 Java의 JUnit, Mockito와 같이 단위 테스트에 최적화되어있는 인상을 받지는 못했습니다. supertest의 경우 동작이 Express앱을 메모리에 올려 테스트하기때문에 결합 테스트의 느낌이 강했습니다.

어떤 방향으로 프레임워크를 설계해야 좋은 테스트 코드 환경을 구축할 수 있을지 좀더 고민해봐야겠네요.

TypeORM

과거에 SpringJPA를 살짝 다뤄본 적이 있어 크게 거부감은 없었지만 역시 복잡한 테이블을 설계하고 구축할 때 방향성에 대해서는 감을 잡기가 어렵다고 생각했습니다

확실히 객체로 접근하여 다양한 쿼리를 쉽게 사용할수 있는 부분은 편리했고 명확한 타입으로 코드 생산성에도 좋은 것 같습니다.

느낀 점

이번 토이프로젝트를 통해 Typescript의 기본적인 사용법에 대해 공부할 수 있었고, Vue에 대해 다시 한 번 정리할 수 있는 시간을 가져보았습니다. 요즘 Javascript로만 개발을 하다 보니 함수형 프로그래밍에 대해 조금 더 가까워진것같네요. 다음번엔 React로 토이프로젝트를 진행해보려고 합니다 🍀

0개의 댓글

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

연관 포스트 (4건)

목록으로 가기