컬쳐N라이프

자바스크립트 json object의 key와 value를 다루는 방법을 알아보겠습니다.

1. JSON 이란?

JSON(JavaScript Object Notation)의 약자로 key와 value를 한 쌍으로 이루어져 있고 특정 key를 이용하여 value 값을 가져올 수 있는 개방형 표준입니다.

JSON은 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고 쓰기 쉽다.

프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 객체를 교환하기에 좋다.

순서가 없는 이름/값 쌍의 집합으로, 이름(키)이 문자열이다.

2. JSON 형식

let object1 = {

    name:'John', 

    age:25, 

    gender:'boy',

    hobby: ['운동', '영화감상']

}

3. JSON 값 추출

console.log(object1.name);
// expected output: John

console.log(object1['name']);
// expected output: John

4. 예제보기

5. 관련링크

javascript에서 날짜 설정, 날짜 더하기, 빼기에 대해 

알아보겠습니다.

특정 날짜 설정은 생성자에 문자열을 넣어 날짜를 설정할 수 있습니다.

setDate(), setMonth(), setDay() 를 이용하여 날짜를 더하거나 뺄 수 있습니다.

- html

설정 날짜 : <span id="setDate"></span>
<div>전날 : <span id="yesterday"></span></div>
<div>다음날 : <span id="tomorrow"></span></div>
<div>다음달 : <span id="nextMonth"></span></div>

$(document).ready(function () {
	// 생성자에 문자열을 넣어 특정 날짜 생성
	var date = new Date("2010/12/10");

	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
  var dayoftheweek = date.getDay();

  if (month < 10) {
  	month = "0" + month;
  }
  
  if (day < 10) {
  	day = "0" + day;
  }
  
	$('#setDate').append(year + '-' + month + '-' + day);
  
  // 전날
  $('#yesterday').append(year + '-' + month + '-' +(date.getDate() - 1));
	// 다음날
  $('#tomorrow').append(year + '-' + month + '-' +(date.getDate() + 1));
  
  // 다음달
  date.setMonth(date.getMonth() + 1);
  $('#nextMonth').append(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
  
});

다음달을 유의해서 보시기 바랍니다.

앞의 두 예제는 단순이 날짜를 가져와서 + 1 혹은 -1을 하였습니다.

하지만 2010/12/10의 다음달은 2011/1/10일이기 때문에 

date.setMonth(date.getMonth() + 1); 

방법처럼 날짜 변수에 setMonth() 한 다음에

date.getFullYear(), date.getMonth() + 1, date.getDate()

하는 방법이 더 좋은 방법으로 보입니다.

- 예제보기

- [javascript] javascript 날짜 두자리, 요일 구하기, Date()

안드로이드 스튜디오를 이용하여 

Android Material Design 적용하기!!

Android Material Design이 적용된 TextInputLayout을 알아보겠습니다!!

먼저 안드로이드 스튜디오를 이용하여 새로운 Andriod Project를 생성합니다.

- 라이브러리 추가

Material Design을 적용하기 위해서 android-support-v7 라이브러리를 21.0.0 이상 버전을 추가해줘야합니다.

최신 버전의 안드로이드 스튜디오의 경우 자동으로 android-support-v7:21.0.0 이상 버전이 추가되어있습니다.

만일 21.0.0 버전 이하거나 없다면 gradle에 추가해주세요.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

- TartgetSDK 변경

 android-support-v7 라이브러리 사용을 위해서는 TargetSDK가 21버전 이상으로 설정되어야 합니다.

defaultConfig {
    applicationId "tsis.co.kr.androidstudiotest"
    minSdkVersion 11
    targetSdkVersion 21
    versionCode 1
    versionName "1.0"
}

- Layout

<android.support.design.widget.TextInputLayout
    android:id="@+id/txtIptLayout_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="id를 입력하세요"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/txtIptLayout_pw"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="password를 입력하세요."
        android:password="true"/>
</android.support.design.widget.TextInputLayout>

정말 간단하게 TextInputLayout을 적용해보았습니다.

코드 한 줄 없이 xml으로만 적용할 수 있습니다.

정말 쉽죠잉~?

javascript 날짜 두자리 및 요일 구하기에 대해 알아보겠습니다.

javascript에서 날짜를 구하는 함수는 Date() 함수를 이용합니다.

월이나 날짜가 1~9인 경우에는 한 자리로 나오게 되는데 한 자리일 때를 구분하여 

두 자리로 만들어보겠습니다.

또한 getDay 메서드는 요일을 0(일요일)에서 6(토요일)까지의 숫자로 가져옵니다. 

숫자를 구분하여 요일로 가져오겠습니다.

- html

<span id="current"></span>
<span id="dayoftheweek"></span>

$(document).ready(function () {
	var date = new Date();

	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
  var dayoftheweek = date.getDay();

  if (month < 10) {
  	month = "0" + month;
  }
  
  if (day < 10) {
  	day = "0" + day;
  }
  
	$('#current').append(year + '-' + month + '-' + day);
  $('#dayoftheweek').append(getDay(dayoftheweek));
  
});

function getDay(idx) {
	var date = "";
  switch (idx) {
  	case 0:
    	date = "일요일";
    break;
    case 1: 
    	date = "월요일";
    break;
    case 2: 
    	date = "화요일";
    break;
    case 3: 
    	date = "수요일";
    break;
    case 4: 
    	date = "목요일";
    break;
    case 5: 
    	date = "금요일";
    break;
    case 6: 
    	date = "토요일";
    break;
  }
		
	return date;
}

javascript 날짜 두자리 및 요일 구하기에 대해 알아보았습니다.

적절하게 변경하여 깔끔하게 javascript를 이용하여 날짜 및 요일을 적용하세요.

예제보기

Angularjs의 ng-style, ngStyle, angurlajs css 적용에 대해서 알아보겠습니다.

ng-style, ngStyle를 이용하여 angularjs에서 css를 적용할 수 있습니다.

- html 

<div ng-app="app" ng-controller="controller">
   <div>
     <span ng-style="Style">text color</span>
    <button ng-click="setColorRed()">color Red</button>
   </div> 
   <div>
     <span ng-style="background">text color</span>
     <button ng-click="setBackgroundRed()">background Red</button>
   </div>
</div>

var app = angular.module("app", []);
  app.controller("controller", function ($scope) {

    $scope.setColorRed = function () {
      $scope.Style = {
        'color' : 'red'
      };
    }
    
    $scope.setBackgroundRed = function () {
      $scope.background = {
        'background-color' : 'red'
      };
    }
});

ng-style에 Style과 background 객체를 바인딩하여 버튼 클릭이 됐을 때 style을 적용합니다.

기존 css와 다른점은 ng-style로 css를 적용할 때 JSON 형태로 {"속성":"값"} 적용한다는 점 유의해 주시기 바랍니다.

예제보기

BrokenBot 4.0.0으로 coc 오토, coc 자동 파밍, coc 오토 파밍에 대해서 알아보겠습니다.

오토파밍을 하기 위해선 

PC환경에서 coc를 돌리기 위한 bluestack이 필요합니다.

1. bluestack 다운로드 하기 

BlueStacks V0.9.X.X or V0.10.0.4321 or V0.10.7.5601

현재 BrokenBot 4.0.X 버전에서 지원하는 블루스택은 위 3개 버전입니다.

위 3개 버전중 하나를 다운로드하고 설치해주세요.

다양한 자동 파밍 툴이 있지만 그 중에서도 BrokenBot 4.0.0 으로 새로 출시된 BrokenBot에 대해서 알아보겠습니다.

2. BrokenBot 다운로드 하기 

위 BrokenBot 홈페이지에 가입후에 BrokenBot을 다운로드 해주세요.

설치하시고 로그인 하시면 BrokenBot이 땋! 실행해주세요~

*** 주의 ***

bluestack에서 coc 언어 설정은 무조건! english 영문으로 변경해야 정상 작동합니다.!!

 - Log : 현재 상태를 log로 나태나주는 화면입니다.

 - Stats 탭에서는 현재 내 자원과 시간당 변화 자원, 공격에 따른 파밍 자원등을 확인할 수 있습니다.

 - Strategy 탭에서는 파밍 전략을 세울 수 있습니다.

4. Advanced 탭에서는 Building과 Speed만 설정하셔도 무방합니다.

추가 설정이 필요하면 추가로 설정해주세요~

1. 먼저 병력을 생산하기 위해서 각 건물의 위치를 지정해야합니다.

Advanced 탭에서 Auto Detecting Buildings 를 선택하여 자동으로 건물이 선택될 수 있게 합니다.

위치를 찾지 못할 때 각 건물을 선택하라고 알림이 뜨는데 알림을 읽고 확인 후에 알맞는 건물을 클릭하면 됩니다.

Fix Building Locations를 선택하면 현재 선택된 건물들이 X표시로 나타나게 됩니다. 

이후에 배럭 같은 경우에는 Add Baracks 를 클릭하여 추가 배럭을 설정해줍니다.

Advanced / Speed 설정

2. Strategy 설정

+ New Strategy를 선택하고 GiBarch Live Base Single Side Attack를 선택합니다.

(안보인다면 아무거나 선택해도 무방합니다. 어차피 따로 다 설정해야합니다.)

새롭게 추가된 전략을 GiBarch Live Base Single Side Attack(본인이 추가한) 클릭하면 

Edit 버튼이 나타나게 됩니다.

위에서부터 차례대로 설정해보겠습니다.

 Genenal Setting

 트로피 구간을 설정하여 설정 구간의 트로피에서만 파밍을 합니다.

 Max Trophies를 넘어갔을 때는 알아서 트로피를 낮추게됩니다.

 Donate / Request Settings

 병력 지원과 지원 요청을 설정할 수 있습니다.

 Target Search Profiles

  Saved Search Profiles가 없으면 NEW를 선택하여 새로 생성하고 

  홀 레벨에 맞게 골드와 엘릭서 다크엘릭서를 설정합니다.

 - 현재 설정에는 Gold만 선택되어 있지만 Gold and Elixir 혹은 Gold or Elixir 검색 설정을 

   알맞게 적용하시면 됩니다.

- Max TH Level : Max Town Hall Level입니다. 7로 설정하시면 7홀이하만 공격하게 

  되어있습니다.

 Troop Training Configuration

 병력 생산 설정입니다.

 % - 설정 비율만큼 병력을 생산합니다.

  # - 설정 숫자 만큼 병력을 생산합니다.

  알맞게 설정하여 병력을 생산하시면 됩니다.

 Troop Deployment Profiles

 - 파밍 시 병력 Drop을 설정할 수 있습니다.

 - 먼저 아래 화면 처럼 Select SAVED PROFILE을 선택줍니다.

 - 만일 없다면 new를 통해 하나 생성하면 됩니다.

 CONTINUE 버튼이 활성화되고 클릭해줍니다.

 Troop Deployment Options에서 유닛, 개체수 or 개체% , 방향 등을 설정해서 추가합니다.

 * 주의 

  1. FInd Standing Dark Elixir Collector

  2. Find New Dark Elixir Collector 를 꼭 해주세요.

 - 기억이 안나지만 위 설정을 안해서 공격을 안들어갔던거 같네요 ㅎㅎ;

 아래 화면 처럼 알맞게 설정해주시면 됩니다.

 Attack Strategies 

 공격 전략에 앞서 설정(Target Search Profiles)했던 내용이 추가되어 있으면 설정 완료입니다.

 RETURN 클릭하시고 SAVE & RETURN 하신 후에 Start Bot 뙇!!!!

지금까지 BrokenBot 4.0.0으로 coc 오토, coc 자동 파밍, coc 오토 파밍에 대해서 알아보았습니다.

자동 사냥 셋팅하고 편리하게 COC 즐기시기 바랍니다.

- 관련 링크

- [Clash of Clan] - BrokenBot 4.0.0 coc 오토 공격 설정 (1) - TownHall