빵 입니다.

브라우저가 페이지를 렌더링하려면 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 함수..

ruby-sass? libsass?? node-sass??? dart-sass???? sass-loader?????????? 무엇을 설치해야 하는지 모르겠어서 정리를 해봤다. Sass(SCSS)를 사용하기 위해 어떤 걸 설치할까? Sass(SCSS)는 Ruby 기반이다. (Ruby-sass) - Ruby on rails 설치 후 사용 Ruby 아닌 다른 환경에서 사용하려면, C/C++ 언어 기반의 Libsass 를 사용해야 한다. (Ruby 기반보다 컴파일이 빠른 장점이다.) Node 환경에서 사용하려면, Node-sass가 필요하다. Sass(SCSS) 파일을 로드하고, 컴파일 해주기 위해서 Webpack의 Loader인 Sass-loader와 함께 쓰면 된다. 그러나! 2020년부터 Libsass, ..

삼각비를 각에 대한 함수로 나타낸 것으로 삼각형의 각과 변의 길이를 연관시킨 각에 대한 함수 직각 삼각형 => 삼각비 존재 모양이 다른 직각 삼각형이여도 θ 값이 같다면 삼각비는 같다. = 모든 직각 삼각형의 삼각비는 같다. = 비를 그대로 유지 대변 다각형에서, 한 변이나 한 각과 마주 대하고 있는 변. 빗변 직각 삼각형의 직각에 대한 변. 비스듬히 기울어진 변. 인접변 한 변을 공유하고 같은 평면에 놓여 있지 않은 두 평면. 두 집합 X, Y에 대하여 X의 임의의 원소 x가 Y의 오직 한 원소 y에 대응될 때, 이러한 관계를 함수라고 한다. 이때 X를 이 함수의 정의역이라 하고, Y를 이 함수의 공역이라고 한다. 따라서 함수의 치역은 공역의 부분집합니다. 역함수 삼각 함수의 역함수의 경우에는 함수들을..