(10) 블로그 만들기 - 웹 에디터,Quill

블로그에서 글을 쓸 때 웹 에디터를 사용하기 위해 Quill 을 사용해 보겠습니다.

 

설치해 줍니다.

 

설치가 안되네요? 종속성충돌 이라는거 때문이라고 합니다.

뒤에 --legacy-peer-deps 를 붙여서 입력해줍니다.

 

저는 어떤 천재분께서 작성해주신 코드를 보고 작성했습니다.

 

몰랐던 부분만 적어가며 해보겠습니다.

 

useRef 는 특정 DOM 을 선택할 때 사용합니다. 또한 컴포넌트 안에서 조회 및 수정 가능한 변수를 관리하는 용도로도 쓰입니다. useRef 로 변수를 관리하면 그 변수가 업데이트 된다고 해도 리렌더링이 되지 않습니다.

 

useMemo 는 성능최적화를 위해서 연산된 값을 재사용하는 기능을 가진 함수라고 합니다. useMemo 함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토리 함수, 두번째는 기존 결과값 재활용 여부의 기준이 되는 입력값 배열입니다.

 

.setAttribute() 는 선택한 요소의 속성 값을 정합니다.

 

.click() 은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성이다.

 

.append() 선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가한다. 

 

 

 

이미지가 좀 어렵다 공부할게 많아서 일단 html-react-parser npm 을 설치해 출력할 때 입력한 모양 이 나오게 하였다.

정상 작동된다.

글씨 크기가 적용이 안되었다.

 

DB에 저장된 값을 보니 글자 크기를 CLASS 로 정의해서 스타일 적용하는 거 같다. 그래서 parser npm 이 인식을 못하는듯하다.

quill.snow.css 에서 폰트사이즈를 정의해 놓은 부분이다.

그냥 나도 클래스 정의해서 따로 폰트사이즈를 적용해야겠다.

 

잘 작동된다. 제대로 된 방법인지는 모르겠지만

 

이제 이미지가 문젠데... 오늘은 이미지를 업로드하는것이 목표이다.

 

하나하나 다시 해보자

 

formData.append('key','value') -> append를 사용하여 key/value 쌍을 추가할 수 있다.

기본적으로 formData 객체를 생성하고 거기에 formData로 넘길 것들을 append 로 더해준 후

ajax로 넘겨만 주면 된다.

 

코드에서 toolbar 의 handlers 부분을 주석처리하면 업로드한 이미지가 에디터에 보이는데 주석처리안하면 안보인다.

imageHandler 함수안의 내용을 주석처리해도 잘 보인다.

그럼 함수안에서 뭔가 일어났다는 것인데...

 

이 코드를 이곳저곳에서 보고 따라쓴거라 이해를 잘 못했다.

이해해보자

 

일단 Toolbar 의 이미지를 클릭하면 만들어 놓은 imageHandler 함수가 실행이 된다.

*const input = document.createElement('input')

: createElement 메소드로 input 요소를 만들어 반환한 후 input 에 지정

 

*const formData = new FormData();

: formData() 생성자로 새로운 fromdata 객체를 만든 후 formData 에 지정

 

*input.setAttribute('type','file') & input.setAttribute('accept','image/*')

:setAttribute 로 input 요소에 type=file, accept='image/*' 속성을 준다

accept 속성은 서버로 업로드 할수 있는 파일의 타입을 명시한다. image/* 은 모든 이미지 파일이 허용됨을 뜻함

 

*input.click()

: input 에서 클릭이 사용될 때 엘리먼트의 클릭 이벤트가 실행된다.

 

이해가 안가는게 input 요소를 만들어서 어디에 배치도 안했는데 toolbar의 이미지 요소를 클릭하면 만든 input 요소에 파일이 들어간다는 것이다. 왜지!

 

내가 모르는 뭔가가 있나보다

 

그아래는 파일이 업로드 되면 파일을 formdata 안에 넣는 코드이다.

 

한번 formdata 를 서버쪽으로 보내보자

 

글이 중구난방 뭔 이야기 하는건지 모르겠지만

내 심리 상태이다 그래도 좀 쉬고 와서 좀 편안해졌다

 

다시다시 시작해보자

 

formdata 는 console.log로 찍어도 표시가 안된다. 그래서 저렇게 해야지 보인다

formdata 안에 잘 들어갔다.

 

이제 이걸 axios 를 사용해 server 쪽으로 보내보자

server 에선 multer npm을 이용할 것이다.

 

 

server 쪽에서 console.log(req.body) 했을 때 저렇게 나온다.

formdata 가 {} 나오는거 일단은 그냥 넘어가자.

 

-----------------------------------------------------------------------------------------------------------------------------------

이틀동안 팀프로젝트를 하느라 잠시 손을 놨었다.

팀 프로젝트에선 마켓컬리 홈페이지를 비슷하게 만들고 있는데 나는 프론트를 맡고 있다.

프로젝트 하면서 많이 배우는거 같다.

 

다시 글에디터를 손봐보자... (팀프로젝트에서 한문제를 2일동안 고생했는데 해결하자마자 다시 고생... ㅜ)

 

다시 시작

 

하려는데 좀 살펴보자마자 머리가 아프다

 

quill 을 내가 만든게 아니라 그런건지 이해가 안간다. 에디터를 직접 만들던가 해야지

 

지금 까지 이해한 거로는 image toolbar를 선택해서 이미지를 넣으면 변화를 감지해 formdata를 만들고 속성을 부여하고 server로 보내고 server 는 받아서 저장하는것이다.

 

문제는 formdata 가 제대로 보내졌는지를 모르겠다는거다

 

먼저 테스트하기 위해 jsx 안에 input type file 을 만들어 파일에 서버를 보내봤는데 서버쪽에서 console.log(req.file) 했을 때 잘 나왔다 하지만 같은 방식으로 quill imagehandler 에 적용했을 땐 보이지 않았다.

 

오 됐다.

 

multer 에서 upload('avatar') 이부분의 인자를 formdata 의 속성이름과 같게 해야했던거다

 

드디어 서버에서 formdata 를 받아왔다~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

행복 ㅜㅜ

폴더안에 저장도 잘 되었다.

 

이제 이걸 에디터 내부에 출력해야한다.

 

커서로 선택된 곳의 위치를 받아와 저장된 파일의 url 을 img 태그안에 삽입하면 되는거 같다.

 

일단 서버에 post 할 때 서버에서 파일의 path를 보내주도록 하겠다.

 

 

 

프론트에서 받은 파일 path

 

이곳저곳에서 본 후 코드를 작성하였다.

 

ㅜㅜㅜㅜㅜ 된다.

 

아 오늘은 여기까지 해야겠다. 너무 뿌듯하구만

다음엔 저장하고 지금까지 만든걸 aws 로 구동하게 해보겠다.

 

아 뿌듯! 뿌듯뿌듯!