Just Do IT!
사이드 프로젝트를 미완성으로 마치는 회고 본문
작년 8월 쯤부터, 올해 6월까지 근 1년 가까이 진행했던 사이드 프로젝트가 끝내 미완성으로 마무리되었다.
각자의 사정이 있고 나의 사정도 있었기에 좋게 마무리 지었지만, 그래도 너무 아쉬워서 프로젝트 회고글을 써보려고 한다.
Quiz Up 프로젝트의 시작
시작은 한 사이드 프로젝트 모집글이었다.
캠퍼스픽에서 모집글을 보고 마침 아무것도 안하고 있던 나는 냅다 댓글을 남겼다.
그렇게 총 1명의 디자이너, 2명의 프론트엔드 개발자, 2명의 백엔드 개발자가 모였다.
첫 회의날 백엔드 개발자 한 분이 나가시면서 4명이 되었지만 기획은 쭉쭉 잘 진행되어갔다.
각자 하고 싶은 프로젝트를 이야기하고 투표를 통해 정해진게 바로 'Quiz up'이었다.
CS면접을 준비하는데 어려움을 겪는 개발자 취준생들을 위한 프로젝트로,
카테고리별로 나눠서 예상 질문과 대답을 공부하는 형식이었다.
영어 단어 어플인 퀴즐렛에서 따왔었다.
그렇게 세부 기능들과 페이지를 정하고 디자이너분이 디자인을 하기 시작했다.
사담이지만, 정말 디자이너의 디자인은 차원이 다르다. 많은 페이지였는데 너무나 깔끔하고 좋았다.
UI 구현 시작
디자이너분이 빠르게 디자인 해주신 피그마를 통해 UI를 구현하기 시작했다.
프론트는 두 명이어서 나와 다른 분이 페이지와 기능별로 나눠서 작업하기 시작했고, 내가 가장 좋아하는 시작이기도 하다.
기능을 붙이지는 않았지만 화면에 그렬듯하게 그려지는 걸 보면서 굉장히 재밌었었다.
구현하면서 생기는 이런저런 일들을 블로그에 기록하기도 했다.
https://daydream-sy.tistory.com/280
[CSS] PNG 이미지 편집 없이 색상 변경하기 (filter)
프로젝트에서 로그인 페이지에서 '로그인 유지하기' 버튼 UI를 구현 중이었다. 체크하는 아이콘이 png 파일이어서 버튼 클릭했을 때 스타일을 어떤 식으로 변경해야 하나 고민하다가 구글링해서
daydream-sy.tistory.com
그렇게 하반기는 프로젝트를 진행하면서 보냈던 것 같다.
중간에 넘겨받은 api 명세서를 토대로 10월부터 기능도 붙이기 시작했다.
백엔드와의 기능 연결
백엔드 개발자 분이 서버에 이미 백엔드를 올려두셔서 로컬 서버 대신해서 사용할 수 있었다. postman으로 실험해보고 되는지 보고...이때즘부터 굉장한 오류들을 만나기 시작했다 ㅋㅋㅋㅋㅋ
멋쟁이 사자처럼에서 진행했던 팀 프로젝트들은 백엔드 친구들이 jar 파일을 념겨줘서 그 파일을 통해 연동할 수 있었는데,
아예 서버로 올려진 걸 보고 연동하느라 env 파일을 만들어보기도 하고 백엔드 url을 잘못 적기도 하고...CORS 에러를 가장 많이 보기도 했다.
그러면서 custom hook을 만들어보면서 코드를 좀 줄이려 노력하ㅏ기도 하고...
프로젝트 하면서 공부를 많이 한 시기였다.
https://daydream-sy.tistory.com/278
리액트 custom hook으로 모달창 구현하기 (useModal)
사이드 프로젝트를 하면서, 본격적으로 custom hook을 써보기로 했다. (나혼자 결정한거임) 아직 UI 구현 단계지만, 이렇게 페이지가 많은 프로젝트를 한 적도 처음이고 플로우 차트를 통해 페이지
daydream-sy.tistory.com
https://daydream-sy.tistory.com/279
리액트 custom hook으로 Pagination 구현하기
Pagination(페이지네이션)이란? 여러개의 컨텐츠를 여러 페이지로 나누고 페이지 번호 버튼, 이전 버튼, 다음 버튼을 눌러서 페이지를 이동하는 기능이다. 이전 버튼 페이지 번호 버튼 다음 버트 총
daydream-sy.tistory.com
https://daydream-sy.tistory.com/290
React에서 .env 파일 사용하기
.env 파일이란? 유닉스 및 유닉스 계열 운영 체제용 셸 명령어 환경변수 파일을 외부에 만들어 URL,포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 외부 파일(.env)에
daydream-sy.tistory.com
https://daydream-sy.tistory.com/305
useTooltip으로 재사용되는 tooltip 만들기
사이드 프로젝트에서 tooltip에 대해 알게 되었다. 뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다. 아무튼 나는 나중으로 미루고
daydream-sy.tistory.com
이렇게 블로그에도 글을 많이 적었고 노션에도 많이 적었었다.
프론트 개발에 굉장히 재미를 느끼기도 하고 프로젝트 규모가 좀 커서 상태관리에 대해 진지한 고민도 해보고...
효율적인 코드에 대해 고민해보는 시기였다.
나 혼자만 하는게 아니라 다른 분도 있다 보니 재사용가능한 코드들을 분리하는 게 가장 중요했고,
중복된 코드를 지워서 코드의 양을 줄이고 싶은 욕심도 있었다.
그런 욕심들이 custom hook을 만들어 구현해보는 계기가 되었고,
블로그에는 적지 않았지만 redux를 적용해보려고 노력하기도 했었다.
프로젝트 마무리
아무래도 두 분이 회사에 다니기도 하고 이런저런 일들로 점점 회의 시간이 지켜지지 않았다.
매주 회의를 했었는데, 점점 회사일 때문에 취소되기도 하고 카톡으로 진행 상황을 공유하기도 하는 식이었다.
api 연결을 하면서 백엔드 서버에도, 프론트 서버에도 오류가 많이 났었는데 아무리 충분히 소통을 해도 어쩔수 없었다. 우리가 모르는 오류들도 많으니까. 그런 것들은 바로바로 캡처해서 단톡에 공유하고 해결하는 등 꾸준히 하고는 있었다.
그렇지만, 아쉽게도 프로젝트가 마무리 되었다.
회사 생활이 너무 바쁘기도 하고 늘어지기도 하는 것 같아서 조심스럽게 마무리하자는 의견을 주셨고,
거기에 우리 모두가 동의하고 서버비를 1/n하고 마무리지었다.
최종 회고
처음으로 동아리, 캠프가 아닌 사이드 프로젝트였다.
직접 모집글을 통해 만들어졌고 거의 1년을 쉬지 않고 프로젝트를 진행했으니 정말 대단하다고 생각한다.
마무리되지 못한 점이 아쉽지만 그래도 이 프로젝트를 통해 많은 걸 배웠다.
이제 다른 교육을 통해 백엔드 개발자로 전향하려던 나지만, 이 프로젝트를 마무리하고 싶었는데...
이후에 백엔드 파트 공부를 하면서 작은 프로젝트로 이 프로젝트와 비슷하게 만들어보고 싶다.
(보진 않겠지만) 모두들 1년동안 고생 많으셨어요...!
우리의 프로젝트 링크:
https://github.com/orgs/QuizUpWebProject/repositories
'프로젝트' 카테고리의 다른 글
개발을 위한 UML 다이어그램 - 유스케이스 다이어그램 (3) | 2024.10.10 |
---|---|
[spring+react] OAuth2 로그인 구현 (구글, 카카오) (7) | 2024.09.20 |
Java+MySQL 이용한 자바 콘솔 미니 프로젝트 회고 (0) | 2024.08.05 |
멋쟁이 사자처럼 11기 팀 프로젝트 회고 (1) | 2023.09.06 |
백엔드 서버와 연결하기 (jar 파일 공유) (0) | 2023.09.05 |