[WIL] 항해 99 실전 6주차 (마무리)

김하나·2022년 12월 18일
0

WIL

목록 보기
13/17

마침내 실전 마지막주가 되었다.

마지막으로 갈수록 할일이 많아졌는데, 우선 발표를 해야 하므로 개발 할 시간은 없었다.

프로젝트의 마무리

부랴부랴 배포 후, 구글 애널리틱스를 통해 통계를 확인하고, 설문조사 피드백을 받기 시작했다.

플랫폼의 쓰임새가 명확하다보니 정말 필요해서 사용해보지 않는 이상 의미있는 피드백을 받기는 쉽지 않았다.
이메일 양식에 관한 피드백은 유의미했고, 비밀번호 확인란이 있어야 할 것 같다는 피드백에 동의했다. 유저에게 아이디로 가입이 가능하다는 안내문을 띄운뒤 로그인 한다는 안내를 했던 초반의 느낌이 맞았던건가 싶지만, 지금 상태로 메시지를 안내하기에는 중간 텀이 없다.

로그인이 되었다는 안내는 하단에 토스트를 통해 알려주고 있는데, 모바일의 경우에는 스크롤바가 올려져있으면 안보였던건가.. 내 휴대폰에서는 잘 되고 있다보니 테스트 하기가 여간 쉽지 않았다.

배포후에도 미디어쿼리를 이용해 반응형 전환을 하고, 버그 잡기에 여념이 없었다.

발표영상 준비를 해야 했는데, 카메라에 보이는 부분을 제외하면 방이 아비규환이라 오랜만에 편집을 조금 해보았다. 동그라미 부분을 최대한 여백없이 나의 상반신으로 꽉채우면 주변은 잘 보이지 않으니까 ^^;

트러블 슈팅에 관해 설명하는데, 전체 프로젝트에서의 트러블 슈팅이라 프론트엔드는 이미지 압축을 통해 지연시간을 단축시켰다는 언급을 하게 되었고,
백엔드는 메일 전달하는 방식을 비동기화 하여 효율성을 추구했다는 것을 어필했다.

나의 작고 귀여운 트러블 슈팅은 블로그에 써야겠다고 생각했다.

페이지 렌더링 속도를 줄이기 위한 노력을 해보았다던가, 비동기 통신 속도를 빠르게 하기 위한 코드를 짜봤다던가 하는 일은 해보지 못했다. 그런 방식을 떠올리지도 못했다. 멘토님이 알려주시기 전까지는 몰랐었다.
프론트엔드에서도 스피드는 중요했고, 코드로 처리가 가능한 거 같았다.
속도개선을 위해 코드를 짜려면, 어떻게 해야 되는 것인가.

트러블 슈팅

나의 개인적인 트러블 슈팅은, 유효성 검사 메시지, 백엔드에서 뿌려주는 에러메시지를 플레이트로 바꿔가며 출력하는 것이었는데, 비동기 방식이 아니기 때문에 순서대로 코드를 작성했고, 유효성 검사 부분을 함수로 만들어 아이디, 비밀번호에 각각 집어넣고, 유효성 검사 처리가 잘 되었을때 통신이 시작되도록 구현했다.

이렇게 처리하기까지 과정에서 처음에는 alert으로 경고창을 띄웠는데, toast메시지를 통해 처리하면 CSS를 바꿀수 있을 것이라는 예상을 했다. 하지만 toast 라이브러리 자체가 너무 안 예뻐서 자체적으로 제작한 토스트를 쓰게 된 것이다. 그것도 지난주에 언급했듯 조원분이 만드신것과 충돌이 일어나는걸 보니 비슷한 레퍼런스를 참고한것 같았다. 더 매끄럽게 작동 되는 것을 채택했고, useRecoilState를 활용해 전역으로 state값을 관리하며 웰컴 메시지를 띄웠다.

로그인 회원가입 페이지는 디자인도 단순하고 기능도 그리 어렵지 않았는데 오류가 종종 발생했다. 그것은 바로 회원가입 신청은 되었지만, 승인받지 못해서 당장에는 로그인이 되지 않는 공인중개사 유저가 뒤로가기 버튼을 눌렀을 때 뜨는 핑크페이지가 그것이었다.

핑크페이지를 없애기 위해 플레이트 초기화도 시켜보고 윈도우 새로고침도 시켜보았지만, 마음에 드는 타이밍도 아니었고 이상했다.
그래서 route를 다 할당해, 페이지로 분리시켰고 public route를 써서 로그인 한 유저가 접근하지 못하도록 각 페이지를 감쌌다. 이렇게 뒤로가기를 하건 도메인을 쓰건 무조건 메인화면으로 이동되게 코드를 구현하였더니 더이상 핑크페이지가 나타나지 않았다.
핑크색 페이지의 유래는, 뷰를 구성할때 공간을 먼저 확보하느라 컨테이너를 설정하는데, 이때 배경화면 색도 변화를 줘서 전체 영역이 브라우저에서 어느정도를 차지하는지 보기 위함이다.
이 색이 흰색으로 되어있었더라도 오류가 났음을 알수 있었겠지만, 그래도 확실하게 색상이 뜨면 오류가 났다고 볼수 있기 때문에 버그 잡기에 도움이 된 듯 하다.

동시로그인을 위해 변수를 선언해 메소드 넣는거랑, 핑크페이지 없애려고 route를 각각 할당해서 접근 불가 처리를 하는 것도 작지만 기능이라 기록해둔다. 이것보다 더 많은 양을 보다 빠른 시간안에 처리해내는 개발자가 되고 싶다....

발표영상 제작

발표영상 만들기는 코딩보다 머리쓰는 일은 덜하지만, 대신 9분안에 맞추느라 불필요한 장면을 찾아내고 솎아내는 작업이 생각보다 오래걸렸다.
방에서 찍은거라 음향이 다소 아쉽지만, 그래도 발표까지 무사히 끝내고 나니 안갈것만 같던 99일이 정말 이제 일주일 남았구나 실감했다.

이력서 주간 시작

이력서를 본격적으로 쓰기 시작해야 하는데, 쓸만한 내용이 없는 것 같아서 방황하고, 다른 분의 포트폴리오 페이지를 보고 주눅들고, 내 깃허브 보면서 한숨을 쉬었다. 비록 요만큼 가지고 있지만, 그래도 일단 항해 기간동안 살아 남았고, 계속 살아남기를 바라기 때문에 포트폴리오 페이지 구현해서 모의 면접을 보고 싶다.

이미 1차 이력서를 내고 취업코칭을 신청해버렸지만, 2차때는 정말 신중하게 하고픈데 시간이 많지가 않다. 덕분에 마지막 주를 가장 불태우며 진행하고 있다. 지금껏 "해본 것" 말고 "잘하는 것"을 쓰라고 하니 막막해져서 큰일이었지만 어떻게든 써서 냈다. 조금 창피함이 밀려온다. 자소서는 지원하고자 하는 기업에 맞게 버젼을 다양하게 가지고 가야 하므로 앞으로 계속 매일매일 쓰고 있어야 할 것 같다. 100군데 정도는 넣어봐야 연락을 받을 수 있겠지... 있어야 한다..

마지막까지 방심하지 말자. 쓰레기 버리러 계단을 오르내리는 것조차 힘들 정도로 근손실이 일어나긴 했지만, 결과가 좋아야 보람이 있을 듯 하다.

추후 도전해 봐야 하는 기능

첫 페이지 최적화 lighthouse 점수 끌어올려보기
지도 Api 검색 기능
사진 수정 삭제 기능 넣어보기
비밀번호 확인
무한스크롤
배포해보기
미결되어 신경쓰이는 자동로그인

Tving사이트도 자동로그인을 사용하고 있는 것을 발견했다.
수료 후에도 연습할 수 있게 백엔드 동료를 붙들어야 할거 같다는 생각..

profile
코딩하고 글씁니다

0개의 댓글