두 텍스트 간의 차이점을 확인하는 웹 앱 빌드

아이디어

몇 년 전에 두 개의 구성 파일을 비교하고 차이점을 찾아야 했을 때 이 작업을 시작했습니다. 이를 수행할 수 있는 많은 데스크톱 소프트웨어와 온라인 도구가 있다는 것을 알고 있습니다. 하지만 파일을 주어진 형식과 비교하는 데 사용할 수 있는 것을 본 적이 없습니다. 예를 들어 비교하기 위해 두 개의 JSON 파일을 제공하고 변경 사항을 찾으면 일반 텍스트 diff를 수행할 수 있습니다. 하지만 두 개의 JSON이 다르게 보이더라도 동일할 수 있기 때문에 상황이 점점 더 어려워지고 있습니다. 두 JSON 콘텐츠를 비교하는 다음 시나리오를 생각해보세요. 첫 번째는 다음과 같습니다.

{ "key1": "value1", "key2": "value2" }
두 번째는 다음과 같습니다.
{ "key2": "value2", "key1": "value1" }
기술적으로 이 둘은 동일한 JSON이지만 순서가 다릅니다. 그래서 저는 그것을 없애고 구조를 고려하여 두 개의 JSON을 비교할 수 있는 소프트웨어를 만들고 싶었습니다.
제가 생각해낸 해결책은 이 두 가지 경우를 표준 형식으로 변환한 다음 비교하는 것이었습니다. 앱의 온라인 버전은 netlify 앱으로 https://differ.netlify.app/에 배포됩니다. 여기에 두 개의 텍스트를 삽입하고 텍스트, JSON, XML 또는 속성 파일로 비교할 수 있습니다.

제한 사항

• 이것은 브라우저 애플리케이션에 있으므로 처리할 수 있는 콘텐츠 크기도 제한됩니다.
• 모바일에서는 UI가 반응하지 않고, 몇 가지 작업이 필요합니다.

향후 계획

• UI 반응성을 높입니다.
• diff 저장 및 다른 사람과 공유 지원