본문 바로가기

CodeBricks41

[텍스트 차이점 비교기 메이킹 로그 #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.
[이미지/동영상 업로드, 서버 없이 무료로 해결하는 CDN API #07] [트러블슈팅/총정리] 프론트엔드 직접 업로드 시 반드시 마주치는 CORS 에러와 보안 해킹 방어법 안녕하세요! 프론트엔드 주니어들의 성장통을 가장 빠르고 시원하게 치료해 드리는 해결사, codeBricks입니다. 🧱✨자, 대망의 [AWS S3 요금 폭탄 피하기: 서버리스 이미지 호스팅 시리즈]의 진짜 마지막 장입니다! 지금까지 우리는 백엔드 서버 없이 브라우저(React/Next.js)에서 Cloudinary, Imgur, Supabase, ImageKit, Uploadcare 같은 훌륭한 툴들을 이용해 이미지를 직접 쏘는(Direct Upload) 달콤한 꿀을 빨았습니다.정말 편하고, 빠르고, 무엇보다 공짜라서 너무 행복했죠? 하지만... 여러분이 만든 그 완벽해 보이는 토이 프로젝트를 실무 레벨로 끌어올리려면, 혹은 이력서에 당당히 적어 내려면 반드시 마주하고 해결해야만 하는 '어둠의 영역'이 .. 2026. 4. 23.
[이미지/동영상 업로드, 서버 없이 무료로 해결하는 CDN API #06] [Uploadcare] "디자인 할 필요 없어요" 예쁜 파일 드래그 앤 드롭 업로더 위젯 무료로 붙이기 안녕하세요! 프론트엔드 개발자들의 UI 스트레스와 야근을 싹 날려드리는 든든한 코딩 파트너, codeBricks입니다. 🧱✨자, 지금까지 우리는 서버리스 5부작 시리즈를 통해 백엔드 없이 이미지를 쏘고(Cloudinary), 익명으로 빠르게 올리고(Imgur), 로그인한 유저만 지우게 만들고(Supabase), 무거운 동영상까지 스트리밍(ImageKit)하는 백엔드 아키텍처 기술들을 마스터했습니다.그런데 말입니다... 정작 가장 중요한 '사용자 화면(UI)'은 어떻게 만들고 계신가요?"당연히 HTML 기본 태그 써서 만들면 되는 거 아니야?" 라고 생각하셨다면, 프론트엔드 실무의 매운맛을 아직 못 보신 겁니다. 기본 파일 인풋 태그는 너무 못생겨서 그대로 쓸 수가 없습니다. 그래서 보통은 그걸 투명하.. 2026. 4. 22.

티스토리툴바