TodoList 만들기 (8) 배포

배포완료!

https://todolist-75cfc.web.app/

TodoList

테스트용 계정

ID : kim@google.com
password : qwe123

 

 

수정 모드 추가

과제 제출하려고 보니 수정기능이 없다는 것을 깨닫고 수정기능을 부랴부랴 추가해보았다.

처음에는 리스트를 클릭하면 input창이 나오도록 해볼까 했는데 list의 길이가 길어지면 한줄로 보는게 불편할거 같았다. 그래서 수정 버튼을 클릭하면 list를 수정할 수 있는 textarea가 modal창으로 뜨도록 만들어보았다.

modal 창은 이전에 쓰던것과 비슷하게 만들고, modal component에 textarea와 수정하기 버튼을 넣었다.

input 태그를 쓰니 한줄로 쫙~~~~~ 나와서 textarea를 쓰기로 했다.

수정하기 버튼을 누르면 해당 text가 객체로 만들어져서 redux가 관리하는 전역 상태를 변경시키도록 dispatch를 날려준다.

 

수정 modal창이 뜨자마자 textarea가 focus 되도록 useRef hook을 사용하였다.

 

useModal

비슷한 modal 창이 많아서 재사용성을 늘리기 위해서 하나로 합칠 수 있게 리펙터링 해봤다. 

일단 modal contents와 모달창 on/off 상태관리 변수를 관리하는 useModal 이라는 hook을 간단하게 만들어봤다. 

 

contents는 하나의 파일에 모아서 따로 export 하도록 해줬다.

이 Modal contents 객체를 useModal의 인자로 넘겨줄 것이다. 객체로 만든 이유는 나중에 style같은것도 넣어서 modal창을 좀더 범용성있게 재활용 해보기 위해서이다.

 

Modal 창은 기존에 쓰던걸 쓰기로했다.

비슷한 modal창이 5개 있었는데, 하나의 컴포넌트로 만들고 재활용 할 수 있어서 좋았다.

style이 다른 modal창도 4개가 더 있는데, useModal hook에 style관련 코드도 추가해서 하나의 modal 컴포넌트로 모든 종류의 modal창으로 재활용 할 수 있으면 좋을 것 같다.

 

 

파일 구조 변경 -page별로

파일이 원래는 pages, components로 구성되어 있었는데 이렇게 하니 어떤 page에 어떤 component가 들어가는지 헷갈리는 경우가 많았다. 그래서 React 파일이나 폴더 관리는 어떻게 하나 열심히 찾아봤는데, React 공식 문서에 이렇게 적혀있었다.

그래서 그냥 page와 page에 관련된 모든 컴포넌트를 하나의 파일에 넣기로 했다.

이게 잘못된거면 나중에 고치면 되지 않을까?

 

Firebase hosting으로 배포

이제 다른사람이 사용할 수 있도록 배포를 하기로 했다.

배포같은 경우 여러가지 사이트를 이용할 수 있는데, 지금 사용중이 Firebase에도 hosting 빌드로 배포를 할 수 있게 되어 있어서 사용해보기로 했다. 

배포는 생각보다 간단했는데, 내 로컬 레포지토리에 firebase tool을 설치하고 build된 파일을 커맨드를 사용해서 등록하면 된다.

Firebase console에 배포된 사이트 주소와 파일이 보인다.

 

https://todolist-75cfc.web.app/

TodoList

 

 

Reference

- https://ko.reactjs.org/docs/faq-structure.html