230115_WIL&TIL

FACTS

 

• 식물검색 메인페이지 틀(반응형 포함) 및 api기능 구현
• 식집사 가이드 페이지 틀(반응형 포함) 및api 기능 구현(chart.js)
• 헤더(브라우저,모바일) 애니메이션 및 기능 구현 수정

 

 

 

오늘 공부한 내용

• 실전프로젝트 17일차 

• 헤더(브라우저,모바일) 애니메이션 및 기능 구현 수정

헤더 

• 모바일 헤더 > 햄버거 클릭시 나오는 슬라이드 모달창에 유저 정보(이미지,닉네임) 관련 api 추가
• 모바일 헤더 > gnb클릭시 lnb 탭 드롭다운 기능 추가

헤더 카테고리 페이지이동 구현

• 페이지 클릭 시 로그인을 해야 입장 가능한 페이지가 존재, 토큰을 확인해야 하는 이유가 생김.
• 식물일지, 가이드페이지 클릭 >  로그인이 안되어있음 > 로그인 페이지 이동 > 로그인 > 들어가려고 했던 페이지로 이동

로그인 기능 관련 작업

• 어떤 페이지에서 로그인을 하던지, 로그인을 했을경우 로그인을 시도했던 페이지로 돌아감(사용자경험 우선)
• 로그아웃을 한 경우 무조건 메인페이지로 돌아감
• 로그인 시 마이페이지 및 로그아웃 텍스트 / 로그아웃 시 로그인 텍스트 
• 로그인 및 로그아웃 시 햄버거 슬라이드창 열리고 닫힘

토큰 저장방식 수정 - 로컬스토리지 > 쿠키

트러블 슈팅

 

상황 :

처음 페이지가 렌더링 될때 useEffect를 통해 모바일 헤더 유저 텍스트 및 이미지를 api를 통해 불러와서 useState에 값을 넣어둔 후 꺼내 사용하고 있다. 브라우저가 렌더링되고(html영역을 읽어들인 후) useEffect이 실행되는 데, api 비동기처리가 끝나는 시점이 useState의 데이터가  하위컴포넌트로  전달하는 시점보다 더 늦게 끝나고 있는 것으로 추정.

 

문제:

로그인을 했지만 모바일 슬라이드 모달에 유저의 닉네임과 이미지가 들어가지 않은 상황.

 

해결:

useEffect에 dependency를 추가하여 리렌더링을 유도하여 상황을 해결.

 

 

 

 

 

어려웠던 내용

네비게이션에서 마우스 호버 시 애니메이션 효과를 거는 것에 관련하여 초반에 너무 다른 방향으로 잘못 생각하는 바람에 시간을 많이 허비했던 것 같다.

바닐라 자바스크립트로 작성하여  DOM을 접근할 수 있다면 5분만에 할 수 있는 내용을 리액트를 사용하여 DOM에 접근 할 수 없는 상황에서 만들어야 하다보니 많이 어려웠다.

 

느낀점

기능 구현을 했을 때의 그 보람은 정말 너무나도 짜릿하고 보람찬 것 같아 좋다.  하지만 그렇게 고생한만큼 다크서클도 더 짙게 내려오고 있는 중이다.  손보아야 할 곳들이 많아 프론트의 작업속도가 보기보다 느려져 부담이 되는 하루였다. 백엔드분들에게도 너무 죄송하기도하고 하지만 최선을 다해 퀄리티 있는 프로젝트를 만들어 보여드려야겠다고 생각한다. 힘내보자 앞으로도!