Javascript 코어 라이브러리

|
  1. 타이머 함수
  2. Math 클래스
  3. String 클래스
  4. Data 클래스
  5. Array 클래스


타이머 함수

타이머 함수는 모두 전역 객체인 window에 들어 있습니다.

함수 설명
setInterval() 일정 시간마다 주기적으로 특정 구문을 실행
setTimeout() 일정 시간이 지난 후 특정 구문을 딱 한번만 실행
clearInterval() 실행 중인 타이머 함수를 멈춤


time 예제

var $fish = null;
var step = 50;
var timeID = null;

function init(){
	$fish = $("#fish");
}

function initEvent(){
	$("#btnStart").click(function(){
		start();
	});

	$("#btnStop").click(function(){
		stop();
	});
}

function start(){
	timeID = setInterval(function(){
		moveFish();
	}, 100);
}

function stop(){
	clearInterval(timeID);
}

function moveFish(){
	// 다음 물고기 위치
	var x = $fish.position().left+step;

	// 물고기 위치가 430을 넘는 경우, 물고기 이동방향을 뒤쪽으로 변경 해줌
	if(x>=430){
	x=430;
	$fish.attr("src","fish2.png");
		step=-50;
	}

	// 물고기 위치가 50보다 작은 경우, 물고기 이동방향을 앞쪽으로 변경 해줌
	if(x<50){
		x=50;
		$fish.attr("src","fish1.png");
		step=50;
	}
	 // 물고기 위치 설정
	$fish.css("left", x);
}

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



Math 클래스

자주 사용하는 메서드 목록

메서드 설명
abs() 숫자의 절댓값 반환
ceil() 숫자의 올림값 반환
max() 주어진 두 수 중 큰 값 반환
min() 주어진 두 수 중 작은 값 반환
random() 0과 1 사이의 난수 값을 반환
round() 숫자의 정수 반올림


random 예제

// 0.5초 마다 50 ~ 100 사이 정수를 출력하기

var $info = null;
$(document).ready(function() {
    $info = $("#info");

    showRandom();
    setInterval(showRandom, 500);
})

function showRandom() {
    var value = parseInt(Math.random() * 50) + 50;
    $info.html(value);
}
// 랜덤으로 이미지 변경하기

$(document).ready(function(){
    var imgList1 = ["logo_01.jpg","logo_02.jpg","logo_03.jpg","logo_04.jpg","logo_05.jpg"];
    var imgList2 = ["logo_02.jpg","logo_05.jpg","logo_03.jpg","logo_04.jpg","logo_01.jpg"];

    // 첫 번째 배너
    banner("#banner1", imgList1, 1000);
    banner("#banner2", imgList2, 3000);
})

// 배너
function banner(selector, imgList, speed){

    var $banner = $(selector);

    // 1초에 한번씩 함수 호출
    setInterval(function(){
		 var currentIndex = Math.floor(Math.random()*imgList.length)

        // 다음 이미지 이름 구하기
        var imgName = imgList[currentIndex];
        
        // 다음 이미지 출력
        $banner.attr("src", "./images/"+imgName);
    },speed)
}


max/min 예제

// 10 ~ 100 사이 숫자 입력 validation

var value = window.promp("숫자입력", 0);
value = Math.min(100,Math.max(10,value));
alert(value);


time & random 복합예제

var count=0;
var $score=null;
var $fish=null;
var $start=null;
var playing=false;
var timeID=null;

// 도큐먼트 로드
$(document).ready(function(){
    init();
    initEvent();
});

// 요소 초기화
function init(){
  $score = $("#score");
  $fish = $("#fish");
  $start = $("#start");
}

// 이벤트 초기화
function initEvent(){
  $start.click(function(){
    startGame();
  })

  // 물고기에 클릭 이벤트 등록
  $fish.click(function(){
    countUp();
  });
}

// 게임시작
function startGame(){
  if(playing==false){
    endGame();
    playing=true;
    timeID = setInterval(function(){
      moveFish();
    },1000);
  }
}

// 게임종료
function endGame(){
  // 게임을 5초후에 종료시켜 줍니다.
  setTimeout(function(){
      playing=false;
      clearInterval(timeID);
      alert("게임이 종료 되었습니다.")
  },5000);
}

// 물고기 이동
function moveFish(){
  var x = Math.floor(Math.random()*480);
  var y = Math.floor(Math.random()*330);

  $fish.css({
    left:x,
    top:y
  })
}

// 점수 올리기
function countUp(){
  if(playing==true){
      // 점수 증가
      count++;
      $score.html(count);
  }
}



String 클래스

주요 메서드

메서드 설명
charAt(n) n번째 문자 구하기
charCodeAt(n) n번째 코드 값 구하기
concat(str) 문자열 뒤쪽에 str을 연결해 새로운 문자열 만들기
indexOf(substr) substr 문자열이 위치한 위치값 구하기, 앞에서부터 검색 시작
lastIndexOf(substr) substr 문자열이 위치한 위치값 구하ㄱ, 뒤에서부터 검색 시작
match(reg) 정규표현식을 활용한 문자열 검색
replace(reg,rep) 정규표현식을 활용한 문자열 교체
search(reg) 정규표현식을 활용한 문자열 위치 검색
slice(start,end) start번째부터 end번째 문자열 추출
split(str) 문자열을 str로 분할해 배열로 생성해줌
substr(start[,count]) start번째부터 count 개수만큼 문자열 추출
toLowerCase() 모든 문자열을 소문자로 변환
toUpperCase() 모든 문자열을 대문자로 변환
trim() 좌우 공백 제거


string 공백제거 예제

$(document).ready(function(){
    var $output = $("#output");
    var $input = $("#input");

    $("#confirm").click(function(){
       // 입력 값 알아내기
       var value = $input.val();

       var result = ltrim(value);
       $output.html(value+" ==> "+result);
    })
});


// 앞쪽 공백문자를 제거하는 함수
function ltrim(str){

    // 공백 pass
    if(str.length<=0){
      return "";
    }

    // 마지막에 공백이 없는경우 pass
    var lastCh = str.charAt(str.length-1);
    if(lastCh!="_"){
      return str;
    }

    // 문자 index 찾기
    for(var index=str.length-1; index>=0; index--){
      var ch = str.charAt(index);
      if(ch!="_"){
        index++;
        break;
      }
    }

    // 공백제거 후 리턴
    var result = str.substr(0, index);
    return result;
}


세자리 자릿수 “,” 예제

$(document).ready(function(){
    var $output = $("#output");
    var $input = $("#input");

    $("#confirm").click(function(){
        // 입력 값 알아내기
        var value = $input.val();

        //3자릿수 마다 콤마(,) 추가
        var result = won(value);

        // 결과 출력
        $output.html(value+" ==> "+result);
    })
});

//3자릿수 마다 콤마(,) 추가
function won(value){

    // 3자 이하 pass
    if(value.length<=3){
      return value;
    }

    var result = "";

    // 루프 횟수 구하기
    var roofCount = Math.floor((value.length-1)/3);

    for(var i=0; i<roofCount; i++){

      // 길이 초기화
      var length = value.length;
      // 뒤에서 3개 자르기
      var strCut = value.substr(length-3, length);
      // 합치기
      result = ","+strCut+result;
      // value 업데이트
      value = value.slice(0, length-3);
    }
    // 앞자리 나머지 붙여서 리턴
    result = value + result;
    return result;
}



Date 클래스

주요 메서드

메서드 설명
getDate() 로컬시간을 사용하여 일(월 기준)을 반환
getDay() 로컬시간을 사용하여 일(주 기준, 즉 요일)을 반환
getMonth() 로컬시간을 사용하여 월을 반환
getFullYear() 로컬시간을 사용하여 연도을 반환
getSeconds() 로컬시간을 사용하여 초를 반환
getMinutes() 로컬시간을 사용하여 분을 반환
getHours() 로컬시간을 사용하여 시간을 반환
setDate() 로컬시간을 사용하여 일(월 기준)을 설정
setMonth() 로컬시간을 사용하여 월을 설정
setFullYear() 로컬시간을 사용하여 연도를 설정
setSeconds() 로컬시간을 사용하여 초를 설정
setMinutes() 로컬시간을 사용하여 분을 설정
setHours() 로컬시간을 사용하여 시간을 설정


Date 메서드 관련 시계예제

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

function init(){
  $output = $("#output");
}

function clock(callback){
  getTime(print1);
  setInterval(function(){
    getTime(print1);
  }, 500);
}

function addZero(value){
  if(value<10){
    value = "0"+value;
  }
  return value;
}

function getTime(callback){
  var objDate = new Date();

  var hours = addZero(objDate.getHours());
  var minutes = addZero(objDate.getMinutes());
  var seconds = addZero(objDate.getSeconds());

  var year = objDate.getFullYear();
  var month = objDate.getMonth();
  var date = objDate.getDate();

  var day = objDate.getDay();
  var dayArray = ["일","월","화","수","목","금","토"];

  callback(year, month, date, dayArray, day, hours, minutes, seconds);
}

function print1(year, month, date, dayArray, day, hours, minutes, seconds){
  $output.html(
    year+"년 "+month+"월 "+date+"일 "+dayArray[day]+"요일<br>"+
    hours+":"+minutes+":"+seconds
  );
}

function print2(year, month, date, dayArray, day, hours, minutes, seconds){
  $output.html(
    hours+":"+minutes+":"+seconds
  );
}



Array 클래스

주요 메서드

메서드 설명
concat() 배열에 다른 배열이나 값을 연결해 새 배열을 반환
indexOf() 배열 요소의 인덱스 값을 반환, 배열 요소가 없는 경우 -1 반환
join([separator]) 지정된 구분 문자열로 배열 요소들을 이어 붙여서 문자열로 만듦
pop() 마지막 배열 요소 반환
push(element[,element]) 새로운 배열요소를 마지막 배열 위치에 추가
reverse() 배열 요소의 순서를 반대로 바꿈
shift() 배열에서 첫 번째 요소를 제거한 후 배열을 반환
slice() 배열의 일부분을 반환
sort([compareFunction]) 배열 요소를 내림차순 또는 오름차순으로 정렬
splice(start, deleteCount [,element]) 배열 요소를 추가, 삭제, 교체
unshift(element[,element]) 배열 맨 앞에 배열 요소를 삽입
split([separator]) 문장을 [separator]기준으로 나눠서 배열로 반환


splice 용법

삭제가 없을 경우 deleteCount는 0으로 설정합니다.

var menuItems = ["menu1", "menu2", "menu3", "menu4"];
console.log("실생전 : " + munuItems.join(","));
menuItems.splice(2,0,"new");
console.log("실행후 : " + munuItems.join(","));

// 결과
// 실행 전 : menu1, menu2, menu3, menu4
//	실행 후 : menu1, menu2, new, menu3, menu4


sort 용법

숫자 오름차순의 경우 sort()로 정렬 할 수 없습니다.

// 문자 오름차순
arrayData.sort()
// 문자 내림차순
arrayData.sort(function(a,b){ return b>a; });
// 숫자 오름차순
arrayData.sort(function(a,b){ return a-b; });
// 숫자 내림차순
arrayData.sort(function(a,b){ return b>a; });



reference

  • 자바스크립트+jQuery 완전적복 스터디(김춘경)

Javascript 함수기초

|

자바스크립트 함수 기초내용입니다.

중첩 함수

함수 안에 함수가 속해있는 구조입니다.

중첩 함수에서는 중첩함수를 포함하고 있는 함수의 지역변수에 접근해서 사용할 수 있습니다.

var a=10;
var b=20;
var c=30;
function outer_func(){
    var b=200;
    var c=300;
    function inner_func(){
        var c=3000;
        document.write("1. a = "+a+"<br>");
        document.write("2. b = "+b+"<br>");
        document.write("3. c = "+c+"<br>");
    }
    inner_func();
}
outer_func();

/*
 결과 :
     1. a = 10
     2. b = 200
     3. c = 3000

 */


callback 함수

로직의 결과값만 다르게 출력할때 유용합니다.

// 사칙연산 함수
function calculator(op, num1,num2, callback){
    var result="";

    switch(op) {
        case "+" :
            result = num1 + num2;
            break;
        case "-" :
            result = num1 - num2;
            break;
        case "*" :
            result = num1 * num2;
            break;
        case "/" :
            result = num1 / num2;
            break;

        default :
            result = "지원하지 않는 연산자입니다";
    }

    callback(result);
}

function print1(result) {
  document.write("두 수의 합은"+result+"입니다.", "<br>");
}

function print2(result) {
  document.write("정답은"+result+"입니다.", "<br>");
}

calculator("+", 10,20, print1);
calculator("+", 10,20, print2);


콜백함수는 보통 비동기 함수의 결과 값을 처리하기 위해 많이 사용됩니다.

비동기란?

함수가 호출된 후 끝날 때까지 기다리지 않고 바로 다음 구문을 실행하는 경우를 비동기라고합니다.

var count=1;

setInterval(function(){
    document.write("2. count = "+count);
},3000);

document.write("1. ajax() 동작이 모두 끝나지 않았어도 바로 실행됩니다.");

setInterval() 함수가 실행되면 자바스크립트 엔진은 동기 함수와는 달리 3초를 기다리지 않고 바로 다음 구문을 실행합니다.


콜백함수는 다음과 같은 경우에 많이 사용됩니다.

  1. 이벤트 리스터로 사용

     $("#btnStart").click(function(){
           alert("클릭되었습니다.");
         });
    
  2. 타이머 실행 함수로 사용

     setInterval(function(){
       alert("1초마다 한 번씩 실행되요");
     });
    
  3. Ajax 결과값을 받을 때 사용

     $.get("http://luxlab.co.kr/", function(){
           alter("정상적으로 서버 통신이 이뤄졌습니다.");
         });
    
  4. jQuery 애니메이션 완료

     $("#target").animate ({
           left:100,
           opacity:1
         },2000,"easeoutQuint", function(){
           alert("애니메이션이 완료되었습니다.");
         });
    


클로저 함수

클로저는 쉽게 말하면 함수 내부에서 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다. 내부함수에서 내부함수를 포함하고 있는 외부함수의 변수A를 사용하는 구조인 경우로 표현할 수 있으며 내부함수를 클로저 함수라고 부릅니다. 또한 변수A는 클로저 현상에 의해 외부함수 호출이 끝나더라도 사라지지 않고 값을 유지합니다.

// 일반 함수인 경우
function addCount(){
    var count=0;
    count++;
    return count;
}

document.write("1. count = "+addCount(),"<br>");
document.write("2. count = "+addCount(),"<br>");
document.write("3. count = "+addCount(),"<br>");

/*
 실행결과 :
 1.	Count = 1
 2.	count = 1
 3.	count = 1
 */
// 클로저를 사용한 경우
function createCounter(){
    var count=0;
    function addCount(){
        count++;
        return count;
    }
    return addCount;
}

var counter = createCounter();

document.write("1. count = " + counter(),"<br>");
document.write("2. count = " + counter(),"<br>");
document.write("3. count = " + counter(),"<br>");


/*
 실행결과 :
 1.	count = 1
 2.	count = 2
 3.	count = 3
 */
// 리턴이 없는 클로저함수

$(document).ready(function() {
    $("#btnStart").click(function () {
        start();
        document.write("시작합니다.");
    });

    function start() {
        var count = 0;
        setInterval(function () {
            count++;
            document.write(count);
        }, 1000);
    }
});

변수가 사라지지 않고 계속해서 값을 유지하는 상태를 모두 클로저라고 부릅니다. 아래 예제는 $selectMenuItem 변수가 클로저 변수로 같은 함수를 호출한 두 개의 탭이 각각 다른 변수를 저장하게 됩니다.

$(document).ready(function(){
	// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
	tabMenu("#tabMenu1 li");

	tabMenu("#tabMenu2 li");
});


function tabMenu(selector){
	// 선택 한 탭메뉴를 저장할 변수
	var $selectMenuItem =null;

	// 메뉴 항목에 클릭 이벤트 등록
	$(selector).click(function(){

		// 기존 선택 메뉴 항목이 있으면 비 선택 상태로 만들기
		if($selectMenuItem!=null){
		   $selectMenuItem.removeClass("select");
		}

		// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
		$selectMenuItem = $(this);
		// 선택 상태로 만들기
		$selectMenuItem.addClass("select");

	})
}

Aws Ec2 인스턴스에 Redis 설치하기

|

저는 Read cache를 위해 별도 EC2 인스턴스를 띄우고 redis를 사용하였습니다.


EC2 create

  • aws amazone linux AMI를 선택합니다.
  • security group 에 16379, 6379 포트를 추가합니다.
  • 인스턴스 생성완료


Linux updates

ssh로 접근해서 업데이트를 실행합니다.

$ sudo yum -y update
$ sudo yum -y install gcc make


Download Redis

참고: http://redis.io/download

$ cd /tmp
$ wget http://download.redis.io/releases/redis-4.0.0.tar.gz
$ tar xzf redis-4.0.0.tar.gz
$ cd redis-4.0.0
$ make


Create Directories and Copy Redis Files

$ sudo mkdir /etc/redis 
$ sudo mkdir /var/lib/redis
$ sudo cp src/redis-server src/redis-cli /usr/local/bin/
$ sudo cp redis.conf /etc/redis/


Configure Redis.Conf

conf 설정 파일을 수정합니다.

$ sudo vim /etc/redis/redis.conf

아래 내용 외 나머지 부분은 기본값을 유지합니다.

[..]
daemonize yes
[..]
  
[..]
bind 0.0.0.0
[..]
  
[..]
dir /var/lib/redis
[..]
  
logfile /var/log/redis_6379.log


Setting Redis-Server init script

참고: https://github.com/saxenap/install-redis-amazon-linux-centos

  • 자동 실행을 위한 스크립트를 다운 받습니다.

      $ cd /tmp
      $ wget https://raw.github.com/saxenap/install-redis-amazon-linux-centos/master/redis-server
    
  • Redis-Server 파일 이동 후 권한을 설정합니다.

      $ sudo mv redis-server /etc/init.d
      $ sudo chmod 755 /etc/init.d/redis-server
      $ sudo vim /etc/init.d/redis-server
    	
      ->  redis="/usr/local/bin/redis-server" 확인
    
  • Redis-Server Auto-Enable 설정

      $ sudo chkconfig --add redis-server
      $ sudo chkconfig --level 345 redis-server on
    


Start Redis Server

드디어 서버를 실행합니다.

$ sudo service redis-server start
$ redis-cli ping -> PONG

강제 종료시
$sudo service redis-server stop

Docker 치트시트

|

도커를 사용하는데 자주 사용하는 기본 명령어들입니다.


docker image build

  • 기본 빌드

      docker build . -t <이미지이름>
    
  • 빌드시 환경변수 전달

    aws 인증정보를 환경변수로 전달한 예 입니다.

      docker build . -t <이미지이름> --build-arg AWS_ACCESS_KEY_ID=<엑세스키> --build-arg AWS_SECRET_ACCESS_KEY=<시크릿키> --build-arg AWS_DEFAULT_REGION=<리즌>
    


docker tag

  • docker tag 생성

      docker tag <기존 이미지명:테그명> <적용 이미지명:테그명>
    
  • docker tag 삭제

      $ docker rmi user/foobar:1dee6a0ffae858a796e53aaf88a676f9ccb33165
      $ docker images
      REPOSITORY   TAG                                        ID                  CREATED             SIZE
      user/foobar  latest                                     c4480f1bd5a7        About an hour ago   12.29 kB (virtual 1.625 GB)
      user/fizbiz  9c4f77f7388406f5ad3cfbc673e2f1bb27fe3d29   6b9184c7d178  
    


docker run

  • 도커 실행

      docker run --rm -it -p <외부 IP>:<컨테이너 IP> <도커 이미지명>
    

    이제 localhost:<외부 IP="">로 접속하면 웹페이지 접근이 가능합니다.

  • 실행중인 컨테이너 ssh 접속

      docker exec -it <컨테이너 아이디> /bin/bash
    


docker list

  • 이미지 리스트 확인

      docker images [OPTION]
    
  • 컨테이너 리스트 확인

      docker ps [OPTION]
    


docker delete

  • 테그 없는 이미지 삭제

      docker rmi -f $(docker images --filter "dangling=true" -q)
    
  • 도커 이미지 전부 삭제

      docker rmi -f $(docker images -q)
    
  • exit 상태의 모든 컨테이서 삭제

      docker rm $(docker ps --filter 'status=exited' -a -q)
    

Docker Nginx 환경에서 Http Redirect To Https 세팅하기

|

Cloudflare 같은 dns 서비스를 사용하지 않으면 https redirect를 위해 nginx에 직접 rewrite 코딩해야합니다. 저는 AWS에 docker로 API를 배포해서 AWS ECS 세팅을 추가로 설명하겠습니다.


nginx server 세팅

server {
    listen                  80;
    server_name             <user server url>;
    rewrite                 ^ https://$server_name$request_uri? permanent;
}

server {
    listen                  1443;
    server_name             <user server url>;
    charset                 utf-8;
    client_max_body_size    128M;


    location / {
            uwsgi_pass      unix:///tmp/app.sock;
            include         uwsgi_params;
    }

}


Elastic load balencer 세팅

EC2 인스턴스 앞에 ELB가 있으면 health check를 위해 아래 세팅을 해야합니다.

  1. ELB 포트 구성: 80 -> 80 and 443 -> 1443
  2. Health check 타겟은 TCP:1443으로 설정합니다. 80포트로 설정하면 301 redirect로 Health check에 실패합니다.


Dockerfile 세팅

컨테이에 80 포트와 1443 포트를 열어줍니다.

EXPOSE      80  1443


AWS ECS + EC2 세팅

마지막으로 도커의 Task definition 과 EC2 security group 설정을 해줍니다.

  1. ec2 security group inbound 규칙에 80, 443, 포트 추가합니다.
  2. 컨테이너 추가에 에 80:80, 1443:1443 포트를 매핑합니다.


reference

https://goo.gl/i7AioL