Interfaces 속성 이름과 객체의 값의 type을 나타내는 새로운 type을 만드는 것 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 너무 긴 annotation const oldCivic = { name: 'civic', year: 2000, broken: true, }; const printVehicle = (vehicle: { name: string; year: number; broken: boolean; }): void => { console.log(`Name: ${vehicle.name}`); console.log(`Year: ${vehicle.year}`); console.log(`Broken? ${vehicle.broken}`); }; printVehicle(oldCivic); 인터페이스를 통해 간편하게 할 수 있다. ...
Class 클래스 : 어떤 ‘것’을 나타내는 필드(값)와 메서드(함수)를 가지는 객체를 만들기 위한 청사진 정의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 1) class 정의 class Vehicle { drive(): void { console.log('yeeeees'); } honk(): void { console.log('liverpool'); } } const vehicle = new Vehicle(); vehicle.drive(); vehicle.honk(); // 출력결과 // yeeeees // liverpool extends 다른 클래스의 메서드를 가져온다. ...
Type 정의 타입은 value가 가진 다양한 속성,메서드를 지칭하는 지름길이라고 볼 수 있다. 함수로서의 타입, 클래스로서의 타입 등등 이 있다. variable(변수) : string, number, boolean, null, undefined, object, function, array 등등.. “red” 를 보면 string 이다. string이 가진 모든 개체와 method들 이다. 두 방법으로 대답할 수 있다. 예를 들어, string은 charAt(), indexOf() 등 다양한 method를 가진다. 이걸 매번 다 설명하지 않고 모두를 통칭하기 위한 것이 Type 이다. 따라서 Type은 하나의 값이 가지는 다양한 속성과 메소드를 지칭하기 위한 지름길인 것이다. ...
Typescript 개념 Typescript = Javascript + A type system 이다. TS Type System의 특징은 다음과 같다. 개발 중 에러 포착 가능 type annotation 개발중에만 active된다 성능 최적화 없음 TS를 작성하지만 실제론 컴파일러에선 JS를 실행하는 것이다! 자세히 말하자면, 사실 JS를 작성하고 Type annotiation 추가하는 것이 TS를 작성하는 것. 이 과정을 풀어서 설명하자면 Typescript code = Javascript with type annotations -> Typescript Compiler -> Plain old Javascript 인 것이다. json 데이터 받아오기 교육용 Json 사이트 를 접속해서 밑의 resource에 todo를 들어가보자 ...
Arrays in Typescript Typed Arrays : 원소들이 동일한 타입의 값인 것 annotation 없어도 존재하는 원소들을 보고 inference 한다. 빈 배열은 inference할 수 없으므로 any타입이 된다. 1 2 3 4 5 6 7 8 // type annotation const carMarkers: string[] = ['ford', 'toyota', 'chevy']; // Date[] 타입으로 inference const dates = [new Date(), new Date()]; // 2차원. string[][] type이다. const carsByMake = [['f150'], ['corolla'], ['camaro']]; 특징 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 배열에서 추출시 type inference 한다. const car = carMakers[0]; // string type const myCar = carMakers.pop(); // string type // 배열에 동일하지 않은 type의 값은 추가할 수 없다. carMakers.push(100); // string[]에 number를 넣으면 오류 발생 // 'map, 'forEach', 'reduce' 사용 carMakers.map((car: string): string => { return car.toUpeerCase(); }); // 다수의 type 사용. // const importantDates: (string | Date)[]로 inference 된다. const importantDates = [new Date(), '2030-10-10']; // annotation const importanteDates: (Date | string)[] = [new Date()]; Tuple 각 원소가 기록의 속성을 나타내는 배열과 같은 구조 ...
코드잇 코딩을 처음 접하는 어린이들을 위한 미니 게임 플랫폼. 코드잇 입니다. 📜포스터 ⚙️기능 🗺️메인 맵 디자인 : 기존 오피스를 위한 메타버스 오픈소스에서 메타버스의 색과 기능을 제거하고 유저를 위한 학교 맵으로 직접 제작하였습니다. 아바타 : 회원가입시 설정한 아바타로 맵 곳곳을 돌아다닐 수 있습니다. 🎮게임 오브젝트 : 게임 내 오브젝트와 상호작용을 통해 플레이할 수 있습니다. 3가지 게임 :3종류의 2인용 실시간 멀티플레이 게임을 구현하였습니다. ☔산성비 게임 떨어지는 영어 단어를 입력하여 점수를 획득합니다. 제한시간 내 높은 점수를 얻거나, 상대가 목숨을 모두 잃으면 승리합니다. 글자색으로 나타나는 아이템을 통해 상대의 화면을 가리거나 단어 추락 속도를 높일 수 있습니다. 실시간으로 상대방의 화면도 볼 수 있습니다. 아이들이 키보드 타자, 특히 영어 타자에 익숙해지도록 돕기 위한 게임입니다. 🔨두더지 게임 주어진 문제에 알맞은 정답을 들고 있는 두더지를 상대보다 먼저 클릭하는 게임입니다. 정답 유무는 효과음과 캐릭터의 반응을 통해 알 수 있습니다. 파이썬의 함수와 같은 기초 문제들이 출제됩니다. 📦자료구조 게임 문제가 제시하는 조건에 맞게 주어진 동물 배열을 정리하는 게임입니다. List, Set, Stack, Deque, Queue 중 하나를 선택하고 그에 맞는 오퍼레이션을 선택합니다. ‘같은 동물 2마리를 남겨라’ 라는 문제를 위해 Deque을 선택하여 pop(), popleft()등을 선택할 수 있습니다. set을 선택하면 중복되어 있는 원소들이 삭제되는 등 성질에 알맞게 구현하였습니다. 화면을 통해 상대가 입력하는 오퍼레이션과 현재 상황을 알 수 있습니다. 🧑🏻🤝🧑🏽유저간 교류 친구 : 친구 추가, 삭제, 목록 등 다양한 유저와 관계를 맺어나갈 수 있습니다. 동시접속자 : 현재 서비스에 들어와 있는 유저들을 확인할 수 있습니다. 프로필 : 내가 누군지 나타내고, 다른 사람의 정보를 확인할 수 있습니다. 메시지 : 어느 유저에게나 보낼 수 있으며, 개별 창에서 유저 별 최근 메시지와 안 읽은 메시지가 표시됩니다. 🕹️게임성 레벨 : 게임을 통해 경험치를 획득할 수 있습니다. 이기면 더 많이 얻고, 레벨이 높을수록 더 많이 필요합니다. 랭킹 : 가장 높은 레벨, 경험치를 기록하고 있는 상위 10명의 유저를 확인할 수 있습니다. 매치메이킹 : 현재 생성된 방 List를 확인할 수 있습니다. 친구와 하기 위해 비밀번호를 설정할 수 있습니다. 대기방 : 상대가 들어오면 방장이 게임을 시작할 수 있습니다. 💾레퍼런스 자료 설명 코드잇 포스터 A1 Size의 포스터로 요약한 프로젝트 내용입니다. 코드잇 깃허브 실제 코드를 확인할 수 있습니다. 코드잇 서비스 주소 서비스를 체험해볼 수 있습니다. 코드잇 발표 PPT 프로젝트 최종 발표 당시의 PPT입니다. 코드잇 발표 영상 프로젝트 최종 발표의 비디오 버전입니다. 🫱🏼🫲🏼팀소개 🐶배준수(BE) : https://github.com/importunate-dev ...