chart.js chart.css https://chartscss.org/

https://huchu.link/c9TtKdH /* Typescript Classes 를 사용하여, Dict (dictionary) class 를 빌드하세요. Dict은 아래와 같은 methods 를 갖고있어야 합니다. add: 단어를 추가함. get: 단어의 정의를 리턴함. delete: 단어를 삭제함. update: 단어를 업데이트 함. showAll: dictionary 의 단어를 모두 프린트함. count: dict 단어들의 총 count 를 리턴함. */ type Words = { [key:string]:string // property나 key의 타입을 정의 } class Dict { protected words:Words constructor(){ this.words = {} } add(w..

https://huchu.link/woSfi7x TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org https://huchu.link/i2l2BuE

call signature 함수를 구현하기전에 화살표를 올렸을때 볼수있는 tooltip 타입을 작성하는것(?) >> arguments의 타입과 함수 return 타입 >> Is the type of the arguments and return value of a function e.g type Add = (a:number, b:number) => number; const add:Add = (a, b) => a+b overloading => When a function has multiple call signatures

Event.preventDefault() >> 기본 이벤트 block Event.stopPropagation() >> 버블링 방지 preventDefault & stopPropagation >> return false;

https://poiemaweb.com/css3-selector CSS3 Selector | PoiemaWeb CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용 poiemaweb.com

databBound, 바뀌는대로 서버 전송, 저장 dataBinding 공통코드 tgt_kind 점검대상종류 코드 상세 구분 >gubun 코드 > value

요소가 배열에 존재하는지 확인하고 배열을 업데이트 function updateVegetablesCollection (veggies, veggie) { if (veggies.indexOf(veggie) === -1) { veggies.push(veggie); console.log('새로운 veggies 컬렉션 : ' + veggies); } else if (veggies.indexOf(veggie) > -1) { console.log(veggie + ' 은 이미 veggies 컬렉션에 존재합니다.'); } } var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; updateVegetablesCollection(veggies, 'spinach');..

https://shylog.com/how-do-you-order-your-CSS-properties/ Ordering rules Position Layout Display Visibility Box model Color Text Animation Others Pseudo elements Positioning position z-index top bottom left right trasnform Layout float clear Display display flex-direction flex-wrap justify-content align-content align-items order flex-grow flex-shrink flex-basis align-self Visibility visibility ov..

/** *@주석명 : 설명 *@두번째 : 설명 *@param 파라미터명 *@return 리턴값 */

@charset "utf-8"; /* reset */ * { padding: 0; margin: 0; box-sizing: border-box; } :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 12px !important; line-height: 1.4 !important; /* font-family: 'NotoSansKRL' !important; */ letter-spacing: 0.7px !important; } a { color: inherit; text-decoration: none; font-style: normal; } ..

NPM ( 패키지 매니저 ) npm은 라이브러리를 설치하고 업데이트만 가능 // 실행은 불가능 NPX 원하는 패키지를 실행할 수 있도록 도와주는 실행툴 NPM과 NPX 대신에 YARN을 쓸수 있다 버전 관리, 성능, 보안 문제를 개선해서 나옴

독립적이다 / 고립되어있다 / 재사용 가능하다 제일 상위에 하나의 컴포넌트가 존재 = ROOT ROOT 안에 이제 여러 컴포넌트가 있고 있고 또있고 계속 있는것 STATE = 데이터를 담고 있음 RENDER = UI를 표기해주는 RENDER 함수 STATE가 변화될때마다 RENDER 함수가 호출이 된다 메모리에 보관된 virtual dom tree와 비교해서 필요한 부분만 dom tree에 업데이트 된다 업데이트 될때마다 모든 앱을 re-render한데 (??) 60fps 를 보장해준데

npx create-react-app 폴더명 npm i sass --save * JSX (가상돔) : HTML 문법과 비슷하지만 동적으로 DOM 생성해주는 문법 체계

$('body').on('click', $('article img'), e=>{ const vidId = $(e.currentTarget).attr(title); console.log(vidId) })