회사 사이트 블로그  컨텐츠안에 텍스트 에디터로 React-Quill 을 사용중입니다. 발생한 오류들의 해결방법만 먼저 말하고 자세한 오류 내용과 이유는 뒤에 나옵니다. 만약 React-Quill을 사용중이고 텍스트 에디터의 toolbar 를 position : sticky 또는 position : fixed 를 주었을 때 생기는 오류는Quill 의 scrollingContainer 속성에 "html" 값을,ql-clipboard 에 아래와 같은 스타일 값을 입혀주면 해결 가능합니다.  작성중인 텍스트 에디터의 내용이 길어질 경우우리가 텍스트 에디터의 최대 높이값을 따로 지정해 주지 않는다면 브라우저의 높이값이 늘어나 브라우저에 스크롤이 발생하게 됩니다. 그럼 최대 높이값을 지정해주면 되지 않느냐 하지만..

React 로 만들어진 페이지에서 게시판이나 카테고리의 글 등이 나타나기 전 "로딩중..." 또는 이미지로 progress bar 가 나타나는 경우가 존재한다. 데이터를 서버로 부터 받아오기 전 비어있는 페이지, 또는 데이터를 받아온 후 레이아웃이 변경되며 페이지가 전체적으로 덜컥거리는 현상을 React Suspension 로 감출 수 있다. 일반적으로 데이터를 불러와 component 에 뿌리고 싶을 때 일반적으로 아래와 같이 코드를 작성한다. const [work, loading] = fetch data('/work') if (loading) { return } return loading 변수에 지정된 값이 true 라면 로딩중을 나타내는 식으로 말이다. 이부분을 React 의 Suspense 로 최..

리엑트를 공부해보다 직접 앱을 하나 만들어보며 배우면 기억에 더 남겠다는 생각이 들었다. 사용할 핵심 기술은 useState, useEffect, useRef, scss, rest api 등 이다. Extension 은 prettier 와 es-lint 를 사용했다 구조는 src components CreateDays.js CreateWords.js DayList.js Days.js Header.js Word.js LinkError.js data hooks img App.js App.scss index.js ... 로 간단하게 구성했다. styled components 를 사용해 볼까 했지만 scss 문법을 연습중이기에 css는 App.scss 파일하나로 작업을 진행했다. App.js 코드다. 배포까지 ..