[24/09/26-10/02] 안내 및 질문 모음집

[minjeongss]

📚 분량

38장-39장

🎤 발표자

김민석

질문

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

39장

• Virtual DOM과 DOM의 차이 (김민석)
• HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

[minjeongss]

38장

• async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되- 어도 괜찮은 예시가 궁금합니다) (김민정)

  • 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적 역할을 하는 서드 파티 스크립트를 현재 개발 중인 스크립트에 통합할 때 사용
  • 현재 개발 중인 스크립트에 의존하지 않음

  <!-- Google Analytics는 일반적으로 다음과 같이 삽입합니다. -->
  <script async src="https://google-analytics.com/analytics.js"></script>

39장

• Virtual DOM과 DOM의 차이 (김민석)
  • dom: 실제 화면에 나타내는 트리
  • virtual dom: dom을 모방하는 형태로 메모리 상에만 존재하는 가상의 dom
  • virtual dom과 dom의 관계
    • 데이터 변경 발생
    • 전체 UI가 virtual dom에 렌더링 진행
    • 이전 virtual dom과 변경 후 virtual dom을 비교
    • 변경된 부분만 dom에 반영
  • virtual dom의 내부 동작
    • dom fragment*에 변화를 묶어서 적용한 후, dom에 전달
      • dom fragment
        • 메인 dom 트리에 포함되지 않는 가상 메모리에 존재하는 dom 노드 객체
        • 브라우저 리페인트 영향 없이 메모리에서 돔 조작 가능
    • virtual dom은 이 과정을 자동화+추상화 한 것임

• HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

  • 사용자 입력을 검증하지 않으면 악성 스크립트가 HTML 문서에 삽입될 수 있음

  • 예시

    • input 태그에 일반적인 string값을 넣는 것이 아닌, script와 같은 값을 입력하는 경우

    <script>alert('XSS')</script>

  • 해결 방법: 사용자 입력 정규 표현식과 같은 방법으로 검증

[joarthvr]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

1. 광고 스크립트
   • 광고는 페이지 콘텐츠와 독립적으로 로드될 수 있으며, 빠른 로딩이 중요합니다.
2. 외부 위젯
   • 소셜 미디어 위젯이나 댓글 시스템과 같은 외부 위젯도 async로 로드할 수 있습니다

     39장

Virtual DOM과 DOM의 차이 (김민석)

성능과 처리 방식 관점

DOM

• 직접적인 조작은 비용이 큰 작업이며, 특히 대규모 애플리케이션에서 성능 이슈를 야기할 수 있습니다
• 변경이 발생할 때마다 브라우저의 레이아웃 계산과 리페인트 과정이 반복

Virtual DOM

• 메모리 상에서 변경 사항을 먼저 처리한 후, 실제 DOM과 비교하여 필요한 부분만 업데이트
• 불필요한 DOM 조작을 줄여 성능을 개선

사용 목적 관점

DOM

• 웹 페이지의 구조, 스타일, 내용을 동적으로 조작하는 데 사용됩니다.

Virtual DOM

• DOM 조작의 비효율성을 해결하고 애플리케이션의 성능을 향상시키기 위해 도입됌
• 특히 React와 같은 프레임워크에서 UI 업데이트를 최적화하는 데 사용됌

렌더링 과정

DOM

• 변경 사항이 발생할 때마다 전체 DOM 트리를 다시 그립니다

Virtual DOM

• 변경 사항을 가상 DOM에 먼저 적용한 후, 이전 상태와 비교하여 실제 DOM에는 변경된 부분만 업데이트합니다

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• HTML 파싱은 애플리케이션의 보안 경계를 우회할 수 있게 합니다
• 브라우저는 HTML을 파싱하면서 스크립트를 자동으로 실행하기 때문

[se0kcess]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

async 어트리뷰트는 JavaScript 파일을 비동기적으로 로드할 때 주로 사용됨

1. 외부 API에서 데이터를 가져오는 경우 <script async src="api-fetch.js"></script>
2. 분석 도구 초기화 <script async src="analytics.js"></script>
3. 독립적인 유틸함수 정의 <script async src="utils.js"></script>

39장

Virtual DOM과 DOM의 차이 (김민석)

• DOM : HTML 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다.
• Virtual Dom : 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.

렌더링 방식 DOM: 변경이 있을 때마다 실제 DOM을 직접 조작한다. 이는 브라우저가 리플로우와 리페인트 과정을 거치게 하여 성능에 영향을 줄 수 있습니다. Virtual DOM: 변경사항을 먼저 가상 DOM에 적용한 후, 실제 DOM과 비교하여 차이가 있는 부분만 실제 DOM에 적용한다.

데이터가 변경될 때 마다 DOM은 매번 처음부터 다시 화면이 그려지는 불필요한 반복이 발생된다. 그래서 DOM을 조작하는 Virtual DOM이 탄생하게 되었다. Virtual Dom은 변화가 실제 DOM에서 적용되기 전에 가상의 DOM을 거쳐서 계산 단계를 줄이고 효율적인 DOM조작을 가능하게 만들어준다. 만약 데이터가 변경되지 않는 웹 페이지라면 일반 DOM이 성능이 좋을 수 있고, 장바구니 등 사용자에 따라 데이터가 변경되는 웹페이지라면 DOM 조작이 많이 발생하기에 상황에 맞게 virtual DOM을 사용해야 한다

---

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• 사용자 입력이나 외부 소스에서 온 데이터를 적절히 검증하거나 이스케이프하지 않고 그대로 HTML에 삽입하면, 공격자가 악의적인 스크립트를 주입할 수 있다.

• 브라우저는 HTML을 파싱할 때 Githubissues.

• Githubissues is a development platform for aggregating issues.