heene

heene

  • 분류 전체보기 (293)
    • Dev (36)
      • 자바 (1)
      • Spring (10)
      • javascript (19)
      • Github (1)
      • Django (8)
      • AWS (8)
      • ATOM (6)
    • 소소한 정보 (116)
    • 책 (38)
    • 건강 (2)
    • 일상 (18)
    • 왜? (4)
    • 일기 (1)
    • 개발 리소스 (0)
  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록
RSS 피드
로그인
로그아웃 글쓰기 관리

heene

컨텐츠 검색

태그

지방의 역설 Github mysql Atom webpack 스프링 아톰 우분투 Spring aws EC2 장고 고지방식 next.js atom github 연동 2019 javascript react 맥 nextjs django

최근글

댓글

공지사항

아카이브

2026년 10월

패스키는 함정이 아니다.- https://nonfunctional.substack.com/p/passkeys-are-a-trap-do-not-use-them 에 대한 반박글AI가 생성한 HTML에 대한 격리된 미리보기 구축 프론트엔드 프레임워크의 AI 비용- 프론트엔드 프레임워크 선택 기준을 AI 사용 관점에서 분석 tanstack-start 최적화

2026. 10. 18. 10:18
2026년 9월

Three.js를 통해서 브라우저를 추론 런타임으로 사용하기 Grok Bot 인터페이스를 만든 과정- UI UX를 설계하는 놀라운 사고력과 접근 방식. 최종 사용자에게 정말 필요한 것들만 노출하여 생각을 많이 하지 않도록 직관적인 설계에 집중한 점이 돋보인다. 웹브라우저에서 메인쓰레드를 소중하게 다루기 프론트엔드 체크리스트 for AI 코딩 에이전트 AI 코딩으로 인해 CI 최적화 in Linear Cloudfalre Woker Preivew- 다른 환경을 오염시키지 않는 완전히 격리된 워커 환경 지원

2026. 9. 6. 13:57
웹소켓을 통한 HTML: 자바스크립트를 거의 사용하지 않는 실시간 SPA

HTML over WebSockets: 거의 JavaScript 없이 실시간 SPA 만들기 (Andros Fenollosa)핵심 아이디어전통적인 SPA는 JS 프레임워크가 뷰를 그리고, API가 JSON을 주고받으며 두 코드베이스가 계약을 맞춰야 한다.이 글은 그 대신 서버가 이미 렌더링한 HTML을 WebSocket으로 보내고, 클라이언트는 그걸 제자리에 꽂기만 하는 방식(HTML over the wire / hypermedia)을 소개한다.동작 방식클라이언트의 JS 역할은 렌더링이 아니라 WebSocket 채널 생성 + 받은 HTML 삽입(애니메이션, 이벤트 처리 등 보조 작업 포함).서버가 템플릿 엔진으로 HTML을 만들고 WebSocket으로 전송.채널이 항상 열려 있어서 서버가 클라이언트의 요청..

2026. 8. 14. 16:43
Next.js 앱에서 고급 React 상태 경계 설정하기

대부분 정적인 Next.js 앱을 서버 렌더링 위주 + RSC + URL 상태 중심으로 구성했을 때, 경계(boundary)에서 생기는 실제 문제들을 다룬 글입니다. 훅 자체가 복잡한 게 아니라, React 상태 · 서버 데이터 · 브라우저 API · URL 상태 · 클라이언트 캐시가 한 제품에서 만날 때 “누가 상태를 소유하고, 무엇이 반응하게 하며, 변경을 누구에게 알려야 하는가”가 핵심 질문입니다.주요 경계 사례URL 변경 시 Popover 자동 닫기usePathname으로 경로 변화를 감지.useEffect로 setIsOpen(false) 하는 방식은 한 프레임 늦게 반영되고, ESLint도 경고.key={pathname}으로 리마운트하면 애니메이션·자식 상태가 깨짐.최종 패턴: 열었을 때의 pa..

2026. 8. 12. 14:13
2026년 8월

프론트엔드를 Soak 테스트 방식으로 메모리 누수 확인 커서는 어떻게 작업에 적합한 모델을 선택할까? cursor routing HTML 대신 Canvas를 언제 사용해야하는가? 도커에서 AI 에이전트를 위한 샌드박스 환경 출시 Celld - Durable Objects 오픈소스 AI 시대에 넓게 제작하고 좁게 배포하기 Websocket 방식으로 웹 서비스하기: 자바스크립트를 거의 사용하지 않는 실시간 SPA fx agent - vercel에서 만든 초경량 에이전트- 내장형 런타임 에이전트를 지향. 기존 에이전트 도구와 다르게 어딘가에 내장되어 실행되는 에이전트 포지션을 취하고 있음. 모든 규모의 Git - Cursor의 Origin 설계 Lovable의 Next.js에서 Tanstack-start로 전..

2026. 8. 1. 09:16
하이드레이션과 렌더링 전략별 차이

1. 기본 전략Static Generation (SSG): 빌드 타임에 HTML을 미리 생성 → CDN에서 초고속 서빙. ISR(Incremental Static Regeneration)로 freshness 문제 해결 (revalidate). Edge Rendering으로 지연도 최소화.Client-Side Rendering (CSR / SPA): 서버는 빈 shell만 주고, 클라이언트에서 JS 번들 + 데이터 페칭 후 모든 UI 생성. 하이드레이션 없음. 하지만 첫 페인트 느리고 SEO 불리.Server-Side Rendering (SSR): 서버에서 HTML 생성 후 클라이언트에서 하이드레이션 (React가 DOM에 이벤트 핸들러 등 붙임). 콘텐츠 즉시 보이고 SEO 좋지만, 작업 중복 (서버 렌..

2026. 7. 6. 15:59
1 2 3 4 ··· 49
티스토리
© 2018 T-Story. All right reserved.

티스토리툴바