#spa

Frontend › CSS

SPA에서 DOM을 바꾸는 코드를 document.startViewTransition()으로 감싸면 브라우저가 옛 화면을 스냅숏으로 찍고 새 화면과 교차 페이드한다. ::view-transition-old·new·group 가상 요소로 애니메이션을 바꾸고, view-transition-name으로 특정 요소를 이어 움직이고, 전환 유형으로 방향을 나누고, 움직임 줄이기 설정을 존중하는 법을 정리한다.

• #css
• #frontend
• #animation

Frontend › Web

브라우저 엔지니어·표준 제정자·웹 개발자가 웹 개발을 잘 안다는 믿음, 브라우저는 SPA에 맞지 않는다, MPA가 SPA를 대체한다, 모든 사이트는 JS 없이 동작해야 한다, 빌드 단계는 필요 없다는 주장을 하나씩 따져 본다. 공통된 오류는 내가 겪는 웹이 웹 개발 전체를 대표한다고 여기는 것이다.

• #frontend
• #web
• #architecture
• #javascript

Frontend › Web

MPA → PEMPA → SPA를 거쳐 온 웹 앱 아키텍처가 '점진적으로 향상된 SPA(PESPA)'로 옮겨 가고 있다. 코드가 어디에 사는지, 각 단계가 무엇을 풀고 무엇을 남겼는지 비교한다.

• #web
• #architecture
• #ssr
• #progressive-enhancement
• #remix

Frontend › Web

SPA가 새로고침 없이 화면을 바꾸면서도 페이지마다 고유한 URL과 뒤로 가기를 유지하는 방법. 링크·AJAX·해시(hashchange)·History API(pushState·popstate) 방식의 차이, 새로고침 때 서버가 해야 할 일(index.html 폴백, Accept 헤더로 HTML·JSON 나눠 응답), 모든 이동을 한 이벤트로 받는 Navigation API를 정리한다.

• #web
• #routing
• #history
• #browser

Frontend › Web

한 페이지에서 필요한 부분만 다시 그리는 SPA와, 렌더링 주체·시점에 따른 CSR·SSR·SSG·ISR의 차이.

• #web
• #rendering
• #seo

Frontend

여러 컴포넌트가 함께 쓰는 데이터를 스토어 한 곳에 모으는 Vue의 상태 관리. 지금 공식 라이브러리는 Pinia이고, defineStore로 state·getters·actions를 정의한다. Vuex의 mutations/actions 구분은 사라졌다.

• #frontend
• #vue
• #javascript
• #state-management