React

[TIL/React] 2023/08/28

문제 정의 🟠어느 페이지를 가도, width가 900px 이하가 되면 우측 화면이 깨졌다. 문제 해결 접근 방식 🔵'어느 페이지를 가도'라는 말에서 layout에 관한 코드에 문제가 있음을 인지했고, 'width가 900px 이하'라는 말에서 디버깅의 대상을 구체화

2023년 8월 28일1min read

문제 정의 🟠

어느 페이지를 가도, width가 900px 이하가 되면 우측 화면이 깨졌다.

문제 해결 접근 방식 🔵

'어느 페이지를 가도'라는 말에서 layout에 관한 코드에 문제가 있음을 인지했고, 'width가 900px 이하'라는 말에서 디버깅의 대상을 구체화했다.

하지만 기존 파일에서는 이미 여러 코드가 유기적으로 상호작용하고 있었기에, 디버깅이 어려울 것이라고 판단했다. 그래서 최소한의 기능만을 오롯이 갖춘 '최소 오류 모델'을 만들었다.

최소 오류 모델 🟣

기존 오류를 그대로 구현했다. layout의 기능을 테스트할 수 있는 가장 작은 단위의 파일이다. Footer에서 미디어 쿼리를 사용하는 부분이 누가 봐도 수상하다.

padding에 관한 코드를 삭제했다.

내 프로젝트 적용 🟢

근데 왜 내 프로젝트에는 반영이 되지 않는 것일까? 코드를 거지같이 작성한 죄로 내일은 전체를 다 갈아엎어야겠다. 갈아엎기 먼저 성공하고, 시간 남으면 딥다이브 읽는 걸로! 복학 전 최고의 선택이 되기를...