더 많은 포스팅 보기 자세히보기

mobx 2

리액트 텍스트 에디터 구현기(WYSIWYG Editor)

대부분의 커뮤니티가 html을 기반으로 한 텍스트에디터를 사용한다. 그것은 당연하게도 렌더링할 때 서버에서 받아온 내용 그대로 출력하기에 용이하고, 그 이상의 요구사항이 필요 없기 때문이다. 하지만, 어느 서비스에서 특화된 컴포넌트를 보여주어야 하거나 모바일 앱과도 연계해야 한다면 어떨까? 이 순간 텍스트에디터는 진화하여야 한다. 만난계기 해당 요구사항의 웹 서비스를 구현해야 했는데 맨붕이왔다. 당연히도 그럴 것이 앱에서는 이미 독자 규격으로 컴포넌트형 콘텐츠를 사용한 커뮤니티가 서비스 중이었기 때문이다. Lead와 Delete는 받아온 데이터를 규격에 따라 컨버팅하고 맞는 컴포넌트에 렌더링하여 해결하였다. 문제는 역시 Create와 Update인데 얼마 남지 않은 개발기간 동안 텍스트에디터에 손대보지 ..

Nextjs에서 React Testing Library + Mobx 사용하기

서비스를 운영하다보면, 요구사항이 추가되거나 변경되는 경우가 많다. 그리고 어떤 환경에서 개발을 하더라도 테스트를 하던 코드를 실수로 커밋하거나 다양한 실수를 할 수 있다. 이를 해결하는 것이 테스트 코드를 미리 작성하여, 테스팅을 하며 개발하는 것인데 TDD에 대한 짧고 명확한 개념과, Nextjs에서 hooks과 testing-library/react와 Mobx와 TypeScript를 사용해본 방법을 작성해보았다. TDD 실패 개발 시작 전부터 테스트코드를 먼저 작성하여, 성공 테스트코드에 의한 테스트를 진행하면서 개발하고 성공을 이루어내고, 리팩토링 성공 후 개선할 수 있는 부분은 최대로 개선하면서 그 도중에도 테스트를 한다. install and setting npm install --save-d..

반응형