감🍊 을 따다준 사이드 프로젝트 후기:: How are you?

 

이번 사이드 프로젝트는 아이디어가 담긴 어떠한 제품을 만들어 내기보다는, 입사 이후 처음 하는 사이드 프로젝트인 만큼 감을 익혀보자라는 가벼운 마음으로 진행했다.

프로젝트를 하면서 많은 깨달음을 얻었고 여러 욕심과 동기부여가 생겨서 의미 있던 프로젝트이다! 🍊🫶

 

 

How are you?

나에 대해 알아가는 시간, 당신은 어떠신가요?

 

하루에 한 번, 나에 대한 질문 카드가 주어진다. 주제는 다양하며 온전히 나의 생각에 대해 답변하는 것이다.

하루하루 답변한 것들은 리스트로 볼 수 있으며 당일에 한정해서 작성한 내용을 수정할 수 있다.

 

https://github.com/beyond-localhost/how-are-you-FE

GitHub - beyond-localhost/how-are-you-FE: 나에 대해 알아가는 시간, 당신은 어떠신가요?

 

 

Tech Stacks

Front

React 18, Typescript, Emotion CSS, Zustand, Vite, Netlify

Back

Node.js, TypeScript, mysql, hono, zod, drizzle-orm, dockerode, vitest

 

 

아쉬운 점

프로젝트 일정에 대한 설정

 

프로젝트 완료 기간은 약 2달 정도 걸렸으며, 회사 업무와 병행하면서 중간중간에 여행 다녀오고 하다 보니 개발 일정이 조금 늘어지게 되었다. 또한 오랜만에 하는 프로젝트다 보니 기획/디자인부터 개발까지 초반에 정말 '감'을 잡는 데에도 시간이 걸렸다.

하지만 완료된 지금, 다시 생각해보면 더 몰입해서 집중할 수 있었는데 그러지 못한 것 같아 아쉽다.

다음에는 각 스텝에 대해 명확하게 정의를 하고, 데드라인을 정하여 조금은 타이트하게 진행해보고 싶다! 

 

코드를 짜는 개발자에 대한 역량

요즘 Chat GPT 도 있어서 제품을 구현하는 것은 이렇게 저렇게 하다 보면 누구나 할 수 있다고 생각한다.

하지만 성능이나 코드 퀄리티, 효율성은 개발자의 능력에 따라 달라진다.

이번에 개발을 하면서 구현은 했지만 React hook, React-router-dom, Typescript 문법 등 기술에 대해 깊게 활용을 못한 것 같았다. 아는 만큼 보이는 것처럼, 내가 가지고 있는 기술 지식을 활용해서 코드를 효율적으로 짤 수 있을 텐데 싶었다.

그래서 더 공부해서 지금 내가 쓰고 있는 이 코드들을 더 업그레이드 시키고 싶다는 욕심이 생겼다. 🥹

 

제품 아이디어 선정

원래 프로젝트를 시작할 때, How are you? 가 본 주제는 아니었다. 웹소켓을 이용해서 게임처럼 참여자끼리 질문을 주고 받는 것에 관련된 내용이었다. 하지만 감을 찾기 위한 목적 + 기술 구현을 생각해 봤을 때 쉽게 진행될 것 같지는 않아서 일단 간단하게 만들 수 있는 주제로 결정되었다. 이번 프로젝트에서는 목적을 위해 목표를 조금 낮췄다면, 다음에는 욕심을 내서 정말 만들어 보고 싶은 프로덕트를 개발해 내고 싶다!

 

 

뿌듯한 점

기획자, 디자이너 없이 개발자 2명이서 처음부터 끝까지 만들어 본 것

제품이 개발되려면 기획부터 시작해서 디자인이 완성되고 개발, 배포까지 이어진다.

그렇지만 개발자 2명이서 만들다 보니 피그마를 직접 다루면서 기획 디자인을 진행했다.

 

나는 기획 위주 작업과 프론트엔드 개발을 진행하였고 함께한 동료는 디자인 위주 작업과 백엔드 개발을 진행했다.

동료 개발자는 나보다 실력이 훨씬 좋은 개발자 선배이기도 했기에 함께 프로젝트를 하면서 많이 배웠다!

코드 리뷰를 통해서도 작성했던 코드에 대해 다시 한번 되돌아 보고 발전시킬 수 있었다.

또한 폰트나 색깔의 경우, 디자인 시스템도 적용해 주셔서 프론트엔드 개발할 때 편리하게 개발할 수 있었다.

(스티븐 짱짱 개발자 👍 이 자리를 빌어 캄사합니다 🙇‍♀️)

 

그리고 이번에 피그마를 다루면서  UI에 대한 관심이 더욱 생겼다! 앱/웹의 UX 가 정말 다르다는 것도 이번에 체감했다

프론트엔드 개발자로서 피그마를 배워보고 싶은 마음이 커지면서

잘 알면 좋을 것 같아서 결제하였고 자주 사용하려고 한다.

 

다뤄보지 않은 기술을 적용한 점

이번 프로젝트에서 내가 처음 써 본 라이브러리는 Emotion CSS이다

그리고 react-router-dom v6을 적용했다.

특히 react-router-dom 6.23 버전을 적용했는데, 기존과 다르게 정말 많이 바뀌었기 때문에 이에 걸맞은 사고방식을 적용하는 것이 처음에는 조금 낯설었다. 하지만 하다 보니 왜 이렇게 변경되었는지에 대한 편리성을 느꼈고 기존보다 더 효율적이라는 생각이 들었다.

loader.. Good

 

정말 감을 잡았다는 것 ! 🍊

확실히 프로젝트 이전 그리고 초반과 다르게, 중후반부터는 수월하게 개발을 해나갔다.

특히 회사에서 react18, typescript를 사용하여 신규 프로젝트를 진행했는데, 이때 프로젝트와 병행하던 시기라서 빠르게 실무에서 개발할 수 있었다. 또한 How are you 프로젝트에서 사용한 Emotion CSS 도 바로 실무에 적용하였다 ㅎㅎ

공부하는 것도 중요하지만 이렇게 직접 개발을 해야 확실히 익혀진다는 걸 느꼈다 !!

 

 

 

원래 시작이 어렵지 한번 시작하면 계속할 수 있는 만큼

사이드 프로젝트를 통해 익히고 싶은 기술들을 적용하며 나의 개발력도 높이고

만들어 보고 싶은 아이디어들을 모두 직접 구현하고 싶다.

 

프로젝트하면서도 계속 아 이거 해야지 아 저것도 해볼까 생각이 들 때마다

아이폰 메모장에 적어두고 있다 🤭