끝난지가 좀 되었지만.. 이제라도 적는 우해톤 후기!
살면서 처음 해본 해커톤..! 이제 어느덧 나도 개발자 레벨이 한순간 올라간 것만 같은 느낌이 들었다.
저번 우아톤보다는 간소하게 진행되었지만 그래도 나름 공부하고 배운게 많았다.
그래서 이번 우해톤을 통해 느낀점들을 포스팅 해보려고 한다. .🙌🏻
우선..! 배포된 링크
한 번 해주세요.. ☺️ 무려 카카오 공유기능도..?! (조금 미숙하지만..ㅎㅎ)
그때 그 시절의 나는..?
when-i-was-young.netlify.app
팀 매칭과 좋았던 점
팀은 다음과 같이 구성 되었다.
- 기획 & 디자인 1명
- 백엔드 1명
- 프론트 2명
정말 이 조합이 너무 좋았다.
이번 해커톤에서 가장 의미있었던 점이 두 가지를 적자면 다음과 같다.
첫번째는 오직 프론트엔드 분야만 맡아서 작업을 했다는 점이다.
여태껏 어떤 프로젝트를 하면 디자인&개발을 동시에 하는 경우가 많았었는데.. 이러다 보니 신경이 디자인 쪽으로 가다보니 정해진 시간안에 개발을 완수 하기가 너무 힘들었다.
그리고 프론트엔드만 맡아서 작업을 하다 보니 리액트로 개발한다는 도전을 해볼 수 있었고 이를 통해 부족한 점을 많이 찾을 수 있었다..
(반응형.. CSS🤦🏻♂️🤦🏻♂️)
두번째는 프론트엔드를 협업하려고 했다는 점이다.
사실 이점은 차후 중앙 해커톤을 준비할때 느낀점이 많고 이번 해커톤에서는 사실 협업..을 하진 않았다.
프론트가 2명이였지만.. 둘 다 협업이 처음이라 무엇을 어떻게 해야할지 고민이 너무 많았어서, 이번 해커톤에서는 한 분은 JS로 나는 리액트로 개발을 하게 되었다.
아이디어 구상
처음에 팀을 꾸리고 나서 어떤 아이디어로 밀고 나갈지 정말 고민을 많이했다.
우선 팀원들과 브레인스토밍 느낌으로 많은 아이디어를 내었고 정해졌던게 심리 테스트와 같은 사이트를 만들어 보자는 것이였다.
그래서 어떤 컨셉으로 갈 것인가에 대해서 똥, 쓰레기, 인물 등..ㅋㅋ 많은 아이디어들이 나왔었다.
그러던 중 어쩌다 보니 물가 얘기를 하다가 "우리때는 1000원만 있으면 학교 앞 분식집에서 든든하게 먹을 수 있었는데.."라는 얘기를 시작으로 추억 얘기를 계속 이어나갔다.
그러다가 팀원들이 추억 얘기를 할때 가장 활기를 띄는것 같아서 이 주제라면 해커톤을 재미있게 해볼 수 있을것 같았고 그때 그 시절의 나는 어떤 아이였나.. 라는 느낌을 메인 컨셉으로 가져가기로 했다.
디자인의 중요성
이번 프로젝트의 디자인은 내가 아니라 디자인 전공의 다른 팀원분이 해주셨는데.. 최고였다.
피그마로 디자인 된 것을 보면서 아.. 이게 디자인 4학년의 실력인가.. 라는 느낌이 확실히 느껴졌다.
각 Element들의 그룹 관리부터 딱딱 떨어지는 프레임들.. 정말 체고였다..ㅠㅠ
나는 보통 클론 코딩을 할 때, 개발자 도구를 켜두고 PX값이나 디자인을 주어진대로 똑같이 따라하는 편인데,
피그마는 그런 값들이 하나하나 다 나와 있으니 일러스트레이터와 달리 작업하기가 수월했다.
다만 우리가 앱 디자인 형식으로 제작 하였는데 사실 웹도 고려하여 만들어야 하니.. 이런 부분이 조금 힘들었고 반응형을 좀 더 공부해야 겠다는 생각이 들었다.
이 부분에 있어서는 css에서 media를 시용하여 min-width 방식으로 앱 디자인을 기반으로 커질때를 대비하여 제작하였다.
협업의 어려움
사실상 내가 프론트엔드로써 해본 첫 협업의 기회였다..!같이 프론트를 맡으신 분도 처음이셔서 둘 다 병아리 그 자체였다 ㅋㅋㅌㅋ
우선 고민이 들었던 것들을 적어보자면..
- CSS를 어떤 방식으로 적용할 것인가. (Just CSS, SCSS, styled-Component 등등..)
- 컴포넌트를 어떻게 쪼개서 작업 배분을 할 것인가.
- Git을 어떤 식으로 관리할 것인가.
- 함수, 변수명은 어떻게 통일 시킬것인가..
솔직히 그냥 누가 이렇게 하세요~.. 라고 해줬으면 좋을 것 같다는 생각도 했었다.
하지만 이런 고민들을 했기에 어떤 방식으로 하는 것이 좋을까라는 생각을 해본 계기가 된 것 같다.
하지만, 결론적으로는 둘 다 너무 미숙했던지라.. 협업보단 완성에 초점을 맞추게 되었고 나는 React로 다른 분은 Javascript로 개발을 진행하였다.
첫 번째 고민, CSS에 관해서 이번 프로젝트에서는 styled-Component를 사용해보았다.
개인적으로 느꼈을때 styled-Component를 사용하면, 코드 재활용이 조금 떨어진다고 느꼈었다..
물론 내가 잘 몰라서 그렇겠지만.. 변수명을 설정해서 사용하고 중복되는 코드는 묶어서 import 할 수 있었던 SCSS에 비해 이런 점들이 조금 아쉬웠다.
또, 컴포넌트 분할에 있어서 많은 생각을 하였다. HTML 코드를 묶는 방식에 따라서 사용자 태그를 뭐 TitleBox > TitleWrapper 이런식으로 쓸데없이 만드는 경우가 있었어서.. 물론 다 내 잘못이긴하다..🥲
[ 개발고민1] : 선택지에 따른 조건 분기
이번 개발을 하면서 가장 고민을 많이 했던 부분이다.
같은 포맷을 유지하면서 필요한 부분만 값을 변경하게끔 즉, SPA(Single Page Application)을 구현하기 위해 애를 썻다.
블로그에는 없지만 예전에 학교 관련하여 심리테스트 웹을 만든적이 있다.
이 페이지는 HTML+SCSS+JS 로만 만들었다.
당신은 어떤 하냥이냥?
테스트 시작하기 # 나에게 어울리는 단과대학은?
jeongwoo903.github.io
이 페이지를 갑자기 얘기한 이유는, 이 페이지는 1번 선택지 뒤에 올 2번 페이지가 확정이 되어있다는 부분이 이번 프로젝트와는 다른 부분이였다.
그래서 위 페이지와 같은 경우는 페이지의 width만큼 translateX로 밀어서 페이지 리로딩 없이 다른 선택지 페이지를 고를 수 있게 했었다.
하지만 이번 프로젝트에서는 위에서 볼수 있듯이 1번 선택지에서 A를 고르냐 B를 고르냐에 따라 다음에 올 페이지가 달라야 하기 때문에 위와 같은 방식을 사용할 수 없었다.
그래서 부끄럽지만 잠깐 코드를 까보자면..ㅎ
JSON 형태로 분기에 따른 컨텐츠들을 다 정리해둔 뒤, ID 값을 통해 리스트를 불러오는 방식을 이용했다.
그리곤 받아온 리스트의 키 값을 HTML에 삽입하여 보여지도록 하여서 SPA를 구성하였다.
[ 개발고민2] : 똑같은 Form, 다른 Result
위의 고민과 거의 흡사하지만 조금 다른 점이 있다.
결과 페이지를 나타내는 부분에서.. 결과를 보여주는 페이지는 같지만 내용은 달라야한다는 점이 고민의 이유였다.
위의 경우에는 컨텐츠만 달라지면 됬지, URL이 달라질 필요는 없었다.
하지만, 이번 고민과 같은 경우엔 선택지를 어떤 것을 선택하느냐에 따라 결과페이지로 이동되면서 컨텐츠를 가져와야 했기때문에 어떻게 해야할지 고민이 되었다.
그래서 URL Parameter을 달리하여 다른 컨텐츠를 보여주는 식으로 하였고 링크에 끝 값을 ID값으로 설정해두어 위와 마찬가지로 해결하였다.
[ 개발고민3] : JSON으로 불러온 값을 줄바꿈하는 법!
이건 그냥 다음에 똑같은 고민을 할까봐 작성해보려고 한다.
사실 줄바꿈할때 백틱으로 묶어서 HTML에 삽입하면 줄바꿈이 된다는 얘기가 있었는데 잘 되지 않았다..
그래서 난 dsc 값을 가져올 때, 추가적으로 다음과 같은 코드를 작성해 주었다.
후기
사실 프론트를 작업할 시간이 그리 길지 않았다. 이틀정도?
그래서 다른 프론트 분이랑 시간안에 개발 못할까봐 마지막 날 밤에 서로 피그마에 접속해있는 모습을 보고 으쌰으쌰 하기도 했다..ㅋㅋㅌㅋ
그래도 완성하고 보니까 뿌듯하기도 하고 결과물이 있다는 사실이 너무 좋았다.
급하게 만들다 보니 코드의 질이 그렇게 좋은 편은 아니고 내가 예전부터 해왔던 인터렉티브한 점도 없는 페이지 이지만.
다른 사람들과 함께 기획을 하고 서로의 역할을 나누어 하나의 결과물을 만들었다는 사실이 너무 뿌듯하다.
이 해커톤을 한 지 좀 지난후에 쓴 글이라, 당시에 했던 고민들과 감정들이 조금 사라진것 같아 아쉽긴 하다..ㅎ
근데 변명을 하자면.. 게을렀던 게 아니라 바빴던거다..😅
'활동 > 멋쟁이 사자처럼' 카테고리의 다른 글
| 다시 한 번 React (2) | 2022.06.01 |
|---|---|
| ERICA 멋사 10기 우아톤(우리끼리 아이디어톤) (2) | 2022.05.17 |
| [Python] 크롤링 프로그램 및 API 관련 개념 정리 (3) | 2022.05.03 |
| PM에 대해서 알아보자 / 빠른 정리 (0) | 2022.04.06 |
| HTML/CSS/PYTHON을 배워야 하는 이유 (3) | 2022.03.31 |