본문 바로가기

분류 전체보기67

[자바스크립트] 스코프 📌 스코프(Scope) : 변수에 접근할 수 있는 범위 = (식별자를 찾아내기 위한 규칙) 스코프는 전역 스코프와 지역 스코프로 나눌 수 있습니다. 변수는 선언 위치에 의해 스코프를 갖게 됩니다. 전역 스코프를 갖는 전역 변수는 전역에서 참조 가능하고, 지역 스코프를 갖는 지역 변수는 선언된 지역과 하부 지역에서만 참조할 수 있습니다. 변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다. 스코프 체인 전역 객체와 중첩된 함수의 스코프 레퍼런스를 차례로 저장하고, 스코프가 어떻게 연결 되고 있는지 보여주는 것을 말합니다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리합니다. 렉시컬 환경은 식별.. 2023. 12. 27.
[자바스크립트] This 📌 This 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 함수 호출 방식 1. 일반 함수 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 5. ES6, 화살표 함수 호출 1. 일반 함수 일반함수 호출 this는 전역 객체인 window를 가리킵니다. -> 객체를 생성하지 않는 일반 함수에서는 this의 사용은 의미가 없습니다 function normal(){ console.log(this); //Window } normal().. 2023. 12. 27.
브라우저 렌더링 원리 모던 자바스크립트 딥다이브 스터디 간략하게 HTML과 CSS 등 리소스를 서버로부터 받으면, 브라우저의 렌더링 엔진에서 파싱한다. HTML을 파싱하면서 DOM트리와 CSSOM트리를 생성한다. DOM트리와 CSSOM트리를 결합헤서 Render 트리를 생성한 후, 레이아웃 작업과 페인팅 작업을 한다. 상세하게 브라우저 렌더링 엔진은 서버로부터 받은 HTML을 토큰(문법적 의미를 갖는 코드의 최소 단위)으로 분해한다. 각 토큰들을 객체로 변환하여 노드들을 생성한다. 각 노드들은 트리 자료구조를 가지고 있으며 이를 DOM이라고 부른다. HTML을 한 줄씩 파싱해나가다가 link태그나 style태그를 만나면 DOM생성을 일시중단하고 CSS파일을 서버에 요청한다. 요청받은 CSS파일 또는 style태그 안의 CSS.. 2023. 12. 27.
[백준] 4179 불! js 풀이 💡 접근방식 - 가장 빨리 탈출 할 수 있는 시간 - 불은 인접 영역으로 이동 -> BFS!! 1. 불이 번지는 시간을 먼저 bfs로 구하고 2. 지훈이가 이동하는 시간이 불이 번지는 시간보다 짦으면 이동 가능 class Node { constructor(value) { this.value = value; this.next = null; } } class Queue { constructor() { this.first = null; this.last = null; this.size = 0; } enqueue(val) { const newNode = new Node(val); if (!this.first) { this.first = newNode; this.last = newNode; } else { thi.. 2023. 12. 27.
[BFS][백준] 7576 토마토 js 풀이 우선 시간초과로 찾아오신 분!!! queue를 직접 구현하지 않고 배열 메소드 shift 쓰시면 시간 초과납니다 ㅠㅠ 💡접근방법 - 최소 일수를 구하는 것 - 인접 토마토들이 먼저 익는 것 -> BFS다!! 1. 창고 안에 익어 있는 토마토들을 찾아서 큐에 넣고 2. 익어 있는 토마토의 인접 토마토들이 익도록 BFS로 탐색 class Node { constructor(value) { this.value = value; this.next = null; } } class Queue { constructor() { this.first = null; this.last = null; this.size = 0; } enqueue(val) { var newNode = new Node(val); if (!this.fi.. 2023. 12. 27.
백준 JS 입력값 템플릿(VSCode 스니펫으로 쉽게 사용하기) 백준을 사용하다보면 입력값을 받는 게 너무 귀찮았는데 vscode에서 스니펫을 만들어서 사용하니까 너무 편하더라구요 짜잔 bjt만 입력하면 자동으로 입력값 템플릿이 완성됩니다! 방법 1. 하단 톱니바퀴를 누르면 user snippets란 메뉴가 나옵니다 2. 클릭해주시면 원하는 언어를 선택하실 수 있습니다. 저 같은 경우는 js를 선택했어요 3. json 형식으로 스니펫을 넣고 저장해줍니다 4. 이제 bjt만 입력하면 자동완성됩니다! 코드는 주석처리되어 있으니 필요한 걸로 사용하시면 됩니다 json에 들어갈 값 "Baekjoon JS Template": { "prefix": "bjt", "body": [ "const filePath = process.platform === 'linux' ? '/dev/s.. 2023. 12. 27.

티스토리툴바