728x90 ASAC36 [ASAC 06] Javascript 프레임워크 동작원리(2) - Bundling & Code Splitting 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다. Bundling & Code Splitting자바스크립트 파일이 여러 개일 경우에, N개의 자바스크립트 파일을 각각 전송하게 된다면 N번의 네트워크 사용이 발생한다. 이는 매우 비효율적이다.번들링(Bundling)은 N개의 자바스크립트 파일을 1개의 파일로 압축시키는 것이다. 하지만 용량이 매우 커진다는 단점이 존재한다. 전송 파일의 용량이 너무 커도 네트워크 효율에 좋지 않다.이를 개선하기 위해서 코드 스플리팅(Code Splitting) 을 함께 사용한다. 코드 스플리팅은 번들링한 것을 다시 쪼개는 것이다.Code Splitting 기준보고자 하는 페이지에 필요한 코드들만 묶음그러면 한꺼번에 모든 코드를 .. 2024. 8. 27. [ASAC 06] Javascript 프레임워크 동작원리(1) - Javascript Transpiler 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.Compile과 Transpilehttps://www.geeksforgeeks.org/difference-between-transpiler-and-compiler/ Difference Between Transpiler and Compiler - GeeksforGeeksA Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company inte.. 2024. 8. 27. [ASAC 06] Javascript Runtime (브라우저와 서버에서의 비동기 처리) 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.Javascript Runtime자바스크립트 엔진을 기반으로 자바스크립트 언어로 된 모든 코드를 실행할 수 있게 한 뒤, 필요한 API들을 조합한다.엔진 = 언어를 구동자바스크립트 엔진은 웹 서버와 웹 브라우저에서 모두 사용될 수 있다.자바스크립트 엔진의 종류는 많지만, 대표적인 엔진으로는 구글의 v8 엔진이 있다.자바스크립트 엔진의 용도는 사용하는 API에 의해 결정된다.웹 브라우저 (프론트엔드)=> 자바스크립트 엔진(V8) + Web APIs웹 서버 (백엔드)=> 자바스크립트 엔진(V8) + Node APIs + LIBUVLIBUV = 비동기 I/O 라이브러리Javascript 엔진 구성구글 V8 기반의 J.. 2024. 8. 27. [ASAC 06] 프론트엔드 변천사(Vanilla JS, jQuery, React.js) 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.프론트엔드 변천사1. Vanilla Javascript라이브러리나 프레임워크를 사용하지 않는 순수한 자바스크립트를 의미한다.웹 페이지 화면 변경은 javascript를 통한 HTML(DOM) 조작으로 가능하다.페이지의 전환 과정에서 리페인팅이 발생한다.javascript가 수행하는 일HTML(DOM) 이벤트 감지HTML(DOM) 조작vanilla javascript 사용상 단점Hard to Manage: DOM 요소를 하나하나씩 매번 선택하여 조작을 가해야 한다.=> jQuery로 해결!DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering ProcessRender Tree -> Layout(Reflo.. 2024. 8. 27. [ASAC 06] 렌더링, 렌더링 패턴(SSR, CSR, SSG, ISR, Hydration) 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.Rendering렌더링은 유저에게 보여지는 웹 페이지를 만드는 것을 의미한다.맥락에 따라서 두가지 의미로 사용될 수 있다.HTML 문서를 완성함 (서버 혹은 브라우저)브라우저에서 렌더 트리를 생성함HTML -> DOM Tree 변환CSS -> CSSOM Tree 변환DOM Tree + CSSOM Tree => Render Tree그리고 완성된 Render Tree를 화면에 픽셀로 그리는 것을 페인팅이라고 한다.1번 의미(HTML 문서를 완성한다)에서의 렌더링은 서버 혹은 브라우저에서 일어날 수 있다. 위치에 따라서 SSR 혹은 CSR이라고 부른다.2번 의미에서의 렌더링(렌더 트리를 생성)은 항상 브라우저에서 일.. 2024. 8. 27. [ASAC 06] WS와 WAS 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.WS와 WASWS와 WAS의 차이점다음은 사용자가 웹 페이지를 요청하는 경우 WS와 WAS의 차이점이다.웹 서버(WS, Web Server)-> 정적 웹 리소스 반환. 포장 햄버거사용자의 요청마다 다른 웹 페이지를 모두 개발해야 한다는 단점이 존재한다.웹 애플리케이션 서버(WAS, Web Application Server)-> 동적 웹 리소스 반환. 수제 햄버거1개 컨트롤러 1개 뷰 템플릿 N개 데이터에 따른 N개 뷰MVC 패턴WS와 WAS의 관계는 다음과 같이 설명할 수도 있다.웹 서버 : 요청 -> 웹 페이지 반환애플리케이션 : 요청 -> 연산 -> 반환웹 서버 + 애플리케이션 = 웹 애플리케이션 서버*.. 2024. 8. 27. [ASAC 06] SEO, 웹 페이지 성능 Core Web Vital 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.구글과 SEO무언가 = 구글, 네이버, 다음과 같은 서비스 검색 엔진다 찾아놓고 = 웹 크롤링. 구글 봇(크롤러)이 모든 문서를 무지성 수집분류 및 정리한 뒤 = 인덱싱골라서 전달 = 검색 결과 반환제외 정책과 사이트맵robots.txt : 제외 정책. 민감한 페이지는 수집되지 않도록sitemap.xml : 홈페이지 지도. 구글 봇에게 알려주는 역할필요에 따른 정보들을 선택적으로 수집하지 않고 모두 수집하고 정리 및 인덱싱(정보가 너무 많기 때문에. 분류)SEO구글 검색 엔진 알고리즘의 시초 : Page RankSEO (Search Engine Optimization) : 검색 시 상위 노출.마케팅 기획자가 원.. 2024. 8. 27. [ASAC 06] 네트워크, DNS 이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.인트라넷과 인터넷AP네트워크에서 ACCESS POINT. 라우터 혹은 리피터를 의미한다.라우터 -> 노드 간 연결리피터 -> 신호 연장Intranet 인트라넷(사내망, Private Network)대학, 연구기관, 집과 같이 갇힌 공간에 국한된 네트워크=> AP(라우터)를 통해 정의된다. 같은 AP를 사용하는 노드들은 Private Network를 공유한다. Private Network를 공유하는 노드들 끼리는 private ip로도 접근이 가능하다.주의 : Private Network는 물리적 거리보다는 라우터를 통해서 직접 접근이 가능한가로 결정된다. ex) VPNInternet 인터넷(Public Netw.. 2024. 8. 27. 이전 1 2 3 4 5 다음 728x90
