gggimmin 개발 블로그 gggimmin 개발 블로그

자바스크립트에는 Math 객체 기능이 존재한다. Math 객체 기능에는 Math.random() Math.floor() Math.ceil() Math.round() 가 존재한다. Math.random() 은 0 부터 1 사이의 무작위의 값을 반환해준다. Math.random() * 10 을 통해 0 에서 10 사이의 무작위 값을 반환 받을 수 있다. 이제 마지막으로 받은 무작위 값을 Math.floor 를 사용해보면 5.791~~~ 의 숫자를 5로 나타내주는 것을 볼 수 있다. 즉 Math.floor 은 무조건 소수를 내려서 보여준다. 반대로 Math.ceil 를 사용하면 무조건 소수를 올려서 보여준다. 마지막으로 Math.round 는 소수를 반올림해서 보여준다. 1.2 는 1로, 1.9 는 2로 나타..

페이지에 현재 시간을 나타내기 위해 // 페이지에 현재 시간을 나타내는 코드 function getClock() { const date = new Date(); clock.innerText = `${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds}` } getClock(); setInterval(getClock, 1000); 위와 같은 코드를 작성했다. 위와 같은 코드를 작성하니 페이지에 20:54:12 20:54:13 20:54:14 ....... 내가 원하는대로 현재 시간을 잘 보여주었다. 하지만 한 가지 고치고 싶은 점이 생겼는데 20:54:59 20:55:0 20:55:1 20:55:2 ...... 초 단위의 숫자가 59초에서 0초로 넘어..

interval 이 무엇인가? interval은 '매번' 일어나야 하는 무언가를 말한다. 예를 들면 매 1초마다 무언가를 실행시키거나, 어떤 일을 일어나게 만들고 싶을 때 그럴때 사용하는 것이 setInterval 이다. // setInterval 예시코드 function sayHello() { console.log("hello"); } setInterval(sayHello, 5000) // 5초마다 console 창에 "hello" 가 나타난다. setInterval ( 호출하려는 function의 이름 , ms 단위의 초 ) 1000ms = 1초 를 입력해주면 setInterval 이 잘 작동하는 것을 확인할 수 있다. setTimeout 은 setInterval 과 비슷하게 생겼다. 하지만 동작은 ..

🛠️ TypeScript 설치 및 pakage.json 초기화 방법 1. 빈 프로젝트 생성 2. package.json 초기화 : npm init -y 3. typescript 설치 : npm i -D typescript 🛠️ tsconfig.json 설정 디렉토리에 tsconfig.json 파일이 있으면 해당 디렉토리가 TypeScript 프로젝트의 루트임을 나타낸다. tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다. 참고 : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content Documentation - What is a tsconfig.json Learn ..

✅ Classes 추상(abstract)클래스 추상 클래스는 오직 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 직접 새로운 인스턴스를 만들 수는 없다. // classes abstract class User{ constructor( private firstname:string, private lastname:string, public nickname:string ){ abstract getNickname():void } } class Player extends User{ // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현(implement)해야하는 메서드이다. getNickname(){ console.log(this.nickname) } } ❗ 접근 가능한 위치 구분 선언한 클래스..

✅ Polymorphism (다형성) type SuperPrint = { (arr: number[]): void, (arr: string[]): void, (arr: boolean[]): void, (arr: (number|string|boolean)[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(e => console.log(e)); } superPrint([1, 2, 3]) superPrint(["a", "b", "c"]) superPrint([true, false, true]) superPrint([1, "b", true]) => 위와 같이 다양한 경우를 커버하는 함수를 작성할 때, 모든 조합의 Call Signature를 con..

✅ Call Signatures //Call Signature type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b Call(=Functions)Signature 란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것. * React 에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능. * Type Alias 와 같은거 아닌가? Alias 는 type Name = string의 형태, call signature는 함수의 인자, 리턴 타입의 형태이다. ✅ Overloading //overloading => 매개변수의 데이터 타입이 다른 경우 예외 처리 type Add = { (a: nu..

✅ unknown // unknown type let a : unknown let b = a + 1 //error : a 값이 unknown 이므로 에러 발생 // unknown 상태의 a 값이 number일 경우, string일 경우를 지정해서 해결 if (type of a === "number") { let b = a + 1 } if (type of a === "string") { let b = a.toUpperCase() } ✅ void ( 아무것도 return 하지 않는 함수에서 반환 자료형 ) // void function hello() { console.log("x") } const a = hello() a.toUpperCase() //error : a는 아무것도 return 하지 않는 함수 ..