Say

🟡 Parcel vs Webpack - Parcel : 구성 없는 단순한 자동 번들링, 소/중형 프로젝트에 적합 - Webpack : 꼼꼼한 구성, 중/대형 프로젝트에 적합 🔵 Parcel Parcel – The zero configuration build tool for the web. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application. parceljs.org - favicon 만드는 사이트 ICO Converter Converts ima..

소개 | Vue.js v3-docs.vuejs-korea.org Overview | Vue CLIOverview Vue CLI is a full system for rapid Vue.js development, providing: Interactive project scaffolding via @vue/cli.A runtime dependency (@vue/cli-service) that is: Upgradeable;Built on top of webpack, with sensible defaults;Configurable via in-projectcli.vuejs.orgCLI (Command-Line Interface) createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용됨> 어플리케이션을..

Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s sass-lang.com SCSS를 배우는 것은 Sass와 동일 컴파일 > Sass문법을 CSS로 변환해줌 parcel-bundler패키지를 통해 scss파일을 css파일로 변환해서 동작시킴 - SCSS > CSS 변환해..

arrow function에서는 this 사용X Declaration Merging은 Interface에서만 사용 가능 (type은 안됨) Interface : 새로운 타입 만드는 거 type : 타입 별명 만드는거 🔵 class 클래스 이전에 object 만드는 기본적인 방법은 function class 이름은 보통 대문자 constructor 이용해서 object를 생성하면서 값 전달가능 this로 만들어진 object 가리킬 수 있음 JS로 컴파일되면 es5인 경우 function으로 변경됨 생성자 함수 없으면 디폴트 생성자 불림 strict 모드에서는 프로퍼티 선언하는 곳 또는 생성자에서 값 할당해야함 클래스의 프로퍼티가 정의되어 있지만 값을 대입하지 않으면 undefined 생성자에는 async..

- TypeScript Deep Dive README - TypeScript Deep Dive TypeScript Compiler Internals basarat.gitbook.io - 타입스크립트의 타입 시스템 타입을 명시적으로 지정가능 > 명시적으로 타입 지정 안하면, 타입스크립트 컴파일러가 자동으로 타입 추론 🔵 Structural Type System vs Nominal Type System - Structural Type System 구조가 같으면 같은 타입 - Nominal Type System (C, JAVA) 구조가 같아도 이름이 다르면 다른 타입 - duck typing (Python) 🔵 타입 호환성 (Type Compatibility) - 같거나 서브 타입인 경우 할당 가능 (공변) ..

TypeScript는 어떻게 공부해야 하나요? | 요즘IT 지금 현재 개발하는 상황을 보면 TypeScript는 피할 수 없는 하나의 대세가 된 것 같습니다. TypeScript가 나온 이후로 점점 TypeScript로 만들어지고 있는 라이브러리나 코드의 비중은 높아지고 있고 아 yozm.wishket.com 🔵타입스크립트 컴파일러 설치 방법 2가지 1) npm npm i typescript -g node_modules/.bin/tsc tsc source.ts 2) Visual Studio plugin 설치 🔵 ECMAScript 표준에 따른 기본 자료형 6가지 Boolean Number String Null Undefined Symbol (ECMAScript 6에 추가) Array: object 형 A..

🟡 정규표현식 RegExp = 정규식 - 정규표현식 테스트 사이트 RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com -역할 문자 검색 search 문자 대체 replace 문자 추출 extract 🔵 정규식 생성 - 생성자 함수 방식 new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') - 리터럴(Literal) 방식 생성자 함수 방식보다 편함 /표현/옵션 /[a-z]/gi 🔵 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열...

Window.localStorage - Web API | MDN localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데 developer.mozilla.org 🟡 localStorage vs sessionStorage - localStorage 도메인에 종속됨 반영구적 - 따로 지우지 않는 이상 데이터는 만료되지 않음 - sessionStorage 페이지를 닫을 때 데이터 사라짐 🔵 localStorage - key, value 형태로 데이터 저장하기 localStorage.setItem('key..

var : 함수 레벨의 유효범위 let, const : 블록 레벨의 유효범위 가짐 Truthy : true, {}, [], 2, 'false', '2' Falsy : false, '', null, undefined, 0, -0. NaN - 즉시실행함수 IIFE (Immediately-Invoked Function Expression) // IIFE 방법 1 (function () { console.log(a + 2) }) (); // IIFE 방법 2 (function () { console.log(a + 2) } ()); - 호이스팅 (Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 const x = 5 plus() function plus() { console.log(x + 3)..

크로스 브라우징 : 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법 크로스 브라우징 이슈가 예전보다 조금씩 사라지고 있음 뷰포트 Viewport : 하나의 웹 페이지가 렌더링되는 구역 🔵 웹 이미지 비트맵 : 확대/축소 시 계단 현상, 정교하고 다양산 색상 표현가능 (jpg, png) 벡터 : 확대/축소에서 품질저하X, 용량 변화X, 정교한 이미지 표현하기 어려움 (svg) Material Design JPG : 압축률이 좋음, 손실 압축(용량 쉽게 조절 가능) PNG : 비손실 압축, Alpha Channel 지원(투명한 부분 사용가능) GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들 저장, 8비트(256) 색상만 지원 WEBP : 구글이 개발한 이미지 포맷, 손실..