전체 글
-
TIL-2024.03.27 - JS - Web Rendering - 레이아웃 계산 & 리플로우> 기초/Javascript 2024. 3. 28. 11:22
질문: 랜더 트리가 구성된 이후 대체 어떤 일이 발생하는가? 레이아웃, 리플로우는 각각 무엇이고 차이점은 무엇인가 랜더트리 구성 이후 발생되는 일: 랜더링 과정 복습: - HTML 문서와 CSS 스타일 시트를 파싱하여 각 요소에 적용되는 스타일을 결정하여 요소의 특성을 설정 (각 요소들의 우선순위, 상속, 선택자에 따라 최종적으로 적용되는 스타일이 결정) 이렇게 만들어진 랜더트리(필요한 요소들의 집합) 웹 페이지의 요소들의 크기와 위치를 결정하기 위해 필요한 계산이 필요. 이러한 작업을 하는 것을 레이아웃 계산 (초기) | 리플로우(변경시) 라 한다. 레이아웃 계산 : 요소의 스타일 정보를 계산하여 각 요소가 어디에 위치하고 어떤 크기를 가져야 하는지를 결정. 레이아웃 계산은 초기 페이지 로드 시에 한 ..
-
TIL-2024.03.26 - Vue - Web Rendering & Vue 작용> 기초/Javascript 2024. 3. 26. 17:21
질문: Web Browser Rendering 과정에서, 랜더링 트리 생성후 어떤일이 발생해? 이 과정에서 Vue, React와 같은 SPA Framework는 언제, 그리고 어떻게 작동할까(Virtual DOM & Vue Rendering )? Web Browser 작동원리: 문서 파싱 (Document Parsing) > Output: 돔트리 생성: 사용자가 URL을 입력하거나 링크를 클릭하여 웹 페이지를 요청하면, 브라우저는 해당 페이지의 HTML 문서를 서버로부터 받아옵니다. 브라우저는 받아온 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 생성합니다. DOM은 HTML 문서의 구조를 표현하는 트리 구조로, 각 요소(Element)는 노드(Node)로 표현됩니다...
-
TIL-2024.03.25 - JS - 외부 객체와 내부 객체> 기초/Javascript 2024. 3. 25. 21:41
목표: - 외부객체 - 내부객체 - 객체의 "외부 객체"는 객체의 기본 구조로. 이는 객체의 프로퍼티들을 포함하고 있는 부분. - 내부 객체는 객체 내부에 포함되어 있는 객체며, 이는 객체의 프로퍼티 중에서 객체 자체를 값으로 가지고 있는 프로퍼티를 의미. const obj = { outerProperty: "Outer", innerObject: { innerProperty: "Inner" } }; 위의 예제에서 "외부 객체"는 obj 전체입니다. outerProperty와 innerObject가 이 객체의 외부 구조를 이룹니다. "내부 객체"는 innerObject입니다. innerProperty가 이 객체의 내부 구조를 이룹니다. -------- 외부객체와 내부객체 외부 객체: 객체의 기본적인 구조를..
-
TIL-2024.03.24 - JS - 얕은 복사 & 깊은 복사> 기초/Javascript 2024. 3. 24. 19:58
------- 배경 아래와 같은 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않음. 이러한 원시값들은 모두 변경이 불가능하며, 각각의 자체적인 데이터 가짐. 예를 들어, 변수에 원시값을 할당하면 변수에는 해당 원시값이 직접 저장되기에 한 변수의 값을 변경해도 다른 변수에 영향 없음. (string, number, boolean, undefined, null, symbol) const a = 1; let b = a; b = 2 console.log(a); //1 console.log(b); //2 하지만 참조값 (Object & Array)은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킴. // ..
-
TIL-2024.03.23 - 코테연습 - Kakao- 크레인 인형뽑기 게임(1).programmers> 기초/코테 연습 2024. 3. 23. 14:51
URL: https://school.programmers.co.kr/learn/courses/30/lessons/64061 내가 푼 코드: const solution = (board, moves) => { const N = board.length; let newArr = []; let result = []; let count = 0 let flag = true; for(let i = 0; i < N ; i++ ){ newArr[i] = new Array(N).fill(-1) } for (let i = 0; i < board.length; i++) { for(let j = 0; j < board.length; j++){ newArr[j][i]=board[i][j] } } for(let i = 0 ; i <..
-
TIL-2024.03.22 - JS - Closure> 기초/Javascript 2024. 3. 22. 23:29
------- Closure 설명: - 함수와 그 함수가 선언된 렉시컬 환경(lexical environment) 사이의 관계 - 함수가 자신이 선언된 스코프 외부에서 호출되더라도, 해당 스코프에 대한 참조를 유지하고 있는 것을 의미 사용 이유: 데이터 은닉 > Closure 을 사용하여 함수 내에서 선언된 변수들을 외부에서 접근할 수 없도록 은닉 콜백 함수 > 콜백함수로 사용되어 비동기적인 작업으로 외부 변수에 접근 부분 적용 함수 > 함수에 인자를 부분적으로 적용 기본 예시: function outerFunction() { let outerVariable = 'I am outer'; function innerFunction() { console.log(outerVariable); // outerVar..
-
TIL-2024.03.21 - 코테연습 - 옹알이(1) & 명예의전달(1).programmers> 기초/코테 연습 2024. 3. 21. 20:46
URL: https://school.programmers.co.kr/learn/courses/30/lessons/133499 // URL > https://school.programmers.co.kr/learn/courses/30/lessons/133499 const solution = (babbling) => { const ableBabblingArray = [ "aya", "ye", "woo", "ma" ]; for (let i = 0; i < babbling.length; i++) { for( let j = 0; j < ableBabblingArray.length ; j ++){ if(babbling[i].includes(ableBabblingArray[j].repeat(2))) { break; }..
-
TIL-2024.03.20 - 코테연습 - 대충 만든 자판기.programmers(lv.1)> 기초/코테 연습 2024. 3. 20. 22:15
URL: https://school.programmers.co.kr/learn/courses/30/lessons/160586 // URL > https://school.programmers.co.kr/learn/courses/30/lessons/160586 const solution = (keymap, targets) => { let answer = []; targets.forEach(target => { let result = 0; target.split("").forEach(char => { let min = Infinity; for (let i = 0; i -1) { m..