[💄 반응형의 괴롭힘]
rem, vw에 대해 제대로 공부해 본 적이 없어서 px로 반응형을 잡았던게 문제였다
다른 팀들 이야기를 들어보니 다들 px은 안쓴다고 하길래 귀 얇은 팀장인 나는 결국 뒤엎기로 했다
또한 layout을 짜고 global css를 세팅하는 내가 레이아웃 외 body부분의 기준을 잡아주고 시작했어야 했는데 그 부분도 간과했다.
덕분에 어제 팀원들이 작업한 login, signup, write 부분의 CSS가 똥이 됐다
'반응형 재밌겠다 어디 한 번 해봐야지~' 라고 생각했던 내 자신...
반응형 쳐다보기도 싫어졌다ㅠ
요즘 반응형 아닌 홈페이지가 없는데 큰일이다
수료하고 나서 반응형 개인적으로 공부 좀 더 해봐야겠다
결국 겨우겨우 반응형 구현에 성공했다
최대한 px은 피하고, vw rem %로 채웠다
사실상 계산기를 쓰기 보단 눈으로 하나하나 보면서 하다보니 시간이 더 오래 걸렸다
정적 페이지는 CSS가 너무 재밌었는데 지금은 흥미가 너무 떨어져버렸다ㅠ
[✏️ 알고리즘 공부의 필요성]
하필 우리의 디자인이 페이지별로 네비게이션, 헤더가 달라서 페이지 경로별로 하나하나 다 설정을 달리 해줘야했다.
처음엔 그냥 수업시간에 배운대로 includes를 써서 했는데 category는 layout이 적용되지만 category/bodyShape엔 적용되지 않는 문제에 부딪혔다
대체 뭐가 문젠지 아무리 생각해도 모르겠어서 일단 하드 코딩으로 다 넣어놨었는데,
생각해보니까 edit, detail page는 동적 라우팅이 들어가는 부분이라 하드 코딩으로 불가능했다
옆팀 알고리즘 천재분께 질문을 했고, 다행히 바로 내 자리에 오셔서 알려주셨다
같이 원인을 분석해보니 상단에 선언해 둔 주소에 includes 조건을 걸어 true면 layout을 보여줘! 라고 조건문을 걸어둬서 지정해둔 주소 외에 추가로 들어가면 false로 인식돼 layout 적용이 안되고 있었던 것이다.
반대로 조건을 지정해서 asPath에 includes 조건을 걸었더니 하드코딩 없이도 정상적으로 layout이 따단하고 나타났다!
말로는 설명하기 어려우니 코드로 기록해두기!
const CATEGORY_PAGE = "/codyList/category/";
const USER_INFO = [
"/signup/",
"/login/",
"/idFind/",
"/passwordFind/",
"/myPage/",
];
const categoryPage = router.asPath.includes(CATEGORY_PAGE);
const userInfoPage = USER_INFO.includes(router.asPath);============================================================
하루종일 layout과 싸웠더니 시간도 순삭되고 내 체력도 순삭됐다
그래도 다 하고 나니 어느정도 약간의 반응이 오는 반응형이 되었다ㅎㅎ
완벽한 반응은 안오는 반응형이랄까ㅎㅎㅎㅎㅎ
내일 1차 점검날이라는데 1차 점검을 30분이나 한다!
뭘 어떻게 하길래 30분이나ㅠㅠ
벌써 혼날 생각에 떨리네
체력이 다 떨어졌으니 오늘은 일찍 가서 쉬는걸로...
