[2차 프로젝트] 2차 프로젝트 회고록

뭐했는데 끝났지 .. ?

 

Elice SW 엔지니어 트랙 1기 2차 프로젝트가 끝났다 . 저번 게시글에 기획 글을 올렸던거 같은데 , 중간에 뭐를 기록할 시간도 없이 정신없이 코딩하다보니 프로젝트가 끝났다. 그래도 한숨 돌리게 되었으니 , 프로젝트에 대해 돌아보고 배운 점을 정리해보려고 한다.

 

결과물

 

https://github.com/Kim-hasa/KKABLA

GitHub - Kim-hasa/KKABLA

 

이번 프로젝트는 Node JS , React JS를 사용해서 개발하게 되었다. 팀원들과 여러 주제에 대해 이야기를 나누었고 , 이번에 주제를 선정할 때 중요하게 생각했던 것은 일상에서의 불편함과 그 불편함을 해소할 수 있는 프로그램을 개발하고자 하였다. 그러던 중 , 부트캠프를 선택하는 과정에서 어려움이 나타났고 , 그 불편함을 해소할 수 있는 블라인드 같은 커뮤니티를 만들자고 의견이 좁혀져서 , 부트캠프에 대해 평가할 수 있는 " KKABLA " 라는 커뮤니티를 만들게 되었다.

이 커뮤니티는 리뷰게시판과 자유/개발게시판으로 나누어져 있고 , 수강생 인증을 받는다면 리뷰게시판에 리뷰를 작성할 수 있다. 자유게시판과 개발게시판은 자유롭게 열람할 수 있지만 로그인을 해야 글과 댓글 , 대댓글 등이 작성 가능하다.

 

나의 역할

 

프론트엔드 직무로써 , 게시판에 글 작성/수정하는 부분 , 마이페이지 , 관리자 페이지를 구현했다.

 

개발환경 세팅

 

공통적으로 디자인시 Material UI를 사용해서 디자인을 일관되게 통일했다. 사실 개인적으로는 디자인적인 부분보다 기능을 만드는 부분에 시간을 더 쏟고, 더 개발하고 싶은 마음이 있다. 그래서 외부 UI를 이용해서 디자인에 시간을 줄이고 , 기능을 더 많이 개발하고 싶었다. 여러 라이브러리를 찾아보던 중 , 강의도 많고 찾아볼 것이 많은 MUI를 사용하게 되었다. 또한 이전 개인프로젝트에서 사용했던 Styled-Components를 같이 사용했다. 처음에는 어려웠지만 , 사용하다보니 너무 편하고 직관적이었다. 개인 프로젝트에서도 많이 사용 할 것 같다.

 

또한 이번에 처음으로 프리티어라는 VS Code 익스텐션을 사용했다. 저번 프로젝트에서도 알게모르게 느껴진 부분이었는데 , 누구는 Tab을 4칸 누구는 2칸으로 사용해서 서로의 코드를 고치게 되는 경우에도 이상해지는 경우가 많았다. 하지만 이번에 사용한 프리티어는 그런 부분에서 통일감을 줘서 협업시에 이해하기 쉽고 수정하기도 편했다. 

 

Prettier -> https://kim-hasa.tistory.com/131

 

이번 프로젝트에서는 깃을 효과적으로 사용해보고자 했는데 , 그런 부분에서 사용한게 깃 컨벤션 이었다. 저번 팀 프로젝트나 개인 프로젝트에서 그냥 대충 커밋해버리고 나중에 혹시 코드를 찾게 되면 하나하나 뒤져가면서 힘들게 찾았는데 , 커밋 메시지를 일관적으로 올려서 기록해두다 보니 이전 커밋과 비교하기도 쉽고 이전 버전으로 되돌리기도 편했다. 깃 컨벤션에 관한 자세한 내용은 따로 블로그에 기록해 두었다.

 

Git Convention -> https://kim-hasa.tistory.com/132

 

게시판에 글 작성

 

이번에는 글 작성/수정/조회하는 부분에서 Toast UI Editor라는 외부 라이브러리를 사용해 보았다. 그냥 input이나 textarea를 사용하니 너무 없어보이기도 했고 , 저번 프로젝트에서도 사용해보고자 했는데 사용하지 못한 아쉬움이 있어서 적극적으로 사용해 보았다. 사진 첨부나 여러 부분에서 어렵기도 하고 삽질한 시간도 많았지만 , 너무 좋은 경험이었고 앞으로 글 작성등의 기회가 있을 때 사용하기 위해 정리해두었다.

https://kim-hasa.tistory.com/133

[React] Toast UI Editor , Viewer , 이미지 첨부 및 Plugin

 

마이페이지

마이페이지 모습 . 임의의 데이터가 들어가있다.

처음으로 리액트를 사용하였는데 , 마이페이지에서는 component의 재사용을 중점으로 두고 개발했다. 사진을 보면 알겠지만 틀도 굉장히 비슷하고 , 안에 들어가있는 component들도 굉장히 비슷하다. 만약 하나하나 일일히 개발하게 되면 ?? 페이지도 많이 나오고 component들도 굉장히 많이 나오게 된다. 그런데 공통적인걸 수정해야 한다면 ? 모든 파일에 일일히 들어가서 고쳐야 하고 , 그러다보면 헷갈리고 실수도 나오게 되고 시간도 오래걸린다. 한마디로 코딩의 효율성이 떨어진다는 말이다. 그래서 마이페이지를 작업할때는 component의 재사용성을 최대한 고려해서 개발해보고자 하였다. 재사용할 수 있는 부분은 최대한 재사용하고 , component의 수를 최대한 줄이는 방향으로 개발했다. 

 

관리자 페이지

관리자 페이지의 모습

글 쓰기 페이지와 마이페이지의 컴포넌트들을 최대한 활용했다. 기본 틀은 마이페이지에서 사용한 component들을 이용했고 , 부트캠프 등록에는 글 쓰기 페이지의 사진 첨부 기능을 활용했다. 사진 첨부에 어려움이 많이 있었는데 , 글 쓰기 페이지에서 해결하고 나니 자연스럽게 해결되었다. 이전에 사용한 component들을 가지고와서 사용하고 , 더 나은 방향으로 개선하는 페이지였던 것 같다.

 

배운점

체계적인 협업 , 많은 소통

이전 개인프로젝트보다 더 체계적인 방법으로 협업을 진행했다. 깃 컨벤션이나 프리티어 등을 적극 활용했고 매일 아침 저녁 스크럼을 통해서 소통의 시간을 늘렸다. 또한 merge도 같이 모여서 진행하면서 어려운 부분이나 막히는 부분을 공유해서 더 빠르게 해결할 수 있었다. 이러다보니 어려운 부분이 생겨도 금방 해결이 가능했고 , 서로의 코드를 읽고 해석하기 쉬워서 협업이 빠르고 정확하게 진행될 수 있었다. 사실 저번 프로젝트때 가장 크게 느낀 부분이 소통의 부재가 협업을 어렵게 한다는 것이었는데 , 효율적이고 만족스러운 협업을 한 것 같아서 뿌듯하다. 소통의 중요성을 다시 한번 느꼈고, 체계적인 협업이 중요하다는 것도 함께 배운 프로젝트였다.

 

효율적인 코딩을 위한 component 재사용

React의 가장 큰 장점 중 하나인 component의 재사용을 몸소 느끼면서 개발해 보았다. 확실히 재사용이 큰 장점이라는 것을 느끼면서 개발했고 , 그만큼 생각해야 할게 많은 작업이라는 것도 느꼈다. 이전 개인 프로젝트에서는 별로 생각하지 못한 부분이었는데 , component의 재사용에 중점을 두고 작업을 하다보니 component를 만들 때는 생각할게 많아서 어려웠지만 , 한번 만들고 난 이후에는 원하는 곳에 넣기만 하면 되니까 너무 편리했고 효율적이었다. 이전에 복사&붙여넣기로 작업했던 내 자신이 부끄러워졌다. 하지만 아직 부족한 부분이 있어서 더 공부하고 더 많이 만들어봐야겠다는 생각을 하게 되었다. 

 

React JS가 능숙해졌다.

React JS사용에 두려움이 있고 헷갈리는 부분이 있었지만 , 직접 다뤄보니 생각보다 훨씬 쉽고 편하게 개발할 수 있도록 만들어진 도구라는 생각이 들었다. 또한 직접 만들면서 경험해보니 여러 에러들도 생기고 원하는대로 만들어지지 않는 부분도 있었지만,  그 에러들을 한 개씩 해결해가면서 자신감도 붙고 재미도 생기고 훨씬 능숙해졌다. 오히려 새로운 기능들을 찾아서 넣어보고 싶다는 마음이 들었다. 다음에는 개인 프로젝트로 체계적으로 React JS를 사용해서 여러 새로운 기술을 넣어서 개발해보고 싶다.

 

마무리하며 ..

욕심도 많고 호기심도 많았던 프로젝트였다. 이전 프로젝트에서 아쉬운 부분이 많아서 그 부분들을 최대한 보완하면서 개발하고자 했고 , 새로운 기술이나 라이브러리를 쓰면서 작업해보고자 하는 마음이 많이 있었으며 , 그러면서 React JS의 기초를 단단히 다지고자 했다. 깃 컨벤션이나 프리티어를 사용하면서 최대한 협업의 효율을 높이고 소통을 자주 했으며 , Toast UI Editor등 새로운 기술을 접목시키기도 했고 , component로 개발하는 방법을 자세히 공부하는 계기가 되었다. 그래서 사실 이번에는 아쉬움보다는 만족감이 더 큰 프로젝트다. 더 공부 했으면 더 잘 만들었을거라는 아쉬움이 있지만 , 저번에 아쉬웠던 부분을 많이 채운 것 같아서 한걸을 더 발전한 것 같아서 기분이 좋다. 다음 프로젝트에서는 이번에 보완했던 부분을 더 보완하고, 아쉬운 부분을 더 채우기 위해 공부하고 고민해야겠다.