정의

제이쿼리의 index()를 바닐라 자바스크립트로 구현하는 방법이다.

HTML

<ul id="ul">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

javascript

var ul = document.getElementById('ul'),
    li = ul.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
    (function(idx) {
        li[idx].onclick = function() {
            alert(idx);
        }
    })(i);
}

정의

재귀(Recursive)를 정의한다면 한 함수가 자기 자신을 호출하는 순간이다. 재귀함수를 이해하기 전에는 팩토리얼 이라는 개념이 필요하다.

팩토리얼

팩토리얼이란 자기 자신의 수에 1 작은 수를 곱하고 또 1 작은 수를 곱하고 해서 1 작은 수가 1이 될때까지 곱하는 것이다. 팩토리얼의 기호는 !이며 아래의 예제는 5!의 팩토리얼을 나타내고 있다.

5 * 4 * 3 * 2 * 1 = 120

재귀 함수

이제 팩토리얼의 개념을 알았으니 재귀 함수가 무엇인지 확인해 본다.

function factorial(x) {
  if (x < 0) return;
  if (x === 0) return 1;
  return x * factorial(x - 1);
}
console.log(factorial(3)); // 6

결과 값이 나오는 과정을 순서대로 살펴보겠다.

1. factorial 함수에 인자값으로 3을 담아 함수를 실행한다.
2. 파라미터로 3을 받아 처음 조건문을 거친다. 3은 0보다 크기 때문에 다음 조건문으로 이동한다. 3은 0이 아니기 때문에 아래 구문으로 넘어간다.
3. 3에 factorial 함수에 2를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 2를 넣어 실행한다.
4. 2는 0보다 크고 0이 아니니 다시 아래 구문으로 내려간다. 2에 factorial 함수에 1를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 1를 넣어 실행한다.
5. 1역시 0보다 크고 0이 아니니 다시 아래 구문으로 내려간다. 1에 factorial 함수에 0를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 0를 넣어 실행한다. 위와는 다르게 0은 두번째 조건문에서 걸려 1을 리턴한다. 결국은 3 * 2 * 1라는 값을 리턴하게 되는 것이다. 이렇게 함수가 자기 자신을 호출하는 순간을 재귀 라고 한다.

References

재귀 함수
자바스크립트 개발자라면 알아야 할 33가지 개념 #23 자바스크립트 : 자바스크립트 재귀(Recursion) 이해하기

정의

재귀(Recursive)를 정의한다면 한 함수가 자기 자신을 호출하는 순간이다. 재귀함수를 이해하기 전에는 팩토리얼 이라는 개념이 필요하다.

팩토리얼

팩토리얼이란 자기 자신의 수에 1 작은 수를 곱하고 또 1 작은 수를 곱하고 해서 1 작은 수가 1이 될때까지 곱하는 것이다. 팩토리얼의 기호는 !이며 아래의 예제는 5!의 팩토리얼을 나타내고 있다.

5 * 4 * 3 * 2 * 1 = 120

재귀 함수

이제 팩토리얼의 개념을 알았으니 재귀 함수가 무엇인지 확인해 본다.

function factorial(x) {
  if (x < 0) return;
  if (x === 0) return 1;
  return x * factorial(x - 1);
}
console.log(factorial(3)); // 6

결과 값이 나오는 과정을 순서대로 살펴보겠다.

1. factorial 함수에 인자값으로 3을 담아 함수를 실행한다.
2. 파라미터로 3을 받아 처음 조건문을 거친다. 3은 0보다 크기 때문에 다음 조건문으로 이동한다. 3은 0이 아니기 때문에 아래 구문으로 넘어간다.
3. 3에 factorial 함수에 2를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 2를 넣어 실행한다.
4. 2는 0보다 크고 0이 아니니 다시 아래 구문으로 내려간다. 2에 factorial 함수에 1를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 1를 넣어 실행한다.
5. 1역시 0보다 크고 0이 아니니 다시 아래 구문으로 내려간다. 1에 factorial 함수에 0를 넣은 결과 값을 곱하라는 구문이다. 다시 factorial 함수에 인자로 0를 넣어 실행한다. 위와는 다르게 0은 두번째 조건문에서 걸려 1을 리턴한다. 결국은 3 * 2 * 1라는 값을 리턴하게 되는 것이다. 이렇게 함수가 자기 자신을 호출하는 순간을 재귀 라고 한다.

References

재귀 함수
자바스크립트 개발자라면 알아야 할 33가지 개념 #23 자바스크립트 : 자바스크립트 재귀(Recursion) 이해하기

슬라이드에서 이전 슬라이드, 다음 슬라이드 인덱스 값이 필요할 경우 쓰이는 방법이다. 슬라이드 갯수와 다음, 이전 인덱스 값을 초기 설정해준다.

var slideLength = 4,
    next = 0,
    prev = 0;

알고리즘이 들어갈 함수와 이벤트를 실행시킬 이벤트 리스너가 필요할 것이다. slide 함수를 선언하고 setInterval 함수에다가 이벤트 리스너를 등록하자

function slide() {
    console.log(0);
}
setInterval(slide, 1000);

1초마다 콘솔창에 0이 출력된다. 이제 1초마다 다음 인덱스에 1을 더하며 그 값을 이전 인덱스에 주자

function slide() {
    next++;
    console.log(next, prev);
    prev = next;
}
setInterval(slide, 1000);

콘솔창이 들어가있는 곳이 추후에 인덱스 다음과 이전 인덱스 값을 받아 처리하는 기능이 들어간다. 콘솔창을 보면 아래와 같이 다음과 이전이 1씩 밀리면서 출력된다.

1 0  
2 1  
3 2  
4 3  
5 4  
6 5  
7 6  
...

하지만 슬라이드 갯수는 4개다. 다음 인덱스가 4이상이 되면 0으로 초기화되도록 조건문을 입력하면 된다.

function slide() {
    next++;
    if (next >= slideLength) {
        next = 0;
    };
    console.log(next, prev);
    prev = next;
}
setInterval(slide, 1000);

아래와 같이 순차적으로 1씩 밀려서 출력되며, 4이상이 되면 0으로 초기화가 된다.

1 0  
2 1  
3 2  
0 3  
1 0  
2 1  
3 2  
...

이제 인덱스가 순차적으로 감소되는 코드를 작성해 보자

function slide() {
    next--;
    if (next < 0) {
        next = slideLength - 1;
    }
    console.log(next, prev);
    prev = next;
}
setInterval(slide, 1000);

다음 인덱스를 1식 빼고, 다음 인덱스가 0보다 작이질 시 슬라이드 갯수의 1을 뺀 값을 대입하면 된다. 1을 빼는 이유는 프래그래밍에서 수의 시작은 0부터 시작하기 때문이다. 네번째 슬라이드의 인덱스는 3이 될 것이다.

0부터 100까지 특정 배수를 구하는법이다. 반복문과 조건문, 나머지 연산자가 사용된다.

for (var i = 0; i <= 100; i++) {
    console.log(i);
}

i가 증감되면서 콘솔창에 1부터 100까지 차례로 출력될 것이다. 그렇다면 아래의 코드는 어떻게 출력될까?

for (var i = 0; i <= 100; i++) {
    console.log(i % 3);
}

0  
1  
2  
0  
1  
2  
...

0부터 2는 3으로 나눠지지 않기때문에 첫번째 피연산자가 출력되고 3은 나눠지기 때문에 0이 출력된다. 그 이후로는 3으로 나눈 뒤 나머지가 출력되기 때문에 위처럼 0, 1, 2, 0, 1, 2 .. 로 출력된다. i값이 3으로 나머지 없이 나눠지면 0이 출력되는걸 확인할 수 있다. 이걸 통해 조건문으로 3의 배수를 구할 수 있는 것이다.

for (var i = 0; i <= 100; i++) {
    if (i % 3 === 0) {
        console.log(i);
    }
}

나머지 없이 3으로 나눠 질때만 i값이 출력된다. 하지만 i값이 0일 때도 같이 출력된다. 다중 조건문을 추가해 주자

for (var i = 0; i <= 100; i++) {
    if (i % 3 == 0 && i !== 0) {
        console.log(i);
    }
}

3의 배수가 출력되는걸 확인할 수 있다.

Data 객체는 날짜와 시간을 제공하는 생성자 함수이다.
인자 없이 객체를 선언하면 현재 날짜와 시간을 반환한다.

var value = new Date();
console.log(value);
// Thu Jan 09 2020 14:44:13 GMT+0900 (한국 표준시)

특정 값을 구하는 메서드

메서드	값
getFullYear()	년
getMonth()	월
getDate()	날짜
getDay()	요일

응용

2015년 12월 25일의 요일을 구하는 법

function func(a, b) {
    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][new Date(2015, a - 1, b).getDay()];
}
console.log(func(12, 25)); // FRI

References

프로그래머스 문제 풀이 Level 1

노드 생성

var input = document.createElement('input');

생성된 노드 속성 추가

input.setAttribute('type', 'text');

텍스트 노드 추가

var txt = document.createTextNode('hello');

부모 노드에 생성된 노드 추가

부모노드.appendChild(input);

예제

위 노드 추가 방법으로 테이블을 추가하는 예제는 아래에서 확인할 수 있다.
버튼을 계속 클릭하면 테이블이 추가된다.

See the Pen 노드 추가 by recordboy (@recordboy) on CodePen.

References

HTML DOM appendChild() Method

split()

특정 문자열을 기준으로 잘라 배열로 반환한다.

var str = '가, 나, 다, 라, 마';
console.log(str.split(','));
// (5) ["가", " 나", " 다", " 라", " 마"]

substring(시작인덱스, 종료인덱스)

시작인덱스를 기준으로 종료인덱스 까지 자른다.

var str = '가나다라마';
console.log(str.substring(1, 4));
// 나다라

substr(시작인덱스, 길이)

시작인덱스를 기준으로 문자열 길이로 자른다.

var str = '가나다라마';
console.log(str.substr(2, 2));
// 다라

HTTP

• 웹상에서 클라이언트와 서버 간에 데이터를 주고 받을 수 있는 프로토콜
• HTTP 메서드에는 2가지 방식이 있는데, 그것이 GET 방식과 POST 방식

GET

URL에 파라미터를 포함시켜 요청하는 방식이다. 예를들어 https://recordboy.github.io/login?id=user&pw=1234 라는 페이지가 있다고 치자,
? 마크를 통해 URL의 끝을 알리고, id라는 키(key)에 대해선 user라는 값(value)를, pw라는 키(key)에 대해서는 1234라는 값(value)을 전송한 것을 볼 수 있다. 여러개의 키와 값을 보낼 때는 &를 사용하여 이어준다. 이처럼 데이터가 노출되기 때문에 보안에 취약하며, 개인정보가 포함되지 않는 상황에서 캐싱을 하여 페이지 로딩 속도를 높일 때 사용된다.

특징

• URL에 파라미터를 포함시켜 요청한다.
• 데이터를 Header(헤더)에 포함하여 전송한다.
• URL에 파라미터가 노출되어 보안에 취약하다.
• 캐싱할 수 있다.
• GET 방식은 글자수 제한이 있지만, 256자 라는 말은 사실이 아니다.

  
  
  • 익스 9의 경우 2083자/최대 5120자를 지원
  
  
  • 사파리는 40만자를 넘기면 브라우저가 크러쉬
  
  
  • 파이어폭스/오페라는 길이 제한이 없고 50만자를 넘겨도 별다른 이상 없음
  
  
  • 크롬의 경우 4만자를 기준
  
  

  
  

POST

POST는 제출하다라는 뜻으로 BODY에 데이터를 넣어 전송하며 길이의 제한이 없다. 따라서 GET과 다르게 대용량 데이터를 전송할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 안전하다고 할 수 있다. 하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다. 그리고 POST로 요청을 보낼 때는 요청 헤더의 Content-Type에 요청 데이터의 타입을 명시해야 한다. 종류는 여러가지가 있지만 몇가지 나열해보면

• application/x-www-form-urlencoded
  • GET방식과 마찬가지로 BODY에 key와 value쌍으로 데이터를 넣는다. 똑같이 구분자 &를 쓴다.
• text/plain
  • BODY에 단순 텍스트를 넣는다.
• multipart/form-data
  • 파일전송을 할때 많이 쓰는데 BODY의 데이터를 바이너리 데이터로 넣는다는걸 알려준다.

특징

• BODY에 데이터를 넣어 전송하며 길이의 제한이 없어 대용량 데이터를 전송할 수 있다.
• BODY에 데이터가 들어가기 때문에 GET보다는 보안상 유리하지만 민감한 데이터는 꼭 암호화를 해줘야 한다.
• 요청 헤더의 Content-Type에 요청 데이터의 타입을 명시해야 한다.

References

GET과 POST의 차이
[Web] GET과 POST의 비교 및 차이
get 방식의 글자 256자 제한은 잘못된 상식
GET방식 과 POST방식

자바스크립트에서의 스코프란 코드가 실행되는 컨텍스트(유효범위)이며 전역 스코프, 지역 스코프, eval 스코프로 나눌 수 있다.

전역 스코프

• 함수나 객체의 밖에서 선언되었다면 전역 스코프로 정의된다.
• 모든 곳에서 전역 스코프에 있는 변수를 사용할 수 있다.

// 전역 스코프
var foo = 1;
console.log(foo); // 1

function func() {
    // foo가 전역에서 선언되었기 때문에 함수 내부에서도 foo값을 사용할 수 있다.
    console.log(foo); // 1
}

지역 스코프

• 함수나 객체의 안에서 선언되었다면 지역 스코프로 정의된다.
• 해당 함수나 객체에서만 지역 스코프를 사용할 수 있다.

함수 지역 스코프

function func() {

    // 지역 스코프
    var foo = 1;
    console.log(foo); // 1
}

// foo가 func 함수 내부에서 선언되었기 때문에 함수 외부에서 사용을 할 수 없다.
console.log(foo); // Uncaught ReferenceError: foo is not defined

객체 지역 스코프

var obj = {
    foo: 1
};
console.log(obj.boo); // 1
console.log(boo); // Uncaught ReferenceError: foo is not defined

eval 스코프

• eval의 경우 eval()을 사용해 매개변수를 사용하면 이를 사용했을 경우에만 해당 스코프에 담긴 값을 불러온다. 각각 선언할때 고유한 스코프를 가지는 것이 특징이다.