Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 타입스크립트가 없는 자바스크립트의 환경에서 배열의 불편한 점을 알아보고 다음시간부터 또 타입스크립트가 얼마나 편리하고 대단한 친구인지 알아봅시다! Arrays Introduction 아래에 배열을 보도록 합시다. let LoLChampsList = ['렉사이', '리신', 503981, '엘리스', '니달리', '신 짜오', 557813, '샤코', '탈론', 224873, '카서스']; LolChampsList라는 배열의 값들을 보면 중간 중간에 타입 숫자로 이루어진 값들을 찾아낼 수 있습니다. 오류 찾아내기 자바스크립트에서는 숫자로 이루어진 값들을 찾아내어 에러를 띄우려면 어떻게 해야 할까요? 함수, for문, if를 이용해 에러 문구를 띄울 수 있습니다. 함수 만들기..

와썹 동기 여러분! 오늘은 타입스크립트에서 함수에 코멘트 다는 방법에 대해 알아봅시다! Documenting Functions 자바스크립트에서 코멘트를 다는 방법이 두가지가 있었는데 아래의 코드를 봅시다. // 한 줄에 코멘트를 다는 경우 /* 여러 줄에 코멘트를 다는 경우 */ 타입스크립트에서는 다른 방법으로 코멘트를 다는 경우도 있습니다. (물론, 위 방법도 여전히 사용가능) 이를 문서형 코멘트(documentation comment)라고 부릅니다. /** * 문서형 코멘트 * Documentation comment */ 어떤 상황에서 쓰일까 함수(function)에 관해 코멘트를 다는 경우 아주 유용하게 쓸 수 있습니다. /** * Returns the result of multiplied a an..

안녕하세요 동기 여러분! 오늘은 함수에서 리턴할 값이 없는 경우에 함수에 타입선언(Type annotation)을 무엇으로 해야하는지 알아보도록 합시다! Void Return Type 아래의 코드를 보도록 합시다. function printDongi(saySomething: string){ console.log(`동기 코딩님! ${saySomething}!`); } printDongi라는 함수는 현재 리턴값이 없는 함수입니다. 지금까지 우리는 타입 선언(Type annotation, 타입 주석 달기)이 얼마나 유용하고 깔끔하게 코드를 정리할 수 있는지 알아봤었습니다. 이러한 이유 때문에 리턴값이 없는 함수에도 타입 선언(Type annotation, 타입 주석 달기)을 하여 코드를 알차게 만들어 주어야 ..

안녕하세요 동기 여러분! 오늘은 리턴값의 타입을 명확하게 하는 방법에 대해 알아봅시다! Explicit Return Types 만약에 우리가 함수의 리턴값의 타입을 명확하게 하고 싶다면 소괄호(parenthesis) 뒤에 : (colon)과 타입(type)을 적어 리턴값의 타입을 정해줄 수 있습니다. 일반 함수에서 function maxRamen(counts: number): string { return `${counts}개의 라면을 먹을 수 있다.`; } 화살표 함수에서 const arrowMaxRamen = (counts: number): string => { return `${counts}개의 라면을 먹을 수 있다.`; } 타입스크립트에서 컴파일링 할 때 에러 구경하기 리턴값은 문자(string)인..

안녕하세요 동기 여러분! 오늘은 타입스크립트가 리턴되어 오는 값의 타입도 추론하여 에러를 띄운다는 사실에 대해 알아봅시다! Inferring Return Types function sayHi(name: string) { return `Hi! ${name}!`; } const dongiHi = sayHi('Dongi'); sayHi라는 함수에 매개 변수 name에 타입 문자(string)을 선언하였고 리턴값으로 Hi ${name}!을 설정해두었습니다. 새로운 변수를 선언하는데 변수의 이름을 dongiHi로 그의 값은 함수 sayHi와 독립 변수로 Dongi를 넣어두었습니다. 실행 시 어떻게 이 값들이 이동하는지 알아봅시다. 값들이 어떻게 이동하는지를 숙지하고 다음 코드를 봅시다. 리턴값 추론 functio..

안녕하세요 동기 여러분! 오늘은 매개 변수에 기본 값을 넣어 응용하는 방법에 대해 알아봅시다! Default Parameters 만약 매개 변수에 기본 값을 넣어 주었다면 타입스크립트는 그 기본값을 추론하여 어떤 타입인지 알아냅니다. function iWant(thing = 'love') { console.log(`I want ${thing}.`); } 함수 iWant에 매개 변수 thing의 기본값이 'love'로 설정되고 I want thing. 에서 thing에 사용자가 지정한 값이나 기본 값이 출력될 수 있게 만들었습니다. 위와 같은 상황에서 매개 변수 thing는 값으로 문자(string)이나 언디파인드(undefined) 받을 수 있습니다. -> 하지만 다른 타입의 값을 받을 경우 타입스크립트..

안녕하세요 동기 여러분! 오늘은 함수를 실행하는데 독립변수에 값이 주어지지 않고 타입스크립트에서 컴파일링을 했을 때 에러를 없애는 마법을 부려보도록 하겠습니다! 단 하나의 기호를 가지고 말이죠! Optional Parameters 제목이 선택적인 매개 변수입니다. 오호 그럼 매개 변수를 내 마음대로 선택이 가능하다는 소리인가를 염두해두고 갑시다. 타입스크립트는 우리가 보통 함수에서 독립 변수인 값을 넣지 않고 실행하면 에러를 띄웁니다. 오호라 에러를 띄운다라... 가끔 값을 넣지 않아야 하는 경우도 생기는데 이럴 때 마다 타입스크립트가 에러를 띄우면 상당히 귀찮을 거 같습니다. 그래서 나온 방법이 바로 !!! 이 물음표를 사용하는 것입니다. (상당히 머리로 치고 싶게 생겼죠?ㅋㅋㅋ) 일단 에러를 먼저 봅..

안녕하세요 동기 여러분! 오늘은 타입스크립트 매개변수에 타입을 설정하여 적절한 에러를 뜰 수 있게끔 하는 방법에 대해 알아봅시다! Parameter Type Annotations 저번 시간에 알아본 코드를 살펴보면 문자를 넣고 싶은 매개 변수에 숫자를 넣었더니 결괏값으로 언디파인드가 나왔었습니다. 하지만 오늘은 매개 변수의 타입을 string(문자)로 설정하여 실행해 제대로 된 에러를 띄워 보겠습니다. 이전에 배운 변수 타입 선언(Variable Type Annotation, 변수 타입 주석 달기)이랑 똑같은 방식입니다. 타입스크립트 코드에 아래와 같이 작성합니다. function howManyLetters(words: string) { console.log(words.length); } howManyL..

안녕하세요 동기 여러분! 오늘은 자바스크립트의 버그를 하나 알아보고 앞으로 배울 타입스크립트가 얼마나 대단한지 깨닫는 시간을 가져보도록 합시닼ㅋㅋ Unexpected result 아래의 코드를 보도록 합시다. function howManyLetters(words) { console.log(words.length); } howManyLetters(10); howManyLetters라는 함수를 선언하는데 매개 변수는 words입니다. console.log(words.length);로 매개 변수 words의 길이를 출력하도록 설정을 마쳤습니다. ※ .length는 string(문자) 프로퍼티라서 문자에게만 사용이 가능합니다!!! 함수를 불러오는데 독립 변수는 숫자 10으로 설정을 했습니다. ★ 잠깐 매개 변수..

안녕하세요 동기 여러분! 오늘은 tsconfig.json 파일이 무엇인지 알아봅시다! 제 포스팅 내용은 Codecademy에서 배운 내용을 토대로 작성되고 있습니다. 링크 : https://www.codecademy.com/ Learn to Code - for Free | Codecademy Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new career (or advance in their current one). www.codecademy.com The tsconfig.json File 타입스크립트의 기능들은 상당히 유용한데요, 자바스크립트 코드에 ..