고지은고

nextjs의 Image 태그를 사용하며 겪은 에러 핸들링에 관한 기록을 남겨보려 한다 1. 정적 이미지 Image src로 사용할 경우 Unhandled Runtime Error Error: Failed to parse src '이미지 파일명' on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) Image 태그에 src로 들어가는 파일명이 'image.png' 이런 형식이었는데, 정적 이미지를 사용할 땐 앞에 / 표시를 붙이거나 상대적인 url이 필요하다는 에러였다. 기존의 Image 태그에는 data?.image 였다면 이를 템플릿레..

localStorage는 저장, 변경, 삭제 등 모든 동작이 동기적으로 실행된다. URL의 쿼리스트링으로 존재하는 code를 nextjs의 router.query 를 객체구조분해를 이용하여 가져왔다 이후 useEffect가 실행될 때 쿼리스트링의 code 키,값을 가져와서 localStorage에 저장하려는 의도였다 예상과 달리, localStorage에 값이 들어가지 않아 useEffect안에 router.query를 콘솔로 찍어보니 빈 객체 { } 가 출력되었다 이는 nextjs에서 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아 query값을 콘솔에 찍어도 빈 객체로 나오기 때문이었다 (= 정적 파일 최적화) Next.js@10.0.5 이후 버전 router.isReady 라우터 필드가 ..

리액트를 접하면서 불변성 개념에 대해 알게 되었다. 리액트 네이티브도 역시나 불변성을 지켜가면서 변화를 줘야 한다. 불변성을 지킨다는 것은? 객체 및 배열을 직접적으로 수정하지 않는다는 말이다. 즉, 기존 객체는 내버려 두고 새로운 객체를 만들어서 새로운 객체에 원하는 값을 덮어씌워야한다 왜 불변성을 지켜야 할까? 렌더링 성능 최적화 방식 때문이다. 리액트에서 부모 컴포넌트가 업데이트될 경우, 그 밑의 자식 컴포넌트도 전부 업데이트(리 렌더링)된다. 이는 변경사항이 따로 없음에도 자동적으로 함께 리 렌더링이 된다. 만약 컴포넌트에서 처리하는 데이터 및 연산량이 많을 경우에는 이러한 성능 최적화에 더욱 신경을 써야 한다. 리액트의 Virtual DOM이 Props의 변화를 감지하기 위해, 이전의 Props..

next.js error: cannot find module 'react' 프로젝트 진행하고 실행하는데 갑자기 에러가 발생하면서 react 모듈을 찾을 수 없다는 에러가 발생했다 응? 분명 react 설치했을 텐데.. 해서 구글링을 통해 github에 누군가 남겨놓은 해결방안을 따라 해 봤다 local에 react react-dom을 설치하라 해서 그대로 따라 했는데,, (이러면 안 됬었는데,,,) Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching versio..

클론코딩 강의를 참고하면서 나만의 개인 프로젝트를 실행시키고 있는 중이다 아무래도 페이지, 컴포넌트, 스타일링이 거의 다르기 때문에 강의에서 설명해주지 않는 부분은 내가 직접 찾아야 하는데 오늘 styled-component를 이용해서 styling을 어떻게 주는지에 대한 설명을 들었지만.. 만약 스타일링이 정의된 하나의 클래스를 만들어서 여러 요소에 적용시키고 싶으면 어떻게 하지?라는 의문이 생겼다 우선, styles 폴더를 생성한다. 그리고 styles폴더 안에 css파일들을 추가하면 된다 1. 모든 페이지에 공통으로 적용시키고 싶다면 global.css를 이용하자 폰트, body html * a 등.. 모든 페이지에 공통으로 적용되는 스타일링을 주고 싶다면? styles폴더 안의 global.css..

Next 공부를 하는 도중 콘솔 창에 엄청 길게 Warning: Prop className did not match 관련 에러가 발생했다 Next에서 styled-component를 사용하기 위해선 몇 가지 설정이 필요하다고 한다. 첫 페이지 로딩 시에는 별 문제없지만 새로고침 이후에 발생한 문제였다 이유인즉슨, Next.js의 경우 첫 페이지는 SSR, 그 이후에는 내부 라우팅을 통해 CSR을 하게 된다. 이때 서버와 클라이언트에서 생성하는 해시값, 클래스명이 달라지면서 생기는 콘솔 창 에러였다 여러 글을 찾아보니 바벨 플러그인 설정으로 해결이 가능한 문제였다 npm i -D babel-plugin-styled-components 터미널에 바벨 플러그인을 설치 후, 프로젝트의 루트에 .babelrc 파..