전체 글
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-..
클린 코드(Clean code) Day 9
🔖 오늘 읽은 범위 : 10장 클래스 🙂 책에서 기억하고 싶은 내용을 써보세요. 클래스는 작아야 한다. 클래스 이름은 해당 클래스 책임을 기술해야 한다. 간결한 이름이 떠오르지 않는다면 클래스 크기가 너무 커서 그렇다. 클래스 이름이 모호하다면 책임이 너무 많아서이다. → 단일 책임 원칙 (Single Responsibility Principle) 단일 책임 원칙은 클래스나 모듈을 변경할 이유가 하나, 단 하나뿐이어야 한다는 원칙이다. 클래스는 변경하기 쉬워야 한다. 요구사항은 변하기 마련이다. 따라서 코드도 변하기 마련이다. 새 기능을 수정하거나 기존 기능을 변경할 때 건드릴 코드가 최소인 시스템 구조가 바람직하다. 이상적인 시스템이라면 새 기능을 추가할 때 시스템을 확장할 뿐 기존 코드를 변경하지는 ..
클린 코드(Clean code) Day 8
🔖 오늘 읽은 범위 : 9장 단위 테스트 🙂 책에서 기억하고 싶은 내용을 써보세요. 테스트는 유연성, 유지보수성, 재사용성을 제공한다. 테스트 케이스가 없다면 모든 변경이 잠정적인 버그다. ✔️ 깨끗한 테스트를 위한 다섯 가지 규칙 Fast🏃🏼 테스트는 빨리 돌아야 한다. 테스트가 느리면 자주 돌릴 엄두를 못 내고, 자주 돌리지 않으면 초반에 문제를 찾아내 고치지 못한다. Independent🧍🏼♂️ 각 테스트는 서로 의존하면 안 된다. 각 테스트는 독립적으로 실행할 수 있어야 하며 순서에 영향을 받지 말아야 한다. 서로에게 의존하면 결함이 발생한 원인을 찾기 힘들며 때로는 숨겨진다. Repeatable 🔄 어떤 환경에서도 반복 가능해야 한다. 실제 환경, QA환경, 네트워크에 연결되지 않은 환경에서도..
클린 코드(Clean code) Day 7
🔖 오늘 읽은 범위 : 7장 오류처리 🙂 책에서 기억하고 싶은 내용을 써보세요. 일일히 다양한 유형의 오류를 점검하는 방식 보다는 오류 발생시 예외를 던지자. Try-Catch-Finally 문을 사용하자. 먼저 강제로 예외를 일으키는 테스트 케이스를 작성한 후 테스트를 통과하게 코드를 작성하는 방법을 권장한다. 그러면 자연스럽게 try 블록의 트랜잭션 범위부터 구현하게 되므로 범위 내에서 트랜잭션 본질을 유지하기 쉬워진다. null을 반환하는것을 피하자. 사용하려는 외부 API가 null을 반환한다면 *감싸기 메서드를 구현해 예외를 던지거나 특수 사례 객체를 반환하는 방식을 고려한다. *감싸기 메서드 자바에서는 다양한 유형의 에러가 발생한다. 이 모든 유형의 에러를 잡기위해서는 catch문이 늘어나게된..