export class FixedArray { #arrayLength; // 배열 초기화 시 길이 #array; #currentLength; // 할당된 요소 개수 // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined constructor(num) { this.#array = []; this.#arrayLength = num; this.#currentLength = 0; for (let i = 0; i 0) { tmp = this.#array[this.#curre..
모듈(Module)- 기능 단위로 분리한 코드 조각- 캡슐화- script에서 type=module을 쓴다면, 자동으로 strict mode가 적용된다 (즉 모듈만의 스코프를 만들게 된다)export는 모듈에서 명시적으로 외부에 공개하는 식별자에 사용하는 키워드이다import는 export한 값들을 자신의 모듈 스코프로 가져오는 것을 의미한다 named export (이름이 있는 내보내기)named export는 하나의 모듈에서 여러값을 내보낼 때 사용한다그렇기 때문에 각각의 이름으로 export 하고,import 시 {중괄호}를 사용해서 export한 이름을 그대로 사용해야 가져와야 한다 만약 다른 이름으로 가져오려면 as 를 사용해서 재정의 한다 그러니 익명으로 export가 안된다 export는 2..
자바스크립트의 7가지 데이터 타입Number, String, Boolean, undefined, null, Object, Symbol변경 불가능한 원시 타입, 변경 가능한 참조 타입이 있다 원시 타입은 한번 생성하면 값을 바꿀 수 없다 흔히 많이 사용하는 String, Number을 +로 연결하는 것은 새로운 메모리 공간에 변경된 값을 저장하는 것이다 암묵적 형변환자바스크립트 엔진은 표현식을 평가할 때, 코드 문맥에 부합하도록 암묵적으로 타입 변환을 실행한다 암묵적 형변환은 형변환 된 변수값을 재할당하는 것이 아니라 변환된 변수를 평가를 위해 한번 사용하고 버린다즉, 기존 원시값을 사용해 새로운 타입의 원시값을 생성하는 것이다! String1. 템플릿 리터럴 (``)문자열 안에 변수, 표현식을 쉽게 포함..
브라우저 렌더링 과정 (Critical Rendering path)critial rendering path는 브라우저에서 화면이 보여질 때까지의 과정을 말한다브라우저에서 html의 문서를 다운로드 후, 페이지를 렌더링 하기까지의 과정을 살펴보자 크게 4가지 과정으로 이루어진다1. DOM +CSSOM 트리 생성2. Render 트리 생성 3. Layout4. Painting 1. DOM + CSSOM 생성 (브라우저 렌더링 엔진이 파싱)브라우저 렌더링 엔진이 html 문서를 파싱하여, 해석하기 위한 노드 객체로 변환된 객체 트리인 DOM 트리를 생성한다 CSS도 마찬가지로 파싱하여 CSSOM 트리를 생성한다DOM (Document Object Model)CSSOM (CSS Object Model) 2. ..
리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트!이 둘의 차이가 정확히 뭔지 모른채 그게 그거지 했었다 리액트 컴포넌트(React Component)UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록, 즉 함수다리액트 컴포넌트가 반환하는 것이 리액트 엘리먼트이다function MyComponent() { return Hello, World!;} 리액트 엘리먼트(React Element)컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 객체이다 즉, 컴포넌트가 렌더링하는 모든 UI 정보를 가진 객체이다 그리고 React DOM는 엘리먼트들을 모아 Virtual DOM을 만들고, 업데이트 전 Vir..
프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데vite에서는 작동이 안된다 문서에서 시키는 대로 했는데 안됨찾아보니 vite는 설치 방법이 약간 달랐다 1. 공식 문서 방법역시 공식 문서에 있었다installation에는 없고, 검색어로 vite를 입력해야 나온다 기존 tailwind 설치 이외에도 2가지의 패키지를 설치한다npm install -D tailwindcss postcss autoprefixer Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com 2. 기존 방법 + vite.config 수정1번 방법을 찾기 전에 다른 방법을 찾아서 적용했다 이..