hee-ya07 님의 블로그

1.1 Web Application Framework- Java: Spring- Python: Django- C#: ASP, NET- JS: Express.js - 웹 어플리케이션 프레임워크는 다음과 같은 기능을 제공RequestMapping : 어떤 요청에 따라 어떤 메서드(함수 혹은 로직)을 수행할것인지Thread 관리 : 요청을 처리하기 위한 Thread 할당 및 관리, 데이터베이스 접속을 위한 Thread 할당 및 관리데이터베이스 동시성 제어 : 대량 트래픽 발생 시 데이터베이스 조작에 대한 각 요청들 간의 동시성 제어-> Isolation Level(트랜젝션 격리 레벨)Serialization / Deserialization : 요청, 응답 시 어플리케이션의 객체와 클라이언트의 JSON 사이 변..

- 직렬화, 역직렬화- 서버에서의 데이터 형태 == Object- 전송 시 데이터 형태 == String(=JSON)    - 직렬화(Serialization): 2차원의 Object -> 1차원의 JSON으로    - 역직렬화(Deserialization): 1차원의 JSON -> 2차원의 Object로

1. HydrationHydration: SSR로 생성된 정적 HTML 페이지가 클라이언트 측에서 js가 실행되며 동적 웹 애플리케이션으로 활성화(+) Hydration은 처음 페이지가 로드될 때 HTML은 빠르게 표시(-) JS가 로드되고 실행될 때까지 페이지 상호작용이 비활성 상태    -> 인터랙티브 요소가 늦게 동작/비활성화SSG(Static Site Generation): 비실시간성 요소를 미리 생성하여 페이지를 매우 빠르게 반환합SSR(Server-Side Rendering): 실시간성이 필요한 요소는 서버에서 요청이 들어오자마자 렌더링되어 반환CSR(Client-Side Rendering): 모바일 앱처럼 일부 요소는 클라이언트에서 렌더링하여, JS 번들 크기를 줄이고 성능을 최적화2. Pa..

0. 시작하며: 이전 포스트에서 웹 페이지의 3가지 제공 방식을 살펴보았다.SSG이미 만들어진 웹 페이지를 서버에 저장하고 바로 WB에 반환(+) 속도가 빠르다.(-) 실시간성 위배SSR웹 서버가 만든 페이지를 WB에 반환(+) 실시간성 O(-) 웹서버 부하가 크고, 렌더링 시간이 길다.CSRWB가 JS바탕의 페이지를 반환(+) 좋은 UX를 제공(-) 초기 로딩이 느리고, bundled js가 너무 크다.1. Hydration: SSG, SSR의 장점 위에 CSR의 장점을 추가하기 위한 방법    => 즉 , SSG, SSR방식으로 렌더링된 HTML 페이지를 Client에서 동적 웹 애플리케이션으로 활성화되도록 변환한다.SSG웹 페이지 내 비실시간성 요소를 미리 준비-> 빠르게 반환SSR실시간성이 필요한..

1.1 SSG(Static Site Generation): WS가 페이지를 제공 -> (컴파일 타임에) 미리 렌더링된 페이지를 반환비 실시간성SEO 가능(서버에서 만들어진 페이지이므로)서버의 렌더링 부담 제거1.2  SSR(Server-Side Rendering): WS가 페이지를 제공 -> (런타임에) 요청이 올 때마다 렌더링한 페이지를 반환함실시간성(요청에 따른 실시간 데이터가 반영된 최신 페이지 반환) => 실시간 데이터가 중요한 곳에 이용SEO 가능-> build의 결과물 == `거대한 JS` 이를 이용하여 빈 HTML을 채울 `템플릿 엔진` 필요-> `템플릿 엔진`은 Render의 주체로 결과로 view를 생성(이런 식으로 이해)-> Render가 서버에서 발생하므로 SSR1.3 CSR(Clie..

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..