[FE] Next.js App Router에서 dynamic import를 제대로 이해하기
·
IT/Front-End
들어가며dynamic import를 설명할 때 흔히 나오는 문장은 대체로 비슷합니다. 번들을 쪼개고, 처음에 내려보내는 JavaScript를 줄이고, 필요할 때만 코드를 받는다는 설명입니다. 틀린 말은 아닙니다. 다만 App Router에서는 이 설명만으로는 부족합니다. App Router에서 dynamic import는 단순히 "코드를 나중에 받는 기능"이라기보다, 클라이언트 컴포넌트 경계를 어떤 단위로 늦게 활성화할지 정하는 도구에 가깝습니다. 그래서 이 기능을 이해할 때는 번들 크기만 볼 것이 아니라, 초기 HTML에 무엇이 보이는지, RSC payload에 무엇이 남는지, hydration이 어디서부터 시작되는지를 함께 봐야 합니다. 이 글은 그 관점에서 import(), next/dynamic,..
Sendy에서 웹 테크니컬 SEO 최적화하기
·
IT/Front-End
들어가며지난 글에 이어, 센디 웹(https://sendy.ai)에서 테크니컬 SEO(Technical SEO) 를 개선하며 얻었던 실전 경험을 정리해 보겠습니다. 결론부터 말씀드리면, 이번 개선의 핵심은 아래 3가지였습니다. 랜딩 페이지를 dynamic에서 force-static으로 전환하고, 잦은 실험(A/B 테스트) 로직을 클라이언트로 분리했습니다. 폰트/CSS/JS 번들을 정리해 LCP를 개선했습니다. /blog, /guide, /review 등 섹션별로 사이트맵을 분리하고, sitemap index + canonical 로 크롤링/인덱싱 품질을 끌어올렸습니다. 테크니컬 SEO란?테크니컬 SEO는 “콘텐츠를 잘 쓰는 것”이나 “키워드를 어디에 넣는 것” 이전에, 검색엔진이 사이트를 문제없..
AI를 쓰면서도 엔지니어로 남는 법
·
IT/Front-End
AI가 편해질수록 비워지는 느낌제품을 개발하면서 AI를 더 자주 쓰게 될수록, 어딘가 제 머리가 비워지는 느낌을 받았습니다. 얼마 전에는 AI가 작성한 코드에서 버그가 발생했습니다. 처음에는 직접 디버깅해 보려 했지만, 막상 코드를 따라가며 맥락을 복원하는 일이 생각보다 쉽지 않았습니다. 결국 저는 최근에 출시된 gpt-5.3-codex에게 수정을 맡겼고, 문제는 빠르게 해결되었습니다. 그런데 그 순간부터 묘한 기시감이 남았습니다. “이렇게까지 AI에게 위임해도 괜찮은 걸까?”, “개발은 빨라졌는데 도메인 이해는 얕아진 채로 다음 이슈로 넘어가는 건 아닐까?”, “AI가 계속 발전한다면, 나는 프롬프트를 쓰는 것 말고 무엇을 할 수 있을까?” 같은 질문들이 몇 주 동안 머릿속을 맴돌았습니다. 처음 AI를..
프론트엔드 개발자가 알아야 할 SEO
·
IT/Front-End
들어가며프론트엔드 개발자로서 저는 SEO를 어느 정도 안다고 생각했습니다. meta 태그를 적절히 설정하고, sitemap.xml을 관리하고, LCP나 FCP 같은 성능 지표를 최적화하면 SEO는 어느 정도 챙겼다고 여겼죠. [후원사 프로그램] 1년에 10억 원을 절약한, 강남언니의 SEO 웹 전략 공개 그러다 FECONF 2025에서 강남언니팀 TPO의 SEO 웹 전략 세션을 듣고 충격을 받았습니다. SEO는 단순히 페이지 성능 최적화만 있는 게 아니었습니다. 양질의 콘텐츠를 주기적으로 발행하는 '콘텐츠 SEO'와 해당 콘텐츠를 검색엔진에게 잘 전달하는 '테크니컬 SEO', 검색 결과 페이지에서의 최적화를 다루는 '온서프 SEO', 외부 링크를 관리하는 '오프페이지 SEO'까지, SEO는 훨씬 넓은 범..
프론트엔드 개발자가 알아야 할 CSRF (with Next.js)
·
IT/Front-End
들어가며 최근 들어 국내외에서 보안 사고가 끊이지 않고 있습니다. yes24, 롯데카드와 같은 대형 서비스에서도 해킹 사례가 발생하는 것을 보고, 저 또한 개발자로서 보안에 관심을 가지게 되었습니다. 저는 프론트엔드 개발을 하면서 보안은 주로 백엔드나 인프라 영역의 문제라고만 생각해왔습니다. 그러나 실제로는 브라우저의 기본 동작, 쿠키 관리 방식, 그리고 우리가 작성하는 요청 코드 하나하나가 보안 취약점과 직접적으로 연결되어 있음을 알게 되었습니다. 그중에서도 특히 CSRF는 프론트엔드 개발자라면 반드시 이해해야 하는 주제라고 생각합니다! 이 글에서는 CSRF의 개념을 하나씩 정리하며, 실무에서는 어떻게 방어할 수 있는지 학습했고 이를 글로써 작성해보았습니다. CSRF란 무엇일까?CSRF(Cross-Si..
프론트엔드 개발자가 알아야 할 쿠키 정책
·
IT/Front-End
들어가며최근 YES24, 롯데카드 등 굵직한 해킹 사고가 이어지면서, 프론트엔드 개발자들 사이에서도 보안에 대한 관심이 높아지고 있습니다. 저는 보안은 서버의 몫이라고 생각하고 있었는데, 이번 사건을 계기로 보안 이슈에 관심을 가지게 되었습니다! 그래서 보안에 대해 공부한 내용을 글로써 정리해보고자 합니다. 이번 글에서는 브라우저의 쿠키에 대해 정리해보았습니다. 쿠키 기본 이해HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 ..