CodeBricks41 [깡통전세 위험도 분석기 #03] 전세사기 막아주는 '깡통전세 분석기' 기획부터 아키텍처 설계까지 안녕하세요! 프론트엔드 개발의 쏠쏠한 재미와 치열한 삽질의 기록을 전해드리는 웹개발 블로거입니다.지난 2편에서는 폼(Form)에서 억 단위 숫자를 입력받을 때 콤마를 찍다가 Next.js의 무시무시한 'Hydration 에러'를 맞고, 정규식과 커스텀 포맷터로 우아하게 해결했던 트러블슈팅 과정을 다루었습니다.뼈대도 잡았고, 에러도 잡았으니 이제 드디어 이 '깡통전세 분석기'의 진짜 뇌(Brain)를 심어줄 차례입니다. 개발자에게 가장 가슴 뛰는 순간은 언제일까요? 바로 복잡하고 삭막한 현실 세계의 규칙(비즈니스 로직)을 깔끔한 코드 몇 줄로 완벽하게 번역해 냈을 때입니다.오늘은 부동산이라는 낯선 도메인 지식(경매 낙찰가율, HUG 보증보험 가입 기준)을 자바스크립트 로직으로 어떻게 풀어냈는지, 그리고 그.. 2026. 4. 15. [깡통전세 위험도 분석기 #02] 억 단위 숫자 입력 폼 콤마(,) 찍다가 만난 Hydration 에러 완벽 해결법 안녕하세요! 프론트엔드 개발의 즐거움과 치열한 삽질의 기록을 공유하는 웹개발 블로거입니다.지난 1편에서는 제가 개인 사이트(Code-Bricks)에 준비 중인 '깡통전세 및 전세사기 위험도 분석기'의 기획 배경과 Next.js 아키텍처 설계에 대해 이야기해 보았습니다. 멋지게 뼈대를 잡고 "이제 계산 로직만 쓱쓱 짜면 금방 끝나겠지?"라고 생각하며 콧노래를 불렀습니다.하지만 프론트엔드 생태계는 늘 그렇듯 제게 쉽게 길을 내어주지 않았습니다. 바로 "사용자가 억 단위의 숫자를 입력할 때 콤마(,)를 찍어주는 아주 단순해 보이는 기능"에서 엄청난 벽을 만났기 때문입니다.오늘은 프론트엔드 개발자들이 폼(Form)을 다룰 때 가장 많이 겪는 고충인 '숫자 포맷팅'과, Next.js 환경에서 이 녀석을 잘못 건드.. 2026. 4. 14. [깡통전세 위험도 분석기 #01] 전세사기 막아주는 '깡통전세 분석기' 기획부터 아키텍처 설계까지 (React 말고 Next.js를 선택한 이유) 안녕하세요! 프론트엔드 개발의 즐거움과 치열한 삽질의 기록을 공유하는 웹개발 블로거입니다.최근 몇 년간 대한민국을 뜨겁게 달구고, 지금 이 순간에도 수많은 세입자의 피눈물을 흘리게 만드는 사회적 이슈가 있습니다. 바로 '깡통전세'와 '전세사기' 문제입니다. 저 역시 자취방을 구하러 다니면서 등기부등본을 떼어볼 때마다 "이 집에 내 피 같은 전세금을 넣어도 진짜 안전한 게 맞나?" 하는 막연한 두려움을 느꼈습니다.그래서 생각했습니다. "명색이 웹개발자인데, 일반인들도 등기부등본의 숫자만 입력하면 내 전세금이 안전한지 10초 만에 분석해 주는 계산기를 직접 만들어보자!" 그렇게 시작된 저의 사이드 프로젝트가 바로 '깡통전세 및 전세사기 위험도 분석기'입니다. (현재 제 개인 웹사이트에 열심히 구축 중이며, .. 2026. 4. 13. [실무 웹 인증과 보안 완벽 가이드 #07] 백엔드와 프론트엔드의 영원한 숙제: CORS 에러, 이제는 당황하지 않기 안녕하세요! 길고 길었던 [실무 웹 인증과 보안 완벽 가이드]의 대장정이 드디어 마지막 장에 도착했습니다. 지난 6편에서 우리는 해커들의 악랄한 공격(XSS, CSRF)을 막아내는 방법을 배웠습니다."자, 이제 프론트와 백엔드 세팅 끝! 로그인 API 호출해 볼까?" 자신 있게 버튼을 누르는 순간, 브라우저 콘솔 창이 시뻘겋게 물들며 개발자들의 영혼을 파괴하는 그 유명한 에러가 튀어나옵니다.Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy:백엔드 개발자에게 달려가 물어봅니다. "API가 안 돼요!" 백엔드 개발자는 Postman으로 찔러보고 대답합니다. "어? 포스트맨에서는 잘 되는데요?"도대체 포스트맨에.. 2026. 4. 12. [실무 웹 인증과 보안 완벽 가이드 #06] XSS와 CSRF 공격 원리와 완벽한 방어 기술작성 포인트 1. 내 브라우저에 불청객이 숨어있다: XSS (교차 사이트 스크립팅)XSS (Cross-Site Scripting)는 쉽게 말해 "해커가 우리 웹사이트에 교묘하게 악성 자바스크립트 코드를 심어놓고, 다른 유저가 그 코드를 실행하게 만드는 공격"입니다.가장 흔한 시나리오는 '자유게시판'입니다. 해커가 게시판에 글을 씁니다. 제목은 "강아지 사진 공유해요~" 인데, 본문에는 사진 대신 보이지 않는 HTML 코드를 적어놓습니다. 순진한 유저가 강아지 사진을 보려고 이 게시글을 클릭하는 순간! 브라우저는 저 스크립트 태그를 진짜 코드로 인식하고 실행해 버립니다. 유저의 브라우저 LocalStorage에 안전하게(?) 모셔두었던 피 같은 Access Token이 0.1초 만에 해커의 서버로 복사되어 날아갑니다.. 2026. 4. 11. [실무 웹 인증과 보안 완벽 가이드 #05] 개발자라면 알아야 할 소셜 로그인: OAuth 2.0 핵심 동작 방식 이해하기 안녕하세요! 지난 4편에서는 프론트엔드 개발자들의 영원한 숙제인 '토큰 저장 위치 논쟁'을 완벽하게 정리하며 우리 서비스만의 강력한 자체 로그인 아키텍처를 완성했습니다."드디어 로그인 쪽은 끝났다!" 하고 커피를 한 모금 마시려는 찰나, 기획자분이 다가와서 해맑게 웃으며 말합니다. "개발자님~ 요즘 누가 귀찮게 폼에다가 아이디 비번 쳐서 가입해요? 카카오로 1초 만에 시작하기, 구글로 로그인하기 버튼 3개만 뚝딱 달아주세요!"네, 올 것이 왔습니다. 바야흐로 대 소셜 로그인의 시대입니다. 그런데 카카오 로그인은 도대체 어떻게 구현하는 걸까요? 우리 서버에 유저 비밀번호가 없는데 어떻게 로그인을 시켜주죠? 이 모든 마법의 중심에는 OAuth 2.0 (Open Authorization 2.0) 이라는 위대한.. 2026. 4. 10. 이전 1 2 3 4 5 6 7 다음
