hee-ya07 님의 블로그

1.1 Gloal CSSSelecter 원시 방식        : 외부에 정의된 CSS파일을 통해 import 하여 HTML Selector로 하나하나 적용Inline 방식        : 객체에 직접 스타일 -> React 리렌더링 성능 이슈        => React에서 style 내 객체가 매 렌더링마다 다르게 인식되어 매번 DOM 계산을 통한 성능 저하 발생 잘 사용하지 않는 방법들        -> 선택자 충돌을 막기위해 BEM(Block Element Modifier) 사용        -> 만약 충돌의 발생 시, !important를 통해 특정 선택자의 우선 순위를 강하게 주장        -> 하나의 Global CSS가 모든 페이지를 관리 ==> 번들 사이즈가 너무 큼1.2 CSS Mo..

- 과거: 완성된 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..

웹- 문서 공유 및 탐색용(단방향, 요청 후 단절)- HTML(Hyper Text Markup Language): 현실 세계 문서와 달리 Link가능- 단지, 저장된 문서를 전달(정적 웹 리소스 반환 == WS)- 많은 페이지 저장 => 불편 => 동적 웹 리소스 반환 시작 --> 실시간성과 공간 효율을 확보-> 어플리케이션(요청->연산->반환)을 붙여 사용-> CGI(1요청 1비상주 P) -> FCGI(1요청 1상주 P) -> PHP(이때부터 내장?) -> WAS(Tomcat, Netty)(1요청 1T)-> MVC(model + view + controller): 템플릿 view에 데이터 model을 올려서 controller를 통해 페이지가 뿅마크업 언어태그 기반, 문서 구조 표현 목적마크 다운 언어..