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 한동대학교 해커톤 회고