Front-End/개발일지
![[React] Portal을 사용한 모달창 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNuJTC%2FbtrENIfoXsH%2FZQ4nJstbvvMfmlV8OrUgl1%2Fimg.png)
[React] Portal을 사용한 모달창 만들기
모달이란, 다이얼로그 실행 시 포커스와 제어권을 독점하여 다이얼로그를 종료하기 전까지 기존의 화면을 제어할 수 없는 기능을 뜻한다. 따라서 모달은 항상 화면의 최상위에 위치해야 하며, 모달이 열려있을 때는 기존 화면의 제어가 불가능해야 한다. 일반적인 방법으로 모달을 띄우는 방법은 다음과 같다. import Modal from './Modal'; const App = () => { const [isOpen, setOpen] = useState(false); const onClick = () => { setOpen(true); }; return ( open Modal ); }; export default App; 필요한 컴포넌트 안에서 모달 컴포넌트를 랜더링 하면 된다. 하지만 이 방법은 모달이 언제나 최..
Toast UI Editor 이미지 첨부하기
Toast 에디터는 따로 설정해주지 않아도 에디터에 이미지를 첨부할 수 있다. 기본적으로 이미지 파일을 첨부하면 이미지가 base64로 인코딩 되어 삽입되는데, 그 길이가 매우 매우 상당하기 때문에 base64로 인코딩 된 이미지 그대로 DB에 넣어준다면 문제를 초래시킨다. 위처럼 이미지 하나를 첨부한 뒤, getHTML()을 통해 contents를 살펴보면, 엄청난 양의 텍스트가 들어있는것을 볼 수 있다. (너무 길어 콘솔에도 다 찍히지 않는다😳) 그러므로 우리는 이미지 첨부시 로직을 바꿔줄 필요가 있다. addImageBlobHook을 사용하자 이미지 첨부 로직은 hooks 옵션의 addImageBlobHook 를 통해서 커스텀할 수 있다. 잠깐 구조를 살펴보면 export type HookMap =..
React 에디터로 TOAST UI Editor 사용해보기
프로젝트에 쓸 에디터 선정에 많은 고민을 했다. React 사용자들이 주로 사용하는 에디터를 조사해서 몇 가지로 추려내었다. 에디터 선정을 위한 기준은 다음과 같았다. 직관적인 UI 사용자가 개발자가 아니기 때문에 마크다운에 치중하지않은 wysiwyg 에디터가 필요했다. 주 사용언어는 한글이다. 따라서 한글에 맞춤화된 에디터가 필요했으며, 메뉴 설명 또한 한글로 되어있어야 했다. 표 첨부, 사진 첨부 기능이 있어야 했다. react-quill, summernote, Slate 등의 많은 에디터를 살펴봤고, 결론적으로 NHN사에서 제공하는 Toast Editor를 사용하기로 했다. 설치🛠 react에서 사용하기 때문에 리엑트 버전을 설치한다. toast-ui/react-editor npm i @toast-..
React로 타임라인 만들기 (+ 더보기 버튼)
타임라인은 일정 양의 데이터만을 로딩하고 사용자가 +read more버튼을 클릭하면 새로운 데이터를 끝에 추가로 로딩하는 방식으로 동작한다. 각각의 데이터들은 날짜별로 분류되어 있으며 최신 순으로 정렬되어있다. 내가 만들 타임라인의 구성은 다음과 같다. Timeline이라는 큰 틀 안에 날짜별로 분류된 HistoryList가 있고 각각의 기록들은 HistoryItem으로 나타낸다. 이 구성을 표현하기 위해서는 데이터들을 날짜별로 나눠서 재분류할 필요성이 있었다. 타임라인 로직 구성하기 일단 데이터를 어떤 방식으로 가져오는지 알아야 했기 때문에 twitter의 timeline api를 참고했다. 트위터에서는 두가지 방식으로 timeline 데이터를 가져올 수 있다. start_time과 end_time을 ..