스파르타코딩클럽 리액트심화반 04주차 후기!

우여곡절 끝에 4주차 강의도 끝냈다!!!

이번엔 좀 시간이 오래 들었는데, 내일배움카드로 왕초보시작반(웹개발종합반)을 듣는 분들을 대상으로 하는 스몰프로젝트에 미니튜터로 참석하면서 좀 정신이 그쪽에 가 있었다ㅠ

하지만 너무 재미있었지

이번 주차엔 아 이거 넘 하고싶다 하던걸 거의 다 구현했다. 의사코드로 가짜 데이터들만 넣어놨던 알림 탭도 진짜 댓글이 작성되면 실시간으로 쌓이도록 구현했고, Material-UI를 사용해서 알람 뱃지도 구현했다

알람뱃지는 내가 직접 css로 작성해서 만들어놓은 상태였는데, Material-ui를 사용하니 뱃지가 사라질때 애니메이션까지 덤으로 나타나서 진짜 뭔가 제대로 된 느낌이었다. 튜터님은 Material-ui의 아이콘을 사용해서 알람탭과 로그인 로그아웃 등의 버튼을 아이콘으로 바꾸는 걸 추천하셨는데, 나는 기존의 버튼 아이콘들을 꽤나 신경써서 만들어 둔 터라 알람 아이콘만 Badge 컴포넌트로 감싸는 형식으로 구현했다.

이번 주차에 좀 진도가 늦었던 것은 미니튜터 일도 있었지만 왠지 모르게 파이어베이스 realtime를 사용하면서 실시간으로 데이터를 입력하는 것이 구현이 너어무 어려워서 꽤나 애먹었다ㅠㅠ 아니 진짜 튜터님이랑 똑같은 코드로 작성했는데 사용자가 최근의 댓글 등 알람을 모두 읽었는지, 새로운 댓글리스트가 몇개가 들어왔는지 등을 실시간으로 업데이트 해주는게 뭘 어떻게 해도 안되더라고.... 근데 자고 일어나서 오늘 아침에 해봤더니 갑자기 되더라... (이게 왜 되지..?)

Material-UI를 사용하지 않았지만 거기서 버튼에 그라데이션 넣는 방법을 좀 참고해서 글쓰기 버튼의 모양도 좀 수정했다. 전체적인 앱의 컬러를 무채색에 코랄 계열 포인트로 해보고싶었다. 아주 이뻐..

하는 김에 사진 업로드 버튼도 비슷한 코드로 더 연한 색깔로 구현했다. 아 근데 포스트 수정하기 페이지에선 글쓰기 아이콘 뜨면 안되는구나.. 이건 수정해야겠다.

 

아직도 코딩 안배웠어? 5만원 깎아줄께 형아만 믿어

 

이번 주차에서 React-Native의 FlatList처럼 한번에 데이터를 불러오지 않고 일부를 보여주고 스크롤이벤트에 따라 페이지를 불러오는 것을 구현했다. 그리고 그것을 불러오는 잠깐 동안에라도 클라이언트가 데이터를 불러오고 있는 상태라는 것을 인지할 수 있도록 progress bar를 구현했다. 처음엔 튜터님이 짜주신 원형 progress를 이용했다가, 이왕 Material-UI를 쓰는김에 거기서 제공하는 Linear Progress Bar를 사용했다. 사진이 워낙 빨리 로드돼서 볼 틈이 없긴 하지만 완성도 있는 앱에 한걸음 더 다가간 기분..!!

이거 완성하면 기존에 만든 앱에 또다른 탭으로 구현을 해볼까 생각 중이다. 거기도 로그인 회원가입 기능이 있는데 딱히 로그인해서 쓸 컨텐츠가 없어서... 고양이 자랑하는 미니 인스타그램을 만드는거짛ㅎㅎ 진짜 코딩 재미있다 내 손으로 이런걸 만들다니...!!!