[개인 프로젝트] 동아리 홈페이지 만들기

 프로젝트 선정 이유, 목표

현재 나는 컴퓨터 공학과 재학 중이며 학과에서 컴퓨터 동아리 활동을 하고 있다.

1학년 무렵 활성화되어 있던 동아리 홈페이지가 어느 날부터인가 비활성화되었고, 마침 이번 방학 동안 React, node.js를 활용한 프로젝트를 계획하던 나는

"동아리 홈페이지를 제작해 보는 것이 전반적인 클라이언트와 서버 간 통신 프로세스에 대해 알아가는 것에 많은 도움이 되겠다."

싶어 이 프로젝트를 선정하게 되었다.

설계, 설계 .. 가장 중요한 프로젝트의 설계

react :

이번 프로젝트에서 나는 리덕스 툴킷을 이용하였다.

이 때문인지 변수, 함수들의 관계를 어떻게 설정하고 관리할 것인가에 대해서 많이 골머리를 썩였다.

특히 리덕스 툴킷을 관련하여서 구글링을 해보아도 원하던 자료가 많지 않아 공식 문서를 최소 다섯 번은 처음부터 끝까지 정독한 듯싶다. 

또한 라우팅 구조를 page - component로 단위로 구성하고자 설계하였다.

node.js / mongoDB :

프로젝트에 들어가기 전, 우선 DB에 사용될 model을 우선으로 설계하였다.

단순히 user와 post 두 개의 모델로 설정하였는데 추후 -4 소감에서 말하겠지만 아주 잘못된 설계였다.

디자인 : 

tailwind CSS를 활용하였으며, 초기 디자인은 가능한 여러 사이트를 클론 해보는 것을 목표로 하였다.

네이버, 디씨인사이드의 글쓰기 폼, okky의 글 리스트 등 다양한 항목을 선정하였으며 올해의 색인 very_peri 색을 매인으로 선정하였다.(도중에 색은 변경되었다.)

 

역할

전부

 

결과물

홈페이지 대문

카테고리 페이지

싱글 페이지

글쓰기 페이지

이후, 소감 및 깨달은 부분

설계의 중요성

소프트웨어 공학 수업을 들을 때

"ceo 입장에서는 100일 기간의 프로젝트를 시작하는데 개발자들을 보면 걔네들은 100일 중 70일 까지를 맨날 회의만 해.    그러니까 답답한 거야 30일 남았는데 보이는 건 없으니까 그래놓고 맨날 다 됐대.  근데 개발자들은 설계가 제일 중요한 것을 알잖아."라는 교수님의 말씀을 들은 기억이 있다.

그때는 같이 웃으며 "맞지 중요하지 .."라고 생각만 하였으나 역시 사람은 한번 맞아봐야 체득이 된다고, 이번 프로젝트를 통해 설계의 중요성을 확실히 알게 되었다.

-1 설계 항목을 보면 상당히 빈약함을 알 수 있는데, 프로젝트 중간중간마다 그 빈약함을 채워나가느라 꾀나 많은 고생을 하였다. 예를 들어

댓글은 어떻게 달지? -> 모델을 새로 만들까 ?  -> 모르겠다 그냥 포스트 모델에 배열로 때려 넣자!

이 기능도 필요할 것 같은데? -> 기능 사용을 위해서 어떤 키를 사용하지? -> 몰라 새로 만들자!

와 같이 무한 추가의 늪에 빠져버린 것이다.

설계는 정말 작은 부분까지 세세하게 하면 할수록 좋다는 것을 다짐하였다.

 

주석(문서화)

설계에 이어 봉착한 문제는 코드의 기능이었다.

설계를 제대로 하지 않아 파일의 코드 하나하나가 길어지다 보니 자고 일어나면

코드를 짜고 변수를 만들었지만 이 코드가 어떤 기능이었는지, 어떻게 연관되어 작동하는지 등에 대해서 갑자기 헷갈릴 때가 있었다. 이 때문에 다시 한번 코드를 이해하고, 주석을 추가하고 하는 시간들이 중간중간 생겨 프로젝트 기간이 조금은 길어졌다. 

 

기간설정

본래 개발 기간을 6월 방학 시작일 ~ 7월 10일로 생각하였는데

휴가니 뭐니 하며 놀 거 다 놀고 중간중간 어떻게 구현해야 할지 막막한 부분 구글링하고 다시 코드 이해하고하다 보니 기간이 막연하게 길어졌고, 결국 8월 8일이 되어서야 종료되었다.

개발 기간을 정해놓는 이유는 타이트한 스케줄로 확 몰입해서 진행하기 위함인데 이러한 자세가 부족했다고 느꼈다.

이번 프로젝트를 계기로 다음 프로젝트를 진행할 때는 조금 더 구체적인 기간을 설정하여 프로젝트를 설정하고자 한다.

 

깃허브

2022년 8월 8일은 프로젝트 배포 날이었다. 사실 배포는 내가 직접 a-z를 하진 못했다.

서버, 아마존 aws 등을 다뤄본 경험이 없을뿐더러, 하기 위해서 뭐가 필요한지도 잘 알지 못했었다. 따라서 동아리 전 회장인 090.js의 도움을 받아 옆에서 배포 과정을 지켜보며 어떠한 과정으로 배포가 진행되는지 확인하며 배우는 과정을 가졌다.

문제는 이때 발생하였다.

이 과정에서 코드를 수정해야 하는 경우, 파일을 서버 컴퓨터로 옮겨야 하는 경우 등이 발생하였는데, 이때 git의 중요성을 여실히 들어났다.

아직 git에 익숙하지 않아 매일매일 add, commit, push만 하던 나는 이 과정에서 "분명 git 이렇게 쓰는 거 아닐텐데..!!"를 외치며 push, clone만을 반복하여 코드를 수정하고 옮기기 시작했다.

개발자에게 git은 깔고 가는 것이라고 하는데, 남은 방학 동안 git을 다루는 데에 더 익숙해져야겠다 마음먹는 계기가 되었다.

 

리액트의 컴포넌트화

"리액트는 컴포넌트 단위로 역할을 갖고 개발을 진행하는데 장점을 갖는 언어이다. 따라서 재사용성 있는 코드, 역할에 따른 분리등을 항상 생각하며 작성할 수록 좋은 코드다. "

이를 토대로 나는 라우팅 구조를 page-component 단위의 디렉토리로 구성하고자 계획했다.

하지만 이번 프로젝트에서 내가 이러한 장점들을 모두 활용하도록 진행 하였나 질문한다면, 전혀 그렇지 않다고 답 할 것이다.

처음에는 비슷한 기능을 하는 함수에 있어서 나는 "생각을 더 해서 코드를 변경하자"였지만 나중에는 그냥 "조금 바꿔서 하나 더 만들자"는 식의 주먹구구식 개발을 진행하였다. 이는 코드가 난잡해지는 결과가 되었으며 다시한번 설계의 중요성을 상기시키는 역할을 하였다.

 

보안의 중요성

 

이렇게 우여곡절 끝에 완성된 홈페이지는 서비스 론칭 1시간 만에 해킹을 당하게 된다.

배포를 도와준 090.js와 동아리 친구 (총 2인)이 여러 가지 테스트를 해준다며 이것저것 시작하였고

버프 스위트를 사용하여 테스트하는 과정에서 유효성 검사라는 것의 중요성을 알게 되었다.

추후 node.js와 이 보안에 대해서 더 공부하여 관련 글을 다시 정리해 보는 시간을 갖고자 한다.

 

마지막으로

우여곡절 끝에 마친 첫 개인 프로젝트는 정말 많은 것을 배울 수 있는 시간이었다.

특히 설계와 기록의 중요성은 이번 회고록을 작성하는 이유에 상당 부분 일조하였다.

이번 경험을 바탕으로 앞으로는 내가 알던 것, 그리고 알아 갈 것들에 대해 기록하는 습관을 들이도록 하자 !