[자바스크립트]JSON 합치기 (Merge)

다음과 같은 JSON이 있을때 같이 key값 끼리 array로 합치는 방법

[{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}]

javascript의 concat과 reduce 함수를 사용하면 된다.

array.reduce(callback, [,initialvalue])

array.concat([item1,[item2...[itemN]]])

var data = [{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}];

var result = data.reduce(function(r, e) {
  return Object.keys(e).forEach(function(k) {
    if(!r[k]) r[k] = [].concat(e[k])
    else r[k] = r[k].concat(e[k])
  }), r
}, {});

console.log(result);

그럼 다음과 같은 결과를 얻을 수 있다.

[{
	"key1" : ["value1", "value1_1", "value1_last"],
	"key2" : ["value2", "value2_1", "value2_last"],
	"key3" : ["value3", "value3_1", "value3_last"],
	"array_key" : ["array1", "array2", "array3", "array1_1", "array2_1", "array3_1", "array4", "array1_last"]
}]

예제를 직접 실행하면 다음과 같이 볼 수 있다.

[Javascript]문자열에서 문자 찾는 몇가지 방법

문자를 찾는 방법 몇가지

1. indexOf

var stringVal = "javascript",
    substring = "java";
stringVal.indexOf(substring) !== -1;

javascript의 기본객체인 string의 indexOf를 이용하는 방법

포함하고 있는 문자의 인덱스를 반환한다.

만약 문자를 가지고 있지 않으면 -1을 반환한다.

2. includes(ES6이상 에서 적용 가능)

var stringVal = "javascript",
    substring = "java";
stringVal.includes(substring);

ES6에서 포함된 string의 includes 함수를 이용하는 방법

포함하고 있는 문자가 있으면 true, 없으면 false를 반환한다.

자세한 사항은 모질라페이지에서 

3. search

var stringVal = "Hello World",
    exp = /java/;
string.search(exp);

search함수를 사용하는 방법

포함하는 문자가 있으면 인덱스를 리턴한다.

만약 문자가 포함되어 있지 않으면 -1을 반환한다.

4. lodash 의 includes

var stringVal = "Hello World",
    substring = "Hell";
_.includes(stringVal , substring);

lodash 사용법은 홈페이지를 참조한다.

5. 정규식

var stringVal = "Hello world",
    exp = /hell/; 
exp.test(stringVal );

6. match

var stringVal = "super mario",
    exp = /mario/;
stringVal.match(exp);

찾는 문자열을 배열로 반환한다. 

실제 예제는 아래에서

JSfiddle 예제

Result탭을 누르면 결과를 확인 할 수 있습니다.

[자바스크립트] redirect 하는 방법

location.href 사용법

사용자가 클릭을 통해 페이지가 이동하면 location.href=""을 사용한다.

HTTP Redirect를 하고 싶으면 location.replace("")를 사용한다.

다음은 사용 예제

//HTTP Redirect를 클라이언트에서 처리할때
window.location.replace("http://example.com");

//사용자의 클릭 이벤트용
window.location.href = "http://example.com";

제이쿼리를 이용하는 방법

//attr속성을 사용한다.
$(location).attr('href', 'http://example.com');

이 방법은 사용가능 하지만 추천하지는 않는다.

이 외의 방법으로 페이지를 이동시키는 방법

//assign 복사함수로도 구현 가능
window.location.assign('http://www.example.com');

//window뿐 아니라 document로도 가능
document.location.href = '/path';

//구형 익스플로어에서는 다음방법도 가능했다.
window.navigate('http://example.com');

//히스토리를 이용하여 이동하는 방법
window.history.back();
window.history.go(-1);

//
self.location = 'http://www.example.com';

이렇게 많은 방법의 페이지 이동방법이 있지만 가장 위에 있는 방법을 추천한다.

jQeury AJAX 예제

jQuery.ajax(url, [setting]) 또는 jQeury.ajax([setting])으로 사용합니다.

HTTP 리퀘스트에 대해 비동기 동작을 합니다.

속성값으로는 다음이 사용됩니다.

속성값은 더 많이 있지만 자주 사용하는 속성들은 이 정도에서 크게 벗어나지 않습니다.

기본 예제코드

$.ajax({
  url: "/json/people",
  data : {"id" : "admin"},
  beforeSend: function( xhr ) {
    console.log('리퀘스트 보내기 전에 데이터 조작가능');
  },success: function(d){
    console.log('서버에서 받은 데이터 = ' + d);
  }, error : function(e){
    console.error('에러발생');
  }
})

ajax를 통해 DOM을 추가하는 예제

$.ajax({
  url: "test.html",
  cache: false
}).done(function( html ) {
    $( "#results" ).append( html );
  });
});

위의 예제는 test.html이 동적으로 작동한다는 가정을 하고 cache를 false로 하고 사용하였습니다.

브라우저의 cache내용을 받지 않고 서버에서 새로 받아오겠다고 이해하면 됩니다.

그리고 ajax가 종료되면 done함수의 results 엘리먼트에 서버에서 받아온 HTML을 엘리먼트 뒤에 추가(append) 하게 됩니다.

자바스크립트 URL 인코딩 시 알고 있으면 좋은 점

자바스크립트에서 URL인코딩을 할 때 보통 encodeURIComponent(str)또는 encodeURI(str)를 사용 합니다.

encodeURIComponent 함수(JavaScript)

텍스트 문자열을 URI 구성요소로 인코딩 합니다.

encodeURIComponent 함수는 인코딩된 URI를 반환합니다. 

decodeURIComponent에 결과를 전달하면 원래 문자열이 반환 됩니다.

encodeURI 함수(JavaScript)

텍스트 문자열을 유효한 URI로 인코딩 합니다.

encodeURL 함수는 인코딩된 URI를 반환합니다. decodeURI에 결과를 전달하면 원래 문자열이 반환됩니다. 

encodeURI 함수는 ":", "/", ";", "?"등의 문자를 인코딩하지 않으므로 이 문자들을 인코딩 하려면 encodeURIComponent를 사용합니다.

두 함수의 설명을 읽어보면 비슷하지만 encodeURI는 몇가지 문자를 인코딩하지 않는다고 나와있습니다.

인코딩 하지 않는 문자를 표로보면 다음과 같습니다.

표에 콤마도 같이 섞여있어서 보기가 힘들지만 각각의 인코딩함수에는 이러한 차이가 있습니다.

자바스크립트를 이용하여 체크박스 상태 가져오기

예제1 : pure javascript로 값 가져오기

var checked = document.getElementById("checkinfo1").checked;

위와 같이 작성하면 boolean형태의 값(true, false)을 반환 합니다.

제이쿼리로 작성하면 다음과 같습니다.

예제2: 제이쿼리(jQuery)로 값 가져오기

$('#checkinfo1').attr('checked'); // checked, null
//또는
$('#checkinfo1').prop('checked'); //true, false
//또는
$('#checkinfo1').is(':checked'); // true, false

위와 같이 여러가지 형태로 값을 가지고 올 수 있습니다.

예제3 : 제이쿼리(jQuery)를 이용하여 해당 엘리먼트(element) 조작하기

$('input:checked').each(function(i, el){
    console.log($(this).attr('id');
});

위와 같은 방법을 통해서  element 배열을 받아서 반복문을 사용할 수 있습니다.

반복문을 통해 직접 해당 element의 속성 등도 조작이 가능합니다.

예제4 : 전체 선택, 전체 해제

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', true);
  });
});

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', false);
  });
});

다음과 같은 체크박스예제를 활용하여 메일박스에 있는 check박스의 전체 선택/해제 등을 구현 할 수 있다.

체크박스에 대해서...

셀렉트박스(select)와 라디오버튼(type="radio")의 엘리먼트들은 값을 한가지만 선택할 수 있는 반면에 체크박스는 여러개의 값을 선택할 수 있는 특징을 가지고 있습니다.

기본적인 체크박스의 형태는 다음과 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3">
    <label for="checkinfo3">value3</label>
</form>

그 중에 값이 check되어 있는 상태로 작성하고 싶으면 checked 속성을 사용합니다.

사용 예제는 아래와 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1" checked="checked">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3" checked>
    <label for="checkinfo3">value3</label>
</form>

데이터가 전송될 때는 같은 name의 데이터가 사용되므로

위의 예제같은 경우에는

chk_info = "value1, value3"

이렇게 한개의 Key에 두개의 값이 , (콤마)로 구분되어 서버에 전송됩니다.

HTML 태그 안에서 특수문자 사용하기

HTML안에서 특수문자를 사용할 경우 HTML태그가 깨지는 경우가 발생 할 수도 있으므로 특수문자의 경우 치환해서 사용한다.

HTML안에서 자주 사용되는 특수문자는 아래와 같다.

예제

달라나 원화같이 통화를 HTML로 표현할 경우 위의 HTML을 찾아서 맡는 문자로 대체 하면 된다.

<html>
   <head>
      <title>특수문자 표시하기</title>
   </head>
   <body>
      <h3>한화로 표현하기</h3>
      <p>&bsol; 1,000</p>
      <h3>US 달러로 표현하기</h3>
      <p>&dollar; 1,000</p>
   </body>
</html>

자바스크립트 배열에서 새로운 요소를 추가 하는 방법

1. push()를 사용하여 배열 마지막에 요소 추가하기.

push()함수는 배열 제일 마지막에 새로운 요소를 추가 한다. 비슷한 함수인 pop()은 제일 마지막 요소를 제거 합니다.

예제코드 

var arr = ["hello", "world"];
list.push("javascript");
["hello", "world", "javascript"] // result

여러개를 한번에 추가할 수 있습니다.

var list = ["hello", "javascript"];
list.push("angular", "react", "vue");
["hello", "javascript", "angular", "react", "vue"] // result

2. unshift()를 사용하여 배열 제일 앞에 요소 추가하기.

unshift()함수는 배열 제일 앞에 요소를 추가한다. 비슷한 함수인 shift()는 배열의 제일 앞의 요소를 제거 한다.

예제코드

var arr = ["hello", "world"];
list.unshift("javascript");
["javascript", "hello", "world"] // result

여러개를 한번에 추가 할 수도 있습니다.

3. splice()함수를 이용하여 배열 중간에 요소 추가하기.

splice()함수는 기존 배열의 요소를 제거하거나 새로운 요소를 추가한다.

예제코드

var list = ["hello", "world"];
list.splice( 1, 0, "javascript"); // 1번째 인덱스의 0개의 요소를 제거하고 그 자리에 "javascript" 요소를 추가한다.
                                 // "world"요소는 자동으로 2번째 인덱스로 이동 된다.
["hello", "javascript", "world"] // result

4. concat()함수를 이용하여 새로운 배열을 추가하기.

concat()함수는 배열과 인수에 포함된 배열이 합쳐진 새로운 배열을 반환한다.

예제코드

var list = ["hello", "world"];
var newlist = list.concat( ["hello1", "world1"] );
["hello", "world", "hello1", "world1"] // 새로운 배열을 반환

5. 배열 인덱스에 직접 할당하기

예제코드

var list = ["hello", "world"];
list[2] = "javascript";
["hello", "world", "javascript"] //결과

list[list.length] = "!!!!";

["hello", "world", "javascript", "!!!!"] //결과

여러가지 매서드를 활용하여 배열을 가지고 놀아보자.

이미지를 favicon으로 변환해주는 싸이트들.

https://www.favicon-generator.org/

http://faviconit.com/en

http://www.favicomatic.com/

위의 싸이트에서 이미지를 favicon으로 변환하여 홈페이지에 적용한다.

홈페이지 적용방법은 헤더에 아래 태그를 붙여넣기 하면 된다.

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

꼭 ico파일이 아니더라도

16 * 16 의 png파일로도 적용이 가능하다.

적용하는 헤더의 태그는 아래와 같다.

<link rel="shortcut icon" type="image/png" href="/img/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://www.image.com/favicon.png"/>

위의 내용을 이용하여 홈페이지에 적용해 보도록 하자.