몽쯔

keyof

interface의 key값을 union형태로 반환

interface User{
    id :number;
    name:string;
    age: number;
    gender:'m' | 'f';
}
type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'

// 타입에 없는 값이므로 오류를 출력한다.
// const uk:UserKey = 'ag'; 
const uk:UserKey = 'age';

Partial<T> (파셜)

프로퍼티를 모두 옵션으로 바꿔줘서 일부만 사용이 가능하다.

interface User{
    id :number;
    name:string;
    age: number;
    gender:'m' | 'f';
}

// 위와 동일한 형태
//interface User{
//    id ?:number;
//    name?:string;
//    age?: number;
//    gender?:'m' | 'f';
//}

let admin:Partial<User> = {
    id:1,
    name:'bob',
}

Required<T>

모든 프로퍼티를 필수로 바꿔준다.

interface User{
    id :number;
    name:string;
    age: number;
    gender:'m' | 'f';
}

let admin:Required<User> = {
    id:1,
    name:'bob',
    age:20,
    gender:'m'
}

Readonly<T>

처음 할당만 가능하고 수정은 불가능

interface User{
    id :number;
    name:string;
    age: number;
    gender:'m' | 'f';
}

let admin:Readonly<User> = {
    id:1,
    name:'bob',
    age:20,
    gender:'m'
}

admin.id = 2; // 불가능!!!

Recored<K,T>

K: key / T: type

key와 type을 지정하여 사용한다.

// before
interface Score{
    '1':'A' | 'B' | 'C' | 'D';
    '2':'A' | 'B' | 'C' | 'D';
    '3':'A' | 'B' | 'C' | 'D';
    '4':'A' | 'B' | 'C' | 'D';
}

const score: Score={
    1:'A',
    2:'B',
    3:'C',
    4:'D'
};

// after 1
// 위와 동일한 형태
const score:Record<'1' | '2' | '3' | '4', 'A' | 'B' | 'C' | 'D'>={
    1:'A',
    2:'B',
    3:'C',
    4:'D'
};

// after final 
// type을 지정하여 key와 value값을 나눈다

type Grade = '1' | '2' | '3' | '4';
type Score = 'A' | 'B' | 'C' | 'D';

const score:Record<Grade, Score>={
    1:'A',
    2:'B',
    3:'C',
    4:'D'
};

interface User{
    id:number;
    name:string;
    age:number;
}

function isValid(user:User){
    const result:Record<keyof User, boolean> = { // User의 key를 key로 받고 값은 boolean이다
        id:user.id > 0,
        name: user.name != '',
        age: user.age > 0
    }
    return result;
}

Pick<T,K>

T타입에서 K프로퍼티만 골라서 사용

interface User{
    id:number;
    name:string;
    age:number;
    gender:'m'|'w';
}

const admin: Pick<User, 'id' | 'name'> = {
    id:0,
    name:'bob'
}

Omit<T,K>

T타입에서 K프로퍼티만 생략해서 사용

interface User{
    id:number;
    name:string;
    age:number;
    gender:'m'|'w';
}

const admin: Omit<User, 'id' | 'name'> = {
    age:0,
    gender:'m'
}

Exclude<T1, T2>

T1의 타입에서 T2의 타입을 제외하고 사용하는것

type T1 = string | number | boolean;
type T2 = Exclude<T1, number | boolean>

// 결과
type T2 = string;

NonNullable<Type>

null과 undefined을 제외한 타입을 생성

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>;

//결과
type T2 = string | void;

출처

https://www.youtube.com/watch?v=IeXZo-JXJjc&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=8 

class나 함수, interface를 재사용할 수 있다.

선언할때는 타입파라미터만 적어주고 생성하는 시점에 사용하는 타입을 지정

함수에서의 재사용

function getSize<T>(arr:T[]): number {
    return arr.length;
}
//function getSize(arr:number[] | string[] | boolean[] | Object[]): number {
//    return arr.length;
//}

const arr1 = [1,2,3];
getSize<number>(arr1); // 3
// getSize(arr1);과 동일하다.

const arr2 = ['a','b','c'];
getSize<string>(arr2);

const arr3 = [false,true,true];
getSize<boolean>(arr3);

const arr4 = [{},{},{name:'tim'}];
getSize<Object>(arr4);

interface의 재사용

T라는 generic 타입을 이용하여 option의 타입을 지정하는 예제

interface Mobile<T>{
    name:string;
    price:number;
    option:T;
}

const m1:Mobile<object> = {
    name:'s21',
    price:1000,
    option:{
        color:'red',
        coupon:false
    }
}

// 제네릭안에 객체의 키가 정해져있다면 이렇게 써도 된다
// const m1:Mobile<{color:string, coupon:boolean}> = {
//     name:'s21',
//     price:1000,
//     option:{
//         color:'red',
//         coupon:false
//     }
// }

const m2:Mobile<string> = {
    name:'s21',
    price:1000,
    option:'good'
}

extends : T라는 타입이 올건데 name이 string형태로 확장되서 온 타입이다.

이렇게 작성해야 불러오는 메서드에서 오류를 출력할 수 있어 오류 디버깅이 쉽다.

interface User{
    name:string;
    age:number;
}

interface Car{
    name:string;
    color:string;
}

interface Book{
    price:number;
}

const user:User = {name : 'a', age:10};
const car:Car = {name:'bmw', color:'red'};
const book:Book = {price:3000};

function showName<T extends {name:string}>(data:T):string{
    return data.name;
}

showName(user);
showName(car);
// showName(book);

해당 객체에 name이 없다는 오류 문구

Argument of type 'Book' is not assignable to parameter of type '{ name: string; }'.
Property 'name' is missing in type 'Book' but required in type '{ name: string; }'.

출처

https://www.youtube.com/watch?v=pReXmUBjU3E&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=7 

접근 제한자(access modifier) - public, private, protected

기존 es6에서는 접근제한자를 지원하지 않았지만 타입스크립트는 지원한다.

class Car{
    name:string = 'car';
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
    }
}

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black');
console.log(z4.name);

public : 자식 클래스, 클래스 인스턴스 모두 접근 가능

• 2번째 줄에 name:string = 'car';는 public name:string = 'car'; 와 동일하다.

private(#) : 해당 클래스 내부에서만 접근가능 (자식, 인스턴스 모두 접근 불가)

• private name:string = 'car'; 와 #name:string = 'car';
• Property '#name' is not accessible outside class 'Car' because it has a private identifier.
• 자식요소에 사용시 에러를 낸다

protected : 자식 class에서 접근 가능하나 class instance로는 존재 할 수 없다.

• protected name:string = 'car';
• Property 'name' is protected and only accessible within class 'Car' and its subclasses.

readonly : 읽기전용프로퍼티로 수정이 불가하다.

• readonly name:string = 'car';
• 직접 변경은 안되나 constructor내부에 매개변수를 줘서 받아 오는 것은 가능하다.
• Cannot assign to 'name' because it is a read-only property.

// before
class Car{
    readonly name:string = 'car';
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
        console.log(this.name);
    }
}

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black');
console.log(z4.name);
z4.name = 'zzzz';

// after
class Car{
    readonly name:string = 'car';
    color: string;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(z4.name);

static : 정적 맴버 변수를 만들 수 있음 class.으로 접근 가능

• this.으로 접근하면 안되고 class이름으로 접근해야한다.
• Property 'wheels' does not exist on type 'Car'. Did you mean to access the static member 'Car.wheels' instead?

this.wheels -> Car.wheels로 변경

// before
class Car{
    readonly name:string = 'car';
    color: string;
    static wheels = 4;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
        console.log(this.wheels);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(z4.wheels);

class Car{
    readonly name:string = 'car';
    color: string;
    static wheels = 4;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
        console.log(Car.wheels);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(Car.wheels);

추상 class(abstract)

• new를 사용해서 객체를 생성 할 수 없다. 상속을 통해서만 사용이 가능
• Cannot create an instance of an abstract class.

추상클래스의 내부의 추상메서드는 프로퍼티나 메서드의 이름만 정의해주고  반드시 상속받는 쪽에서 구체적인 구현을 해줘야한다.

abstract class Car{
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
    }
    abstract doSomething():void; // 추상메서드를 단순히 정의만 해줌
}

// No!
// const car = new Car('red');

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    doSomething(){ // 추상 메서드를 상속받는 곳에서 자세히 구현
        alert(2);
    }

}
const z4 = new Bmw('black');

출처

https://www.youtube.com/watch?v=17Oh028Jpis&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=6 

리터럴 타입(literal types)

const userName1 = 'bob'; // 정해진 string 값을 가진것이 문자열리터럴타입
let userName2:string | number = 'tom'; // 값이 변할 수 있는 것은 명시적으로 표시해 줘야한다.

userName2 = 3;

type Job = 'police' | 'developer' | 'teacher';

interface User {
	name : string;
    job : Job;
}

const user: User ={
	name:'bob',
    job:'police' // 타입 이외의 값을 입력 시 에러
}

interface JighSchoolStudent {
	name : string;
    grade : 1 | 2 | 3;
}

유니온 타입 (| / union types)

타입이 여러개 일 때 하나를 선택하는 타입 = 이거나

interface Car {
    name:'car';
    color:string;
    start():void;
}

interface Mobile {
    name:"mobile";
    color: string;
    call():void;
}

function getGift(gift: Car | Mobile){
    console.log(gift.color);
    if(gift.name === 'car'){
        gift.start();
    }else{
        gift.call();
    }
}

const gift:Car = {
    name:'car',
    color:'red',
    start(){
        console.log('start~~')
    }
}
getGift(gift);

교차타입 (& / intersection types)

여러개의 타입을 하나로 합쳐준다.

interface Car{
    name : string;
    start():void;
}

interface Toy{
    name:string;
    color:string;
    price:number;
}

const toyCar:Toy & Car ={
    name:'타요',
    start(){},
    color:"red",
    price:1000
}

출처

https://www.youtube.com/watch?v=QZ8TRIJWCGQ&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=5 

매개변수값이 없으면 world를 출력하는 함수이나 타입스크립트에서는 optional(?:)을 써주지않으면 오류를 뿜어낸다.

Expected 1 arguments, but got 0.

// before
function hello (name:string) {
    return `hello, ${name || 'world'}`;
}

const result = hello();

// after
function hello (name?:string) {
    return `hello, ${name || 'world'}`;
}

// or
funtion hello2(name = 'world') {
	return `hello, ${name}`;
}

const result = hello();

선택적 매개변수가 필수 매개변수의 앞에 올 수 없다.

A required parameter cannot follow an optional parameter.

만약 앞에 꼭 써야한다면 아래의 after처럼 |를 사용하여 undefined를 지정해 줘야한다. 

// before
function hello(age?: number, name: string):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello(30, 'jimin'));

// after
function hello(age?: number | undefined, name: string):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello(30, 'jimin'));
console.log(hello(undefined, 'jimin'));

// or
function hello(name: string, age?: number):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello('jimin'));

나머지매개변수 ...(rest parameter)

전달받은 매개변수를 배열로 받아 올 수 있다. 

Rest parameter 'nums' implicitly has an 'any[]' type.

그렇기 때문에 매개변수의 타입은 배열타입을 지정해주면 된다.

function add(...nums:number[]){
    return nums.reduce((result, num)=> result + num, 0);
}

add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

this

this는 무조건 매개변수 제일 앞에 작성해주면 된다.

매개변수 여러개 존재해도 맨 앞에 작성해주면된다.

'this' implicitly has type 'any' because it does not have a type annotation.

// before
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(){
    console.log(this.name);
}

const a = showName.bind(Sam);
a();

// after
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(this:User){
    console.log(this.name);
}

const a = showName.bind(Sam);
a();

// 매개변수가 많을 시 ...
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(this:User, age:number, gender:'m'|'f'){
    console.log(this.name, age, gender);
}

const a = showName.bind(Sam);
a(30, 'm');

overload

동일한 함수에서 여러가지의 경우의 타입이 나올 경우 타입을 따로 지정해줘야한다.

Type 'string | User' is not assignable to type 'User'.
Type 'string' is not assignable to type 'User'.

// before
interface User {
    name : string;
    age:number;
}

function join(name:string, age:number | string):User | string{
    if(typeof age === 'number'){
        return {
            name,
            age
        };
    }else{
        return '나이는 숫자로 입력해 주세요.';
    }
}

const sam: User = join('Sam', 30);
const jane: string = join('jane', '30');

// after
interface User {
    name : string;
    age:number;
}

// 나올 수 있는 타입의 경우를 따로 지정해 줘야한다.
function join(name:string, age:string): string;
function join(name:string, age:number): User;
function join(name:string, age:number | string):User | string{
    if(typeof age === 'number'){
        return {
            name,
            age
        };
    }else{
        return '나이는 숫자로 입력해 주세요.';
    }
}

const sam: User = join('Sam', 30);
const jane: string = join('jane', '30');

프로퍼티를 정해서 객체를 사용할때 

interface

하나의 타입을 정의

실질적인 구현체는 없고 어떠한 행위를 기술 (=메서드를 기술)

이름 메서드 반환되는 값만 기술함

interface TV {
	turnOn() :boolean;
    turnOff() : void;
}

const myTV: TV={
	turnOn() {
    	return true;
    	},
	turnOff() {
    }
}

void는 아무것도 반환을 안할때 쓰는 타입이다.

그거 외에 다른 타입은 return을 꼭 써준다.

optional 

필수값이 아닌 값은 그냥 쓰면 에러를 뿜어낸다.

Property 'gender' is missing in type '{ name: string; age: number; birthYear: number; }' but required in type 'User'.(2741)

gender는 인터페이스에 등록이 되어있지만 구현부에는 값이 없다.

optional인 ?를 추가해서 옵션임을 표시해주자.

interface User{
    name: string;
    age:number;
    gender?:string;   
}

let user:User={
    name:'xx',
    age:30,
}

readonly

읽기전용속성으로 값을 변경할 수 없다.

interface User{
    name: string;
    age:number;
    gender?:string;   
    readonly birthday: number;
}

let user:User={
    name:'xx',
    age:30,
    birthday:2000;
}

user.birthday = 3000;

Cannot assign to 'birthYear' because it is a read-only property.

문자열 인덱스 서명 추가

불특정한 숫자가 옵션으로 들어갈 경우 전부 인터페이스로 지정하기보단 문자열인덱스서명을 추가한다.

// key는 숫자로 지정하고 value를 문자열로 지정
interface User{
	// grade는 아무거나써도 상관없음
	[grade:number]: string;
}

// 옵셔널로 처리하면 이렇게 해야함
// interface User{
//	 1 ?:string;
//   2 ?:string;
//   3 ?:string;
//     ...
// }

let user:User={
	1:'A',
	2:'B',
}

문자열 리터럴 타입

위의 인덱스 서명 추가방식에서 value값의 범위가 너무 넓으면 타입을 지정하여 사용한다

type Score = 'A' | 'B' | 'C' | 'F';
interface User{
	[grade:number] :Score;
}

let user:User={
	1:'A',
    2:'B',
}

만약 지정된 타입 이외의 값이 들어가면 아래의 오류를 출력한다.

Type '"b"' is not assignable to type 'Score'. Did you mean '"B"'?

함수정의

기본형태는

interface 변수명 {

  (인자값:타입, ...) : 리턴받을 값의 타입

}

interface Add{
    (num1:number, num2:number):number;
}

const add :Add = function(x, y){
    return x + y;
}

add(10, 20);

// =======================================

interface IsAdult {
    (age:number):boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33);

class정의 (impements)

interface Car{
    color: string;
    wheels: number;
    start():void;
}

class Bmw implements Car{
    color;
    wheels = 4;
    constructor(c:string){
        this.color = c;
    }
    start() {
        console.log('go...')    
    }
}

const b = new Bmw('green');
console.log(b);
b.start();

extends

interface는 다른 명으로 확장해서 쓸 수 있다.

interface Car{
    color: string;
    wheels: number;
    start():void;
}

// 확장 : Car가 가지고 있는 속성을 가지고 interface를 추가한다.
interface Benz extends Car {
    door:number;
    stop():void;
}

const benz : Benz ={
    door:5,
    stop() {
        console.log('stop!')
    },
    color:'red',
    wheels:2,
    start(){
        console.log('go!')
    }
}

확장은 여러개로 가능하다.

interface Car{
    color: string;
    wheels: number;
    start():void;
}

interface Toy{
    name:string;
}

interface ToyCar extends Car, Toy {
    price:number;
}

예제 작성 사이트

https://www.typescriptlang.org/

let numType : number;
let stringType : string;
let booleanType : boolean;
let undeifinedType : undefined;
let objType : object;
let symbolType : symbol;
let anyType : any;

기존 원시형 타입인 number, string, boolean, undefined과 객체형 object 

es6의 새로운 원시형 타입인 symbol이렇게 6개가 있다.

undefined와 null은 하위타입이기때문에 상위 타입에 전부 들어갈수있다.

모든 타입의 상위 타입은 any 이다.

symbol은 symbol이라는 함수로만 생성가능하다.

symbolType = symbol();

배열

let arrList : string[];
let arrList2 : Array<string> = ["1","2"];

arrLlist = ["1","2"];

let arrList2 : any[];
arrList = [1, 2];

let arrEach = {name : string, score : number};

arrEach = {
	name :'gildong',
    score: 10
}

// 튜블(tuple) : 인덱스안에 타입이 다를때 
let tuple : [number, string];
tuple = [1, "hello"];

never과 void

never : 항상 에러를 반환하거나 영원히 끝나지않는 함수

function showError():never{
	throw new Error();
}

function infLoop():never{
	while (true){
   		// 코드.... 
    }
}

enum

특정값만 입력을 강제하고 싶을때 그 값들이 뭔가 공통점이 있을 때 사용

숫자를 주지 않으면 자동으로 0부터 숫자가 할당 된다.

// ts
enum Os{
	Window,
	Ios,
	Android
}


// 결과
var Os;
(function (Os){
    Os[Os["Window"] = 0] = "Window";
    Os[Os["Ios"] = 0] = "Ios";
    Os[Os["Android"] = 0] = "Android";
   }
)(Os || Os = {}))

숫자를 할당 하면 할당된 숫자차례로 나온다.

// ts
enum Os{
	Window = 3,
	Ios,
	Android = 10,
    Mac
}


// 결과
var Os;
(function (Os){
    Os[Os["Window"] = 3] = "Window";
    Os[Os["Ios"] = 4] = "Ios";
    Os[Os["Android"] = 10] = "Android";
    Os[Os["Mac"] = 11] = "Mac";
   }
)(Os || Os = {}));

// 숫자를 대입한 enum은 양방향 맵핑이 가능하다
console.log(Os[Ios]); // 4;
console.log(Os[4]); // Ios;

숫자가 아닌 문자는 단방향으로만 가능하다.

null, undefied

let a:null = null;
let b:undefined = undefined;

기본 컴파일 방법

뒤에 설정파일만들기에서 파일로 관리하는 방법나옴.

$ tsc 파일명

기본은 es5형태로 변환되나 최신 버전으로 하려면 --target옵션주고 버전쓰면 된다.

$ tsc hello.ts --target es6

promise 오류

promise는 자바스크립의 새로운 타입으로 그냥 변환하면 에러를 낸다.

error TS2585: 'Promise' only refers to a type, but is being used as a value here. Do you need to change your target library? Try changing the 'lib' compiler option to es2015 or later.

이는 새로운 타입이기에 그냥 컴파일하면 에러가 난다. 폴리필을 써야하는데 이때 사용하는 옵션이 --lib 다.

$ tsc hello.ts --lib es5,es2015.promise,es2015.iterable,dom

설정파일만들기

프로젝트 최상단 폴더에 tsconfig.json을 만든다.

$ npm --init //package.json 만드는거
$ tsc --init

 하면 tsconfig.json자동 생성된다.

아래 부분 추가한다.

{
 "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "target": "es5",
    "module": "es6", 
    "outDir": "./dist", 	/* 배포파일 .js */
    "rootDir": "./src", 	/* 소스파일 .ts */
    "sourceMap": true, 		/* 소스맵 */
    "removeComments": true, 	/* 주석제거 */
    "noImplicitAny": true, 	/* any타입 방지 */
  }
}

결과 값이 잘됐나 확인하려면 

$ node dist/hello.js

쓰는이유

강력한 타입

여러명의 개발자들이 개발할때 특정한 메서드에서 특정한 타입을 요구해서 실수를 방지

런타임(구동)에서 원하지않는 타입이들어오면 문제가 발생

js 라이브러리랑 쉽게 사용가능하다

터미널에서 

// window
$ npm install typescript -g

// mac
// 안된다. $sudo npm install typescript -g
// 홈브루로 설치하니 된다.
$brew install typescript

또는 npm으로 설치하려면 아래링크 참고하여 설치해도 되는듯 (명령어가 좀 달라진다)

https://heropy.blog/2020/01/27/typescript/

다양한 타입스크립트의 옵션을 확인 할 수 있는 명령어

$ tsc

설치 되면 터미널에 $tsc 파일명.ts라는 명령어로 사용가능

$tsc hello.ts

같은 경로에 js로 변환된 파일 확인가능

권한 오류 발생

tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\sow92\AppData\Roaming\npm\tsc.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ tsc hello.ts
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSS

윈도우에서 powerShell 찾아서 우클릭 관리자 권한으로 열기

powerShell 오류 참고 사이트

https://samsons.tistory.com/16

오류해결!

명령어로 빌드 했는데 파일은 생성되는데 컴파일이 안되는 경우는 경로가 한글이여서 그렇다