본문 바로가기

항해 99/WIL(Weekly I Learned)

[WIL7] 미니 프로젝트(1)

항해99
99일, 주니어 개발자로 입사하기에 충분한 시간
hanghae99.spartacodingclub.kr

 

  • 진행 날짜 - 2021.04.09 ~ 2021.04.22  
  • 주특기(Node.js) 목적 - 팀원들과 함께, 백엔드와 프론트 엔드의 역할을 맡아 주제를 선정하고 프로젝트를 진행하자
  • 필수 포함 사항

 

  • 깃 허브 링크 - 

 

[Nest js + TypeOrm + GraphQl를 사용한 Sparta Study Club Project]

 

WonDongGyun/SpartaStudyClub

Contribute to WonDongGyun/SpartaStudyClub development by creating an account on GitHub.

github.com


 

항해 99의 일곱번째 주가 밝았습니다!

 

이번주는 미니 프로젝트 주간이었습니다. 각 조마다 작은 크기의 주제를 정하고 해당 주제를 바탕으로 웹사이트를 구현합니다. 2주간 진행되며 하나의 프로젝트를 절반씩 잘라서 진행한다고 보시면 되겠습니다. 

 

 

 

미니 프로젝트 와이어 프레임의 일부

저희조는 채팅기능이 존재하는 스파르타 스터디 클럽이라는 웹사이트를 만들기로 했습니다. 기능으로는 회원가입을 하고 로그인을 하면, 웹 사이트 안에서 자신이 공부시간을 정하고 그날 달성하려는 목표를 세울 수 있습니다. 해당 목표는 수정, 삭제, 추가가 가능하며 나중에 웹사이트의 달력란에서 해당 내용을 확인할 수 있습니다. 채팅방에서는 다른 회원들과 채팅을 할 수 있고, 본인이 그룹을 만들어 다른 그룹원과 달성률로 경쟁을 할 수도 있습니다.

 

우선 2주동안 기능을 개발할 시간이 있었기 때문에, 후딱 할 수 있는 기능부터 1주차에 진행하기로 했습니다. 그래서 먼저 회원가입과 로그인, 마이페이지의 기능을 개발하기로 했습니다. 

 

 

 

nest js

 

요번에는 미니 프로젝트 투입전에 혼자서 새로운 기술을 연습해 보았습니다. 바로 nest js와 GraphQl인데요. 왜 nest js를 사용하기로 했냐면, express에 비해 nest js가 갖는 장점들이 너무 좋아보였기 때문이었습니다.

 

express는 java의 spring에 비해 처음부터 끝까지 스스로 파일구조를 잡고 작업을 실시해야 합니다. 그래서 저도 맨 처음에 node를 배웠을 때에는 도대체 어떻게 파일 구조를 잡아야하고, 세팅을 해야하고, 작업을 해야하는지 일일이 찾아보며 진행해야 했습니다. 여기에만 얼마나 많은 시간이 들어갔는지 모릅니다.

 

 

 

 

어썸하게도 파일구조를 자동으로 잡아준다!

 

그런데 nest js는 프로젝트 시작시 환경을 세팅해 주기 때문에 파일 구조를 잡거나, 세팅을 하는것에 많은 시간을 들이지 않아도 됩니다. 그렇기 때문에 express보다는 빠르게 프로젝트를 시작할 수 있다는 장점이 있습니다. 또한 기본적으로 typescript를 지원하기 때문에보다 안정적인 환경을 만들 수 있습니다.  물론 express도 typescript를 사용할 수 있지만, 직접 세팅해야 하고 nest js에 비해 typescript를 제대로 활용하는 것이 힘듭니다.

 

 

 

 

 

 

Rest API를 대체하는 새로운 기술 GraphQL

이 nest js라는 프레임 워크에 Graph QL이라는 것도 사용해 보기로 했습니다. rest API의 양이 많아지면서 이런것들을 어떻게 깔끔하게 처리할 수 없을까란 물음에서 자료를 찾던 중 발견한 녀석으로, 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가지고 올 수 있는 쿼리 언어입니다. SQL과 마찬가지로 쿼리 언어지만, 다른 점이라고 하면 SQL은 데이터베이스 시스템에 접근해서 저장된 데이터를 가져오는 쿼리 언어란 점에서 다르겠습니다. 지금까지 프론트에서 서버 측 데이터를 가져가기 위해 막대한 양의 REST API를 만들던 저에게 꿈만 같은 기술이었습니다.  

 

 

 

고마워요 니꼬쌤!!!

 

그래서 노마드 코더 강의 영상을 보며 nest js와 graphQL을 간단하게 익혀서 저희가 진행할 프로젝트를 간단하게 만들어 보았습니다. 유튜브랑 구글을 뒤져봐도 무료로 친절하게 알려주는 곳은 노마드 코더 뿐이었습니다. 덕분에 nestjs와 graphql에 대한 대략적인 흐름과 개념을 알 수 있었습니다. (고마워요 니꼬쌤!)

 

 

그러나 이번 프로젝트에서 사용하기에는 nest js와 graphQL은 다른 팀원들은 처음 써보는 기술이었고, 저희가 진행할 프로젝트에서 어떠한 변수가 있을지 몰랐기 때문에 결국 nest js와 REST API를 사용하여 프로젝트를 진행하기로 결정했습니다. graphQl은 어쩔 수 없이, 현 미니 프로젝트에서는 적용하지 않기로 했습니다. 아무리 뛰어난 기술이라도 배우는 데에는 개인마다 걸리는 시간이 다르니까요.

 

그래도 미니 프로젝트 투입전에 nestjs와 typeOrm, GraphQl을 사용해 볼 수 있어서 정말 즐거웠습니다.

 


 

😀 배운 점

nest js를 한번 해보고 나니, 다시는 express는 사용하지 않을꺼란 니꼬쌤의 말이 이해가 되었습니다. 제가 구조를 잡지 않아도 되서 너무 편하네요~

GraphQl은 아직 간단한 기능밖에 구현해보지 못했지만, 다음 팀 프로젝트에서는 반드시 적용해서 해보고 싶습니다!

 

😙 느낀 점

역시 새로운 기술을 배우는건 즐겁습니다. 정말 시간가는줄 모르고 코딩을 했거든요.

 

😭 아쉬웠던 점

이번 미니 프로젝트에 GraphQl까지 써봤으면 정말 좋았을텐데 라는 아쉬움이 남았습니다.