FrontEnd/JavaScript
[JS] 정수로 만들어주는 3가지 방법 비교
자바스크립트에서 소숫점을 떼는 용도로 자주 쓰이는 3가지 방법이 있다. 1. Math.floor() 2. parseInt() 3. ~~ 연산자 1. 속도 parseInt() 에 비해서 Math.floor() 가 훨씬 빠르다. Math.floor() 보다 ~~ 연산자가 조금 더 빠르다고 하니, 정리하자면 ~~ > Math.floor() >>> parseInt() 정도 효율을 가지는 듯 하다. 2. 기능 양수를 버리는 경우에는 다 똑같이 작동하지만, 음수를 넣었을 경우 parseInt는 단순하게 소숫점을 제거해주고, Math.floor는 버림 처리를 하게 된다. ~~ 연산자는 parseInt처럼 동작한다. Math.floor(-5.1) ===> -6 parseInt(-5.1) ===> -5 ~~(-5.1) ..
28_타입스크립트 보다 자세한 문법
이전에 타입스크립트를 간단히 배우고 리액트에 적용을 해보았는데, 타입스크립트의 문법을 조금 더 자세하게 알아보자. 타입스크립트는 강력한 타입으로 대규모 애플리케이션 개발에 용이하며 유명한 자바스크립트 라이브러리와의 편리한 사용이 가능하다. 또한 개발 도구에서 강력한 지원이 가능하다는 장점이 있다. 이전에 말했듯이 타입스크립트를 이용하면 많은 실수를 줄일 수 있다라는 장점이 있다! yarn add typescript -g 다음과 같이 타입스크립트를 전역적으로 설치해주자. //01_hello.ts var hello = "hello"; let hello2 = "hello2"; 다음과같은 간단한 예제코드를 작성하고 tsc .\01_hello.ts 터미널에서 tsc파일로 바꾸어주면 01_hello.js파일이 생성..
24_타입스크립트 문법
자바스크립트 같은 경우, 아래와 같이 자료형이 정해져있지 않아 실수하기가 쉽다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null TypeScript를 사용하면 이같은 실수를 방지하기 편하고, ide(vs코드같은)에서 기능을 지원받기 쉽다. 예를 들어 내장함수를 쓸때 파라미터로 무엇이 들어간다던지 등의 기능을 볼 수 있다. 그럼 타입스크립트의 문법을 한번 알아보자 먼저 파일하나를 만든 후에, yarn init -y package.json파일을 하나 만들어준다. yarn add typescript ts-node //ts-node : 콘솔창에서 typescript사용 가능 yarn run tsc --init //타입스크립트를 위한 설정 그후..
14_리액트_클래스형 컴포넌트
class형 컴포넌트 함수형 컴포넌트와는 다른 방식으로 요즘에는 자주사용하지 않는 방식이나 알아둘 필요는 있다. class형 컴포넌트로만 가능한 기능이 한두어개 있기 때문 import React from 'react'; function Hello({color,name, isSpecial}) { return ( {isSpecial ? * : null} {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; //hello 컴포넌트를 만들어서 내보내겠다 color,이름을 받아와서 isSpecial값에 따라 앞에 *가 붙는 간단한 예제가 있다. 이 예제를 class형 컴포넌트로 바꾸어 보자. cl..
08_HTML과 JS연동하기
이번에는 아주 간단한 예제 몇개로 HTML과 JS를 연동하는법에 대해 간단히 서술해보겠다. 특히 다른 프로그램없이 오직 HTML과 JS만 가지고 간단하게 구현해볼 생각이다. 먼저 만들것은 아래와 같이 아주 간단한 카운터 예제를 만드는 것이다. 0 +1 -1 위와 같이 간단하게 HTML을 구성해준 후 const number = document.getElementById("number"); const increase = document.getElementById("increase"); const decrease = document.getElementById("decrease"); console.log(number.innerText); console.log(increase.offsetTop); console...
07_유용한 JS지식
이번에는 여러가지 작업하는데 유용한 문법들을 공부해보겠다 삼항연산자 이전 글에서 잠깐 다룬적 있는데, 조건 ? A : B 꼴의 문법으로 조건이 충족할때는 A, 그렇지 않을때는 B를 실행하여 굳이 if else문을 사용하지 않아도 된다. Truthy and Falsy False와 같은 값들이란 의미로 undefined null 0 '' NaN false 값들이 있다 이 이의외 값은 모두 Truthy 즉, 참으로 구분되게 된다. 특히 null채킹을 할때 function print(person) { if ( !person ){ return; } console.log(person.name); } const person = { name: "mingyu" }; print(person); //mingyu 처럼 fal..