전체 글 썸네일형 리스트형 인터페이스와 클래스 인터페이스 인터페이스는 타입 별칭과 구분할 수 있는데, 아직 타입 별칭에 대해서는 다루지 않았기 때문에 타입 별칭 부분에서 비교해보도록 하자. /** * 인터페이스 */ interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number, b: number): void; } const person: Person = { name: '이정환', sayHi: function () { console.log('Hi'); } } 인터페이스를 사용해서 타입을 정의하려면 위와 같이 사용하면 된다. 위 코드만 보면 타입 별칭과 특별히 차이가 없는 것처럼 느낄 수 있지만, 인터페이스에는 타입 별칭과 다른 특징이 있다, 그 부분은 아래에.. 더보기 함수와 타입 함수 타입 아래 코드에는 함수 선언식, 화살표 함수에 타입을 정의하는 방법, 그리고 함수의 매개변수에 타입을 정의하는 방법이 나와있다. 특히, 함수의 매개변수에 rest parameter를 사용하는 예도 있으니 참고하면 좋을 것 같다. /** * 함수 타입 정의 */ // 함수를 설명하는 가장 좋은 방법 // 어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는지 설명 function func(a: number, b: number): number { return a + b; } /** * 화살표 함수의 타입을 정의하는 방법 */ const add = (a: number, b: number): number => a + b; /** * 함수의 매개변수 */ function introduce(name .. 더보기 타입스크립트 이해하기 타입스크립트 이해하기 타입스크립트를 이해한다는 것은 어떤 기준으로 타입을 정의하는지, 어떤 기준으로 타입간의 관계를 정의하는지, 어떤 기준으로 타입의 오류를 검사하는지 등 타입스크립트의 구체적인 원리와 동작 방식을 살펴보는 것이다. 타입은 값들을 포함하고 있는 집합이다. 타입 호환성 타입 호환성을 판단할 때는 집합 관계로 생각해보는 것이 좋다. 서브 타입의 값을 슈퍼 타입으로 취급하는 것을 업 캐스팅이라고 하고, 반대의 경우 다운 캐스팅이라고 한다. let num1: number = 10; let num2: 10 = 10; num1 = num2; num2 = num1; // 에러 발생 number 리터럴 타입(서브 타입)을 number 타입(슈퍼 타입)으로 취급하는 것(업 캐스팅)은 가능하나, 반대(다운.. 더보기 타입스크립트 기본 타입스크립트의 기본 타입은 다음과 같다. 원시 타입과 리터럴 타입 // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; num1.toFixed(); // string let str1: string = 'hello'; let str2: string = "hello"; let str3: string = `hello`; let str4: string = `hello ${num1}`; str1.toLowerCase(); .. 더보기 타입스크립트 개론 타입스크립트 강의도 듣고, 책도 읽었는데, 아직도 감이 안 잡힐 수도 있다. 내가 그랬다. 코드를 작성하긴 하는데, 왜 에러가 나는지 모르고, 왜 이게 잘 되는지도 모르는 신기한 언어이다. 그래서, 저번에 한 입 크기로 잘라먹는 리액트 강사님이 이번에 한 입 크기로 잘라먹는 타입스크립트라는 강의를 내셨다고 해서 바로 수강 신청해버렸다. 완강하고 나서 이 글을 쓰는데, 진짜 최고다. 다른 타입스크립트 강의를 들어보면, 타입을 쓰는 방법을 알려주고 왜 그렇게 쓰는지는 알려주지 않는다. 그래서 왜 타입을 그런 방식으로 써야 하는지 항상 의문이었다. 이 강의를 듣기 전, 이펙티브 타입스크립트 책을 읽어보게 되었다. 이 책은 심화적인 타입스크립트 공부를 하는 사람들에게 좋다고 한다. 근데 나한테는 맞지 않았다. .. 더보기 리액트로 만든 달력 배포까지 해보자! 저번에 리액트로 달력 만들기에 관한 글을 올린 적 있었다. 이번에는 netlify를 이용해서 저번에 만든 달력을 배포까지 해보자. 아래 URL은 리액트로 달력 만들기 글이다. https://gugu76.tistory.com/11 https://gugu76.tistory.com/12 https://gugu76.tistory.com/13 Netlify가 뭔데? Netlify는 github에 repository만 올리면 배포해서 url까지 받을 수 있는 서비스이다. aws 같은 배포를 도와주는 사이트도 있기는 한데, Netlify를 사용하면 비교적 쉽게 배포가 가능하다고 해서 이번에는 Netlify로 배포해보기로 결정했다. 아마 다음 번에는 Next.js로 개발하고 Vercel로 배포해보지 않을까 생각이 든다.. 더보기 플케어 프로젝트 소개 프로젝트 주제가 뭔데? 팀원 구성 후 첫 모임에 프로젝트 주제까지 정해버렸다. 정말 많은 아이디어가 나왔고, 이번에 선정된 주제가 아니더라도 그 주제로 프로젝트를 진행하고 싶을 정도로 괜찮은 아이디어들이 많았다. 그중에서 최종 선정된 프로젝트 주제는 IT 프로젝트 팀원 구인 및 프로젝트 관리 웹사이트였다. 다른 팀플 구인 사이트랑 뭐가 다른데? 현재 여러 팀프로젝트 구인 사이트들이 존재하는 걸로 알고 있다. 나는 기존 사이트와의 차이점이 분명히 존재하는 프로젝트를 진행하고 싶었다. 이 프로젝트 설계 단계에서 UX에 상당히 집중해서 기능을 설계했다. 그래서 사용자 입장에서 우리 사이트의 장점은 다음과 같다. - 팀원 구인 시에 프로젝트 리더의 경우, 지원자 프로필 상 평가, 프로젝트 경험을 토대로 팀 프로.. 더보기 달력에 부가 기능 추가하기-2 저번 글에 이어 부가 기능들을 몇 가지 더 추가해보도록 하겠다. 일정이 많아지는 경우에는 스크롤할 수 있도록 css를 변경해보자! 변경한 코드는 다음과 같다. // App.css * { text-align: center; margin-left: auto; margin-right: auto; } /* HEADER */ .Header { display: flex; justify-content: space-between; background-color: rgb(240, 235, 235); border-radius: 20px; border: 1.5px solid rgb(72, 68, 68); max-width: 600px; } .left-col { display: flex; margin: 10px; } .cur.. 더보기 이전 1 ··· 9 10 11 12 13 다음
