web60 View Transitions API, 페이지 전환 욕심을 좀 줄여줬다 페이지 전환 애니메이션은 늘 손이 많이 갔다웹에서 화면 전환을 자연스럽게 만들고 싶을 때마다 늘 비슷한 고민을 했다. 직접 상태를 잡고, 이전 화면을 남겨두고, 타이밍 맞춰 클래스 바꾸고, 스크롤까지 챙기다 보면 생각보다 일이 커진다. 특히 SPA에서 라우터랑 얽히기 시작하면 보기엔 사소한 효과인데 디버깅은 안 사소하다. 나도 한동안 그냥 포기하고 순간 전환으로 넘긴 적이 많았다.그러다 View Transitions API를 조금 진지하게 써봤는데, 이건 욕심을 줄여주는 방향이라 좋았다. 화려한 모션 라이브러리처럼 모든 걸 해결해주는 건 아니지만, 기본 전환을 브라우저가 꽤 자연스럽게 처리해준다. 그래서 “멋진 연출”보다 “거슬리지 않는 이동”에 집중하기 좋아졌다.생각보다 좋은 건 구현보다 유지보수 쪽이.. 2026. 4. 9. 브라우저 지원표 대신 Baseline 보는 습관, 올해는 진짜 편하다 지원 브라우저 표만 붙잡고 있던 때보다 훨씬 낫다프런트 작업할 때 제일 피곤한 순간이 있다. 기능 자체는 좋은데, 이걸 지금 써도 되는지 애매할 때다. 예전엔 Can I Use 탭 몇 개 열어두고, 사파리 이슈 검색하고, 팀 브라우저 정책이랑 비교하고, 그렇게 시간을 꽤 썼다. 근데 요즘은 Baseline 개념이 들어오면서 판단이 꽤 빨라졌다. 적어도 “이 기능을 기본값으로 봐도 되나?”에 대한 기준이 좀 생겼다.web.dev 설명을 보면 Baseline은 웹 플랫폼 기능이 오늘 기준으로 어느 정도 안정적으로 쓸 만한지 알려주는 일종의 공용 언어에 가깝다. 문서마다 브라우저 호환성을 제각각 해석하는 대신, 이 기능이 Baseline 안에 들어왔는지부터 보는 식이다. 별거 아닌 것 같지만 팀 커뮤니케이션이.. 2026. 4. 7. JavaScript 패턴, 이렇게 쓰면 코드가 달라진다 솔직히, 예전 JavaScript 코드 보면 좀 부끄럽다처음엔 그냥 "작동하면 장땡" 이라고 생각했다. 변수에 값 넣고, for 루프 돌리고, callback 잔뜩 쌓고. 근데 팀 프로젝트에서 내 코드를 다른 사람이 리뷰할 때마다 조금씩 자존심이 깎이는 느낌이랄까. 그러다 JS 현대 패턴들을 하나씩 제대로 익히고 나서 코드가 눈에 띄게 달라졌다.오늘은 실제로 써보고 "아, 이게 맞는 방식이었구나" 했던 패턴들 정리해본다. 새로운 문법 소개가 아니라, 실제 코드 품질이 올라간 경험 기준으로.옵셔널 체이닝, 이거 없이 어떻게 살았나API에서 받아온 데이터를 쓸 때 진짜 불편했던 게 중첩 접근이었다. 예전엔 이랬다:const city = user && user.address && user.address.cit.. 2026. 4. 4. ECMAScript 2026 신기능, Date 버그에서 해방되다 Date 객체 때문에 야근했던 사람이라면새벽 2시에 타임존 버그 잡느라 앉아있던 기억이 있다. JavaScript의 Date 객체가 원인이었는데, 월이 0부터 시작하고, 변환하다 보면 어느 순간 1시간이 사라지고. 그때 생각했다. "이거 언제까지 이렇게 써야 하나."ECMAScript 2026이 그 질문에 드디어 답을 줬다. 사실 큰 업데이트다. 단순 문법 설탕 수준이 아니라, 개발자들이 오랫동안 쓰기 싫었던 부분들을 직접 건드렸다.Temporal API — 이제 진짜 날짜 다루는 방법이 생겼다Date 객체는 1995년에 만들어졌다. Java의 java.util.Date를 급하게 베꼈는데, 그 Java마저 1997년에 deprecated 처리했다. 근데 JS는 그 유산을 30년 동안 들고 있었던 거다.T.. 2026. 4. 3. CSS :has()와 Container Queries, JS 없이 이런 게 됐다고? CSS 공부하다가 처음 :has() 셀렉터 봤을 때 솔직히 "이게 CSS야?" 싶었다. 부모 요소를 자식 기준으로 선택한다는 게 너무 낯설어서. 근데 막상 써보니까 JavaScript로 처리하던 UI 로직을 CSS로 옮길 수 있는 경우가 생각보다 많더라.:has()가 왜 게임 체인저냐면CSS는 원래 "아래로만" 흐른다. 부모가 자식을 선택하는 건 되는데, 자식 상태에 따라 부모 스타일을 바꾸는 건 불가능했다. 그래서 개발자들이 JavaScript로 클래스를 붙이거나 떼는 방식을 써왔는데, :has()가 이걸 바꿔버렸다.예를 들어 카드 컴포넌트에 이미지가 있을 때와 없을 때 레이아웃을 다르게 하고 싶다면 이런 식으로 쓸 수 있다:/* 이미지 있는 카드는 2컬럼 */.card:has(img) { displ.. 2026. 4. 2. Vite 7 써봤더니, 빌드가 이렇게 빠를 수가 Vite 7 써봤더니, 빌드가 이렇게 빠를 수가프론트엔드 개발하다 보면 빌드 시간이 은근히 스트레스다. 작은 프로젝트야 괜찮은데, 컴포넌트가 수백 개 넘어가면서부터는 npm run build 한 번에 기다리는 시간이 꽤 쌓인다. Vite 7이 나왔을 때 "그래봤자 얼마나"라고 생각했는데, Rolldown 붙이고 나서 생각이 좀 바뀌었다.Vite 7이 뭐가 달라졌나Vite 7은 2025년 6월에 나왔고, 지금 기준(2026년 초)으로 주간 다운로드가 3100만 건을 넘겼다. React, Vue, Svelte, Nuxt 같은 주요 프레임워크가 거의 다 Vite 위에서 돌아가고 있다.이번 버전에서 가장 큰 변화는 Rolldown이다. 기존 Vite는 번들러로 Rollup(JavaScript)을 써왔는데, Ro.. 2026. 3. 31. 이전 1 2 3 4 ··· 10 다음
