2023.08.29
오늘의 회고
spotshare 작성기능이 끝나간다. 내일 지도api를 맡아주신 팀원과 병합하고 완성하자.
Quill 이미지 크기조절
Quill를 사용하면 게시물에 이미지도 넣을 수 있다. 사용자가 작성 중에 이미지의 크기를 조절하면 좋을 것 같아 구글링해 보았다. quill의 이미지 조절 모듈을 설치해 사용했더니 문제가 생겨 다양한 모듈을 설치해 보았다.
quill-image-resize-module-react
처음 설치해 봤던 모듈은 quill-image-resize-module-react
yarn add quill-image-resize-module-react
문제는 import에서 부터! 타입에러가 생기면서 import되지 않았다.
@looop/quill-image-resize-module-react
두번째로 설채했던 @looop/quill-image-resize-module-react
npm install @looop/quill-image-resize-module-react
똑같이 import 문제!
Quill Image
마지막으로 설치했던 모듈이다.
npm install @xeger/quill-image-actions --save-prod
npm install @xeger/quill-image-formats --save-prod제발되라 하고 import해본 결과. 정상적으로 import가 되었다.
import { Quill } from 'react-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';
Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);문제는 이미지 사이즈 조절은 안되고 정렬 기능만 추가되었다. 구글링 해보니 사이즈 조절은 formats에 'height', 'width'를 추가해야 한다.
import React from 'react';
import ReactQuill from 'react-quill';
// github 예시코드의 float는 이미지의 정렬
// 이미지의 크기조절을 하고 싶을 땐 'height', 'width'를 추가!
const formats = ['align', 'float','height', 'width'];
const modules = {
imageActions: {},
imageFormats: {},
toolbar: [
[{ 'align': [] }],
['image'],
['clean']
]
};
export const Editor(): React.FC = () => (
<ReactQuill
formats={formats}
modules={modules}
theme="snow"
/>
);Quill 읽기
Quill로 작성된 html를 화면에 뿌려주자.
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.bubble.css';
// editorHtml은 서버에서 가져온 html이다.
<ReactQuill readOnly={true} theme="bubble" value={editorHtml} />기술면접
질문 - Async/Await와 Promise의 차이에 대해 설명해주세요.
키워드
콜백 헬(callback hell)
Async/await 코드 스타일에 이점
Async/Await와 Promise는 콜백 헬을 방지하기 위해 생긴 기능입니다.
Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이고
Async/await는 ES2017부터 도입된 개선된 문법입니다.
Async 함수 내에서 await를 사용하여 Promise가 처리될 때까지
기다립니다.
CS스터디
- 질문 : 프로세스 생명주기에서 프로세스들의 상태들은 무엇이 있을까요?
- 답변 : 프로세스가 이제 막 메인메모리에 올라온 신규상태, 변수 초기화 등 기초 준비작업을 모두 끝내 실행을 할 수 있는 준비상태, CPU가 실제로 프로세스를 수행하고 있는 수행상태, 프로세스 도중에 I/O 작업을 수행하는 대기상태, 최종적으로 프로세스가 종료된 종료상태가 있습니다.
