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

기본적으로 form 은 submit 을 할 때 브라우저는 페이지를 새로고침 하도록 되어있다. function onLoginSubmit(event) { event.preventDefault(); } 이러한 브라우저의 기본 동작을 우리는 preventDefault() 함수를 통하여 막을 수 있다. 이 preventDefault() 함수는 어디서,어떻게 호출이 가능한걸까? loginForm.addEventListner("submit", onLoginSubmit); 위 코드는 form 의 submit 이벤트가 발생한다면, onLoginSubmit 함수를 실행시킨다는 코드이다. 자바스크립트는 onLoginSubmit 함수를 호출 시 인자를 담아서 호출한다. 해당 인자는 event object가 담긴 정보들이다. ..

자바스크립트에는 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 과 비슷하게 생겼다. 하지만 동작은 ..

✅ 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 하지 않는 함수 ..

✅ readonly 속성 // readonly 속성 사용 type Person = { readonly name : string age? : number } const personMaker = (name : string): Person => ({name}) const jude = personMaker("jude") jude.name = "erling" // error : readonly 속성의 name 값을 변경 불가 // readonly 속성 사용 const numbers : readonly number[] = [1, 2, 3, 4] numbers.push(5) //error : readonly 속성의 numbers 에 새로운 number 추가 불가능 readonly 속성이 있으면 최초 선언 이후 수정이..

TypeScript 는 JavaScript 에 추가적으로 구문을 더해서 에디터와 단단한 통합을 지원한다. 런타임 에러가 아닌 에디터에서 초기 오류를 잡기가 가능하다. TypeScript 코드는 JavaScript 가 실행되는 모든 곳에서 작성한 TypeScript 의 코드가 JavaScript 로 변환된다. ( 컴파일 시 TypeScript 코드 → JavaScript 코드 로 변환 ) 또한, TypeScript 는 JavaScript 를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공한다. ✅ 명시적 정의 (변수 선언 시 타입 정의) const a : boolean = "x" // error : boolean 타입에 string 타입 할당 불가 알림 위는..

왜 사람들은 자바스크립트에서 타입스크립트로 넘어와 타입스크립트를 많이 사용하는 것일까? 그 이유는 바로 타입 안정성 때문이다. 타입 안정성으로 인해 코드에 버그가 엄청 많이 줄어들게 된다. 자바스크립트는 매우 유연한 언어이다. 그래서 최대한 에러를 안내고 개발자를 이해하려한다. // console [1, 2, 3, 4] + false // '1,2,3,4false' 예를 들자면 위의 사례를 볼 수 있다. 배열과 불리언 타입의 false를 더했더니, 배열이 완전히 사라져버리고 불리언 타입의 false는 스트링이 되어버렸다. 전혀 허용할 수 없는 코드이지만, 자바스크립트는 유연한(?) 계산을 보여준다. 이것이 자바스크립트의 문제점이다. 다른 문제점을 하나 더 보자면, function divide(a, b) ..