DiffChecker4 [텍스트 차이점 비교기 메이킹 로그 #04] 공백 하나 때문에 코드 전체가 바뀌었다고? 정규식을 활용한 텍스트 비교 엣지 케이스(Edge Case) 정복기 안녕하세요! 코드브릭스(Code-Bricks)의 다양한 생산성 도구들을 열심히 개발하고 있는 프론트엔드 개발자입니다.드디어 텍스트 차이점 분석기(Diff Checker) 개발기의 마지막 이야기인 [트러블슈팅 2편]을 들고 돌아왔습니다! 지난 3편에서 브라우저를 뻗게 만들던 대용량 텍스트 렌더링 지연(Freezing) 문제를 Web Worker와 Virtual Scroll의 조합으로 멋지게 해결했던 눈물겨운 사투, 잘 보셨나요? (※ 아, 이 모든 고생의 결정체인 실제 차이점 분석기 사이트 링크는 추후 본문 하단에 업데이트할 예정이니, 잊지 말고 꼬옥! 다시 놀러 와주세요!)성능까지 최적화하고 나서 "이제 진짜 런칭이다!"라고 생각하며, 제가 평소에 작업하던 자바스크립트 코드 파일 두 개를 복사해서 분석기.. 2026. 4. 27. [텍스트 차이점 비교기 메이킹 로그 #03] 1만 줄짜리 코드를 비교했더니 브라우저가 뻗었다? 대용량 텍스트 Diff 연산 최장 지연(Freezing) 해결 로직 안녕하세요! 코드브릭스(Code-Bricks)를 열심히 빚어내고 있는 프론트엔드 개발자입니다.지난 포스팅에서 텍스트 차이점 분석기(Diff Checker)의 화려한 Side-by-Side UI와 스크롤 동기화 로직을 구현하며 "이제 다 만들었다!" 하고 쾌재를 불렀던 것, 기억하시나요? (※ 아, 참고로 이 모든 눈물겨운 사투 끝에 완성될 차이점 분석기의 실제 사이트 링크는 조만간 본문 하단에 멋지게 연결해 둘 예정이니 꼭 다시 들러주세요!)작은 텍스트나 몇백 줄짜리 코드를 넣었을 때는 정말 깃허브(GitHub) 뺨치게 부드럽고 예쁘게 렌더링이 되었습니다. 하지만 제 도구의 FAQ에도 적어두었듯, "과연 1만 줄이 넘어가는 거대한 서버 로그 파일이나 수백 페이지짜리 영문 소설을 통째로 넣으면 어떻게 될까.. 2026. 4. 26. [텍스트 차이점 비교기 메이킹 로그 #02] GitHub 스타일의 Diff Checker 만들기: 추가(+), 삭제(-) 색상 하이라이팅과 나란히 보기(Side-by-Side) UI/UX 구현 로직 안녕하세요! 코드브릭스(Code-Bricks)를 만들어가고 있는 프론트엔드 개발자입니다.지난 [메이킹 로그 1편]에서는 텍스트 차이점 분석기(Diff Checker)의 핵심 두뇌인 'LCS 알고리즘'과 클라이언트 사이드 아키텍처의 기획 배경에 대해 깊이 있게 다뤄보았는데요. 다들 재미있게 읽어보셨나요?오늘은 그 두 번째 시간으로, 무거운 알고리즘의 연산 결과를 사용자의 눈에 어떻게 예쁘고 직관적으로 보여줄 것인가에 대한 'UI/UX 설계와 프론트엔드 렌더링 로직'을 파헤쳐보려고 합니다. (※ 현재 열심히 마무리 작업 중이며, 실제 동작하는 차이점 분석기 사이트 링크는 추후 본문 하단에 연결해 둘 예정이니 많은 기대 부탁드립니다!)개발자들이 매일 보는 GitHub 스타일의 깔끔한 추가(+), 삭제(-) 색.. 2026. 4. 25. [텍스트 차이점 비교기 메이킹 로그 #01] 서버비 0원, 보안 100%! 클라이언트에서 동작하는 텍스트 차이점 분석기(Diff Checker) 기획 및 LCS 알고리즘 구현기 안녕하세요! 코드브릭스(Code-Bricks)를 만들어가고 있는 프론트엔드 개발자입니다.오늘은 제 개인 웹사이트에 새롭게 런칭할 유용한 생산성 툴인 '텍스트 차이점 분석기(Diff Checker)'의 개발 비하인드 스토리를 들려드리려고 합니다. (※ 현재 열심히 마무리 작업 중이며, 실제 동작하는 차이점 분석기 사이트 링크는 추후 본문 하단에 연결해 둘 예정이니 많은 기대 부탁드립니다!)개발자라면 누구나 Git이나 IDE를 통해 매일같이 보는 화면이 바로 코드의 변경점(Diff)을 보여주는 화면일 텐데요. 문득 "개발자가 아닌 일반인들은 두 개의 긴 문서를 어떻게 비교할까?"라는 호기심에서 이 토이 프로젝트가 시작되었습니다.서버 비용 0원으로 완벽한 보안을 자랑하는 클라이언트 사이드 Diff Checke.. 2026. 4. 24. 이전 1 다음
