Next.js에서 라이브러리 적용 중에 window 객체에 해당 속성이 정의되지 않았다는 에러가 발생했다.
Next.js에서 라이브러리 적용 중에 window 객체에 해당 속성이 정의되지 않았다는 에러가 발생했다.
React는 CRA로 프로젝트 생성하면 jest가 포함되어 있는데, Next.js는 포함이 안되어있어서 따로 설치를 해야한답. js 관련 라이브러리 설치 2. package.json에 jest관련 설정 3. package.json – scripts에 test 추가 3. 테스트해보기 4. 성공!
프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc)
프로젝트를 빌드시키는 과정에서 eslint 에러가 발생했습니다. 이번 프로젝트에 처음으로 typescript를 적용해서 대비를 못했었네욥. 그럼 에러를 없애보도록 하겠습니다~_~ 라이브러리 설치 2. eslint 설정파일 수정 구글링을 통해 수정한 부분만 올려놨습니다. 이렇게 하고 빌드를 하면 성공!
SSR : SEO 최적화, 초기 구동 속보다 CSR보다 빠름 Next.js는 React기반으로 라우팅과 SSR을 간편하게 적용하기 위해 나온 프레임워크로 SSR이 필요한 페이지는 getServerSideProps를 이용하면 된다. 참고로 getStaticProps, getStaticPaths(였나) 함수도 있는데, 대부분 사용하지 않는다. 정적인 데이터나 화면을 사용할 경우엔 사용해도 된다. 사용하기 store, action, END, axios는 필수로 import한다. req.headers에서 cookie값을 가져와서 axios에 defaults값으로 설정한다. 기존에는 해당 역할을 […]
React의 러닝커브를 높이는 주범 ‘리덕스 사가’에 대해 간단한 개념과 예시를 정리하려한다. 까먹지말자 😮 Redux-saga란? Redux-saga는 리덕스의 액션을 dispatch하기 전에 해야할 작업들을 처리하는 미들웨어이다. Redux-thunk라는 미들웨어도 있지만, thunk는 여러개의 액션을 디스패치하게 해주지만, 그 외의 기능들은 모두 직접 구현해야 하기 한다. 그러나 Saga는 모두 effect로 구현해놔서 대부분 미들웨어로 saga를 사용한다고 한다. (Redux-saga는 Generator 문법을 기반으로 구현하기 때문에 […]
프레임워크 하나를 배울때마다 에러가 빵빵 터진다. 조용히 넘어가는 날들이 없다. Next.js에서 styled-components를 적용하려는데 SSR로 인해 style이 들어가기도 전에 렌더링이 되어버린다. 이럴 때는 일단 설치한다. 루트 디렉터리에 .babelrc를 생성한다. 3. pages에 _document.js를 생성해서 덮어쓴다.(_document.js가 index.hmtl) 해결이다. 진도 나가고 싶다. 오류 그만 터져라