함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 문자열의 split 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식부터 살펴보도록 하겠습니다. str.split([separator[, limit]])split 메소드는 문자열(dataType)에서 사용하는 메소드이며, 두 개의 선택적 파라메터를 가지고 있습니다.seperator 는 문자열을 구분하는데 사용하는 하나 이상의 문자를 나타내는 정규표현식(Regular Expression) 개체입니다.(seperator 가 생략되면 전체 문자열을 포함하는 length 가 1인 배열을 반환합니다.)limit 은 반환되는 배열의 길이를 제한하는 값입니다. 메서드의 리턴값은 seperator 를 기준으로 나눈 문자열의 배열입니다.(seperator 로 사용된 정..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 조건문 중 하나인 switch 문에 대해서 알아보도록 하겠습니다. switch 문의 표현식은 다음과 같습니다. switch (expression) { case value1: //Statements executed when the result of expression matches value1 [break;] case value2: //Statements executed when the result of expression matches value2 [break;] ... case valueN: //Statements executed when the result of expression matches valueN [break;] default..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리덕스를 사용하는 이유와 리덕스의 개념을 정리해 보겠습니다. * 이번 포스팅의 내용은 velopert 님의 '리덕스 왜 쓸까?' 포스팅을 정리한 내용입니다. 리덕스를 이해하기 위해서 먼저 리덕스를 사용하지 않는 환경의 단점을 먼저 파악해 보겠습니다. 간단한 예를 통해 살펴보겠습니다. 만약 다음 그림과 같이 세 개의 컴포넌트가 있다고 합시다.A 컴포넌트는 B 와 C 컴포넌트의 부모 컴포넌트입니다. B 컴포넌트는 A 의 상태를 변경하는 함수를 실행하는 컴포넌트입니다. (A의 상태를 변경하는 메소드 _increase 를 increNum 프롭스로 전달받습니다.) C 컴포넌트는 A 컴포넌트의 상태(state)를 렌더링하는 컴포넌트입니다.(A의 상태를 numValu..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 삼항 조건 연산자(conditional ternary operator)에 대해서 알아보도록 하겠습니다. 삼항 조건 연산자는 if 문의 축약 형태 입니다.표현식 부터 살펴 보겠습니다. condition ? expr1 : expr2 condition 은 조건을 나타내는 표현식이 들어가는 자리입니다. (조건문의 결과는 true, false 둘 중 하나가 나오는 표현식)expr1 은 조건문이 참일때 반환되는 표현식이고, expr2 는 조건문이 거짓일 때 반환되는 표현식 입니다. 간단한 예를 살펴보겠습니다. 123var age = 29;var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6 의 강력한 기능 중 하나인 class에 대해서 알아보겠습니다. class는 생성자 함수의 업그레이드 버전이라고 보면 됩니다.생성자 함수에 대해서 간단하게 살펴보도록 하죠. 1234567891011121314151617181920function person (name, job) { this.name = name; this.job = job;}; person.prototype.getName = function(){ console.log(this.name);}; function korean (name, job) { person.apply(this, arguments);}korean.prototype = new person(); var man_1 = ne..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 생성자 함수와 prototype 객체에 대해서 알아보도록 하겠습니다. 먼저 prototype 객체에 대해서 알아보겠습니다. 일단 이름부터가 무시무시합니다. 저도 처음에 프로토타입 객체니 생성자니 this니 constructor니... 하는 용어들에 압도된 적이 있었는데요, 천천히 알아가 보도록 합시다. 자바스크립트에는 여러가지 데이터 형태가 있습니다.Boolean, Number, String, Null, undefined, Object, Array, Function 등 여러가지의 데이터 타입이 있습니다.이 데이터 타입을 크게 기본 타입과 객체로 나누어 볼 수 있습니다. 기본 타입 : Number, String, Boolean, undefin..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 property shorthand(단축 속성명)에 대해서 알아보록 하겠습니다.property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다. 코드를 통해 살펴보도록 하겠습니다. var a = "foo", b = 42, c = {}; var o = { a: a, b: b, c: c };먼저 선언부에서 변수 a, b, c, 에 각각 "foo", 42, {} 를 할당했습니다.그리고 변수 o 에 객체를 할당하는데, 해당 객체의 key 'a' 는 변수 a의 값("foo")을 value 값으로 가지고, key 'b' 는 변수 b의 값(42)..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열과 문자열에서 사용가능한 메서드인 slice 메서드에 대해서 알아보도록 하겠습니다. slice 메서드는 단어에서 의미를 유추해 볼 수 있듯이 배열이나 문자열의 원소를 잘라내 추출하는 것입니다.먼저 표현식부터 살펴보겠습니다. arr/str.slice([beginIndex][, endIndex])배열이나 문자열에서 사용하는 메서드이며 파라메터로는 beginIndex 와 endIndex 가 옵니다.beginIndex 는 말 그대로 슬라이스를 시작하는 인덱스 번호를 의미합니다.배열과 문자열 공통으로 0부터 시작하는 인덱스를 의미합니다.* beginIndex 값이 생략되면 0 부터 슬라이스 하겠다는 의미입니다.* beginIndex 값이 음수라면 배열이나 문자..

죠>안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 비구조화 할당, destructuring assignment에 대해서 알아보겠습니다. 비구조화 할당 이라는 말이 쉽게 이해되는 말은 아니라고 생각합니다.간단히 말하자면 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있도록 하는 것입니다.이 말도 와닿지 않으신가요? 괜찮습니다. 코드를 통해서 살펴보도록 하죠. var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20위의 코드의 첫 줄에서 변수 a, b, rest를 선언했습니다. (선언만 하고 아직 할당하지 않은 상태)그리고 두 번째 줄에서 이름 없는 배열 두 개가 같다고 표현했습니다.왼쪽 항에 있는 배열은 a,..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열의 원소를 삭제하거나 삭제하고 새로운 원소들을 추가하는 메서드인 splice 메서드에 대해서 알아보겠습니다. 표현식은 다음과 같습니다. array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...)splice의 메서드의 인자로 들어오는 값은 차례로 start, deleteCount, items 입니다. start는 삭제할 배열의 요소의 index 번호를 의미합니다.그리고 뒤에 나오는 deleteCount 인자는 start 부터 몇 개의 요소를 삭제할지 결정하는 숫자입니다.즉, start 인덱스부터 deleteCount 갯수만큼 ..