[6주차] 구본준 미션 제출합니다

README.md

@@ -1,46 +1,60 @@
-# 마지막 미션 : React vote!
+# CEOS 15기 파트장 선거 페이지 프로젝트
 
-# 서론
+## ✅ 프로젝트 소개
 
-안녕하세요 프론트엔드 14기 여러분! 파트장입니다.
+- 신촌 IT창업동아리 내에서 진행한 자체 프로젝트로, 백엔드와 프론트엔드가 연합하여 15기 운영진을 선출하는 선거 페이지를 만드는 프로젝트입니다.
 
+## ✅ 팀 소개 : TEAM 저집처럼🏠
 
-어느덧 약 두달간의 프론트엔드 스터디의 마지막까지 달려오게 되었습니다.
-그동안 여러분들에게 개인적인 성장이 있었길 바라는 마음입니다. 이번 스터디는 백엔드와 함께 진행하게 됩니다. 모던 웹에서, REST API가 주류로 떠오름에 따라, 프론트엔드와 백엔드의 구분이 이전보다 매우 명확해졌습니다.
-주로 백엔드는 API 서버의 역할을, 프론트엔드는 이를 이용해 사용자에게 UI를 제공하는 역할로 웹이 분화되었습니다. 그 말은 곧, API 없이는 사용자에게 의미있는 서비스를 제공하기 힘들어 지겠죠. 여러분께서도 차후 팀에서 프로젝트를 진행하시게 되면서 팀 내의 백엔드 개발자들과 API에 대해 소통하시게 될 일이 많아질 것입니다.
+| <img src ="https://avatars.githubusercontent.com/u/62752488?v=4" width = 150/> |                 <img src ="https://avatars.githubusercontent.com/u/48646015?v=4" width = 150/>                 | <img src ="https://avatars.githubusercontent.com/u/90975718?v=4" width = 150/> |
+| :----------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------: |
+|                                     구본준                                     |                                                     김승우                                                     |                                     김윤지                                     |
+|                           <a href ="">@bonjunku</a>                            | <a href ="https://github.com/Like-that-house/django-vote-14th/commits?author=seungwooKim99">@seungwookim99</a> |               <a href ="https://github.com/yoonjiy">@yoonjiy</a>               |
+|                                   프론트엔드                                   |                                                     백엔드                                                     |                                     백엔드                                     |
 
-이번 과제는 백엔드 개발자들이 전달해준 API를 사용해 보는것 입니다!
-일종의 투표 서비스를 개발해 보는 것인데요, 이 투표 결과가 실제 파트장 투표로 이어질수도... 아닐수도,...
-백엔드 개발자와 함께, 기획 의도에 따라 클라이언트 사이드에서 API를 조금 더 효율적으로 사용할 수 있는 방법에 대해 고민해보고, 논의해보는 시간을 가져보시기 바랍니다.
+## ✅ 결과물
 
-또한 이번 과제는 팀 단위로 진행하게 되는데요, 팀 내의 백엔드 개발자는 물론이고, 같은 팀 내의 프론트와도 협업하게 되는 이번 과제에서, 어떻게 하면 실제 프로덕트 개발시에 역할 분담을 효율적으로 할 수 있을지에 대해서 기반을 다질 수 있는 계기가 되길 바랍니다!
+- Vercel 배포 버전: <a href = "https://react-vote-14th-five.vercel.app/">바로가기</a>
+- 현재 백엔드 배포 문제로 Vercel 접근이 원활하지 않습니다.
+- 로컬 실행 방법:
 
-# 미션
+```
+npm i
+npm start
+```
 
-## 미션 목표
-- REST API, AJAX등을 통한 서버와의 통신 방법을 이해합니다
-- async/await, Promise등 JavaScript 내애서의 비동기 처리를 이해합니다
-- API document를 통해 백엔드 개발자와 소통하는 방법을 익힙니다
-- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다
+## ✅ 결과화면
 
-## 미션 기한
-이번 미션 제출은 과제 공개 후 2주 후 입니다 (2021년 12월 3일) 다만 시험기간을 고려하여 스터디는 시험기간이 끝난 이후로 예정되어있습니다.
-따라서 과제 제출 기간 이후로 자유롭게 수정이 가능합니다.
+- 로그인 화면
+  ![0](./public/readme/0.png)
+- 계정이 없으면 생성가능
+  ![1](./public/readme/1.png)
+- 잘못된 접근 시 alert
+  ![2](./public/readme/2.png)
+- 메인화면
+  ![3](./public/readme/3.png)
+- 모달 구현(개발자의 TMI)
 
-## 필수요건
-- 사이트를 여러분만의 감각으로 꾸며보세요. (UI/UX에 대한 여러분의 감각을 최대한 발휘해주시기 바랍니다)
-- HTTPS를 통해 서버와 통신하세요
-- 외의 사항은 기획 문서를 참고하세요
+![4](./public/readme/4.png)
 
-## 선택요건
-- API Fetch는 어떤 방식을 사용하던 무방합니다 (axios, Fetch API, $.ajax)
-- `Promise.then()` 보단 `async/await`를 사용해 보세요. 더 최신 스펙이랍니다.
+- 투표 기능
 
-## 링크 및 참고자료
+![5](./public/readme/5.png)
 
-- [리액트 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)
+- 결과 확인
+  ![6](./public/readme/6.png)
 
+## ✅ 신경 쓴 부분
+
+- 상태관리를 효율적으로 하고 싶었습니다. useReducer와 custom Hooks로 전역적인 상태관리를 시도했습니다. 기본적으로는 dispatch로 전역상태를 관리하는데, 직접 쓰기보다는 dispatch를 한 번 더 hook처럼 만들어서 사용했습니다.
+- MVC패턴 적용 : 실제 View를 담당하는 렌더링 로직, 통신 및 데이터 처리를 담당하는 Service 로직, 토큰을 보관하는 db 를 따로 분리하여 MVC패턴을 적용했습니다.
+- http 모듈화 : http통신 관련 자주 쓰이는 로직이 많아 클래스로 모듈화 하여 단계적으로 구성했습니다.
+- Next UI 적용: NextUI로 세련된 디자인을 적용시켰습니다.abs
+
+## ✅ 새로 배운 부분
+
+- 비동기 로직 처리 관련 : 비동기 함수와 동기함수를 같이 써야 하는 경우가 종종 생기는데, 비동기함수는 aysnc 지옥(...) 을 만들기 때문에 로직 자체를 동기함수가 나중에 와도 되는 식으로 구성하고, 비동기 함수가 이행됐을 때 콜백을 동기함수를 넣어서 처리해주는 방법을 배웠습니다.
+
+- 백엔드 로직: 개인적으로 백엔드 관련 지식이 전무해서 저번~이번 주동안 Express를 빠르게 공부했습니다. 미들웨어의 구성, 에러 처리, Validation, bycrypt, jwt 인증 방식 등 서버가 어떻게 데이터를 받아오고 보관하는지를 배웠습니다. 덕분에 백엔드 개발자들과 소통할 때 부족함 없이 이야기 할 수 있었습니다.
+
+- NextUI: styled components에 비해 일장 일단이 있는 것 같습니다. NextUI의 최고 장점은 '이쁘다'는 것입니다. 하지만 세밀한 조작이 조금 불편했는데, http컴포넌트나 리액트 컴포넌트에 있는 props 가 없는 경우가 종종 있어서 불편했습니다. 그리고 가장 불편한 점은 렌더링 로직에 너무 많은 부분을 차지 한다는 점입니다. 물론 파일 쪼개기를 하면 분명 개선할 수 있는 부분도 있겠지만.. Styled Components에 비해 심플함은 떨어지는 것 같습니다.