반응형 웹 개발 지식4 [웹개발] 번들러 Bundler- Bundler: 웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구- Bundler는 결합을 위해 프로젝트를 해석하는 과정에서 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본 작업과 함께 최신 문법이나 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행- Webpack, Parcel, Rollup이 있음Webpack- 대표적인 JavaScript 번들러(Webpack 기능)- Module Bundling: 진입점에 연결된 단일 파일로 묶어 줌- Automatic Bundle Optimization: 번들 최적화를 통해 보다 더 작은 번들을 생성하고 그만큼.. 2025. 4. 1. [웹개발] DB 설계 1. 주제 선정1) 목적2) 주요 기능 2. 요구 수집 및 분석1) 요구 수집 명세서2) 업무 영역 분할도3) 업무별 데이터 및 트랜잭션 요구 분석 명세서 3. 개념적 설계1) 개념적 스키마 모델링- 개체 후보 식별: 주어나 목적어로 표현된 개체 후부 식별- 개체 후보 검토: 실제 데이터 수와 대표 속성을 파악하여 선정- 개체 선정: 식별된 개체 후보를 검토해서 속성이 없거나 관계로 표현하는 것이 더 적합한 것을 제외하고 선정- 관계 후보 식별: 동사로 표현된 관계 후보를 검토하여 선정- 관계 식별 목록: 선정된 관계 후보에 대해 관계 유형과 관계 설명 속성까지 결정- 최종 개체 목록- 최종 관계 목록 2) ER 다이어그램 작성 전 체크리스트더보기개체관련 관계관련 속성관련 3) ER 다이어그램 그리기 4.. 2025. 3. 31. [웹개발] 스트리밍 스트리밍- 스트리밍: 비디오 또는 오디오 데이터를 구성하는 데이터 패킷을 분해하고 각각을 해석하여 사용자 장치의 블레이어에서 비디오 또는 오디오로 실시간 재생하는 방식- 스트리밍을 통해 사용자는 콘텐츠를 지속적으로 시청하고 끊김 없는 시청 경험을 가능하게 함- 스트리밍 종류: 비디오, 오디오, 라이브- 라이브 스트리밍: 이벤트가 발생하는 시점의 비도오 또는 오디오 방송- 버퍼링: 연결이 잠시 중단되더라도 사용자가 계속해서 비디오를 보거나 오디오를 들을 수 있도록 미리 스트림의 일부를 로드하는 프로세스- 버퍼링은 네트워크 속도가 느리거나 연결이 끊어질 가능성이 있는 상황에서 유용- 대역폭: 매초 네트워크 연결을 통해 전송할 수 있는 최대 데이터 양(Mbps)- 일반적으로 비디오 스트리밍 사용시 네트워크에 .. 2025. 3. 31. [웹개발] Rendering 렌더링 과정1) HTML을 파싱해서 DOM 트리 구축- HTML은 부분적으로 실행2) CSS을 파싱해서 CSSOM 트리 구축- CSS는 렌더링 차단 리소스로 간주3) JavaScript 실행- JavaScript는 파서 차단 리소스(JavaScript에 의해 HTML 구문 분석 차단)- async로 비동기 로드하여 파서 차단 방지4) DOM과 CSSOM을 통합해서 Render 트리 구성- display:none을 사용한 숨겨진 요소는 포함하지 않음5) Redner 트리 기반으로 Layout 생성- 뷰포트의 크기 결정6) Screen에 Painting- 가시적인 내용을 픽셀로 표시- DOM의 크기와 적용되는 스타일에 따라 처리 시간이 다름7) Cirtical Rendering Path 과정 확인- DevT.. 2025. 3. 30. 이전 1 다음 반응형