[6주차] 챗마인더 미션 제출합니다.

README.md

@@ -1,46 +1,70 @@
-# 마지막 미션 : React vote!
+## 안녕하세요? ChatMinder 팀 프론트엔드 유시원, 이로움입니다.
 
-# 서론
+~~https://react-vote-14th-ten.vercel.app/ 배포 링크입니다. 바로 기능 이용 가능합니다!~~ <br>
+2022/04/10 추가: Vercel Github Organization 비용으로 인해 배포 중단했습니다. <br>
+로그인, 유저 상태 관련 구현 : @SEEWON <br>
+투표 관련 구현: @roum02 
 
-안녕하세요 프론트엔드 14기 여러분! 파트장입니다.
+### 시원
+HTTPS를 사용해 투표 미션 구현을 했습니다!
+axios를 사용해 API Fetching을 했고,
+Redux를 사용해 로그인 유저의 상태와, 투표 상태를 전역적으로 관리할 수 있도록 구현했습니다.
+NextUI와, React Iconly 라이브러리를 사용해서 UI 구현에 도움을 받았습니다.
 
+API를 받아와 보여주기만 한 경험은 꽤 있었는데, 직접 통신한 건 처음이었습니다.
+HTTP 통신에 대해 조금이나마 공부하는 시간이 되었고, 제가 뭐가 부족한지도 많이 깨닫게 되었습니다 ㅎㅎ
+인터넷과 관련된 공부를 좀 할 필요가 있겠다는 생각이 들었네요 :)
+로그인 방식..JWT 토큰과 쿠키 관련해서도 공부할 수 있는 좋은 시간이었습니다.
 
-어느덧 약 두달간의 프론트엔드 스터디의 마지막까지 달려오게 되었습니다.
-그동안 여러분들에게 개인적인 성장이 있었길 바라는 마음입니다. 이번 스터디는 백엔드와 함께 진행하게 됩니다. 모던 웹에서, REST API가 주류로 떠오름에 따라, 프론트엔드와 백엔드의 구분이 이전보다 매우 명확해졌습니다.
-주로 백엔드는 API 서버의 역할을, 프론트엔드는 이를 이용해 사용자에게 UI를 제공하는 역할로 웹이 분화되었습니다. 그 말은 곧, API 없이는 사용자에게 의미있는 서비스를 제공하기 힘들어 지겠죠. 여러분께서도 차후 팀에서 프로젝트를 진행하시게 되면서 팀 내의 백엔드 개발자들과 API에 대해 소통하시게 될 일이 많아질 것입니다.
+### 저희 과제의 동작을 간단하게 설명해 드릴게요 :)
 
-이번 과제는 백엔드 개발자들이 전달해준 API를 사용해 보는것 입니다!
-일종의 투표 서비스를 개발해 보는 것인데요, 이 투표 결과가 실제 파트장 투표로 이어질수도... 아닐수도,...
-백엔드 개발자와 함께, 기획 의도에 따라 클라이언트 사이드에서 API를 조금 더 효율적으로 사용할 수 있는 방법에 대해 고민해보고, 논의해보는 시간을 가져보시기 바랍니다.
+페이지 접속 시 아래와 같이 후보를 볼 수 있는 창이 나옵니다.
+그러나 바로 투표를 하지는 못합니다.
+로그인되지 않은 상태이기 때문입니다.
+로그인하지 않은 유저도 무엇을 하는 페이지인지 알고 싶을 것 같아서, default 페이지를 투표 가능한 페이지로 두었습니다.
+![image](https://user-images.githubusercontent.com/50395394/144621821-404472d0-a88b-4285-b13c-e71289667a5b.png)
+투표를 시도하면 로그인하라는 alert 메세지가 뜹니다.
+![image](https://user-images.githubusercontent.com/50395394/144622037-6b664a4c-8f37-406b-a3b0-77626a8f9dfe.png)
+로그인은 우측 상단 로그인 버튼을 통해 할 수 있습니다.
 
-또한 이번 과제는 팀 단위로 진행하게 되는데요, 팀 내의 백엔드 개발자는 물론이고, 같은 팀 내의 프론트와도 협업하게 되는 이번 과제에서, 어떻게 하면 실제 프로덕트 개발시에 역할 분담을 효율적으로 할 수 있을지에 대해서 기반을 다질 수 있는 계기가 되길 바랍니다!
+이미 회원이라면, 닉네임과 비밀번호를 입력해 로그인할 수 있습니다.
+![image](https://user-images.githubusercontent.com/50395394/144622239-30edf142-47ee-4cac-8bd7-6de30e2162b8.png)
+아직 계정이 없다면, 이메일과 닉네임, 비밀번호를 설정해 회원가입할 수 있습니다.
+![image](https://user-images.githubusercontent.com/50395394/144622258-27e8084a-c5de-41df-a75f-6935834e5b04.png)
+로그인과 회원가입 창을 따로 분리하기보다, 같은 페이지 안에서 Tab View 형식으로 전환시키는 것이 UX상 훨씬 좋을 것 같아, 이렇게 구현했습니다.
+~~(리액트 네이티브 공부하다가 든 생각입니닷)~~
 
-# 미션
+로그인에 성공하면 바로 투표를 할 수 있는 화면으로 navigate합니다.
+![image](https://user-images.githubusercontent.com/50395394/144623023-2cc82f85-126f-43d6-a3d7-78e6e74efcb7.png)
+우측 상단의 로그인 버튼이 로그아웃 버튼으로 바뀌었고, 문구가 저를 환영해 주고 있네요.
+좌측 상단의 후보 등록하러 가기 버튼을 눌러서 스스로 후보가 될 수 있습니다.
+![image](https://user-images.githubusercontent.com/50395394/144623110-5a20d9de-d5cf-4e26-8824-59ff5d0cb69a.png)
+등록 취소도 할 수 있습니다.
+![image](https://user-images.githubusercontent.com/50395394/144623237-76a719dd-9305-46bf-b1a7-869693600fcc.png)
+빨간 하트를 눌러 간편하게 투표할 수 있고, 
+![image](https://user-images.githubusercontent.com/50395394/144623327-e82a7a5b-7733-4b82-bdb1-d85a89f7f660.png)
+1인당 1표만 행사할 수 있습니다.
+민주주의 국가거든요. 초등학교 사회 시간에 배운 선거의 4원칙.. 기억하시나요?
 
-## 미션 목표
-- REST API, AJAX등을 통한 서버와의 통신 방법을 이해합니다
-- async/await, Promise등 JavaScript 내애서의 비동기 처리를 이해합니다
-- API document를 통해 백엔드 개발자와 소통하는 방법을 익힙니다
-- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다
+하단의 결과 보기 버튼을 누르면 모달이 띄워져 투표 결과를 보여줍니다.
+![image](https://user-images.githubusercontent.com/50395394/144623579-747b9c00-8b5e-4bf4-9e56-f2f611d5f4f1.png)
+유준환님께서 분신술을 쓰셨군요. 민주주의 국가에서 이건 불공평해 보입니다.
+이제 로움님께 마이크를 넘기겠습니다 :)
 
-## 미션 기한
-이번 미션 제출은 과제 공개 후 2주 후 입니다 (2021년 12월 3일) 다만 시험기간을 고려하여 스터디는 시험기간이 끝난 이후로 예정되어있습니다.
-따라서 과제 제출 기간 이후로 자유롭게 수정이 가능합니다.
+### 로움
+안녕하세요. ceos 14기 프론트 이로움입니다. 이번 과제를 하면서 조금이나마 실력이 상승한 것 같아 즐겁게 마무리를 할 수 있었습니다.
 
-## 필수요건
-- 사이트를 여러분만의 감각으로 꾸며보세요. (UI/UX에 대한 여러분의 감각을 최대한 발휘해주시기 바랍니다)
-- HTTPS를 통해 서버와 통신하세요
-- 외의 사항은 기획 문서를 참고하세요
+집중했던 점은 다음과 같습니다.
+1. 디자인은 간단하게 라이브러리를 사용하였고, 많이 신경을 쓰지 않았습니다. css에 시간을 들이기 보다 오히려 들어가야 할 기능에 더 집중하였습니다.
 
-## 선택요건
-- API Fetch는 어떤 방식을 사용하던 무방합니다 (axios, Fetch API, $.ajax)
-- `Promise.then()` 보단 `async/await`를 사용해 보세요. 더 최신 스펙이랍니다.
+2. postman을 지금까지 백분들이 준 것을 대충.. 사용하다가 이번에 제대로 사용하게 되었습니다. 이것만으로도 굉장한 발전이라고 생각합니다.
 
-## 링크 및 참고자료
+3. 이번에 리듀서를 사용해 보았습니다. 이전에 사용해 본 적이 있으나, 제대로 그 의미를 파악하지 못했습니다. 그러나 이번 과제로 인해 리듀서의 진정한 필요성을 깨달을 수 있었습니다. 평소에 state를 props로 넘기는 것에 대해 불편했던 적이 많았는데, 리듀서가 생각보다 사용하기 어렵지 않았고, 전역적으로 업데이트해 사용할 수 있다는 점이 정말 좋았습니다. 이번 계기를 통해 앞으로 자주 사용할 것 같습니다.
 
-- [리액트 API 연동의 기본](https://react.vlpt.us/integrate-api/01-basic.html)
-- [자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?](https://ljtaek2.tistory.com/142)
-- [async와 await, 비동기를 동기코드 처럼](https://kamang-it.tistory.com/entry/JavaScript11async%EC%99%80-await-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EB%8F%99%EA%B8%B0%EC%BD%94%EB%93%9C-%EC%B2%98%EB%9F%BC)
-- [REST API 제대로 알고 사용하기](https://meetup.toast.com/posts/92)
-- [axios란? (feat. Fetch API)](https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API)
+4. 기능과 presenter를 구분하였습니다. 평소 한 파일에 styled-components와 함수를 함께 섞어 보관하였으나, 프로젝트가 커지니 한 파일이 몇백줄까지 나가 가독성이 떨어졌습니다. style을 따로 보관하니 재사용하기도 용이하고 코드 양도 줄어 아주 편리했습니다.
 
+이번 과제로 인해 api와 통신을 더 깊게 이해할 수 있어 개인적으로 뜻깊은 시간을 보낼 수 있었습니다.
+해당 과제를 준비해주신 운영진분들께 감사드립니다. 좋은 주말 보내시길 바랍니다. 
+
+
+여기까지입니다! 감사합니다!