4주 프로젝트 중간 후기

codestates 마지막 과제가 시작되었다. 마지막 과제는 기업의 과제를 할 수 있지만, 난 아이디어가 좋은 프로젝트를 선택했고, 다행히 1지망이 선정되었다.(프로젝트에 관해서는 4주 프로젝트가 끝나고 이야기)

 

지난 2주 프로젝트에서 Front-end를 선택해서 React Hook을 배우게 되었고, 기간이 짧아서 기술적으로 부족했다. 그래서 이번 프로젝트에도 Front-end를 선택을 했다. 조금 더 Hook 잘 사용하고 싶어서...

 

Hook은 알면 알수록 할 수 있는 기능들이 많았다. 특히 useContext를 공부하면서 Redux가 필요없다고 생각 되었다. Google에 알아 봤더니 Redux 창시자는 관리할 State가 방대하다면 Redux를 사용하는게 좋다 이런식으로 말했다. useContext, useReducer와 같은 Hook이 Redux를 대체할 수 있지만,  state가 방대하면 Redux를 사용하는게 좋고, 라이브러리 선택은개발자가 선택해야할 사항이라고 했다.

 

이번 프로젝트 2주간 새로 적용한 기능

 1. useContext : redux의 state를 관리해주는 store 같은 기능을 한다.

 

 2. Modal 기능 구현 : alert 창을 customize 해서 사용을 했다. 그리고 프로젝트에 로그인 기능이 있는데, 회원 정보 수정과정에서 수정을 하거나 탈퇴를 할 때, 패스워드를 입력하는 propt 창을 customize했다. React Modal을 구현할 때 많은 방식있었다. 검색을 했을 때, react bootstrap이 많이 검색이 되었다. 그리고 react bootstap을 component화 시켜놓은 라이브러리도 있었다. 하지만, 프로젝트 초기에 사용할 tool을 정할 때, styled - component를 사용해서 CSS를 활용하기로 했다.

때문에 bootstrap 대신 styled-component를 사용해서 구현을 했다.

 

    *어려움 : Password를 입력하는 기능을 구현하면서 확인 버튼을 눌렀을 때는 서버에 요청을 보내서 확인을 받는 과정은 잘 구현이 되었지만, 취소 버튼을 눌렀을 때, 이전에 입력했던 input 창 내용이 초기화가 안되었다.

   1) 처음 시도한 방법은 document.querySelector().value==='' 활용을 해서 초기화를 시도하려고 했으나 잘 안되었다. console로 확인을 했더니 input란에 value를 불러 올 수 없었다.

   2) 두번째 시도한 방법은 구글링을 통해서 Modal input reset 검색을 통해서 검색을 했으나, 대부분 react-bootstrap에 대한 내용이 대부분 이었다. 일단 react-boostrap 관한 내용에서 힌트를 얻을 수 있을까 해서 확인을 했다. 하지만 bootstrap에서 지원하는 query 기능 메소드를 활용해서 (.on) 초기화를 시켰다.

   3) 세번째 방법은 코드스테이츠를 이용했다. 프로젝트를 구현을 하면서 기능의 구현의 어려움이 있거나 stackoverflow와 google에서 해결하지 못 했을 때, 하루 한시간 질문하는 시간이 있었다. 이 시간을 이용해서 도움을 받았다.

  *해결 : useState를 이용해서 관리 해보라는 조언을 들었다. input 란에 value를 control 할 수 있도록... 조언 대로 input 란에 value={password} 라는 동적으로 변화를 값을 받을 수 있도록 변수를 넣어주고 useState를 이용해서 close 버튼을 눌렀을때,  getPassword('')을 통해서 문제를 해결 할 수 있었다.

 

 3. 설문조사 기능 구현 : 프로젝트에 설문조사하는 부분이 있었다. 여기에 select와 option 태그를 활용해서 value 값을 받아서 data화 시키는 기능을 구현했다.

 

지난번과 달라진점

 - 지난 2주 프로젝트에서 의사소통이 가장 큰 문제였다. 서로 한곳을 바라보고 코드를 구현을 했어야 했는데...그게 잘 안되었다. 이번 4주 프로젝트는 2주 프로젝트에서 잘 안되었던 의사소통을 잘하자라는 마음을 먹었다. 그래서 2주간 하루에 3~4번씩은 행아웃으로 만났다. 서로 한곳만 바라보면서 코딩을 잘 할 수 있도록...그랬더니 서로의 의도가 파악될때까지 서로 설명해주었더니 프로젝트 속도가 가속도가 붙었다. 어느덧 Front에서 기능은 큰 기능들은 마무리 되었고, 세세한 기능들을 구현하고 있고, 서버는 큰틀은 다 잡고 사진 업로드 기능만 추가하면 마무리가 될 것 같다.

 

어느덧 코드스테이츠 마지막 일정이고 대략 3주 남았다. 2주간 4주프로젝트를 마무리하고 마지막 화요일에 프로젝트 발표를 한다. 그리고 남은 3일간 부족한 부분을 채우는 시간이다. 남은 2주간 프로젝트를 마무리를 잘하고 실제로 웹사이트를 운영할 계획을 하고있다. 프로젝트를 하면서 팀원들과 이야기를 했을 때, 아이디어가 좋기 때문에 잘 마무리를 하면 직접 운영해보자 라는 의견에 모두 동의를 했다.

 

4주 프로젝트가 잘 마무리 되도록....

 

 

#codestate#final#project#4weeks#front-end#Hook#react#useContext#Modal