NextJS
-
NextJS + StyledComponents : Font Flickering Issue (최초 로딩 시 폰트 깜빡임 문제 해결)frontend/오답노트 2022. 8. 31. 14:26
문제 : NextJS와 StyledComponents로 작업한 프로젝트에서 createGlobalStyle 이라는 StyledComponents의 함수를 사용하여 전역 폰트를 지정하였을 때 폰트 깜빡임 현상이 발생 - GlobalFonts.tsx import { createGlobalStyle } from "styled-components"; const GlobalFonts = createGlobalStyle` @font-face { font-family: 'NotoSansKR'; src:local('NotoSansKR'), url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/assets/fonts/NotoSansKR-Black.woff..
-
[ReactJS] Styled Components (CSS IN JS) 적용 및 사용법 ( 부록 : NextJS + TypesScript 환경 적용 및 사용법 )frontend/react&next 2022. 3. 3. 16:30
웹 프론트엔드 개발 시에 CSS를 적용하는 방식으로는 CSS IN CSS , CSS MODULE, CSS IN JS 등 다양한 방식이 있습니다. 프로젝트의 성격에 따라 구현하는 방식은 다르겠지만, 오늘은 Styled Components ( CSS IN JS )에 대해서 알아보겠습니다. 우선 Styled Components 를 사용하기 위해서는 가장먼저 스타일 컴포넌트 모듈부터 설치해야 됩니다. 0. Code Snippet 설치 필수는 아니지만 스타일 컴포넌트가 문자열 처럼 그냥 쭉쭉 나오면 매우 불쾌지수가 올라갑니다. 익스텐션 제가 쓰는 걸 알려드리자면 vscode-styled-components 입니다. 해당 스니펫이 아니더라도 꼭 깔고 작업하시는걸 추천..또 추천드립니다. 1. styled-compo..
-
[NextJS] Tiptap(WSIWYG Editor) - NextJS 문서 편집기(Rich Editor) 구축기frontend/react&next 2022. 3. 2. 16:32
매일 개인 개발을 할 때 글 쓰기를 만들 때 내 입맛대로 만들고 싶을 때 어떤 에디터를 사용할까라는 고민을 정말 많이 해왔던 것 같습니다. 저 또한 Quill, CK, TUI, Editor, TinyMCE 등 많은 에디터 들이 있지만 그 중에서 가장 제가 원하는대로 깔끔하게 커스텀 가능했던 에디터를 소개해드릴려고 합니다. Vue이용자들은 Tiptap에디터를 꽤 많이들 사용하는 것으로 알고 있습니다. Tiptap의 가장 큰 장점은 다양한 프레임워크 지원이 아닐까 싶습니다. Vue, React 뿐만 아니라 Nuxt, Next 등의 SSR에서의 환경을 제공한다는 것은 매우 만족 스러웠습니다. quill을 이용했을 때는 매번 dynamic을 써서 어거지로 넣었던 기억이 있습니다. 이 에디터는 매우 강력하고 스타..
-
[ReactJS] React Query + IntersectionObserver = Infinite Scroll Paging(리액트 쿼리 + 옵저버 = 무한 스크롤 페이징)frontend/react&next 2022. 2. 24. 14:53
최근 Client State와 Server State관리에 대하여 많은 Redux에 Redux Saga등 덕지덕지 붙으며 본연의 클라이언트 상태관리의 의미가 퇴색되고 서버측 상태(API데이터 등)이 주가 되고 있어서 이런 구조적 문제를 타파하고자 Client Side(Mobx , Recoil) 등과 React Query를 이용해서 작업하는 경우가 참 많은거 같습니다. 저 또한 하나의 기능을 만들기 위하여 과하게 작업되는 경우가 많은거 같아서 Redux + Redux Saga로 작업되는 개인 프로젝트에서 이 구조를 버리고 Recoil + React Query(리코일 + 리액트쿼리)로 작업하였는데 작업 중에 Infinite Scroll(무한스크롤)을 구현한 케이스가 있어서 이를 공유하고자 글을 써봅니다. 잡..
-
NextJS : document is not defined 오류frontend/오답노트 2022. 2. 15. 17:30
문제 : document is not defined Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 해당 시점에 document에 접근하려고 하면 접근할 수 없어서 에러를 뱉어내게 된다. 해결방안으로는 다음과 같다. 해결방법 : function getCookie = (user:string) => { if(typeof window !== 'object') return; let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)"); return value ? value[2] :..
-
NextJS : Prerendering 쿠키 접근시 오류frontend/오답노트 2022. 2. 15. 17:23
문제 : NextJS getCookie의 값으로 화면 렌더링시 발생가능 문제 Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 그렇기 때문에 프리렌더 과정에서 쿠키에 직접접근하여 데이터를 읽어서 화면을 구성하려하면 문제가 발생한다. 해결방법 : const [user, setUser] = useState(); useEffect(()=>{ setUser(getCookie("user")); },[]); 위와 같이 Mounted시점에 쿠키에서 받아서 user에 할당하여 주면 해결할 수 있다.