Pandaman Blog

Javascript 함수 호이스팅(Hoisting) 호이스팅(Hosting)은 코드 구문이 실행하기 전에 변수 및 함수 선언이 해당 범위의 맨 위로 이동하는 Javascript 메커니즘입니다. 위 설명을 정확하게 이해하기 위해 예제를 만들어 테스트를 해봤습니다. introduce('oyg0420'); // my name is oyg0420 function introduce(name) { console.log(`my name is ${name}`); } 함수가 선언이 되기 전에 호출을 했는데, 결과는 에러 없이 정상적으로 작동합니다. 그렇다면 위와 같은 구문이 작동되는 이유에 대해 알아보겠습니다. 자바스크립트에서는 스코프 전체를 살펴보고 함수 선언을 맨 위로 끌어올리기 때문입니다. 그렇다면 어떤 방식으로 ..

Javascript Arguments arguments객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다. MDN문서에서는 arguments객체를 위와 같이 설명합니다. 저는 문서를 보고 전달된 인수를 Array형태의 객체로 갖고 있는 것일까? 하고 생각이 들었습니다. 문서를 더 보니 It has entries for each argument the function was called with, with the first entry's index at 0라고 나와 있습니다. 한마디로 함수가 호출될 때 파라미터를 arguments객체에 담아 놓는 것입니다. 자 그럼 간단하게 확인해보겠습니다. const f1 = function(a, b, c){ console.log(arguments); } ..

Javascript Function 자바스크립트의 모든 함수는 Function 객체입니다. JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. MDN 문서를 확인해보면 Function 객체는 일급 객체(first-class)라고 정의합니다. 그렇다면 일급 객체라는 것이 무엇인지 확인해보겠습니다. 변수나 데이터 구조안에 담을 수 있다. 파라미터로 전달할 수 있다. 리턴 값으로 사용할 수 있다. 간단한 예제를 통해 알아보겠습니다. // 1. 변수에 함수를 할당 const multiply = function(a, b){ return a * b }; console.log(sum(1, 2)); // 3 // 2. 파라미터로 전달 const su..

Date Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용합니다. Date 객체 사용법 Date 객체는 네가지 형태로 사용될 수 있습니다. 예제를 통해 알아보겠습니다. // 매개변수 없음 new Date(); // Tue Jan 07 2020 22:47:40 GMT+0900 (한국 표준시) // 유닉스 타임스탬프 new Date(1040000300000) // Mon Dec 16 2002 09:58:20 GMT+0900 (한국 표준시) // 시간 구성요소 매개변수 전달 new Date(2020, 0); // Wed Jan 01 2020 00:00:00..

Array(배열) 배열은 순서가 있는 데이터 집합입니다. 자바스크립트에의 배열의 요소가 모두 같은 타입일 필요는 없습니다. 다른 배열이나, 객체도 포함할 수 있습니다. 배열 리터럴은 대괄호([])로 만들고, 배열 요소애 접근할 때도 대환호를 사용합니다. 숫자 인덱스를 통해 배열 항목에 접근하게 해 줍니다. 예제를 통해 알아보겠습니다. // 숫자로 구성된 배열 const arr1 = [1, 2, 3, 4]; // 여러 타입의 값으로 구성된 배열 const arr2 = ['one', 2, { number: 3 }]; // 요소에 접근하기 arr1[0]; // 1 arr1[1]; // 2 arr2[2]; // {number: 3} // 배열의 길이 arr1.length // 4 arr2.length // 3 ..

자바스크립트의 타입은 기본형 타입 Boolean, Null, Undefined, Number, String, Symbol과 별도의 Object 있습니다. 1. 기본형 타입 자바스크립트의 오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value)입니다. Boolean Boolean 타입은 논리적 요소로, true, false 두 가지 값을 가질 수 있습니다. 보통 boolean 조건은 어떤 코드 부문이 실행되어야 할지 if 문, for 문에서 주로 사용합니다. if (false) { console.log('will pass'); } if (true) { console.log('will show'); // 'will show' } for(var i=0; i

Javascript 형변환(Type Casting) 숫자형으로 변환 숫자형으로 변환하기 위한 함수는 Number, parseInt, parseFloat, 단항 연산자 가 존재합니다. Number Number는 주어진 값을 숫자형으로 변환하는 함수입니다. 보통 문자형을 숫자형으로 변경할 때 사용합니다. 숫자로 변환이 안 되는 경우 NaN을 반환합니다. 예제를 통해 알아보겠습니다 const str1 = '100'; Number(str1); // 100 const str2 = '1000 str2'; Number(str2); // NaN Date type을 숫자형으로 변경하면 millisecond(1/1000(초))로 반환합니다. const date1 = new Date(); Number(date1); // 1..

React Router React와 같이 단일 페이지 애플리케이션(Single Page Application)에서 React router를 통해 새로고침이나 깜빡임 없이 사용자가 원하는 페이지를 탐색할 수 있도록 도와주는 라이브러리입니다. 비록 페이스북에서 제작한 공식 라이브러리는 아니지만 가장 많이 사용되고 있는 라이브러리입니다. https://github.com/ReactTraining/react-router 리액트 라우터 사용 리액트 라우터를 사용하기 위해 npm 또는 yarn 를 통해 react-router-dom를 설치합니다. 12$ yarn add react-router-dom$ npm install react-router-domcs 리액트 라우터 컴포넌트 리액트 라우터 컴포넌트에는 다양한 컴..