본문 바로가기

전체 글149

BF Cache란 무엇이고 어떻게 작동하는가? BF Cache (Back/Forward Cache)브라우저가 사용자가 뒤로가기/앞으로가기 버튼을 눌렀을 때 페이지를 즉시 로드할 수 있도록, 페이지 전체의 스냅샷(JavaScript 힙 포함)을 메모리에 저장하는 성능 최적화 기법입니다. 이를 통해 네트워크 요청 없이 거의 즉시 페이지를 렌더링하여 로딩 시간을 크게 줄여주며, pageshow, pagehide 이벤트를 통해 동작을 감지하고 최적화할 수 있습니다. 그래서 왜 중요한가?사용자 경험 향상: 웹사이트의 응답성을 높여 사용자가 페이지를 빠르게 이동하는 경험을 제공합니다.성능 최적화: 네트워크 부하를 줄이고, 특히 모바일 환경이나 느린 네트워크에서 큰 이점을 줍니다. BF Cache가 작동하는 방식1. 페이지 스냅샷 저장 : A→B페이지로 이동.. 2025. 12. 14.
자바스크립트와 타입스크립트는 객체 지향 언어인가? 결론부터 말하면 자바스크립트와 타입스크립트는✅ 함수형 프로그래밍 패러다임 + 객체 지향 프로그래밍 패러다임 모두 지원하는 다중 패러다임 언어(Multi-paradigm languages) 유연한 언어이므로 개발자는 프로젝트의 성격에 따라 함수형 스타일, 객체 지향 스타일을 선택해 사용할 수 있습니다.언어패러다임 분류설명Javascript다중 패러다임함수형 (First-class functions, Closures)과 객체 지향 (Prototype-based, Class syntax)을 모두 지원합니다.Typescript다중 패러다임JS의 모든 패러다임을 포함하며, 클래스 기반 객체 지향의 요소(Interface, Access Modifiers)를 더 강력하게 도입하여 구조화된 개발을 지원합니다. 🧩 다.. 2025. 11. 18.
HTML 파일을 브라우저에 드래그 앤 드롭했을 때 어떤 일이 발생할까 일반적인 웹 접속(HTTP 통신) 과정과는 달리, 브라우저가 로컬 리소스 핸들러로 작동함! 파일 식별, 내용 로드, 렌더링의 총 세 단계를 거침. 1. 파일 식별 및 주소(URI) 생성(드래그 앤 드롭 이벤트 발생 → file:/// 스킴)1-1. 드래그 앤 드롭 이벤트 발생사용자가 HTML 파일을 브라우저 창에 떨어뜨리는 행위는 운영 체제(OS)와 브라우저가 협력하여 처리합니다.OS: 파일의 절대 경로와 파일 타입을 브라우저에 전달합니다.브라우저: 이벤트를 감지하고 해당 경로 정보를 얻습니다.1-2. 로컬 URI 스킴 적용브라우저는 일반적인 웹 주소(http:// 또는 https://) 대신 로컬 파일 접근을 위한 특별한 주소 체계를 사용합니다.브라우저는 전달받은 로컬 파일 경로 앞에 file:/// .. 2025. 11. 3.
CDN 과 정적 파일서버, 프론트와 백엔드 배포 비교 CDN이란?CDN = Content Delivery NetworkCDN은 전 세계 여러 지역에 분산된 서버 네트워크를 통해 정적 파일을 빠르게 제공해주는 시스템입니다.정적 파일 서버보다 훨씬 빠르고 안정적요청한 사용자 근처의 CDN 노드에서 파일을 응답AWS CloudFront, Cloudflare, Akamai 등이 대표적정적 파일 서버란?정적 파일 서버는 단순히 파일(html, js, css, 이미지 등)을 그대로 전송해주는 서버입니다.예: Nginx, Apache, Netlify, Vercel, GitHub Pages, AWS S3 ✅ 한줄 요약정적 파일서버는 원본 파일 저장용, CDN은 전 세계에 캐시해서 빠르게 제공하는 네트워크입니다. 실무에서는 보통 이 둘을 함께 씁니다. ▶ 예: S3에 정.. 2025. 6. 9.
프론트엔드 배포는 왜 따로 해야할까 프론트엔드 배포와 백엔드 배포를 따로 해야 하는 이유서로 역할이 다르므로 빌드 과정도 다르고, 요구되는 서버 환경도 달라 배포가 분리됩니다. 둘은 따로 배포해도 어떻게 하나처럼 동작할까?프론트엔드가 백엔드 API 서버에 HTTP 요청을 보내면서 연결됩니다.예시:프론트엔드 사용자가 버튼을 누름 → 프론트 JS가 fetch('/api/posts') 요청 보냄이 요청은 백엔드 서버 (https://api.myservice.com/api/posts) 로 전송됨백엔드가 DB 조회 후 응답을 보내줌 → 프론트가 결과 렌더링 프론트엔드 빌드 파일을 배포하는 건 정적 배포? 동적 배포? ✅ 정적 배포 (단, SSR일 경우 일부 동적) React, Vue 같은 SPA 프레임워크는 npm run build 하면:HT.. 2025. 6. 5.
npm run dev를 누르면 일어나는 과정, npm run start 와 뭐가 다를까? npm run dev를 누르면 무슨 일이 일어날까?Next.js 프로젝트로 예를 들면,보통 package.json에는 다음과 같이 정의되어 있습니다:"scripts": { "dev": "next dev"} 1. npm run dev 실행 시, next dev 명령어가 실행됨2. Next.js 개발 서버 실행 TypeScript/JSX 등을 실시간으로 컴파일 (SWC 사용)파일 변경 감지 (Hot Reload / Fast Refresh)API 라우트와 페이지 라우트 등록localhost:3000에서 서버 시작3. 개발 중에 페이지 변경 시, 변경된 파일만 재컴파일 및 핫 리로드 npm run start 와 npm run dev의 차이 npm run start는 npm run build 로 만들어진 최.. 2025. 6. 5.

티스토리툴바