◆
-
[Javascript] typeof 연산자Javascript/Javascript 2021. 4. 8. 21:21
typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 용이하다. typeof 연산자는 두 가지 형태의 문법을 지원한다. 1. 연산자 typeof x 2. 함수 typeof(x) 괄호가 있든 없든 결과는 동일하다. typeof 연산자 사용 예시(1)typeof undefined // "undefined"typeof 0 // "number"typeof 10n // "bigint"typeof true // "boolean"typeof "foo" // "string"typeof Symbol("id") // "symbol" 위와 같이 typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다. ..
-
[Javascript] 자료형Javascript/Javascript 2021. 4. 8. 21:08
Javascript에서 값은 항상 문자열이나 숫자영 같은 특정한 자료형에 속한다. Javascript의 변수는 자료형에 관계 없이 모든 데이터일 수 있는데, 따라서 아래와 같이 특정 변수는 어떤 순간에는 문자열일 수 있고 또 다른 순간엔 숫자가 될 수도 있는 것이다. // no error let message = "hello"; message = 123456; 위처럼 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있으므로 Javascript를 동적 타입 언어라고 한다. 그러므로 변수의 타입을 미리 선언할 필요가 없고, 프로그램이 처리되는 과정에서 자동으로 파악되며 결국 같은 변수임에도 상황에 따라 값의 타입이 바뀔 수 있는 것이다. 1. 숫자형_Number type 숫자형은 정수 및 부동소..
-
[React] 첫 번째 리액트 컴포넌트Javascript/React 2020. 11. 29. 23:23
리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모..
-
[React] React는 어쩌다 만들어졌을까?Javascript/React 2020. 11. 29. 22:41
리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 0 +1 -1 const number = document.getElementById("number"); const increase = document.getElementById("increase")..
-
[CSS] transform 변환 속성 - perspective, perspective-originCSS 2020. 10. 2. 12:10
▶ perspective : 하위 요소를 관찰하는 원근 거리를 설정. - 속성 값으로 단위 입력. px, em 등의 단위 지정. - perspective() 함수와는 다르게 하위 요소를 관찰. - 값이 크면 원근감이 커지고 낮으면 가깝게 느껴짐. [perspective 속성과 함수의 차이점] - perspective 속성 - 적용 대상: 관찰 대상의 부모요소. - 관찰 대상이 여럿이면 부모 요소에 속성 사용. 관찰 대상이란 원근법을 의미함. - 원근법의 기준점 설정: perspective-origin. - perspective() 함수 - 관찰 대상 자체가 적용 대상. - 관찰 대상이 하나면 관찰 대상 자체에 함수 사용. - 관찰하는 기준점 설정 시 transform-origin 사용. - perspec..
-
[CSS] transform 변환 속성CSS 2020. 10. 2. 12:01
▶ transform 변환 속성. - transform-origin: 요소의 변환이 일어나는 특정한 기준점 설정. - 0% 0%는 좌측 상단, 100% 100%는 우측 하단을 의미. - X축: left, right, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Y축: top, bottom, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Z축: 단위 사용. 기본값 0. - transform-style: 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것. - perspective: 하위 요소를 관찰하는 원근 거리를 설정. - perspective-origin: 원근 거리 기준점 설정. - backface-visibilit..