[22.12.22] TIL

프로젝트 기간

 

 

 

이번에 만들 프로젝트 : 붕어빵 가게 찾아주기 웹사이트

 

참고 웹사이트 : https://holaworld.io/

 

들어가는 기술 : redux thunk, styled-component, router, json-server

 

내가 만들어야 할 것 : 글쓰기 페이지, 글 수정 페이지

 

 

...............아..이걸 오또케 만들지..?

UI를 꾸미기 전, Web Editer를 사용해보고 싶었다.

그래서 찾아본 결과 Toast Editer를 많이 사용하고, 리액트에서는 React Quill 을 많이 사용한다고 한다.

일단 시작을 위해 https://github.com/zenoamaro/react-quill#quick-start 사이트로 들어가 적용하는 방법을 찾았다.

적용 방법은 너무 쉬웠다.

React Quill 설치

yarn add react-quill --save

React Quill 적용 방법

/components/Editor.jsx

import React, {useState} from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default function Editor() {
  const [value, setValue] = useState('');

  return <ReactQuill theme='snow' value={value} onChange={setValue} />;
}

theme : 이건 테마인데, snow, bubble, custom 버전이 있었다.

custom은 내실력에는 어려울 것 같고..

snow가 기본기능이 들어가 있었다.

bubble은 textarea태그에 border만 없앤 느낌이라 별로였다.

 

 

/node_modules/react-quill/dist/quill.snow.css

찾아보니 이런 파일이 있다.

보니 여기서 스타일을 지정해주면 될 것 같은데 뭘 손대야될지 모르겠는데;;

기본기능은 만족하는데 style 적인게 문제가 있다.

 

 

height이 맘에 안든다.. 좀 길게 지정하고, 길어지면 스크롤바를 생기게 하고싶은데 어디에 적용해야될지 모르겠다.

그래서 개발자도구로 찍어봤다.

container를 찾아보면 될 것 가다.

이건 찾아서 내가 height를 700px로 바꿔봤는데 여전히 적용이 안된다.

 

안되는 이유를 찾았다.

nodemodules 폴더 안에 있는 것들은 건들이면 안되는 것이였다.

그럼 어떻게 수정을 하느냐, 그냥 css에 적용시키면 된다.

GlobalSylte.jsx 파일을 만들었기 때문에 그곳에 적용시켜주면 되는데, 이것보다 더 좋은 해결책을 찾았다.

src/components/Editor.jsx

import React, {useState} from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default function Editor() {
  const [value, setValue] = useState('');

  return (
    <ReactQuill
      theme='snow'
      value={value}
      onChange={setValue}
      style={{height: 700}}
      placeholder={'내용을 입력해주세요.'}
    />
  );
}

style을 이렇게 props 해주는 형식으로도 가능했다.

그 외에 많은 소품이 있는데 천천히 찾아보기로 한다.

글쓰기 UI 완성

 

근데 이걸 Submit하면 어떻게 Server에 저장할 수 있을까?

 

그건 내일 구현해보도록 하겠다..