작년 9월부터 리액트 공부하면서 이것저것 테스트하고, 11월부터 본격적으로 시작했던 프로젝트가 3월 개강에 맞춰 1차 출시를 했다. 2차 서비스 출시, 이벤트 페이지 제작을 앞두고 이제서야 회고를 한다..
무슨 프로젝트인데?
세종피어(Sejong Peer)
세종피어는 지금 총 두 가지(세종버디, 혼밥탈출) 서비스가 있다. 모두 학우간에 매칭을 해주는 서비스이다. 세종버디는 원하는 학우와 편하게 이야기 할 수 있는 학우를 찾고, 혼밥탈출은 혼밥하기 싫을 때 밥짝꿍을 찾는 서비스이다. (세종대생만 이용가능!)
무엇을 했지?
9월부터 공부하며 로그인/회원가입을 만들고, 세종버디도 어느정도 제작해두었다. 11월에 프로젝트에 추가 인원이 들어오고, 교내에서 진행하는 창업컨퍼런스에 참여해 혼밥탈출 서비스도 추가하고, 급하게 만드느라 내가 개발했던 양식 그대로 사용했다. (stay... 그러면 안돼..🥲)
로그인/회원가입
세종대생만 사용하도록 해야했기 때문에 이 부분에 대해서 가장 많이 고민했다. (세종대생만 아는 퀴즈라던가.. 학교어딘가에 힌트를 숨겨서 찾게한다던가..) 처음에는 sju.ac.kr 이메일 인증을 하려했으나 많은 학생들이 이 존재에 대해 잊고 사는 것 같아 다른 우리 학교 학생이 만들었던 '세종어스' 학사 정보 인증 오픈소스를 사용했다.
로그인은 처음에는 쿠키에 로그인 여부를 저장해두고, 기능을 사용할 때마다 통신을 통해 이를 확인하는 과정을 거쳤는데 불필요한 통신이 많아 대신 token을 사용했다.
세종버디
리액트를 처음 시작하면서 리액트에 대해 가장 많이 공부를 할 수 있었던 부분이다. useState, useEffect등 다양한 훅을 사용하며 사용자가 입력한 값들을 관리해보고, 리액트 뿐만아니라 슬라이드 모션이 있는 화면을 택했기에 window.innerWidth도 사용해보며 반응형 화면에 대해서도 고민을 많이 했다.
아쉬운 부분이 있어?
결론부터 말하자면 갈아엎고 싶은 부분이 한두군데가 아니다 ㅎㅎ..🤯 아무래도 리액트를 처음 공부하면서 제작한 프로젝트이기도 하고, 계속 공부하다 보면 '이렇게 좋은 기능들이 있었는데 바보같이 하고있었구나..'라는 생각밖에 들지 않는다..
먼저, 상태관리를 ContextApi를 주로 사용했는데 App.js에서 관리를 하다보니 정말정말 정신없고 뭐가뭔지 이제 나도 헷갈린다.. 아래는 지옥의 상태관리..
꼭 Context를 분리하던가, Redux를 도입하고 말거다.. 팀원 같이 스터디도 진행하기로 했따...
그리고 가장 우리를 괴롭혔던 복잡하고도 복잡했던 회원가입..
사실 나도 왜 이렇게 했는지 모른다.. 하하하하하..
하나 기억나는 것은 '리액트가 재사용성이 뛰어나고, 회원가입 폼은 비슷하게 생겼으니 대충 이렇게 하면 좋지않을까?'라는 생각 때문에 너무 복잡하게 만들었다ㅠㅜㅠㅠ. SignUp에서 InputTextBox로 인풋 타입(text, select, number...)에 따라 나누고, 또 입력값에 따라 나누어 유효성 검사하게 했는데 너무 드릴링이 심했고, 같은 컴포넌트를 나누다 보니 오류가 가장 많이 발생한 곳이었다. 리팩토링 1순위이다. styled-component를 도입하고, 다시 처음부터 해볼 생각이다!!!
위의 것들 뿐만아니라 공부하며 계속 새로운 기술을 도입하고 적용시켜볼 것이다.
프로젝트 하면서 어땠어?
처음에는 금방 끝낼 수 있을 것이라 생각했는데 추가 기능들이 계속 생기고, 멤버 변동도 여러번 있어서 로그인 방식이나 다른 것들도 변동이 계속 있었다. 게다가 학기 중에 진행하다보니 프로젝트에 집중하기 어렵고 꾸준하지 못해 기간이 길어졌다.
그래도 올해 3월 출시하고, 많은 학우들이 이용해줘서 뿌듯했다. 100명에 가까운 학우들이 이용해줬고, 오류에 대한 제보나 피드백, 칭찬들이 들리는데 너무 좋았다. 이를 통해서 어느 부분을 개선하고 발전할 방향에 대해 고민할 수 있었다.
프로젝트를 진행하며 리액트에 대한 많은 것들을 공부할 수 있었고 다양한 기능들을 더 공부해보고 싶다는 욕심이 계속 생긴다. 지금 typescript를 공부하고 있는데 이것도 리액트와 함께 사용해서 프로젝트를 해보고 싶다.
