본문 바로가기

Web

Vanilla Javascript Component Core 구현 ※ 전반적인 코드는 황준일님의 코드를 참고하여 구현하였습니다. 1. 컴포넌트 생명주기 (1) constructor(컴포넌트 생성) - 상태변화를 감지할 observer에게 상태 등록 - props 설정 - event 설정 (2) created(엘리먼트 생성 전) - 엘리먼트를 그리기전 필요한 로직 수행 (3) render(엘리먼트 생성) - 엘리먼트 생성 (4) mounted(엘리먼트 생성 후) - 자식 컴포넌트 마운팅 2. 상태관리 (1) 컴포넌트에 종속되는 상태 - getState(키, 초기값)으로 상태 호출 - setState(키, 값)으로 상태 변경 (2) 전역으로 관리되는 상태 - store생성시 observer에게 상태 등록 - observer에 등록한 상태를 호출할때 컬렉션에 존재하지 않을 .. 더보기
WebPack을 이용한 Typescript 번들링 1. 패키지 설치 typescript ts-loader 설치 yarn add typescript ts-loader@8.2.0 2. Webpack 옵션파일 수정 // webpack.config.js const path = require("path"); module.exports = { mode: "development", // mode: "production", entry: ["@babel/polyfill", "./src/index.ts"], output: { path: path.resolve(__dirname, "dist"), publicPath: "/dist/", filename: "bundle.js", }, module: { rules: [ { test: /\.js$/, include: path.jo.. 더보기
Class ※ Class는 Hoisting이 되지 않는다. 1. 사용자 정의타입 생성 (ES5이전 Class 선언) function Person() {} Person.prototype.name = "yg1110"; Person.prototype.age = 27; let kim = new Person(); let Joeng = new Person(); kim.name = "EHwoo"; console.log(kim.name); // EHwoo console.log(Joeng.name); // yg1110 kim과 Joeng 자신이 변수를 가지고 있는게 아니라, Person.prototype이라는 Object의 name이라는 속성을 공유하고 있습니다. 즉 객체의 수 만큼 변수가 저장되는 것이 아니라 하나의 protot.. 더보기
prototype chain 1. 함수 선언 및 인스턴스 선언 let Person = function() { this.a = 1; this.b = 2; }; let person1 = new Person(); 2. prototype 생성방법 2가지 Person.prototype.b = 3; //1 person1.b = 3; //2 3. prototype chain let Person = function() { this.a = 1; this.b = 2; }; let person1 = new Person(); Person.prototype.b = 3; Object.prototype.c = 4; console.log(person1.a); // 1 // 첫번째 체인에서 찾음. console.log(person1.b); // 2 // 두번째 .. 더보기
Javascript 배열함수 1. map const arr = [1, 2, 3, 4, 5]; const map = arr.map(v => { return v; }); console.log(map); // [1, 2, 3, 4, 5] 2. reduce acc : 누산기 current : 현재값 idx : 현재 인덱스 src : 원본 배열 const alphabets = ["a", "b", "c", "a"]; const count = alphabets.reduce((acc, current) => { if (acc[current]) acc[current] += 1; else acc[current] = 1; return acc; }, {}); console.log(count); // { a: 2, b: 1, c: 1 } const arr .. 더보기

티스토리툴바