문제 모모프로젝트에서 위 사진과 같은 원인 모를 빈 공간이 있어 css 문제인가 싶어 온갖 방법을 써보았지만 해결을 할 수 없었습니다. 게다가 상세페이지에서만 생기는 현상이기에 도무지 원인을 찾기 힘들었는데요, 리팩토링을 진행하면서 계속 신경쓰이는 부분이었는데 프로젝트 종료 한달 반이 지나서야 그 원인을 찾을 수 있었습니다. 원인 글 상세 페이지에서는 공통 컴포넌트인 세미헤더에 별도의 링크가 걸린 글자를 넣어주었습니다. 이때 세미헤더의 일관적인 스타일을 가질 수 있는 prop으로 들어가는 글자가 아니라서 고정된 글자의 너비크기를 가지는 다른 페이지와 달리 글 상세 페이지에서만 이런 현상이 나타났었던 것입니다. 그리고 이 원인을 찾기 어려웠던 또 다른 이유는 조금 더 깔끔하게 보이기 위해서 ::-webki..
문제 경고창에 태그 안에 태그가 있다는 경고문이 떴습니다. 메인 페이지에 접속하자 마자 뜬 오류라서 메인 페이지 코드부분을 살펴보았습니다. react-router-dom의 Link 컴포넌트는 랜더링될때 요소로 변환됩니다. 태그로 정의된 styled component가 Link 컴포넌트안에 위치해 있어 위와같은 오류가 발생하였습니다. 해결방법 당연하게도 둘 중 하나를 제거하면됩니다. 저는 SPA의 특성상 새로 고침이 되는 태그보다는 부드러운 화면전환을 하는 Link 컴포넌트를 사용하여 오류를 없애주었습니다.
소문자 어쩌구 에러 Warning: React does not recognize the isVisible prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isVisible instead. If you accidentally passed it from a parent component, remove it from the DOM element. 무슨 뜻 인가요? 리액트는 DOM 요소에서 isVisible property를 인식하지 않는다. 만약에 의도적으로 사용자 정의 속성으로써 DOM에 표시하려면 isVisible 대신 소문자 스팰링을 써라. 만..
지난번 리팩토링 글에서 서버에서 받아온 데이터를 redux로 관리하는 대신 react-query의 캐싱기능으로 상태관리를 해주었는데요 여기서 redux의 useSelector처럼 useQuery를 커스텀 훅으로 만들어 return 값을 사용했습니다. const { myData, isLoading, error } = useMyInfo(); 두 번 실행되는 콜백함수 해당 커스텀 훅은 유저의 정보를 리턴합니다. 모모의 홈페이지에 들어갔을때 1. 유저의 프로필사진과 닉네임이 필요한 컴포넌트 2. 유저의 지역 정보가 필요한 컴포넌트 이렇게 두 개의 컴포넌트에서 커스텀 훅이 실행이 됩니다. 저는 커스텀 훅을 여러번 호출이 되어도 캐싱된 데이터가 있으면 네트워크 요청이 한번만 가므로 콜백함수가 한번만 실행이 될 것이..
React.js 앱이 localhost에서 정상 작동하나 Netlify 배포 후 url 창에 경로를 직접 적어주면 위 이미지와 같은 오류페이지를 볼 수 있었습니다. trobleshooting tips 페이지에 따르면 오류의 원인은 CRA같은 SPA은 각 경로별로 별도의 html 페이지를 받아오는 것이 아니라 JavaScript를 통해 네비게이션을 처리하며 필요한 데이터만을 가져와서 새로운 내용을 화면에 업데이트 합니다. 이런 네비게이션 과정은 브라우저의 url이 변하더라도 실제 페이지 전환이 일어나지 않는 특징을 가지고 있습니다. 그래서 서버(netlify)는 route를 처리하는 방법을 알 수 없으므로 서버에 올바른 리다이렉션 규칙이 없으면 사용자가 특정 경로로 직접 접근했을 때 페이지가 정상적으로 표..
상황 pages폴더 안에 있는 컴포넌트들을 app.js에서 import하는 과정에서 오류가 났다. 에러코드 Module not found: Error: You attempted to import ../pages/PT which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 원인 CRA에서 import로 엮인 파일들의 컴파일은 src 파일 안에서만 이뤄진다. You can either move it inside src/ pu..
