JS, TS

1. 함수 - 명시적 this 타입, 오버로딩 // 함수 - 명시적 this interface Cat { name: string age: number } const cat: Cat = { name: 'lucy', age: 3 } // 명시한 this는 cat 타입이라는 의미 function hello(this:Cat, message: string) { console.log(`hello ${this.name}, ${message}`) } // hello 함수를 cat 객체 데이터의 메소드처럼 호출 hello.call(cat, 'you are pretty awesome!') // 함수 - 오버로딩 // 1) function add1(a:string, b:string) { return a+b } functio..

1. 타입 종류 1 - 문자, 숫자, boolean, 배열, 객체, 함수 // 타입 종류 // 문자 let str: string let red: string = "red" let myColor : string = `my color ${red}` // 숫자 let num: number let float: number = 3.14 let nan: number = NaN let infinity: number = Infinity console.log(infinity) // boolean let isBoolean: boolean let isDone : boolean = false // null(명시적) / undefined(암시적) // 배열 let nul : null let und: undefined conso..

상태관리 (스토어) 상태 관리 : 데이터(상태)를 통신할 수 있는 관리 개념 상태 관리 패턴 : 상태를 관리 스토어 : 상태가 저장된 공간 CORE.JS // 컴포넌트, 라우터, 스토어(컴포넌트와 컴포넌트의 데이터 통신 기능) 기능 포함 /* =========== Component ============ */ // tagName을 받거나, el 속성에 요소를 메모리 상에만 하나 추가하고, // 사용되는 부분에서 정의되는 render 함수 부분을 실행 export class Component { // payload : App.js에서 요소 생성에서 필요한 태그 인수인데, 객체 데이터를 payload에 저장 constructor(payload = {}) { // 객체 구조 분해 할당 // payload 객체..

해시 라우터 관리 HTML MAIN.CSS body { height: 3000px; } header { position: fixed; top: 0; width: 100%; background-color: rgba(255,255,255,.5); } CORE.JS // 컴포넌트, 라우터, 스토어(컴포넌트와 컴포넌트의 데이터 통신 기능) 기능 포함 /* =========== Component ============ */ // tagName을 받거나, el 속성에 요소를 메모리 상에만 하나 추가하고, // 사용되는 부분에서 정의되는 render 함수 부분을 실행 export class Component { // payload : App.js에서 요소 생성에서 필요한 태그 인수인데, 객체 데이터를 payload에..

1. 컴포넌트 생성 및 클래스 작성 - 컴포넌트 : 재사용 가능한 각각의 독립된 기능의 모듈(화면에 보여지는 각각의 UI 단위) EX) HEADER, 제목, 설명 부분, INPUT 요소+검색 버튼, 영화 정보 카드 부분(사진, 연도 포함) HTML MAIN.JS import App from './App.js' const root = document.querySelector('#root') root.append(new App().el) APP.JS // export default class App { // constructor() { // this.el = document.createElement('div') // this.el.textContent = 'Hello, world!' // } // } imp..

1. 정규식 생성 // 정규표현식 (RegExp, Regular Expression) // - 문자 검색 // - 문자 대체 // - 문자 추출 // 생성자 // new RegExp('표현', '옵션(플래그)') // new RegExp('[a-z]', 'gi') const str = ` 010-22134-125 test@gmail.com hello world! https://test.com/?tset=123 the test is test hello@naver http://234:234 동해물과 asdfsaew ` // const regexp = new RegExp('the', 'gi') // // match() : 문자 데이터에서 정규식을 기준으로 특정한 문자를 매칭 // console.log(str...

1. Symbol, BigInt 데이터 // Symbol // 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용 가능 // Symbol('설명') // 설명은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계가 없음 const sKey = Symbol('hello!') const user = { key: '일반 정보', [sKey]: '민감한 정보' } console.log(user.key) console.log(user['key']) console.log(user[sKey]) console.log(user[Symbol('hello!')]) // undefined console.log(typeof sKey) // Symbol(hello!) // BigInt // BigInt는..

1. Console // console // 콘솔에 메시지나 객체를 출력 // log() : 일반 메시지, warn() : 경고 메시지 // error() : 에러 메시지, dir() : 속성을 볼 수 있는 객체 출력 console.log(document.body) console.warn(document.body) console.error(document.body) console.dir(document.body) // 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화 // console.count('이름') // console.countReset('이름') console.count() // default: 1 console.count('a') console.count('a') console.countR..