빵 입니다.

a태그 => 화면 전환 => 리소스 처음부터 끝까지 다시 호출. router-link => 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴 => 태그 생성. => 선언적 방식. 클릭 시 url 로 이동만 한다. 📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드 ===> router-link를 클릭하면 router.push를 호출하는 것과 같다. router.push() => 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다. => 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다. => , 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 => window.history API와 비슷하게..

CSSOM tree와 DOM tree는 Render tree로 결합된다. Render tree는 표시되는 각 요소들의 “레이아웃”을 계산하는 데 사용되며, 각 노드를 화면의 실제 픽셀로 렌더링하는 페인트 프로세스에서 사용하는 입력값으로 사용된다. HTML, CSS 입력값을 기반으로 DOM tree와 CSSOM tree를 만들었다. 그러나 둘 다 document의 다른 측면을 캡처하는 독립적인 객체이다. 하나는 콘텐츠에 대한 설명이고, 하나는 document에 적용해야하는 스타일 규칙에 대한 설명이다. 어떻게 두가지를 병합하고, 브라우저가 화면의 픽셀을 렌더링하도록 할까? 📌 TL;DR DOM tree와 CSSOM tree가 결합되어 Render tree를 만든다. Render tree는 화면을 렌더링하는..

브라우저가 페이지를 렌더링하려면 DOM tree와 CSSOM tree가 필요하다. 결과적으로 우리는 가능한 빨리 브라우저에 HTML과 CSS를 전달해야 한다. 📌 TL;DR Bytes -> characters -> tokens -> nodes -> object model. HTML 마크업은 DOM으로 변환된다. CSS 는 CSSOM으로 변환된다. DOM, CSSOM은 독립적인 데이터 구조 Chrome DevTools Timeline을 사용하면 DOM과 CSSOM의 구성과 처리 비용을 캡처하고 검사할 수 있다. 📌 Document Object Model (DOM) Hello web performance students! 약간의 텍스트와 이미지 하나가 있는 plain HTML이 있다. 브라우저는 이 페이지를..

맥북만 쓰다가... 너무 오랜만에 PC를 켰다. vue3 앱을 만들려고 node와 npm을 정비하려고 하는데..... 업그레이드가 되지 않았다...! node는 latest로 업데이트를 해줬는데, npm이 업데이트가 안되는 이슈 ㅠ.ㅠ 문제1. prefix -g가 더 이상 사용되지 않는다. 대신 prefix --location=global을 사용한다. npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security u..

S2020에서 새로 나온 문법. 구식 브라우저는 폴리필이 필요. 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 참조가 * nullish라면, 에러 발생하지 않고 undefined를 반환한다. 함수가 존재하지 않는다면 undefined를 반환한다. 선언되지 않은 루트 객체에 사용할 수 없다. 정의되지 않은 루트 객체에 사용할 수 있다. * nullish : nullish 값은 null이나 undefined이다. 항상 false. 문법 obj?.prop obj?.[expr] arr?.[index] func?.(args) 예시 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이..

Working directory => Index (Stage) => Local repository => Remote repository (HEAD) add Working directory ===> Index (Stage) commit Index (Stage) ===> Local repository push Local repository ===> Remote repository (HEAD) 1. add 원격 저장소에 최종적으로 반영할 소스들을 선별해두는 가상의 공간 파일을 Stage에 추가 (add) Working directory ===> Index (Stage) $ git add $ git add * ===> 이후 “staging 상태” 라고 한다. 2. commit 저장소에 변경 사항 기록 stagi..

사용자 정보 입력 $ git config --global user.name "HWANG CONAN" $ git config --global user.email conan@example.com 설정 값 확인 $ git config --global --list ===> user.name=mypmk ===> user.email=mypmk@naver.com 로컬 저장소 만들기 $git init 로컬 저장소 복제하기 $git clone /로컬/저장소/경로 스테이지 상태 확인 명령어 $git status $git ls-files --stage 변경사항 확인 $git diff ===> 아직 스테이징되지 않고 커밋되지 않은 작업 디렉토리의 untracked 파일의 변경사항을 보여준다. ===> ‘-‘로 시작된 줄은 삭..

📌 TL;DR 자바스크립트 프로그래밍 => 자바스크립트 엔진과 웹 브라우저에서 제공하는 API 메소드로 프로그래밍을 하는 것이다. * 크롬 웹 브라우저는 V8 엔진이 탑제된 자바스크립트 런타임이다. 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성되어 있다. 자바스크립트는 싱글 스레드이기 때문에 한 번에 한 가지 일만 처리할 수 있지만, 비동기를 이용하면 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 실행할 수 있다. Web APIs, Message Queue(= Event Queue)와 Event Loop가 비동기 처리를 해준다. Web API로 Callback 함수를 만들고, Queue 대기열에 넣어뒀다가 Call Stack이 빈 상태가 되면 Event Loop가 Callback 함수..