React, Firebase을 이용하여 만든 해커톤 웹페이지 개발팀 회고

http://norithon.com

해커톤 웹사이트는 요기 있고요 ..! 게스트로 로그인하시면 내용 열람이 가능합니다. 🌞

HGU HACKATHON

 

해커톤 디렉터이자 웹사이트 개발 리더로 3개월을 보냈습니다! 웹 개발은 한달정도를 썼습니다. 

우리 팀에 대한 한줄 요약은..!  환상의 팀워크와 함께 아주 성공적인 프로젝트였다...... 후! 

 

같이 나누면 좋을 것 같은 내용들을 각자 정리해서 오늘 함께 공유했습니다 :) 

아래는 제가 프로젝트 하면서 포스팅 했던 글들 + 이번에 회고를 위해 노션에 썼던 내용 옮긴 글들인데 한번 모아봤습니다. 

 

리액트 폴더구조의 정석이 있을까

개발자도구 야무쥐게 쓰기

반응형 웹에서의 컨테이너 크기

Firebase 보안규칙 수정 : 파이어베이스에 안전하지 않은 규칙이 있습니다 메일 올 경우 해결 방법

 

React validation 리액트 유효성 검사 Formik VS REACT Hook form

 

react iframe에 의해 클릭 안되는 문제 해결

 

리액트 팝업창/모달/다이얼로그 구현하기, 삭제버튼 구현, 구조분해할당

 

styled-component 로 코드 리팩토링하기

 

아래는 회고를 위해 팀원에게 노션에 작성하여 공유한 내용입니다. 

저희는 4Ls와 5F의 (뒷부분 두개의 질문) 두 방식을 합쳐서 회고를 진행하였습니다. 

개인, 그리고 팀으로서 느낀점을 깊게 나눌 수 있어서 좋았던 시간이었어요 👍

 

🤔 회고를 ‘잘’ 하고 싶다면

회고를 실천하는 방법은 다양합니다. 물론 문제를 돌아보는 것 자체로 충분히 의미있지만, 현상을 명확하게 분석하고 성장의 동력으로 삼기 위해서는 효과적인 회고 방식을 고민하게 되기 마련인데요. 이럴 때 회고 템플릿을 사용하면 회고를 좀더 효율적으로, 명확하게 남기는 데 도움이 됩니다.

 

✷ 주의해야할 점 ..

• 불보듯 뻔한 회고는 안하느니만 못하다.
• 당연한 얘기보다 내면에 있는 솔직한 이야기가 수면 위로 드러났을 때, 비로소 제대로 된 회고가 될 수 있다.

 

1. KPT

KPT는 각각 Keep, Problem, Try의 약자입니다. 이름에서 알 수 있듯 3가지 관점에서 업무를 돌아보고, 다음 액션 아이템을 도출해내는 데 도움이 되는 회고 템플릿이에요.

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
• Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)

무엇보다 KPT에서 중요한 관점은 Try입니다. 이번 프로젝트에서 아쉬웠던 점을 Try를 통해 어떻게 보완할 수 있을지 정리해보면서 구체적인 실천 방안을 세울 수 있다는 장점이 있어요.

 

 

2. 5F

5F는 다음 다섯 개의 키워드에 따라 순서대로 회고를 진행하는 방식입니다.

• Fact (사실: 무슨 일이 있었나?)
• Feeling (느낌: 무슨 느낌이 들었나?)
• Finding (배운 점: 어떤 인사이트를 얻었나?)
• Future action (향후 행동: 앞으로 무엇을 해야 할까?)
• Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)

특히 5F는 개인이 한 활동을 회고하는 데 유용한데요, 어떤 일이 있었고 무엇을 느꼈는지를 시간 순서대로 정리하는 데 도움이 되는 방식이에요.

 

 

3. 4L(4Ls) 

 

4L은 특정 활동에 대해 느낀 생각과 경험을 중심으로 회고를 진행하는 방식입니다.

제가 제안하는 내용은 타임라인 리뷰로, 프로젝트의 처음 시점으로 돌아가서 진행된 프로젝트의 흐름을 따라가며 변곡점들에 어떤 일들이 일어났는지 살펴본다.

• Liked (좋았던 점)
• Lacked (아쉬웠던 점)
• Learned (배운 점)
• Longed for (앞으로 바라는 점)

4L 역시 여러 상황과 여건에 적용해볼 수 있지만, 협업 프로젝트 진행 과정의 특정 지점(마일스톤)에서 구성원들과 중간 점검을 할 때 더욱 편리하게 쓸 수 있을 것 같아요.

협업을 위한 위키 시스템, 컨플루언스(Confluence)에서도 4L 회고 템플릿을 제공하고 있어요. ⓒAttlasian

 

4. PMI

아이디어 도출 및 평가를 위해 고안된 PMI 역시 회고 방식으로도 종종 활용되고 있어요.

• Plus (좋았던 점)
• Minus (아쉬웠던 점)
• Interesting (흥미로운 점)

최선의 아이디어를 찾기 위해 고안된 방식이니만큼 새로운 제품을 개발하거나 인사이트를 찾고자 할 때 도입해보면 좋겠습니다.

여러분은 어떤 회고 방식이 마음에 드시나요? 회고 방식은 정말 다양하지만 결국 핵심은 무엇을 생각하고 느꼈는지, 앞으로 무엇을 할 수 있을 것인지를 생각해보는 것 같아요.

많은 개발자들이 개인 회고부터 기업이나 팀 차원의 프로젝트 회고까지 다양한 회고를 공개하고 있습니다. 다른 많은 사람들과 각자의 경험을 공유함으로써 노하우를 나누고, 의견을 주고받고, 서로의 자극이 되어준다는 점에서 회고는 개발 문화의 중요한 축을 맡고 있다고 할 수 있을 것 같아요. (물론 팀 및 개인 브랜딩에도 도움이 되고요!) 무엇보다 꾸준히 스스로를 돌아봄으로써 성장하는 동력을 만들어나갈 수 있다는 점이 회고의 진면목이 아닌가 싶습니다 😊

참고 : 인프런팀 개발자의 공유 문화 이모저모 (2) 회고 문화

 

 

아래는 우리 팀원들이 4Ls를 토대로 적어준 회고 내용! 

👩🏻‍💻 하은

• Liked (좋았던 점)
  • 개인
    • 프로젝트를 리드하며 개발 리더로서 내가 무엇을 해야 두 팀원에게 도움이 될 수 있을까 고민을 할 수 있었다.
    • 리액트가 조금이라도 더 익숙해지는 부분이 있었다!
    • 해커톤 당일에 터지는 문제들을 혼자서 다 해결했어야했는데, 코드 수정할 일은 계속 있었고 파베도 다운됐던 눈물나는 경험을 이겨냈다.. 휴 생각만 해도 진땀나지만 강해졌따 . 
    • 웹에 대한 반응이 좋았다! 헤헤
  • 팀
    • 서로 도움이 필요한 부분이 있을 때 적극적으로 일을 분배하였다.
    • 분위기가 좋았다!
    • 같이 성장할 수 있었다.
    • 회고까지 할만큼, 프로젝트가 성공적으로 끝났다.
    • 만들자마자 많은 사용자가 몰리는 특수한 상황 속에서 웹서비스를 만들어본 경험이 특별한 것 같다.
    • 제일 중요한 것은 …. 한 페이지나 한 기능도 빠짐없이 완성이 되었다!!!!
• Lacked (아쉬웠던 점)
  • 개인
    • 프로젝트 초기에 (학기중) 1차 배포시기에 팀원들을 잘 케어하지 못한 부분이 조금 아쉽다.
    • 각자의 장점을 잘 이끌어내고 싶었는데, 잘 모르겠다!
    • 리더로서 기술적으로 많이 실력이 뛰어난 편은 아니었어서, 프로젝트의 규모를 조금 작게 잡았던게 좀 아쉽다.
  • 팀
    • 팀 프로젝트 난이도가 엄청나게 큰 도전이 들만큼은 아니었다. 조금 돌아간 정도에 그쳤고 크게 어려운 점이 없었던 것 같다 (미화된 걸 수도)
    • 같이 붙어서 코딩하는 시간이 부족했다
    • 사실 딱히 없다 ^^ 울팀 쵝오
• Learned (배운 점)
  • 개인
    • 깃헙 organization 관리하는 방법!
    • 팀원과 더 잘 소통하는 방법
    • 팀원과 함께하는 리더의 뿌듯함(?)
    • 리액트로 구현하는 다양한 기능과 페이지 레이아웃 등 위의 게시글에 적은 모든 학습 내용들!
  • 팀
    • MVP 수준의 기능들로 이루어진 것을 위주로 개발을 하였기 때문에, 각자 오래오래 써먹을 수 있을 것이라 예상된다.
• Longed for (앞으로 바라는 점)
  • 개인
    • 리액트를 조금 더 열심히 공부해서 리액트 마스터 되기 👍

 

 

🧑🏻‍💻 정규

• Liked (좋았던 점)
  • 개인 : 새로운 영역(웹)에 대해 시도해볼 수 있었고, 더 나아가 백엔드 개발에 큰 관심을 느끼게 되었다.
  • 팀 : 소통이 잘 되었고, 믿을만한 팀장님이 계셔서 든든했습니다. 프로젝트를 들어가기 전 공부할 방향과 방법에 대해 알려주셔서 미리미리 준비할 수 있었습니다.
• Lacked (아쉬웠던 점)
  • 개인 : 알지 못했던 내용에 대해 꼼꼼하게 알지 못했던 부분 때문에 시간이 지체된 부분이 있었던 거 같다.
  • 팀 : 대면 만남이 적었다.
• Learned (배운 점)
  • 개인 : 처음 배우는 언어에 대한 나만의 공부 방법을 인지하는데 한 걸음 더 다가갈 수 있었습니다.
  • 팀 : 좋은 팀장으로서의 역할을 보고 배우고, 프로젝트 준비와 진행 방식에 대해 배울 수 있었습니다. 팀원으로서 나는 어떠한 역할과 행동을 해야하는지에 대해 알게 되었습니다.
• Longed for (앞으로 바라는 점)
  • 개인 : 2023-1 백엔드 영역에 대해 집중적으로 공부를 해보고 싶습니다. firebase를 넘어 기업에서도 많이 사용하는 영역들에 대해 공부해보고 프로젝트 진행에 참여하는게 목표!

 

 

👩🏻‍💻 하람

• Liked (좋았던 점)
  • 개인
    • 앱에서 고려하던 부분과 웹에서 고려해야 하는 부분이 다름을 알게 되어 좋았다.
      • 앱과 달리 웹에서는 반응형이 꽤 중요한 역할을 한다는 것.
      • 앱은 flutter만 해봤긴 하지만..! screenutil이나 미디어쿼리를 사용하면 되고, 웹에 비해 화면 크기의 영향이 덜 까다롭다는 것.
    • 첫 웹 경험이 든든한 사람들, 힘이 되는 사람들과 함께 했다는 것.
    • 조금 더 체계적인 개발 협업을 경험할 수 있었던 것.
  • 팀
    • 함께 했기 때문에 더 조심스러우면서, 그렇기에 한 번 더 생각하고 한 번 더 찾아보고 신중하게 할 수 있었다.
    • 어떤 문제가 생겼을 때 혼자 해결해야 했다면 막막하고 마냥 힘들었을텐데, 팀원들이 있었기에 함께 고민하고, 함께 해결해나간다는 ‘함께’의 힘을 크게 느꼈다.
• Lacked (아쉬웠던 점)
  • 개인
    • 너무 겁을 먹었던 것 같다. 그래서 도전하는 것에 주저하고 자신없어 했던 것이 살짝 아쉽다. 따로 파일을 파서 이것저것 시도해보고 도전해보았으면 더 좋았을 것 같다.
  • 팀
    • 같이 옆에서 붙어서 함께 고민하고 하지 못했던 것.
• Learned (배운 점)
  • 개인
    • react 사용과 js, html, css 사이의 관계에 대해 완벽하진 않지만, 관계를 배울 수 있었다.
    • react에서 마크다운을 사용하는 방법을 배울 수 있었다.
    • styled component를 알 수 있었다.
    • 깃헙 사용에 조금 더 익숙해졌고, 그래서 깃 사용에 대한 두려움이 조금 사라진 것 같다.
  • 팀
    • 이슈가 생겼을 때 침착하게 해결하는 분위기에서 앞으로의 태도에 대해
• Longed for (앞으로 바라는 점)
  • 개인
    • 한 번 경험으로 만족하지 않고 부족하다 느꼈던 부분들을 조금 더 꼼꼼하게 공부하고 싶다.
      • 구글 로그인을 사용하여 CRUD 기능을 가진 웹을 한 번 만들어보고 싶다.

 

 

 

 

해커톤 디렉터로서의 3개월 회고는 요기있습니다! 

2023 HGU HACKATHON : NORITHON 한동대학교 해커톤 회고