개발 흔적 남기기

Object는 key, value로 구성된 객체인데, 이 Object가 배열안에 n개로 들어있고, key값이 어떻게 되어있는지 모를때 차례대로 특정 key를 구하고 key에 해당하는 value값을 구하는 예제를 보겠습니다.

숫자로 들어갈 값은 랜덤함수로 처리하였습니다.

var arr = [];
for(i=1; i<11; i++){
  var keyName = "count"+i
  var count = Math.floor(Math.random()*1000);
  var obj = new Object();
  obj[keyName] = count;
  arr.push(obj);
}

arr.forEach(function(value){
  console.log(value);
});

해당 소스가 있다고 가정하고 콘솔창을 확인해보면, 아래 그림처럼 한줄씩 객체 데이터가 표현되는걸 볼 수 있습니다.

여기서 각각 해당 Object값의 키 값을 구하고 그 키를 활용하여 value값을 출력해보겠습니다.

Object.keys();

Object.keys(obj); //parameter의 obj는 key를 찾고자 하는 Object

Object.keys 메소드를 활용하면 현재 Object의 key값들을 보여주는데, 메소드를 통해 구하고 각각의 value값을 출력하면 됩니다.

출력 예제

arr.forEach(function(value){
  var obj_key = Object.keys(value); //key를구하고
  var obj_value = value[obj_key]; //key를 활용하여 value값을 구한다.
  console.log(obj_key + " : " + obj_value); //출력
});

아까와는 다르게 Object형으로 찍히는게 아닌 String형태로 찍힌 결과를 볼 수 있습니다.

<form>
    <input type="text" name="user_name">
    <button id="save">저장</button>
</form>

과 같은 코드가 있을때 jquery를 활용하여

아래처럼 클릭이벤트에 따른 ajax동작을 정의하고, 비동기처리를 하려고 한다.

$("#save").click(function(){
 ...ajax 동작
})

ajax에서는 user_name값을 파라미터로 가지고 컨트롤러로 넘겨서 DB에 저장하는 로직을 구성하였는데,

컨트롤러에 요청이 2번씩 가는 현상을 한번씩 볼 수 있다.

form태그 내부의 button이 default동작인 submit으로 동작하면서 form동작 + ajax동작이 동시에 일어났기 때문이다.

가장 간단한 해결책은 button을 submit이 아닌 button이라고 지정을 해주는 것이다.

type="button" 지정하기

<button type="button" id="save">저장</button>

또는 form태그 내부의 모든 버튼이 submit 동작을 하지 않도록 form태그에 속성을 추가하면 된다.

form태그 자동 submit 끄기 (autocomplete="off")

<form autocomplete="off">
   ...
</form>

Rest properties

ES6문법으로 객체나 배열에 값을 할당할 때 사용한다.

const info={
    id: 0,
    name: "홍길동",
    phone: "010-1234-1234"
}

const {id, ...newInfo} = info;
//const id에는 0이 들어가고 나머지는 newInfo 객체에 할당된다.
id; //0
newInfo //{name: "홍길동", phone: "010-1234-1234"}

Spread properties

ES6문법으로 새로운 객체에 자체적으로 열거한 속성을 할당한다.

let n = {id, ...newInfo};
n; //{id: 0, name: "홍길동", phone: "010-1234-1234"}

활용 예시)

배열 특정 데이터 삭제하기 - 1~5까지 존재하는 배열에서 3만 삭제하기

const arr = [1,2,3,4,5];

const newArr = arr.slice(0,2).concat(arr.slice(3,5));

slice 메소드를 활용하여 잘라내고, concat 메소드를 통해 잘라낸 부분을 다시 합치는 방법입니다.

하지만 Spread properties 방식을 사용하면 아래처럼 구현이 가능합니다.

const newArr2 = [...arr.slice(0,2), ...arr.slice(3,5)]

값 추가도 굉장히 쉽게 할 수 있습니다.

const numberArr = [...arr, 6, 7, 8, 9, 10];
numberArr; //1, 2, 3, 4, 5, 6, 7, 8, 9, 10

let temp = [5, 6, 7, 8, 9, 10];
const numberArr2 = [...arr, ...temp];

numberArr2 //1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10

jQuery를 통해 select박스 제어를 알아보겠습니다.

/********** value **********/
$(선택자).val(); //value값 가져오기
$("#id").val(); //id로 접근하여 value가져오기
$("select[속성='속성명']").val(); //속성으로 접근하여 value가져오기

/********** text **********/
$(선택자 option:selected).text(); //text값 가져오기
$("#id option:selected").text();
$("select[속성='속성명'] option:selected").text();

text값은 가져올때 해당자식인 option의 선택된 개체를 가져와야합니다. option:selected

해당 옵션이 없으면 select 자식으로 들어간 option값 전부를 가져오게 됩니다.

change이벤트에 따른 val값 및 text값을 가져오는 예제

name속성이 location인 select박스의 값이 변경됨에 따른 선택값 처리를 알아보겠습니다.

HTML

<div>
  <select name="location">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  </select>
</div>
<div id="output">
</div>

jQuery

$("select[name=location]").change(function(){
  console.log($(this).val()); //value값 가져오기
  console.log($("select[name=location] option:selected").text()); //text값 가져오기
});

select박스 값이 바뀔때마다 console.log가 출력되는걸 볼 수 있습니다.

추가적으로 SELECT - OPTION 태그 내부에 VALUE값을 지정을 안하는 경우가 있는데, 이런 경우에는 jQuery .val() 이나 바닐라 .value로 값을 가져올 경우 text값을 가져오게 되니 유의하시기 바랍니다.

리액트에서 조건문 사용하는방법을 알아보겠습니다.

리액트에서는 클래스로 만들어진 컴포넌트에 꼭 render함수가 있어야하며 JSX로 return을 해줘야하는데,

JSX에서는 자바스크립트 조건문처럼 if나 switch문으로 처리가 불가능합니다.

틀린 문법 - IF문

import React from 'react';

function App() {
  const test = 12345;
  return (
    if(test === 12345){
      <div>맞아요</div>
    }else{
      <div>틀려요</div>
    }
  );
}

export default App;

해당방식으로 완성하게되면, 구문에러를 확인 할 수 있습니다.

리액트 JSX에서는 삼항연사자 또는 AND(&&) 연산자를 통해 조건문을 구성합니다.

삼항연사자로 조건확인하기

import React from 'react';

function App() {
  const test = 12345;
  return (
    test === 12345 ? <div>맞아요</div> : <div>틀려요</div>
  );
}

export default App;

이와 같이 if else처리를 삼항연산자를 통해 만드시면 됩니다.

AND연산자를 통한 처리

import React from 'react';

function App() {
  const test = 12345;
  return (
    test === 12345 && <div>맞아요 (AND연산)</div>
  );
}

export default App;

AND연산은 조건문이 true일때만 동작하는 else문이 없는 조건문이라고 생각하면 됩니다.

간단한 조건문의 경우 위의 삼항연산자나 AND연산자를 통해 완성시킬 수 있지만 복잡한 경우 어떻게 해야할까요?

삼항에 삼항에 삼항은 가독성도 떨어지고 만들기도 힘든데 이때는 즉시발동함수를 사용하시면 됩니다.

즉시발동함수를 통한 조건문 처리

import React from 'react';

function App() {
  const word = 'react';
  return (
    <div>
    {
      (function(){
        if(word == 'react'){
          return ("리액트!")
        }else if(word == 'hello'){
          return ("헬로우!")
        }else if(word == 'world'){
          return ("월드!")
        }
      })()
    }
    </div>
  );
}

export default App;

사실 조건에 해당하면 바로 return처리되기 때문에 else if도 필요없긴 합니다...

화살표함수 형태로 표현도 가능합니다. 화살표함수는 자바 1.8이상에서 보는 list-> 와 비슷한 함수로

es6 문법에서 나온 함수로 function()부분을 대체합니다.

즉시발동함수(화살표함수)를 통한 조건문 처리

return (
    <div>
    {
      (()=>{
        if(word == 'react'){
          return ("리액트!")

function()부분을 ()=> 변경하여도 동일하게 동작합니다.

이상으로 리액트 조건문 사용방법을 알아봤습니다.

프로젝트 중간에 요구사항으로 멀티 셀렉트를 하게 되었는데 사용할만한 UI는 대부분 부트스트랩이나 시멘틱 UI등으로

컴포넌트 적용을 해야해서 기존 개발되어있던 CSS에 영향을 미치게 되어 사용할 수 없었다.

모양은 이쁘지 않지만 멀티 선택이 가능한 select박스가 있어 공유한다.

https://www.jqueryscript.net/form/Drop-Down-Combo-Tree.html

jquery ComboTree이며 해당 URL에서 원본을 다운받아 사용하면 된다.

특이한 점이 있다면 input text태그에 JSON형태의 데이터를 넣어야 한다.

다운받으면 예제들이 있으니 간단하게 뜯어보고 comboTreePlugin.js부분을 원하는 형태로 조금 뜯어고쳐서 커스텀도 가능하니 원하는형태로 사용해보면 좋을 것같다.

내부에 존재하는 css에도 어려운문법이 없으니 쉽게 커스텀이 가능하다.

아래는 커스텀하여 사용한 소스와 UI이다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>multiple select</title>
    <style media="screen">
      *{
        margin: 0px;
        padding: 0px;
      }
      .line{
        width: 200px;
        border: 1px solid #ddd;
        text-align: center;
        margin: 30px 0 30px 0;
        padding: 10px;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/comboTreePlugin.js"></script>
    <script type="text/javascript" src="js/icontains.js"></script>
    <script type="text/javascript">
      var test1, test2;

      $(document).ready(function() {
        init();
      });

      function init(){
        var test1_JSON = new Array();
        var test2_JSON = new Array();

        jsonMaker(10, test1_JSON);
        jsonMaker(10, test2_JSON);

        test1 = $("#test1").comboTree({
          source : test1_JSON,
    			isMultiple: true,
    			cascadeSelect: false
        })

        test2 = $("#test2").comboTree({
          source : test2_JSON,
    			isMultiple: true,
    			cascadeSelect: false
        })
      }

      function jsonMaker(limit, arr){
        for(i=0; i<limit; i++){
          arr.push({id: "id"+i, title: "title"+i});
        }
      }
    </script>
  </head>
  <body>
    <div class="line">
      <input type="text" id="test1" autocomplete="off" placeholder="Multiple Select">
    </div>
    <div class="line">
      <input type="text" id="test2" autocomplete="off" placeholder="Multiple Select">
    </div>
  </body>
</html>

커스텀한 소스도 첨부하니 사용하실분은 다운받아서 index.html부분을 참고하여 사용하면 될 것 같다.

키보드 입력시 유효성 검사를 위해 키보드 입력 제한을 처리할 필요가 있다.

간단하게 입력 제한을 막는 방법으로 속성값에 처리하는 방법이 있다.

$(document).on("keyup", "input[속성명 지정]", function() {$(this).val( $(this).val().replace( 정규식 ,"") );})

이러한식으로 키보드 입력이 있을때 input 태그에 지정한 속성이 있으면 정규식에 따라 처리하는 방법이다.

ex) 숫자만 입력

-Javascript

$(document).on("keyup", "input[numberOnly]", function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );})

-HTML

<input type="text" value="" class="number" numberOnly/>

numberOnly속성이 추가된 input태그에는 치환처리로 인해 더이상 숫자외에는 입력이 불가하다.

ex) 숫자 및 '-' 하이픈만 입력받기

$(document).on("keyup", "input[telOnly]", function() {$(this).val( $(this).val().replace(/[^0-9-]/gi,"") );})

ex) 특수문자 중에 쉼표만 허용하기

$(document).on("keyup", "input[commasOnly]", function() {$(this).val( $(this).val().replace(/[<>(){}[\]\-_=+|\/\\'\;.:\"`~!?@#$%^&*]/gi,"") );})

ex) 한글, 영문, 숫자만 받기

$(document).on("keyup", "input[noSpecial]", function() {$(this).val( $(this).val().replace(/[^ㄱ-힣a-zA-Z0-9]/gi,"") );})

정규식에 따라 자유롭게 수정하여 사용할 수 있다.

한국 지도 사용에 대해 알아 보겠습니다.

https://www.amcharts.com/svg-maps/

amchart에 가시면 각국 나라를 무료로 다운받아서 커스텀해서 사용할 수 있습니다.

그중 한국을 클릭하여 접근하여 svg파일을 다운로드합니다.

이동하여 원하는 파일(High, Low 버전)을 받으시면 svg파일을 다운로드 받으실 수 있습니다.

다운로드 받아서 열어보면 간단하게 특별시, 광역시, 도 정도로 된 한국맵을 볼 수 있는데,

간단하게 색상 변경이나 클릭이벤트를 추가해보겠습니다.

열어보면 굉장히 복잡한 태그들이 보일텐데 우린 여기서 중요하게 볼건

path 태그들입니다.

각각의 path들이 지도를 그리고 있으므로 해당부분의 아이디값에 click이벤트 또는 인라인 스타일 태그나 클래스값을

개별적으로 처리하여 색상처리를 하면 값을 바꿀 수 있습니다.

기본적으로 처리되어있던 클래스 title이 서울로 되어있는 부분에 class를 추가한 후 파란색으로 변경해보겠습니다.

SeoulLand라는 클래스를 추가한 후 style태그에서 fill을 추가하였습니다.

그럼 아래와 같이 지도가 변경된 걸 볼 수 있습니다.

좀 더 그럴싸 해보이도록 hover속성도 추가해보겠습니다.

모든 지역인 path태그들은 land 클래스가 처리 되어있으므로 land클래스에 hover속성을 추가하여 간단하게 변경이 가능합니다.

클릭 이벤트 또한 간단한 예시를 보겠습니다.

id에 이벤트 처리를 하셔도 되지만 간단한 예제를 보기 위해 태그 내부에 onclick속성을 주었습니다.

서울 부근을 클릭하게 되면 아래와 같이 alert가 동작하는 것을 볼 수 있습니다.

svg내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.

예제 변경처리의 파일로 첨부하도록 하겠습니다.