hee-ya07 님의 블로그

- 과거: 완성된 HTML + JS로 DOM조작(SSR, SSG)- 해당: 빈 HTML(템플릿만) + 거대한 내용의 JS(DOM 조작 + Repainting)(CSR) 1) 작업한 파일들을 올리기 전 합치고 정리하여 각 확장자별 하나의 파일로 병합(번들링)2) S3서버에 업로드(대충 배포..)3) 사용자 사용(중간 과정에 CDN이라는 개념이 있는데, 분산 서버를 사용해 웹 성능을 올리는 것)시작 전에 전체적인 흐름을 담고 용어 정리와 기록하고자 한다.번들러(bundler)번들(bundle)용어 그차체, 여러 파일을 하나로 묶는 작업역할- 파일 합치기(bundling)- 의존성 그래프 처리- HMR순서1)의존성 그래프 생성(entry point 기준)2) 의존성 분석3) 파일 병합 및 최적화 * HMR(H..

자바스크립트 런타임과 비동기 지원 방법자바스크립트 런타임 환경* 런타임: 프로그램이 구동/실행되는 환경    => 해당 주제에서의 의미 == 코드 실행시 사용할 수 있는 도구가 모인 환경,    ==> 관련 도구들(js엔진 + api 및 라이브러리)        1) js엔진        2) 런타임 api        3) event loop:비동기 작업, 콜백 처리        4) task queue/microtask queue: 비동기 작업 처리 구조 js 엔진 구성(v8기반)- 특징    1) 싱글 스레드    2) 메모리 = Stack + Heap 구조* heap: 선언 및 할당된 객체, 변수 및 함수 저장* call Stack: 함수 실행 순서대로 적재 및 수행(FILO) - js문법에 대한..

! DOM "간편" 조작으로 React를 사용한다고 했다. 거기서 나온 개념들 중 더 찾아본 것을 기록하고자 한다.동작- 데이터가 변함에 따라 웹 페이지의 Rerender가 발생    -> 과거에는 각 상태의 변경에 따라 매번 페이지를 갱신 => 잦은 rerendering ㅠㅠ    => react에서는 단방향 프로세스로 설명    ==> Controller(상태 변경 발생) -> Model(State 데이터가 변경) -> View(page를 지목하는 DOM 변경) - 리액트에서는 페이지 구성에서 VDOM 트리를 도입항목Virtual DOM(VDOM)목적DOM 업데이트를 최소화-> 성능을 최적역할변경된 부분만 감지( Reconcilation)-> 이를 실제 DOM에 반영비교 대상1) 타입이 달라졌을 경우..

1. 화면 조작/전환RoutingRendering사용자 요청에 따른 URL처리 -> 페이지 or 데이터 제공데이터를 화면에 표시- Rerendering: 화면 일부 처리DOM 조작주체장단점비고직접 조작js(-) haard to mange ==개발 빡셈(-) repetitive == WB도 빡셈(DOM 변경에 의한 다수의 렌더링 발생) 간편 조작j-query(+) 브라우저별 호환성 문제 해결(-) repetitive == WB도 빡셈Cross Browsing간접 조작react짱임...최고임VDOM 사용 Hard NavigationSPA /Soft NavigationURL변경 시새 HTML 페이지로 이동JS가 새 화면을 구성함네트워크 사용화면 전환 시마다초기 로드에 사용, 이후 화면 전환 시 미사용방식Ser..