권용휘

에디터를 선택하기 위해 다양한 옵션을 검토해보았습니다.Toast UI, Editor.js, CKEditor 등 여러 에디터가 있었지만, 결국 Tiptap을 선택하게 되었습니다.그 이유는 무엇보다 커스터마이징이 자유롭고 확장성이 뛰어나며, React 환경과의 호환성이 매우 우수했기 때문입니다. 초기에는 이미지를 업로드할 때 FileReader를 사용하여 이미지를 base64로 인코딩한 후 에디터에 삽입하는 방식을 사용했습니다. 하지만 실제로 작성 중에 WYSIWYG → HTML → WYSIWYG으로 모드를 전환하는 과정에서, 이미지의 base64 인코딩 문자열이 너무 길어지면서 이미지 태그가 사라지는 문제가 발생하였습니다. 이 문제를 해결하기 위해, 이미지 선택 시 백엔드 서버에 S3 업로드를 요청하고, ..

Next.js로 개발한 프로젝트를 배포하려면 Docker와 Node.js를 사용해서 배포하는 게 가장 일반적이다. 특히 대규모 서비스나 클라우드 환경에서는 Docker가 거의 표준이기 때문에 이 방식을 익혀두는 게 좋다. 하지만 꼭 Docker만 있는 건 아니다. 다른 방식도 있으니 한 번 정리해보자. ■ Next.js 배포 시 Node.js가 필요한 이유Next.js는 기본적으로 React 기반의 프레임워크이지만, 정적 사이트가 아니라면 서버 환경에서 실행될 필요가 있다. 이때 Next.js의 서버사이드 렌더링(SSR)과 API Routes 기능을 사용하려면 Node.js가 필수적이다.Node.js가 필요한 이유:Next.js의 SSR(Server-Side Rendering) 기능을 실행하기 위해 필요..

Next.js 14를 사용하면서 상태 관리(useState)에서 setDto와 같은 업데이트 함수에 다양한 DTO 객체를 넘겨줘야 하는 상황이 있었다.예를 들어, 배너 관리, 팝업 관리, 공지사항 관리 등 각기 다른 DTO가 존재했기 때문에, 이를 재사용 가능한 컴포넌트로 만들고 싶었다.처음에는 setBannerDto, setPopupDto, setNoteDto 등 개별적인 상태 업데이트 함수를 각각 넘겨줘야 했기 때문에,"이거 그냥 any 쓰면 되지 않나?" 하는 생각이 들었다.하지만 TypeScript에서 any를 사용하는 것은 권장되지 않는 방법이었다.실제로, TypeScript 공식 문서에서도 any를 사용하면 타입 안전성이 사라지기 때문에 최대한 피하라고 권고하고 있다.📌 출처:- TypeSc..