#Web Development

서비스를 만들었는데 아무도 오지 않았다. 마케팅 예산 없이 검색 유입을 만드는 기술적 SEO를 Next.js에서 직접 구현한 경험.

고등학교 시절, 친구의 웹사이트를 'admin' --' 한 줄로 뚫었던 경험과 그 충격을 공유합니다. 웹 개발자가 반드시 알아야 할 10가지 보안 취약점(OWASP Top 10)과 이를 막기 위해 '해커처럼 생각하는 법'을 4가지 핵심 위협(Injection, IDOR, Crypto, Misconfig)을 중심으로 설명합니다.

게시판에 달린 댓글 하나 때문에 관리자 계정이 탈취당했습니다. XSS(Cross-Site Scripting)의 3가지 유형(Stored, Reflected, DOM)과 React/Next.js 환경에서의 구체적인 방어법(HTML 이스케이프, CSP, 쿠키 보안)을 예제와 함께 깊이 있게 다룹니다.

회원가입 폼을 없애고 '구글로 로그인' 버튼을 달면 쉬울 줄 알았습니다. 하지만 Redirect URI 에러, State 파라미터, HTTPS 문제 등 OAuth 2.0의 복잡함에 압도당했죠. OAuth의 4단계 '댄스'와 실제적인 해결책(NextAuth.js), 그리고 모바일 앱에서의 딥링크 처리까지 깊이 있게 다룹니다.

Next.js 13 이상 App Router 환경에서 가장 빈번하게 마주치는 에러 중 하나입니다. 클라이언트 컴포넌트('use client')에 async 키워드를 붙이면 왜 에러가 발생하는지, React의 렌더링 메커니즘 관점에서 깊이 있게 분석하고, 이를 해결하기 위한 3가지 핵심 디자인 패턴(Container-Presenter, useEffect, React Query)을 상세한 코드 예제와 함께 정리해봤습니다.

로컬에서는 잘 되던 API 키가 브라우저 콘솔에서는 `undefined`로 뜨는 현상. Next.js의 보안 철학인 'Server-Client Boundary'를 이해하지 못해 3시간을 삽질하고, 실수로 비밀 키를 노출할 뻔했던 아찔한 경험을 공유합니다.