헤더, 푸터, 네비게이션 바 작업 중.
- 페이지별로 다른 레이아웃 적용
잠깐!!!!!!!! 이건 전 버전이다.
넥스트 레이아웃 관련
- 사실 헤더, 푸터, 네비게이션 할 때의 생각
진짜 오랜만에 헤더 푸터 하는데 큰일이당!!!!!!!!!!!!
평소 하는 것처럼 웹 -> 반응형이 아니라, 앱부터 만들기 시작하는 터라 더 어려웠다^.^...!!!
네비게이션바를 대충 모양이라도 만들고 나서 고려해야 했던 것
1. 앱 사이즈 -> 하단에 고정시키기 (네비 최상단에 mt-auto)
2. 바디에 일정 공간 만들어놓기 (메인에 min-h-screen, flex-grow, overflow-y-hidden)
하드 코딩으로 일단 UI에 필요한 아이콘 싹 불러다가 대충 각 잡아놓고, 이제 기능 관련된 거 생각하면서 다시 구현하는 타입인데, 이번 네비 할 때 싹 지우고 싹 넣고를 너무 많이 해서 고민이다.
ui.... 그게 뭔데... 하고서 기능하고 ui를 차근차근 들어갔으면 이렇게 목업을 안 해도 됐을 거 같기도 하고. 협업하는데 보여주는 형식인데 이렇게 가는 게 맞는가 싶기도 하고 ! ^.^... ㅎㅎ 아무튼 고민이다!
어쨌든 이건 천천히 고민해봐야 할 문제 같고 일단 기능 만들기로 한다.
그 도중에 생각했던 거
1. 리액트 아이콘이 뭔 타입이지
2. 라우터 푸쉬 써야겠군
3. 최상단 레이아웃에선 보이는데 근데 다른 곳에선 안 보이느.... 어?
이어서 per-page layout 에서 딱 막혔던 게 결국 다시 돌아왔다.
여담 ) 최상단 레이아웃 먼저 만드는데 넥스트에서 진짜 계속 헷갈리는 거는 닭이 먼지인지 달걀이 먼저인지 도통 이해할 수 없다는 거다. 지금은 오류 나면 일단 아 이거 여기서 하는 게 아니라... 하고 생각하다보면 어떻게저렇게 옮겨놓으면 오류가 안나서 진행 된다....
--
=> 상태가 아니라 속성 넣어서 레이아웃 해결 ... ing.... 중에 만난 오류
아무리 해도 안 되는데 속성 잘 넣어준 거 같은데 하다가 최상단에 layout.tsx 두 개 인 것 발견 합쳐도 안 되길래 왜일까 고민
=> 캐시 문제인가 .next 지우고 다시 해본다.
=> 최상단 루트 레이아웃 남겨놓고 (home)으로 넣어서 layout, page 넣어 놓기 해결 완료
트러블 슈팅
useRouter
useRouter 때문에 오류 났다.
import { useRouter } from 'next/router';
진짜 웃긴 게 아직 함수 onclick에 넣지도 않았는데 오류가 떠서 오잉 했던 상황ㅋㅋㅋㅋ 넥스트 다뤄본 경험이 아직 미비해서, 아직 안 썼다고 이러는 거야?ㅠㅡㅠ 등등 약간 서러워짐 (3분)
어쨋든 함수 문제는 아닐 거고, 터미널에도
라우트 어쩌고 저쩌고 해서 알아본 결과,,, 임포트가 잘못된다고 한다!!!
import { useRouter } from 'next/navigation';
이거란다. ^-^... o..kay...!
usePathname
짱이당
테일윈드 조건부 스타일링
이번엔 아 맞다 이슈
className={`flex flex-col items-center cursor-pointer ${activeIndex === index ? 'text-primary-brownbrown-color' : 'text-black'}`}조건부 할 때 템플릿 리터럴 쓰기 때문에 classNaem="" 이 아니라 className={어쩌고 ${ ? '' : ''}}
쓰인다.
오늘의 회고록. 아니 일기.... (아침에 씀)
진짜 이상한 것이 왜 벌써 7월 22일일까? 밥 먹고 코딩 하고 밥 먹고 코딩하니 벌써 7월 22일이다. 평일이면 매일 TIL을 쓰는데도 날짜 감각이 없다. 진짜 신기하다............ 날짜가 그냥 숫자다. 그냥 바꾸는데 어라 22일 하고 깨달았다.... 토일이 지나면 숫자를 +3 한 만큼 바꿔야 한다. 무슨 소린지 나도 모르겟다. 월요일은 졸리다. 하지만 월요일 조아~
오늘의 PR
