분류 전체보기
![[FE] 브라우저 작동 원리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkAWnV%2FbtrGYz2txlS%2Fqu2NI2PK7RejztJN30k1m1%2Fimg.png)
[FE] 브라우저 작동 원리
브라우저는 아마 사람들이 가장 많이 사용하는 소프트웨어 중 하나이며, 이 글을 통해서 어떤 과정을 거쳐 웹 페이지가 화면에 보이게 되는지 알게 될 것입니다. 브라우저의 기본 구조 사용자 인터페이스 : 주소 표시줄, 이전/다음버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 : 요청한 콘텐츠를 표시. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 그리는 엔진 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. OS 사용자 인터페이스 체계를 사용. 자바스크립트 해석기..
[프로그래머스] [1차] 캐시 - python3
문제 설명 캐시 지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다. 이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다. 어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감한 상황이다. 어피치에게 시달리는 제이지를 도와, DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 프로그램을 작성하시오. 입력 형식 캐..

JavaScript - 가비지 컬렉션(Garbage Collection)
JavaScript는 눈에 보이지 않는 곳에서 메모리 관리를 수행합니다. 원시 값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지합니다. 글로벌 컨텍스트에서 각각의 함수 컨텍스트가 끝나면, 더 이상 필요 없어진 메모리를 처리하는 것이 가비지 컬렉션입니다. JavaScript에서는 도달가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행합니다. 즉, 가비지 콜렉션 알고리즘의 핵심 개념은 참조 입니다. A라는 메모리를 통해 B라는 메모리에 접근할 수 있다면 B는 A에 참조되며 참조-세기(Reference-counting) 가비지 콜렉션 참조-세기 알고리즘은 "더 이상 필요없는 객체"를 "어떤 다른 객체도 참조하지 않는 객체"라고 정의합니다. 이 객체를 "가비지"라 부르며, 이를 참..
JavaScript - 클로저(Closure)
JavaScript의 변수를 정리하면서 클로저에 대한 필요성을 볼 수 있었습니다. [참조 : https://roothyo.tistory.com/83?category=1108573] * JavaScript - 변수(variable) Mdn에서 정의한 클로저는 다음과 같습니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. JavaScript에서 함수는 일급 객체로 다른 함수의 인자로 전달이 가능합니다. 또 함수가 다른 함수를 리턴하는 경우가 가능합니다. (* funargs : functional arguments) 첫째는 upward funargs problem입니다. 이 문..
JavaScript - 변수(Variable)
애플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자라고 불리며 특정 규칙을 따릅니다. JavaScript 식별자는 문자, 밑줄(_) 달러기호($)로 시작해야하는 반면 이후는 숫자일 수도 있습니다. JavaScript가 대소문자를 구분하기에, 문자는 "A-Z"(대문자)와 "a-z"(소문자)까지 모두 포함합니다. 변수 선언은 아래 3가지 방법으로 가능합니다. var 키워드로 변수를 선언할수 있습니다. 실행 맥락에 따라 지역 및 전역변수로 선언하는데 모두 사용될 수 있습니다. const 혹은 let 키워드로 변수를 선언할 수 있습니다. 블록 스코프 지역 변수를 선언하는데 사용될 수 있습니다. var x = 42 //var let y = 13 //let const limit = 10 //..
JavaScript - 콜백 함수(Callback)
콜백 함수는 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료합니다. (모든 예시는 node.js 환경에서 nodemon으로 실행하였습니다.) //With Function name function introduce(name) { console.log("My name is "+name) } function greeting(callback) { console.log("Hello World!"); callback; } greeting(introduce("Roothyo")) //Hello World! //My name is Roothyo // Without Function name let numbers = [1,2,3,4,5] numbers.forEach(functio..
JavaScript - 객체(Object)
Object 클래스는 JavaScript의 데이터 유형중 하나입니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는데 사용됩니다. JavaScript의 거의 모든 객체는 Object의 인스턴스입니다.일반적인 객체는 Object.prototype에서 속성을 상속하지만, 이러한 속성들은 가려지거나 재정의 될 수 있습니다. Object 생성자는 주어진 값에 대한 객체 Rapper를 생성합니다. 값이 null 또는 undefined이면 빈 객체를 생성하여 반환합니다. 그렇지 않으면 주어진 값에 해당하는 타입의 객체를 반환합니다. 값이 이미 객체인 경우 그 값을 반환합니다. 생성자가 아닌 맥락에서 호출될 때 Object는 new Object()와 동일하게 작동합니다. 객체 리터럴 표기법 vs JSON(Java..