개키우는개발자 : )

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인덱스 타입 타입을 동적으로 사용할 때 사용하는 방법중 하나인 index type Props 인터페이스에 string 타입의 key 의 타입은 string 입니다. index type은 [ key : string | number ] 둘중 하나의 타입만 가능하며 만약 index type이 아닌 name 처럼 고정된 데이터를 적용 할 경우 name은 반드시 필요하고 key type의 key는 문자,숫자 가 사용 가능하며 데이터는 string type인 값만 저장 가능 합니다. 할당된 index type 은 접근방식이 동적 인것을 확인 할 수 있습니다. p.abc는 실제 없는 key 지만 접근하여도 에러는 발생하지 않습니다. keyof ..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 타입 별칭 타입에 직접 이름을 부여할 수 있습니다. intersection type으로 User와 Action을 UserAction이라는 별칭을 type키워드를 사용하여 만들 수 있습니다. interface User { name : string; } interface Action{ do() : void; } type UserAction = User & Action; function createUserAction() : UserAction{ return { do() {}, name : '' } } union type 도 별칭으로 부여 가능하며 generic type 또한 별칭이 가능하다 type StringOrNumber = stri..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인터섹션 & 유니온 | Intersection type 여러타입을 합쳐서 사용하는 타입 User,Action 타입을 합쳐서 반환하는 함수가 있을 때 두개의 타입을 & 통해 타입을 선언 할 수 있습니다. interface User{ name : string; } interface Action{ do() : void; } function createUserAction(u: User, a: Action) : User & Action{ return {...u,...a}; } const u = createUserAction({ name : 'dog' }, {do(){} }); u.do(); u.name; | Union type 변수 또는 함..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 제네릭 함수에 generic 타입을 적용 가능 createPromise 함수에 어떠한 타입이 올 지 모를 때 를 사용하여 타입을 지정합니다. 타입의 이름은 자유롭게 작성 가능하며 관례상 대문자로 작성합니다. function createPromise(x: T, timeout:number){ return new Promise((resolve: (v : T) => void ,reject)=>{ setTimeout(() =>{ resolve(x); },timeout) }) } createPromise("eh",100) .then(v=> console.log(v)) createPromise(1,100) .then(v=> console.log..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 클래스 interface의 상속 및 abstract(추상화) class Person 은 이름이 있고 말을 할 수 있습니다. Programmer는 코드를 작성할 수 있습니다. 클래스에는 상속을 받을 수 있는데 class에서 class를 상속받을 땐 extends를 사용하고 interface를 상속받을 땐 implements 키워드를 사용하여 상속받습니다. interface의 키워드는 다중 상속이 가능합니다. 하지만 클랜은 하나의 클래스만 상속이 가능합니다. KoreanProgrammer는 Person, Programmer 인터페이스를 상속받아 interface에 선언된 property와 method를 모두 구현하고 추가로 구현된 ki..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 클래스 es6의 추가된 class를 new 연산자를 통해 객체로 인스터스화 가능하다. class Cart{ constructor(user){ this.user = user; this.store = {}; } put(id,product){ this.store[id] = product; } get(id){ return this.store[id]; } } TypeScript의 작성방식 User, Product 인스턴스를 선언합니다. 그리고 Cart class 블록 안에 user, store 속성을 정의할 수 있습니다. 그리고 각 파라미터 값에 타입을 작성합니다. interface User{ name : string; } interface..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 enum 타입 enum 타입의 등급 데이터 를 선언한다. 그리고 switch 문을 사용하여 등급별 할인률을 반환하게 되는데 WELCOME, GREEN, GOLD 의 값이 무엇인지 알 수 없다. 그래서 콘솔에 값이 어떻게 찍히는지 컴파일 후 js파일을 실행해본다. enum StarbuksGrade{ WELCOME, GREEN, GOLD } function getDiscount(v: StarbuksGrade) : number{ switch(v){ case StarbuksGrade.WELCOME: return 0; case StarbuksGrade.GREEN: return 5; case StarbuksGrade.GOLD: return 1..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 함수형 타입 타입스크립트에서 함수의 파라미터 값에는 타입을 지정해 주어야 합니다. 더하기 함수인 add의 x , y는 숫자이므로 타입스크립트에서 result는 number 타입으로 추론을 합니다. function add (x: number, y: number){ return x + y; } const result = add(1,2); 아니면 반환되는 값을 함수에 타입을 지정할 수 있습니다. function add (x: number, y: number): number{ return x + y; } const result = add(1,2); optional 처리는 값이 있을 수도 있고 없을 수도 있다. 속성 뒤에 ? 를 붙여주면 된..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인터페이스 인터페이스는 추상화의 작업이라고 생각한다. 추상화란? 컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. interface 에는 어떠한 행위(기능)를 하는 메서드를 선언하는 영역이다. 그중 interface TV는 화면을 켜고, 끄는 기능의 선언 부만 작성을 한다. 그리고 그 선언한 메서드의 return 타입 또한 지정해야 한다. 선언한 interface TV를 myTv의 타입으로 선언하고 myTv 객체에는 turnOn , turnOff 메서드를 구현해야 합니다. turnOn 같은 경우는 return type 이 boolean이기 때..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 기본 타입 최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다. let numValue : number; let stringValue : string; let boolenValue : boolean; let undefinedValue : undefined; let nullValue : null; let objValue : object; let symbolValue : symbol; let anyValue : any; 기본 자료형(Primitive) 타입 Number String Boolean Undefined Null Symbol (ECMAScript 6에 추가됨) 객체형 타입 object가 있습니다. 타입을 선언..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 변수 선언 variables.ts 파일 만들기 기본적으로 ts 파일은 js 파일과 마찬가지로 var, let, const 변수 선언이 가능합니다. var score1 = 0; let score2 = 200; const defaultScore = 0; 하지만 기존의 var와 es6이상의 let은 큰 차이가 있는데 두 개의 큰 차이는 scope단위입니다. var 변수들은 함수 단위로 접근이 가능합니다. function outer(){ function inner(){ var score = 10; } console.log(score); } inner 함수의 선언된 변수는 외부 함수에서 사용할 수 없습니다. 당연하죠 뭐,..ㅋ outer에 ..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 컴파일러 설정 파일 기존의 커맨드 창에서 옵션을 직접 넣어 컴파일하는 방식이 아닌 설정파일을 작성하여 컴파일 하는 방법입니다. 설정 파일은 프로젝트의 최상단에 항상 만들어줍니다. 최상단 폴더에 tsconfig.json을 만들어 줍니다. tsconfig.json파일에 작성합니다. include : 컴파일할 파일 경로를 설정합니다. [ src폴더 하위의 모든 .ts 확장자를 가진 파일 ] exclude : 컴파일 대상을 제외하는 옵션 compilerOptions : 실제 컴파일 할 경우 적용되는 옵션들 module : 어떤 모듈 방식으로 컴파일할지 설정 rootDir : 시작하는 루트 폴더 outDir : 컴파일 후 생성되는 js파일이..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입스크립트 컴파일러 비주얼 스튜디오 코드를 실행하여 프로젝트를 오픈 후 터미널을 엽니다. 그 후 Node.js를 이용하여 npm install -g typescript 컴파일러를 설치합니다. 터미널에 tsc 옵션 보기 hello.ts 파일에 작성 후 tsc hello.ts 컴파일 하기 var hello = "hello"; let hello2 = "hello2"; es6 이상의 변수 선언인 let이 구형 브라우저에서 사용할 수 있게 var로 변환됩니다. 하지만 최신 브라우저에서만 사용할 목적이라면 target이란 키워드를 사용하여 컴파일합니다. es6이상의 변수 선언인 let으로 컴파일됩니다. es6이상부터 나온 타입인 Promise 객체를 작성..

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 개요 오픈소스 프로그래밍 언어 자바스크립트의 상위 집합으로 ECMA스크립트의 최신 표준을 지원 정적인 언어로 컴파일 시간에 타입을 검사 장점 강력한 타입으로 대규모 애플리케이션 개발에 용이 유명한 자바스크립트 라이브러리와의 편리한 사용 개발 도구에서의 강력한 지원 | 개발환경 구성 (Windiws 10) Node.js 설치 ( https://nodejs.org/ko/ ) 비주얼 스튜디오 코드 설치 ( https://code.visualstudio.com/download ) 프로젝트 생성 비주얼 스튜디오 코드까지 설치 완료하셨다면 원하는 폴더를 생성하여 상단 메뉴바에 Terminal -> New Terminal -> mkdir typ..

최고의 해 && 최악의 나 Return 2019년 2020년엔 미움받을 각오로 살자

올해를 되돌아보며.. 프론트앤드(퍼블리셔) 에서 백앤드로 전향하기 위해 올해 2월 과정을 마친 후 5월에 웹에이전시에 자바 백앤드 개발자로 입사하여.. 야근.. 야근.. 야야야 근근근을 하며 이직을 준비하는 도중에 지인이 다니고 있는 직장에서 php 개발자를 구인중에 있어 소개를 요청했다. 그 이유는 야근 없음, 내일 채움 공제를 권장하는 회사였기 때문에 일단 들어가자 라는 마음으로 웹에이전시 프로젝트는 마무리하고 8월 초부터 새로운 직장으로 출근..! ㅎㅎ 강남권만 고집하던 내가 가디쪽으로 출근하게 될 줄은 몰랐지만.. 정말 앞뒤 생각 안 하고 이직한 것 같다. 지옥철의 출퇴근 역시 쉽지 않았다.. 사무실 분위기는 이전에 it 회사의 느낌과는 사뭇 다르지만 동료분들도 매우 좋으신 분들이고 칼퇴를 할 수..

나의 프로젝트 위치에서 ( 저는 vue.js hello 폴더 위치) - 모듈을 삭제 리눅스 계열 명령어 D:\javascriptEx\chat\vue\hello> rm -rf node_modules 윈도우 명령어 PS D:\javascriptEx\chat\vue\hello> del node_modules - dist폴더가 있을 경우 리눅스 계열 명령어 D:\javascriptEx\chat\vue\hello> rm -rf dist 윈도우 명령어 D:\javascriptEx\chat\vue\hello> del dist - 모듈 재설치 npm i - 서버 가동 npm run serve - 성공

Visual Studio Code IDE 툴에서 TERMINAL 을 사용하여 webpack을 실행시 또는 다른 명령어 사용시 에러 해결 error message webpack : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\shimk\AppData\Roaming\npm\webpack.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조 하십시오. 위치 줄:1 문자:1 + webpack + ~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : Unauthori..

지겨우니 한박자 쉬고 JAVA SPRING BOOT 공부해야지~... 또 지겨우면 VUE 해야지~~ 또 지겨우면 다시 SQL해야지..ㅋㅋ

테이블 구조 변경 한번 만들어진 테이블 이여도 테이블 구조를 변경 할 수 있습니다. 이 기능으로 인해 업무변화에 유연하게 대처할 수 있습니다. 실습 - LINKS 테이블 생성 CREATE TABLE LINKS ( LINK_ID SERIAL PRIMARY KEY, TITLE VARCHAR(512) NOT NULL, URL VARCHAR(1024) NOT NULL UNIQUE ); - LINKS 테이블에 ACTIVE 컬럼을 추가 ALTER TABLE LINKS ADD COLUMN ACTIVE BOOLEAN; - LINKS 테이블에 ACTIVE 컬럼을 제거 ALTER TABLE LINKS DROP COLUMN ACTIVE; - TITLE 컬럼을 LINK_TITLE 컬럼으로 변경 ALTER TABLE LINKS..

CTAS 란 CREATE TABLE AS SELECT 의 약어로써 SELECT 문을 기반으로 CREATE TABLE을 할 수 있는 CREATE문이다. 기본문법 - 새로운 테이블명의 이름을 작성 후 SELECT 문을 작성합니다. CREATE TABLE NEW_TABLE AS SELECT - 새로운 테이블명의 이름과 컬럼명을 작성 후 SELECT 문을 작성합니다. CREATE TABLE NEW_TABLE(NEW_COLUMN_1, NEW_COLUMN_2) AS SELECT - 기존의 테이블이 존재하지 않는 경우만 생성되며 생성된 후 SELECT 문을 작성합니다. CREATE TABLE IF NOT EXISTS NEW_TABLE AS SELECT 실습 - FILM 테이블과 FILM_CATEGORY 테이블을 조인..

테이블 생성 테이블은 데이터를 담는 그릇으로써 반드시 생성해야만 데이터를 저장 할 수 있습니다. 테이블 생성시 컬럼의 제약 조건 제약조건명 설명 NOT NULL 해당 제약 조건이 있는 컬럼은 NULL이 저장될 수 없습니다. UNIQUE 해당 제약 조건이 있는 컬럼의 값은 테이블 내에서 유일해야 합니다.(중복X) PRIMARY KEY 해당 제약 조건이 있는 컬럼의 값은 테이블내에서 유일해야 하고 반드시 NOT NULL 이어야 합니다. CHECK 해당 제약 조건이 있는 컬럼은 지정하는 조건에 맞는 값이 들어가야 합니다. REFERENCES 해당 제약 조건이 있는 컬럼의 값은 참조하는 테이블의 특정 컬럼에 값이 존재해야 합니다. 실습 - ACCOUNT_TEST 테이블 생성 1. USER_ID는 기본키 이고 N..

데이터 타입 테이블은 컬럼으로 이루어져 있고 컬럼은 다양한 데이터 타입을 지원합니다. 이는 RDBMS가 제 역할을 하는데 있어서 매우 중요한 부분입니다. Boolean, Character, Numeric 데이터 타입 설명 Boolean Boolean 참(true)과 거짓(false)의 값을 저장 Character CHAR 고정형 길이의 문자열을 저장. 만약CHAR(10)인데 'ABCDE'만 입력할 경우 실제로는 'ABCDE '로 뒤에 공백을 붙여 저장 됩니다. VARCHAR 가변형 길이의 문자열을 저장합니다. 만약 VARCHAR(10) 인데, 'ABCDE'만 입력할 경우 실제로 'ABCDE'만 저장합니다.( 공백X ) TEXT 대용량의 문자데이터를 저장합니다. Numeric INT 정수형 데이터를 저장합..

IMPORT 작업 IMPORT는 다른 형식의 데이터를 테이블에 넣는 작업을 말합니다. 데이터 구축시 자주 사용됩니다. 실습준비 - CATEGORY_IMPORT 테이블을 생성합니다. CREATE TABLE CATEGORY_IMPORT ( CATEGORY_ID SERIAL NOT NULL, "NAME" VARCHAR(25) NOT NULL, LAST_UPDATE TIMESTAMP NOT NULL DEFAULT NOW(), CONSTRAINT CATEGORY_IMPORT_PKEY PRIMARY KEY (CATEGORY_ID) ); 실습 - CATEGORY 테이블에서 EXPORT한 DB_CATEGORY_2.csv 파일을 CATEGORY_IMPORT 테이블로 IMPORT합니다. COPY CATEGORY_IMPOR..

EXPORT 작업 이란 EXPORT는 테이블의 데이터를 다른 형태의 데이터로 추출 하는 작업입니다. 대표적으로 CSV 형식으로 가장 많이 추출합니다. 실습 - C드라이브에 TMP폴더 생성 후 CATEGORY 테이블의 데이터를 csv형식 파일로 저장합니다. COPY CATEGORY(CATEGORY_ID,NAME,LAST_UPDATE) TO 'C:\TMP\DB_CATEGORY.csv' DELIMITER ',' CSV HEADER; TMP 디렉토리는 반드시 있어야 합니다. - TXT형식으로 저장 COPY CATEGORY(CATEGORY_ID,NAME,LAST_UPDATE) TO 'C:\TMP\DB_CATEGORY.txt' DELIMITER '|' CSV HEADER; - 컬럼 없이 csv형식으로 저장 COPY..