본문 바로가기

JavaScript

Browser - 브라우저의 구조와 렌더링 과정

Computer Programming/Javascript 2023. 6. 15. Browser - 브라우저의 구조와 렌더링 과정 1. 브라우저의 구조 웹브라우저의 기능이 다양화되면서 많은 역할을 수행하고 있습니다. 그러나 웹브라우저의 근본적인 역할은 웹페이지를 다운받아 렌더링하여 화면에 보여주는 것입니다. - User Interface : 요청한 페이지를 보여주는 창 이외에 사용자가 컨트롤 할 수 있는 부분이다. (주소표시줄, 이전/다음, 새로고침 ...) - Browser Engine: 주소표시줄에 URI를 요청하는 등의 사용자 인터페이스를 렌더링 엔진에 전달해주고 동작을 제어한다. 또는 Data Persistence(자료저장소)에서 필요한 정보를 가져온다. - Rendering Engine : 요청한 URI를 브라우저엔진에게 받아서 server에 요청한다. 이후 데이터를 받아 파싱한 후 렌더링한다. (렌더링 과정은 2장에!) ..

자바스크립트의 비동기 처리 동작 원리 | 콜스택, 이벤트루프, Promise, fetch, async/await

Computer Programming/Javascript 2023. 6. 14. 자바스크립트의 비동기 처리 동작 원리 | 콜스택, 이벤트루프, Promise, fetch, async/await 목차 비동기처리의 필요성 1-1. 실행컨텍스트 스택 1-2. 싱글스레드 비동기처리의 동작 원리 2-1. 브라우저의 이벤트 루프 2-2. 왜 싱글스레드일까? 콜백 비동기 처리의 문제점 3-1. 콜백 헬 (Callback hell) Promise 4-1. 상태 4-2. fetch와 axios async/await 5-1. async/await 5-2. Promise 메소드 1. 비동기처리의 필요성 1-1 . 실행컨텍스트 스택 (=콜스택, Execution context) - 자바스크립트의 동작 원리를 담고 있는 핵심 개념으로서 이를 통해 식별자&값 메모리 관리 방식, 호이스팅 발생 이유, 이벤트 핸들러(테스트 큐), 비동기 처리의 동작 방식을 이해할 수 있습니다. - V8의 구조: Memory Heap (메..

JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점

Computer Programming/Javascript 2023. 6. 13. JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점 영어로 하면 Bulls and Cows라고 한다고 한다... 컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요! 1번째 시도 : 134 0B0S 2번째 시도 : 238 1B1S 3번째 시도 : 820 2B1S 4번째 시도 : 028 3B 5번째 시도 : 280 3S 4번만에 맞히셨습니다. 게임을 종료합니다. 1. 문제점 자바스크립트로 간단한 숫자야구 프로그램을 개발하던 중, 컴퓨터가 생성한 랜덤 수와 유저가 입력한 랜덤 수 중에 동일한 숫자가 있는지 확인하는 함수에서 잠깐 막혔었다. 그 이유가, ball인지 확인할 때 그 해당 숫자를 제외한 다른 배열을 또 만들어 비교하고 싶어서 splice를 사용했더니 배열의 원본이 변경되어 원하는 결과를 얻지 못했기 때문이었다. 콘솔 계속 찍어보니 그게 문제였다. 아래..

🎮 자바스크립트로 2D 게임 개발하기 (블럭맞추기) | canvas, JQuery, localStorage 사용

Computer Programming/Javascript 2023. 6. 6. 🎮 자바스크립트로 2D 게임 개발하기 (블럭맞추기) | canvas, JQuery, localStorage 사용 1. 프로젝트 개요 웹미니 프로젝트로 html, css, javascript 그리고 JQuery를 이용해 간단한 게임을 개발하는 프로젝트를 진행했다. https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 2D breakout game using pure JavaScript - Game development | MDN In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML . developer.mozilla.org 위의 Mozilla d..

[React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js)

Computer Programming/React 2023. 5. 14. [React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js) 1. Javascript만을 사용한 코드는? 자바스크립트는 명령형 접근방식(imperative approach)이기 때문에 모든 단계를 설명하는 것이 중요하다. 예를 들면 화면에 특정한 페이지를 띄우는 방식 등에서 일련의 액션들을 단계별로 설명해야한다. -> 모든 단계를 명시하는 과정에서 한계가 나타날 수 있고 세부사항들을 신경써야한다. 이는 되풀이되고 반복적인 액션들을 작업하게 될 수 있다. 2. 리액트(React.js)란? 리액트는 client-side 자바스크립트 라이브러리이며 모던, 반응형 유저 인터페이스관리에 용이하다. Declarative and component-focused approach 3. React.js의 장점은? 리액트를 사용하면 같은 방식으로 동작하지만 훨씬 더 간결한 코드로 작..

이전 1 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*

*