안녕하세요? ChatMinder 팀 프론트엔드 유시원, 이로움입니다.

https://react-vote-14th-ten.vercel.app/ 배포 링크입니다. 바로 기능 이용 가능합니다!
2022/04/10 추가: Vercel Github Organization 비용으로 인해 배포 중단했습니다.
로그인, 유저 상태 관련 구현 : @SEEWON
투표 관련 구현: @roum02

시원

HTTPS를 사용해 투표 미션 구현을 했습니다! axios를 사용해 API Fetching을 했고, Redux를 사용해 로그인 유저의 상태와, 투표 상태를 전역적으로 관리할 수 있도록 구현했습니다. NextUI와, React Iconly 라이브러리를 사용해서 UI 구현에 도움을 받았습니다.

API를 받아와 보여주기만 한 경험은 꽤 있었는데, 직접 통신한 건 처음이었습니다. HTTP 통신에 대해 조금이나마 공부하는 시간이 되었고, 제가 뭐가 부족한지도 많이 깨닫게 되었습니다 ㅎㅎ 인터넷과 관련된 공부를 좀 할 필요가 있겠다는 생각이 들었네요 :) 로그인 방식..JWT 토큰과 쿠키 관련해서도 공부할 수 있는 좋은 시간이었습니다.

저희 과제의 동작을 간단하게 설명해 드릴게요 :)

페이지 접속 시 아래와 같이 후보를 볼 수 있는 창이 나옵니다. 그러나 바로 투표를 하지는 못합니다. 로그인되지 않은 상태이기 때문입니다. 로그인하지 않은 유저도 무엇을 하는 페이지인지 알고 싶을 것 같아서, default 페이지를 투표 가능한 페이지로 두었습니다. 투표를 시도하면 로그인하라는 alert 메세지가 뜹니다. 로그인은 우측 상단 로그인 버튼을 통해 할 수 있습니다.

이미 회원이라면, 닉네임과 비밀번호를 입력해 로그인할 수 있습니다. 아직 계정이 없다면, 이메일과 닉네임, 비밀번호를 설정해 회원가입할 수 있습니다. 로그인과 회원가입 창을 따로 분리하기보다, 같은 페이지 안에서 Tab View 형식으로 전환시키는 것이 UX상 훨씬 좋을 것 같아, 이렇게 구현했습니다. (리액트 네이티브 공부하다가 든 생각입니닷)

로그인에 성공하면 바로 투표를 할 수 있는 화면으로 navigate합니다. 우측 상단의 로그인 버튼이 로그아웃 버튼으로 바뀌었고, 문구가 저를 환영해 주고 있네요. 좌측 상단의 후보 등록하러 가기 버튼을 눌러서 스스로 후보가 될 수 있습니다. 등록 취소도 할 수 있습니다. 빨간 하트를 눌러 간편하게 투표할 수 있고, 1인당 1표만 행사할 수 있습니다. 민주주의 국가거든요. 초등학교 사회 시간에 배운 선거의 4원칙.. 기억하시나요?

하단의 결과 보기 버튼을 누르면 모달이 띄워져 투표 결과를 보여줍니다. 유준환님께서 분신술을 쓰셨군요. 민주주의 국가에서 이건 불공평해 보입니다. 이제 로움님께 마이크를 넘기겠습니다 :)

로움

안녕하세요. ceos 14기 프론트 이로움입니다. 이번 과제를 하면서 조금이나마 실력이 상승한 것 같아 즐겁게 마무리를 할 수 있었습니다.

집중했던 점은 다음과 같습니다.

1. 디자인은 간단하게 라이브러리를 사용하였고, 많이 신경을 쓰지 않았습니다. css에 시간을 들이기 보다 오히려 들어가야 할 기능에 더 집중하였습니다.

2. postman을 지금까지 백분들이 준 것을 대충.. 사용하다가 이번에 제대로 사용하게 되었습니다. 이것만으로도 굉장한 발전이라고 생각합니다.

3. 이번에 리듀서를 사용해 보았습니다. 이전에 사용해 본 적이 있으나, 제대로 그 의미를 파악하지 못했습니다. 그러나 이번 과제로 인해 리듀서의 진정한 필요성을 깨달을 수 있었습니다. 평소에 state를 props로 넘기는 것에 대해 불편했던 적이 많았는데, 리듀서가 생각보다 사용하기 어렵지 않았고, 전역적으로 업데이트해 사용할 수 있다는 점이 정말 좋았습니다. 이번 계기를 통해 앞으로 자주 사용할 것 같습니다.

4. 기능과 presenter를 구분하였습니다. 평소 한 파일에 styled-components와 함수를 함께 섞어 보관하였으나, 프로젝트가 커지니 한 파일이 몇백줄까지 나가 가독성이 떨어졌습니다. style을 따로 보관하니 재사용하기도 용이하고 코드 양도 줄어 아주 편리했습니다.

이번 과제로 인해 api와 통신을 더 깊게 이해할 수 있어 개인적으로 뜻깊은 시간을 보낼 수 있었습니다. 해당 과제를 준비해주신 운영진분들께 감사드립니다. 좋은 주말 보내시길 바랍니다.

여기까지입니다! 감사합니다!