Front-end/React
-
React HOC (Higher Order Component) 디자인 패턴Front-end/React 2023. 12. 5. 00:33
Loado V2 (https://loado-v2.vercel.app/) 로스트아크 시세확인 및 재련시뮬레이션 프로젝트를 진행하면서 여러 타입의 input을 만들어야 할 이유가 있었습니다. 프로젝트 화면 이 프로젝트에서 따로 개발해야 할 Input 컴포넌트는 아래와 같습니다. InputDefault -> 기본 input 컴포넌트 InputDefaultNumber -> 숫자만 입력받을 수 있는 input 컴포넌트 InputSearch -> input안에 검색 아이콘이 있는 input 컴포넌트 InputWithIcon -> input과 여러 아이콘을 조합할 수 있는 input 컴포넌트 기본적으로 Semantic UI React라는 UI library를 base로 따로 customizing하여 컴포넌트를 개발했..
-
Slack에서 쓰는 에디터를 비슷하게 구현해보자 (drag & drop포함)Front-end/React 2023. 1. 8. 19:06
React-Quill을 이용하여 Slack의 editor 구현해보기 (Nextjs) 게시판 글쓰기, 댓글, 건의사항 작성, 등 이런 기능들을 개발할 때 간단하게 textarea로 개발할 수 있지만 이미지, 링크, 코드에디팅 등의 기능이 필요한 경우 별도의 에디터가 필요한 경우가 많습니다. 직접 개발할 수 있지만 보통은 library를 이용해서 개발을 진행합니다. 여기에선 react-quill 라이브러리를 이용한 방법을 공유합니다. 그러나 다른 에디터의 경우는 모르겠지만 react-quill의 경우 보통 이미지를 copy+paste를 진행하면 아래 이미지처럼 에디터 내부에 이미지가 들어갑니다. 이런 상황이 발생하면 에디터 내부가 어지럽고 이미지가 좀 클 경우 에디터의 높이가 증가할 수 있습니다. 아래 그림..