반응형

replace() 메소드

코딩을 하다보면 문자열에서 특정 부분만 변경을 하고 싶은 경우가 발생 할 것이다.

var str = "hello world";

라는 str 변수가 있을 때, replace()메소드를 활용하여 "world" 라는 문구를 찾아 원하는 문자열로 변경을 해보겠다.

replace 메소드

var str = "hello world";
str = str.replace("world", "stranger");
console.log(str);

replace메소드 사용

 

이와 같이 replace() 메소드를 활용하면 원하는 형태로 문자열을 변경할 수 있다.

문자열.replace("대상 문자열", "변경할 문자");

정수형이나 다른 데이터 타입에는 사용이 불가능하며 문자열 타입에만 사용이 가능하다.

 


 

replaceAll() 메소드처럼 사용하기(모두 변경하기)

replcae()를 사용하면 이와 같이 변경이 가능하지만, 제일 처음 검색된 단어 한개만 변경을 하는 단점이 존재한다.

하지만 해당하는 모든 문자열을 변경하고 싶은 경우도 있을 것이다.

자바에서는 replaceAll()이라는 메소드가 존재하여 사용하면 전부 다 원하는 형태로 변경이 가능하지만

자바스크립트에서는 replaceAll() 메소드가 지원되지 않으므로 정규식을 활용하여 비슷하게 사용할 수 있다.

문자열.replace(/대상/gi,"변경할 문자열");

 

똑같은 replace 메소드를 사용하지만 / /gi 사이에 변경하고자 하는 문자열을 입력한다.

또 차이점이 있다면 대상부분의 파라미터에 ""으로 묶지 않는다는 것이다.

위 형태에서 gi는 이러한 의미이다.

g : 발생할 pattern을 모두 검색

i : 대문자, 소문자를 구분하지 않고 모두 검색

replaceAll 메소드 기능과 동일하게 사용 예시

var str = "hello world hello world hello world hello world hello world";
var a = str.replace(/world/gi, "stranger");
console.log("str >" + str);
console.log("a   >" + a);

replace메소드를 통한 replaceAll 기능 사용하기

str 변수의 모든 world 단어가 stranger로 변경 된 것을 확인 할 수 있다.

 

+) 특이케이스 "/" 모두 변경하기

var str = "/////";
var a = str.replace(/\//gi,"#");
console.log(a);

//gi 사이에 /만 입력하면 주석형태로 처리되어 정상동작이 되지 않으므로 "/" 앞에 \를 붙여서 처리한다.

반응형
반응형

이클립스 종류의 에디터를 사용도중 egov 사용시(일반 이클립스나 STS에서는 본 적이 없다...)에 .xml파일들을 열려고 하면 아래 캡처와 같이 log4j.xml 문법 에러가 발생하여 수정이 불가하고 mapper는 outline이 추가적으로 열리는등 매번 수정하거나 소스를 확인할때마다 불편하였다.

log4j.xml 확인시 뜨는 에러 모습

 

xml을 열때 기본 xml편집기로 열어서 수정하는 방법을 알아보겠다.

해당 설정을 하면 모든 xml이 기본 xml편집기로 바뀌어 mapper 에디터라던지 형태가 틀어질 수 있으니

원하지 않는분은 설정을 피하길 바란다.

 

Window - Preferences창으로 이동 후

General - Editors - File Associations 으로 이동한다.

 

File types쪽에 *.xml 이 있는지 확인 하고 없다면 Add... 버튼을 눌러서 *.xml 추가해준다.

 

 

추가하면 *.xml을 선택 후 Associated editors: 탭에서

XML Editor를 선택 후 Default 버튼을 누른다.

Apply and Close를 누르면 전부 .xml이 정상적으로 보이는 것을 볼 수 있다.

반응형
반응형

STS4에서 부트만 사용하다가 스프링 프로젝트를 생성하려고 보니 보이지가 않았다.

 

STS4는 스프링부트를 기본으로 나오기 때문에 STS3까지만 스프링 프로젝트가 생성이 가능하다.

 

이클립스에서 스프링 설치하듯이 마켓에서 STS3 Add를 설치하면 된다.

 

Help - Eclipse Marketplace

STS3 ADD 설치

 

설치 팝업이 끝나고 하단 Progress가 끝날 때까지 기다리면 툴을 재시작해달라는 메시지가 뜬다.

 

툴이 재시작 되고 로딩이 끝나면,

 

새로운 스프링 프로젝트를 생성한다

 

 

Next를 누르고 MVC 프로젝트로 생성하고 원하는 프로젝트명을 입력한다.

 

 

Next 후 원하는 package 구조를 생성한다. *.*.* 최소 3개 이상으로 구성하도록 한다.

 

 

프로젝트가 생성된다.

입력한 명으로 프로젝트가 생성

반응형
반응형

windows를 사용하다보면 시간이 틀어지는 경우가 가끔씩 발생하는데, 하필 실 운영중인 서버에서

시간이 틀어지는 현상이 발생하였고, 내가 만든 웹 페이지는 서버 시간을 가져와 시간 제한을 자바스크립트로 처리하고 있었는데,

서버 시간이 늦어지니 클라이언트에서 페이지를 켜면 자꾸 같이 틀어지게 되어 이번 기회에 윈도우 서버의 시간을 동기화를 시켜보았다.

시간을 변경하는건 2가지 정도가 있다.

수동으로 사용자가 직접 서버시간을 변경하거나 서버에서 시간을 받아와서 동기화를 시켜주면 된다.

수동으로 변경하여도 지속적으로 틀어진다면 동기화 방식을 추천한다.

수동으로 변경하기

1. 제어판 - 시계 및 국가를 선택한다.

 

2. 시간 및 날짜 설정 클릭

 

3. 날짜 및 시간 변경을 클릭한다.

 

4. 원하는 날짜와 시간으로 변경하고 저장을 누르면 수동으로 설정이 가능하다.

 


 

동기화를 통한 자동으로 시간 맞추기

수동설정의 2번까지 동일하다.

1. 인터넷 시간탭으로 이동한다.

 

2. 설정 변경을 클릭한다.

 

3. 지금 업데이트를 누르고 시간을 동기화 시킨다. (원하는 서버가 있다면 해당 서버 주소를 입력한다.)

 

 

4. 시간이 동기화된걸 확인 할 수 있고 다음 동기화 되는 시간을 확인할 수 있다.

 

4_1. 시간 동기화 주기 변경하기

1. 시작 - 실행 - regedit 입력 후 엔터 레지스트리를 켠다.

 

2. 레지스트리가 열리면 다음경로로 이동한다.

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\W32Time\TimeProviders\NtpClient

SpecialPollInterval을 더블 클릭한다.

 

3. 단위를 10진수로 변경하고 원하는 시간을 입력한다. 단위는 초이므로 초로 입력해주면된다.

ex) 30분 -> 1800, 1시간 -> 3600

원하는 시간을 입력하고 서비스를 재기동한다.

4. 시작 - cmd 입력후 관리자 권한으로 실행

관리자 권한이 아닌 경우 권한 설정에 따라 액세스 거부가 된다.

 

5. 다음과 같은 명령어를 입력하여 Windows time 서비스를 재시작을 해준다.

net stop w32time - Windows time 서비스 중지

net start w32time - Windows time 서비스 시작

 

6. 다음 동기화 시간이 변경된 걸 볼 수 있다.

 

반응형
반응형

이번에 윈도우10 업데이트가 진행되고 재부팅을하자 하단 시작줄에 검색창이 기본으로 보이는형식으로 변경되었다.

개인적으로 UI는 깔끔하게 쓰는편이라 아이콘도 쓰는것만 몇개만 두고 많이 띄우지 않는 스타일인데, 검색창이 보이니 거슬려 포스팅하게 되었다.

 

업데이트 후 윈도우10 시작줄 UI

 

검색창 감추기)

1. 검색창위에 마우스를 올리고 우클릭을 한다.

 

2. 검색창 옆 숨김을 클릭

 

3. 기존 UI로 변경된 모습

반응형
반응형

대문자를 소문자로 소문자를 대문자로 변경

개인적으로 mybatis쪽 쿼리 작성을 하다보면 종종 대소문자를 구분해야 하는 경우가 많았는데 기존 소스등이 잘못 입력된 경우 빠르게 수정하기 위해 단축키가 필요했다.

 

변경하고자는 문단을 블럭 지정을 하고

ctrl + shift + y : 대문자 -> 소문자 변환

ctrl + shift + x : 소문자 -> 대문자 변환

 

단축키를 입력하면 변경이 가능합니다.

 

 

자동 정렬하기

스페이스, 탭 등 엉망으로 정리되어 있는 소스를 한번에 정렬할 때 유용하다.

변경하고자는 문단을 블럭 지정을 하고

ctrl + shift + f : 자동 정렬

줄 맞춤등이 한번에 처리된다.

반응형
반응형

배열에 객체를 담아 출력 후 최상단 테이블의 헤더를 클릭하면 해당하는 값으로 오름차순, 내림차순 정렬이 되는

간단한 엑셀형태의 데이터 출력을 해보자.

 

데이터 출력

 

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>성적표</title>
  </head>
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .report tr{
      background: #F4FFF0;
    }
    .report td{
      border: none;
      height: 50px;
      font-size: 16pt;
      text-align: center;
    }
    .report td.name{
      width: 170px;
    }
    .report td.class{
      width: 80px;
    }
    .report td.jum{
      width: 130px;
    }
    .titleTable td{
      cursor: pointer;
    }
    .titleTable tr td{
      font-size: 18pt;
      font-weight: bold;
      background: #00B700;
      color: #fff;
    }
    .total td, .avg td{
      color: #fff;
      background: #1DDB16;
    }
  </style>
  <script type="text/javascript" src="js-grade.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
  <body>
    <table id="grade" class="titleTable report">
      <tr>
        <td id="name" class="name title">이름</td>
        <td id="class" class="class title">반</td>
        <td id="kor" class="jum title">국어</td>
        <td id="math" class="jum title">수학</td>
        <td id="eng" class="jum title">영어</td>
        <td id="sci" class="jum title">과학</td>
      </tr>
    </table>
    <table id="data" class="report data">

    </table>
    <table id="result" class="report result">

    </table>
  </body>
</html>

 

js-grade.js

 

var orderBy = "asc";
window.onload = function(){
  init();
}

function init(){
  var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
  ];

  tagParsing(students, true);

  //click Evt
  $(".title").click(function(){
    var titleName = this.id;
    if(titleName == "name"){
      objSort(students, "name");
      tagParsing(students, false);
    }else if(titleName == "class"){
      objSort(students, "class");
      tagParsing(students, false);
    }else if(titleName == "kor"){
      objSort(students, "kor");
      tagParsing(students, false);
    }else if(titleName == "math"){
      objSort(students, "math");
      tagParsing(students, false);
    }else if(titleName == "eng"){
      objSort(students, "eng");
      tagParsing(students, false);
    }else if(titleName == "sci"){
      objSort(students, "sci");
      tagParsing(students, false);
    }
  })
}

function objSort(obj, sort){
  if(orderBy == "asc"){ //오름차순 정렬
    orderBy = "desc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return 1;
      else if (a[sort] < b[sort]) return -1;
    });
  }else{ //내림차순 정렬
    orderBy = "asc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return -1;
      else if (a[sort] < b[sort]) return 1;
    });
  }
}
function tagParsing(obj, init){
  var kTotal = 0;
  var mTotal = 0;
  var eTotal = 0;
  var sTotal = 0;
  var len = obj.length;
  var tag = '';
  for(i=0; i<obj.length; i++){
    tag += "<tr><td class='name'>"+obj[i].name+"</td>"
    +"<td class='class'>"+obj[i].class+"</td>"
    +"<td class='jum'>"+obj[i].kor+"</td>"
    +"<td class='jum'>"+obj[i].math+"</td>"
    +"<td class='jum'>"+obj[i].eng+"</td>"
    +"<td class='jum'>"+obj[i].sci+"</td></tr>";

    kTotal += obj[i].kor;
    mTotal += obj[i].math;
    eTotal += obj[i].eng;
    sTotal += obj[i].sci;
  }
  document.getElementById("data").innerHTML = tag;

  if(init){
    tag = '';
    //총점
    tag += "<tr class='total'><td class='name'>"+"총 점"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+kTotal+"</td>"
          +"<td class='jum'>"+mTotal+"</td>"
          +"<td class='jum'>"+eTotal+"</td>"
          +"<td class='jum'>"+sTotal+"</td></tr>";
    //평균
    tag += "<tr class='avg'><td class='name'>"+"평 균"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+(kTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(mTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(eTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(sTotal/len).toFixed(2)+"</td></tr>";

    document.getElementById("result").innerHTML = tag;
  }
}

 

최초 출력시엔 아무런 정렬없이 배열을 출력하고 이름을 클릭하면 이름별 정렬이 된다.

이름별 정렬 - 오름차순

 

 

다시 한번 클릭하면 내림차순 정렬

이름별 정렬 - 내림차순

 

 

sort() 메소드에 대하여 간단하게 정리한 링크

https://myhappyman.tistory.com/23

 

 

java jdbc등을 활용하여 디비에서 데이터를 가져와 출력 할 경우 sort() 메소드를 사용하지 않겠지만,(db에서 이미 orderBy를 처리하여 가져옴)

Redis 또는 Socket 통신등으로 JSON형태나 다른형태의 데이터를 받게 되면 정렬이 보장되지 않게 수신되는 경우가 많다.

이런 경우를 대비하여 javascript sort() 메소드를 활용하여 간단하게 작성하였다.

반응형
반응형

sort() 메소드는 배열을 원하는대로 정렬 후 정렬된 배열을 반환 한다.

sort() 메소드 사용예시

var alpha = ['d', 'e', 'c', 'a', 'f', 'b'];
alpha.sort();
console.log(alpha);

정렬 후 변경된 배열

 

배열.sort([compareFunction])

정렬하고자 하는 배열.sort()를 통하여 정렬이 가능하다.

데이터는 따로 복제되는것이 아닌 원 배열을 정렬하는 것이므로 주의하자.

compareFunction : 정렬 순서를 정의하는 함수이다.

compareFunction이 정의되지 않으면 요소를 문자열로 변환하고 유니코드 포인터 순서로 문자열을 정리한다.

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉 a가 먼저 온다.

compareFunction(a, b)이 0을 반환하면 a와 b를 서로 변경하지 않는다.

compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 인덱스로 정렬한다.

 


 

숫자(Number)를 비교할 때는 빼기를 통해 정렬이 가능하다.

var num = [5,4,3,2,1];
num.sort(function(a, b){
	return a-b;
})
console.log(num);

빼기 연산을 통한 정렬

 

 

배열에 담긴 객체는 키값을 지정하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// price 기준으로 정렬
products.sort(function (a, b) {
  if (a.price > b.price) {
    return 1;
  }else if (a.price < b.price) {
    return -1;
  }
});
console.log(products);

price 기준 정렬

 

 

배열 인덱스 형태로도 접근하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// name 기준으로 정렬
products.sort(function (a, b) {
  if (a["name"] > b["name"]) {
    return 1;
  }else if (a["name"] < b["name"]) {
    return -1;
  }
});
console.log(products);

name 기준 정렬

 

 

2가지 조건으로 정렬하기 (else if 문을 추가하면 된다.)

var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];

// 반별 정렬 후 이름별 정렬
students.sort((a, b) => {
  if (a.class > b.class) return 1;
  else if (a.class < b.class) return -1;
  else if (a.name > b.name) return 1;
  else if (a.name < b.name) return -1;
});
console.log(students);

반별 정렬 후 이름별 정렬

 

반응형