[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는 훨씬 넓은 범..
현장에서 통하는 도메인 주도 설계 실전 가이드 후기
·
IT/코딩
들어가며 우연한 기회로 길벗출판사의 개발자 리뷰어 프로그램에 참여하게 되었다. LLM, AI, 백엔드 등 여러 책들이 있었지만 나의 눈길을 끈 것은 이것이다. "현장에서 통하는 도메인 주도 설계 실전 가이드" 내가 이 책을 선택한 것은 스스로 도메인에 대한 지식이 부족하다고 생각했기 때문이다. 프로덕트 엔지니어로서 옳지 않은 말이겠지만, 스스로 도메인이나 비즈니스에 대한 관심보다는 소프트웨어 엔지니어링에 더 많은 관심을 가지고 있다고 생각한다. 다만 계속 이럴 수는 없다고 느꼈고, 이 책을 계기로 실제 비즈니스를 코드로 풀어내는 프로덕트 엔지니어로 한층 더 성장하고 싶어서 "현장에서 통하는 도메인 주도 설계 실전 가이드"을 읽게 되었다. 책 소개 이 책 “현장에서 통하는 도메인 주도 설계 실전 가이드..
프론트엔드 개발자가 알아야 할 CSRF (with Next.js)
·
IT/Front-End
들어가며 최근 들어 국내외에서 보안 사고가 끊이지 않고 있습니다. yes24, 롯데카드와 같은 대형 서비스에서도 해킹 사례가 발생하는 것을 보고, 저 또한 개발자로서 보안에 관심을 가지게 되었습니다. 저는 프론트엔드 개발을 하면서 보안은 주로 백엔드나 인프라 영역의 문제라고만 생각해왔습니다. 그러나 실제로는 브라우저의 기본 동작, 쿠키 관리 방식, 그리고 우리가 작성하는 요청 코드 하나하나가 보안 취약점과 직접적으로 연결되어 있음을 알게 되었습니다. 그중에서도 특히 CSRF는 프론트엔드 개발자라면 반드시 이해해야 하는 주제라고 생각합니다! 이 글에서는 CSRF의 개념을 하나씩 정리하며, 실무에서는 어떻게 방어할 수 있는지 학습했고 이를 글로써 작성해보았습니다. CSRF란 무엇일까?CSRF(Cross-Si..