[메인프로젝트] GNB / LNB / 칼럼그리드 수정

도시님이랑 페이지 단위로 나누어 작업하다보니 메인페이지에서 주로 보이는 것들을 대부분 담당하고 있다.

프리 프로젝트 때와 완전히 반대로 맡아 작업중이다.  오히려 좋아..

 

칼럼그리드

작업을 제대로 시작하기도 전에 난관에 부딪혔다.

그동안은 리스트 불러오고 필터링하는 기능이 우선이라 navbar 버튼을 대충 띄워놓고 썼는데,

화면에 예쁘게 정렬하려고 하니 도저히 모바일/데스크탑 2단 구성으로는 불가능해 보였다.

그래서 늘렸다 줄렸다 해 가면서 타블렛 사이즈를 끼워넣었다.

이렇게 하니 카드도 그냥 퍼센트 사이즈로 줄일 수 있어서 오히려 좋아..

값을 다 변수로 만들어 놔서 다행이었다. 값 하나씩 찾아다니면서 수정했어야 될 뻔 ㅠ

GNB

NavLink

도시님 덕분에 NavLink를 알게 되었다.

'Link'에도 <a> 태그로 스타일 넣을 수는 있지만, css로 active 상태를 스타링할 수 있다는 게 중요한 차이점인 듯하다.

https://velog.io/@seong-dodo/React-Link%EC%99%80-NavLink

[React] Link와 NavLink

https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC

React Router v6 업데이트 정리

그런데 이게 또 왜 안되나 했더니 리액트 v6 문법이 아니었던 것이다 ^^

JS는 버전이 바뀐다고 뭐가 없어지는 경우는 없는데.. 라이브러리는 꼭 그렇지 않다는 것을 명심하자..

 

Link vs useNavigate

https://kodevvon.tistory.com/165

React router Link, useNavigate 차이점

'바로이동' vs '조건 걸어서 다른 함수 내부에서 실행'의 구분은 잘 해서 쓰고 있었다.

그런데 이번에 다시 검색하면서 useNavigate와 함께 쓸 수 있는 'useLocation'이라는 훅을 새로 알게 됐다!

아직은 특정 값을 가지고 이동해야 하는 경우가 없지만, 로그인 후 이동 등의 로직을 구현할 때 고려할 수 있는 옵션이 하나 더 생겼다.

 

로그인 시 프로필 툴팁

툴팁을 말풍선처럼 보이게 해 주는 꼭다리 삼각형 만드는 걸 가상요소로 했던 기억이 나서 사용법을 찾았다.

가상선택자 말고 가상 요소의 개념이 뭔지 아리까리한 상태였는데 이번에 말 뜻을 알았다.

정말 말 그대로 마크업되지 않았지만 된 것처럼 가상의 element를 추가해서 사용하는 거였다 ㅎ

가상요소 사용 시에는 content 속성 꼭 잊지 않고 넣기!!

https://hianna.tistory.com/726

 

꼭 툴팁 관련한 건 아니지만 모달처럼 툴팁 외 부분을 클릭했을 때 닫히게 하고 싶어서 방법을 다시 찾아봤다.

https://velog.io/@bisari31/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%99%B8%EB%B6%80-%EC%98%81%EC%97%AD-%ED%81%B4%EB%A6%AD%EC%8B%9C-%EB%8B%AB%EA%B8%B0

 

esLint 오류 : 인터랙티브하지 않은 요소에 이벤트 넣기

https://velog.io/@dmki7575/TIL.ESLint-Visible-non-interactive-elements-with-click-handlers-must-have-at-least-one-keyboard-listener

TIL. Visible, non-interactive elements with click handlers must have at least one keyboard listener.

툴팁안의 리스트에다가 onClick을 넣으려다가 처음 보는 에러를 만났다.

잊고 있던 sementic 태그와 접근성을 상기시켜주는 에러..

우회할 방법을 찾으려다가 그냥 li를 다 button으로 만들어줘서 해결했다.