서카츄

2026년 8월 · 프론트엔드 노트 Next.js 16.3, 서버 렌더링에 SPA의 '즉시성'을 더하다 지난 8월 3일, Vercel이 Next.js 16.3을 정식 공개했습니다. 작년 11월 16.0 이후 가장 큰 업데이트라고 팀이 직접 못 박은 릴리스인데, 핵심 한 줄은 이렇습니다. "서버 컴포넌트의 장점은 다 챙기면서, 화면 전환 체감은 SPA처럼 즉각적으로." 그동안 Next.js를 쓰면서 링크를 누르면 잠깐 멈칫하던 그 느낌, 이번 버전이 정조준한 지점입니다. 이번 주 뉴스를 프론트엔드 전반·React·AI 툴·웹 디자인 네 갈래로 훑어봤는데, 실무 임팩트로 보면 16.3이 압도적이었습니다. 성능 개선(개발 메모리 최대 90% 감소, 빌드 캐시, TypeScript 7)부터 새 렌더링 모델..

Next.js 보안 패치가 '월간 예고제'로 바뀌었습니다 — 이번 주 챙길 것지난 몇 주 사이 Next.js 팀이 보안 릴리스 운영 방식을 크게 바꿨습니다. 이제부터 보안 패치는 대략 한 달에 한 번, 미리 예고된 일정으로 나옵니다. 그리고 그 첫 릴리스가 이미 나왔습니다 — 고위험 4건, 중위험 5건, 총 9개 CVE를 담은 16.2.11 / 15.5.21 패치입니다.이번 주에 이걸 다루는 이유7월 13일, Next.js 팀은 블로그에 “Next.js Security Release and Our Next Patch Release”를 올리며 정식 보안 릴리스 프로그램으로의 전환을 발표했습니다. 그동안 보안 패치는 ‘예고 없이 툭 튀어나오는’ 애드혹(ad-hoc) 방식이었는데, 이게 팀 입장에서는 매번 일..

🍎 Dev Log · 2026.07.30AI 코딩 도구, 옆에 두지 말고 프로젝트에 "태워라" 🤖자동완성 그만 쓰고, 진짜 협업 파트너로 굴리는 3가지 원칙지난번에 "AI라는 마법사에게 제대로 명령하는 법" 얘기를 했었는데, 요즘 도구들을 다시 만져보니 판이 또 바뀌었더라고요. 예전엔 AI가 에디터 옆에 붙은 자동완성이었다면, 이제는 프로젝트 안으로 들어와서 같이 일하는 팀원에 가까워졌어요. 그래서 "얼마나 좋은 도구를 쓰냐"보다 "어떻게 태우냐"가 결과를 갈라요. 오늘은 제가 직접 굴려보면서 정리한 실전 원칙 3개를 한 장으로 풀어볼게요. ✏️🔥 오늘의 결론 3줄① 컨텍스트를 먼저 준다 — AI는 "모르는 코드베이스"에서 헤맨다② 작업을 잘게 쪼갠다 — 큰 덩어리 한 방보다, 작은 단위 여러 개③..

AI라는 마법사에게 '제대로' 명령하는 법많은 개발자와 기획자들이 AI를 활용해 웹사이트 제작에 도전하지만,이내 "결과물이 모호하다"거나 "기대에 못 미친다"는 기술적 정체(Technical Stagnation)를 경험한다.AI는 모든 것을 알아서 해결해 주는 마법사가 아니라, 정교한 설계도에 따라 움직이는 고도의 '실행 엔진'이다.단순히 도구에 의존하는 사용자를 넘어, AI를 완벽하게 통제하고 지휘하는 마스터의 관점에서구조적 결핍을 제거하는 전략이 필요한 시점이다. 1. 예쁜 디자인보다 '구조의 해부'가 먼저다 (Reverse Engineering)성공적인 웹 빌딩의 첫 단추는 시각적인 화려함에 현혹되지 않는 것시니어 전략가는 레퍼런스를 대할 때 심미적 감상이 아닌 '논리적 해부'를 시도한다.레..

자바스크립트 생태계에서 수십 년간 괴롭혔던 Date 객체를 뒤로하고새로운 표준 API인 'Temporal'이 마침내 들어왔다. 자바스크립트 개발자라면 알고 있는 'Date'의 유산자바스크립트의 창시자 브렌던 아이크(Brendan Eich)는 언어 설계 초기, 당시 대세였던 자바(Java)의 Date 설계를 그대로 가져왔다.하지만 자바스크립트의 유연하고 동적인 특성과 자바의 정적인 설계 방식은 태생부터 부조화를 이루었다.타임존 계산 오류, 비직관적인 월(Month) 인덱스 등 수많은 버그의 온상이 되었고, 이를 해결하기 위해 Moment.js나 Day.js 같은 외부 라이브러리에 의존하며 기술 부채를 쌓아왔다. 가변성(Mutability)과의 작별: 이제는 '불변성'의 시대기존 Date 객체의 가장 치명적..

React 19와 새로운 렌더링 패러다임import { useEffect, useState } from "react";const Test = () => { const [count, setCount] = useState(0); useEffect(() => { setCount((count) => count + 1); }, []); return ;};export default Test; 위의 테스트코드는 기존에 사용하던 익숙한 코드이다.리액트 19에서는 useEffect 내부에서 setState를동기적으로 호출하는 것을 지양하는 규칙이 강화되었다. 이는 새로운 규칙이 추가된 것을 넘어리액트가 지향하는 코드 패러다임이근본적으로 변화하고 있음을 의미한다. setState in Effect 규칙의..

이런 웹페이지는 어떻게 만들까...매일 연구하고 배워야 할게 많아서 미루고 있었는데바이브코딩으로 만들어 봄 https://mac-os-portfolio-sandy.vercel.app/ Seokachu PortfolioThis Portfolio is designed for desktop/tabled screens only.mac-os-portfolio-sandy.vercel.app IDE는 안티그래비티 사용했다 레퍼런스 찾기 유튜브에 검색해서 나온 리스트들을 추렸다.유튜브에서 본 그대로 최대한 비슷하게 만들고자 노력했다.디자인과 CSS는 사진으로만 보고 셀프로 만들어야 했다. 영상 보면서 어떻게 개발하는지 흐름 파악부터 했다.영상에는 Vite를 사용했으나 Next로 설치했다.나중을 생..

디자이너가 주는 피그마 디자인에 따라 비율은 달라질 수 있다.