[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 8월 19일 금요일

[JAVA] Baekjoon 첫째 줄에는 별 N개, 둘째 줄에는 별 N-1개, ..., N번째 줄에는 별 1개를 출력해 봅니다. (오른쪽 정렬)..

별출력 끝판왕이다.. 말이 좀 웃긴가.. 무튼 마지막 문제인데 5 to 1 을 해봤으니 당연히?? 자연스럽게 5 to 1 에 대한 오른쪽 정렬을 해봐야겠지.. ㅎㅎ

문제
첫째 줄에는 별 N개, 둘째 줄에는 별 N-1개, ..., N번째 줄에는 별 1개를 찍는 문제

하지만, 오른쪽을 기준으로 정렬한 별 (예제 참고)을 출력하시오.

입력
첫째 줄에 N (1<=N<=100)이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 별을 출력한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package Code_201608;

import java.util.Scanner;

public class PrintForStarFour {

    @SuppressWarnings("resource")
    public static void main(String[] args) {
  
        Scanner scan = new Scanner(System.in);
  
        //int a = 5;
        int a = scan.nextInt();
  
        for(int i = 1; i <= a; i++) { //세로
   
            for(int j = 1; j <= i - 1; j++) { //가로, 공백을 우선 출력
                System.out.print(" ");
                //System.out.print("@");
            }
            for(int k = a; k >= i; k--) { //가로, 공백 제외한 공간을 * 로 출력
                System.out.print("*");
            }
            System.out.println("");
        }
    }

}//





이 문제 역시 고민을 좀 했는데.. 별 출력 4문제중에 제일 고민을 오래 했다.. ㅎㅎㅎㅎ.. 이놈의 실력이;;;


여기서도 역시나 난 공백을 어떻게 찍어야되지부터 고민의 첫 출발선이었다.. 우선 좌측에 공백을 찍는데 5 to 1 을 우측정렬을 해야되니까 좌측 공백은 0 to 4 가 되어야 한다.. 그러다보니 첫 for 는 1 부터 시작을 해서 세로 i 에 대해서 - 1 이 되어야 했다..

또한, 공백을 생각해서 찍어뒀으니 이제는 나머지 우측이 고민이었다.. 우측은 입력값에 대해서 역으로 줄여가면 되니 우선 첫 시작점은 a 였고, 그 다음은 세로 i 보다 크거나 같을 때까지 줄여나가면 출력이 정상적으로 됬다..

지금이야 물론 위와 같이 설명이 가능하지만 고민을 하면서 코딩을 할 때는 최종 제출하기전까지 많이 틀렸다.. 내가 스타일상 고민을 해서 한방에 짠!!! 하고 코딩하는 스타일이 아니어서 출력을 해보고 수정을 하면서 그 안에서 패턴을 찾고, 정답을 찾아냈다..

한방에 답을 찾으면 좋겠지만, 무엇보다 이정도의 초급 문제는 그래야 되는것이 당연할 수도 있지만 답을 찾아가는 과정이 더 중요하고 나 스스로 고민을 해보는 것이 중요하다고 생각하면서.. 별들이여 안녕.. 



[JAVA] Baekjoon 첫째 줄에는 별 N개, 둘째 줄에는 별 N-1개, ..., N번째 줄에는 별 1개를 출력해 봅니다..

이젠 별을 반대로 출력할 순서다.. 1 to 5 였다면, 이제는 5 to 1 이란 소리징..

문제
첫째 줄에는 별 N개, 둘째 줄에는 별 N-1개, ..., N번째 줄에는 별 1개를 찍는 문제

입력
첫째 줄에 N (1<=N<=100)이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 별을 출력한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package Code_201608;

import java.util.Scanner;

public class PrintForStarThree {

    @SuppressWarnings("resource")
    public static void main(String[] args) {
  
        Scanner scan = new Scanner(System.in);
  
        //int a = 5;
        int a = scan.nextInt();
  
        for(int i = 1; i <= a; i++) { //세로
   
            for(int j = i; j <= a; j++) { //가로, 기준이 i 부터 a 까지 채워질 때 까지
                System.out.print("*");
            }
            System.out.println("");
        }
    }

}//





이번 문제에서도 난 역시나 손쉽게 딱!!! 구하지는 못하고 좀 고민을 했다.. 어떻게 하면 역순으로 하지..??


세로 i 에 대해서 가로 j 와 입력으로 들어올 a 에 대한 범위를 어떻게 정해주느냐가 핵심이었다.. 처음에는 무조건 순차적으로 1부터.. 1부터 이것만 생각하다보니 더 난관에 빠졌는데.. 여기서도 역시나 문제를 풀고보면, 너무 하나의 시점에 빠져서는 문제를 풀기가 쉽지 않다는 교훈을 얻게 된 나다..

[UFC] UFC 202 드디어 눈 앞에 성큼..

아마도 요새 리우 올림픽 시즌이라 그런지 UFC 뉴스를 항상 보는 공간에 대부분 올림픽 소식이다.. 그 와중에 UFC 202 에 대한 뉴스가 올라왔다.. 그래서 간략하게 포스팅 해본다..


위 이미지를 보면 이번 UFC 202 에 대한 대진이다.. 이번 이벤트의 최고 이슈는 맥그리거 vs 디아즈 의 2차전이다.. 물론 다른 경기도 재미난 매치가 존재하고, 무엇보다 우리나라 선수 임현규가 출전을 하기도 한다..

하지만, 누가 머래도 이슈는 메인 이벤트에 관심이 쏠릴 수 밖에 없다.. 나도 이날 일이 좀 있어서 본방사수를 할 수 있을지는 모르겠지만 엄청 기대가 되고 설레이고 있다..

무엇보다 맥그리거는 과거 1차전에서 급격히 체력이 떨어지면서 디아즈에게 서브미션 패배를 하였기에.. 더더욱 이번 경기에 벼루고 있는 중이다.. 특히 이번 경기를 이기면 1승 1패가 되기 때문에 3차전을 통해서 최종 승자를 가리자는 것이 맥그리거의 생각이다.. 물론 UFC 에서 그 제안을 수락할 때 얘기지만.. ㅋㅋ..

맥그리거의 훈련캠프 말대로라면 1차전 때와의 같은 실수를 없애기 위해서 무게를 천천히 올리면서 컨디션 조절에도 힘을 썼다고 하는데.. 과연 어떠한 모습으로 표출이 될런지.. 이번주 일요일[21일 오전 11시부터 SPOTV가 생중계]이 상당히 기대 된다..

[JAVA] Baekjoon 첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개 출력해 봅니다. (오른쪽 정렬)..

드디어 올것이 왔구나.. 이번 별출력 문제는 생각을 조금 더 해야된다.. 순차적으로 별을 늘려가면서 출력하는 것 뿐만 아니라 가장 기본이 되는 좌측 정렬이 아닌 우측 정렬을 해야되기 때문이다..

문제
첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제

하지만, 오른쪽을 기준으로 정렬한 별 (예제 참고)을 출력하시오.

입력
첫째 줄에 N (1<=N<=100)이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 별을 출력한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package Code_201608;

import java.util.Scanner;

public class PrintForStarTwo {

    @SuppressWarnings("resource")
    public static void main(String[] args) {
        // TODO Auto-generated method stub
  
        Scanner scan = new Scanner(System.in);
  
        //int a = 5;
        int a = scan.nextInt();
  
        for(int i = 1; i <= a; i++) { //세로
   
            for(int j = 1; j <= a - i; j++) { //가로, 공백을 우선 출력
                System.out.print(" "); //줄바꿈이 아니므로 공백을 출력
                //System.out.print("@");
            }
            for(int k = i; k > 0; k--) { //가로, 공백 제외한 공간을 * 로 출력
                System.out.print("*");
            }
            System.out.println("");
        }
    }

}//





결과를 보면 한 번 틀렸는데 처음 제출할 때 20 라인 주석으로 된 부분을 보면, 테스트를 위해서 @ 표시를 한 상태로 제출을 해서 오답이었다.. ㅎㅎㅎ.. 공백을 표시했어야 되는데 말이지.. ~_~..


우선 이문제는 접근을 어떻게 하느냐가 제일 중요한듯하다.. 좌측이 아닌 우측 정렬을 하려면 좌측에 공백을 줘야된다.. 그러려면 어떻게..?? 핵심적으로는 for 를 두 개를 써야되며, 크게는 세개를 써야된다.. 전체적인 for 하나, 공백 출력 for 하나, 실제 별 출력 for 하나 이렇게 말이다..

무엇보다 공백을 단순히 머리로 생각하지말고, 나처럼 @ 이나 기타 문자를 통해서 화면 좌측부분을 출력한 후 우측을 천천히 고민해보는것이 좋다고 생각한다.. 머리가 좋은 사람은 상관없겠지만, 나 같은 경우에는 눈에 보이지 않는 상태에서 코딩하는게 젤 어렵다.. ㅋㅋㅋ..

단순한 문제임에도 for 이다보니 조건 생각하는 곳에서 시간을 꽤나 잡아먹은 문제다.. 나중에 더 어려운 문제는 어뜨카지.. ㅠㅜ.. 다른 분들은 쉽게 쉽게 잘 해결하시리라 믿으며..

[JAVA] Baekjoon 첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개 출력해 봅니다..

계속해서 for 에 대한 문제들이다.. 그래도 별출력 문제가 끝나고나면, 또 다른 것들이 기다리고 있으니 더욱 힘내보자규..

문제
첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제

입력
첫째 줄에 N (1<=N<=100)이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 별을 출력한다.

for 이긴 하지만 이번 문제는 별출력 문제중에도 가장 초급 문제라고 할 수 있다.. for 돌면서 증가만 시키면서 라인에 출력만 하면 되기 때문이다..

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package Code_201608;

import java.util.Scanner;

public class PrintForStarOne {

    @SuppressWarnings("resource")
    public static void main(String[] args) {
        // TODO Auto-generated method stub
  
        Scanner scan = new Scanner(System.in);
  
        //int a = 5;
        int a = scan.nextInt();
  
        for(int i = 1; i <= a; i++) { //세로
   
            for(int j = 1; j <= i; j++) { //가로, i 를 a 로 하면 5개씩 출력
                System.out.print("*");
                //System.out.println("*"); //줄바꿔서 세로로 출력
            }
            System.out.println("");
        }
    }

}//




[JS] Handlebars에서 if문에 헬퍼함수 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

handlebars는 템플릿 언어인 Mustache를 확장한 템플릿 라이브러리이다. handlebars를 소개하는 글은 아니지만 처음 보는 사람들을 위해서 간단히 설명하자면 다음과 같이 템플릿을 정의한다.

1
2
3
4
5
6
7
8
9
Html

<script id="example-template" type="text/x-handlebars-template">
  <ul>
    {{#each members}}
      <li>{{name}}
    {{/each}}
  </ul>
</script>

<script> 태그를 사용해서 정의해야 하는 것은 아니고 그냥 템플릿 문자열이면 되기는 하지만 개인적으로는 관리하기도 편하고 작성도 편해서 <script> 태그를 이용하는 방법을 좋아한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
Html

<script type="text/javascript" src="/components/handlebars.js/handlebars.js"></script>
<script type="text/javascript">
  window.addEventListener('load', function(evt) {
    var m = {
      members: [
        {name: 'outsider'},
        {name: 'zziuni'},
        {name: 'danni'},
        {name: 'fallroot'},
        {name: 'boxer'},
        {name: 'aj'},
        {name: 'insane'},
        {name: 'j2p'}
      ]
    }
    var source = document.getElementById('example-template').innerHTML;
    var tmpl = Handlebars.compile(source);
    document.getElementById('wrap').innerHTML = tmpl(m)
  }, false);
</script>

앞에서 정의한 템플릿을 위와 같이 사용한다. <script> 태그로 정의한 템플릿을 가져와서 handlebars로 컴파일해서 템플릿으로 만들고 템플릿에 객체를 전달해서 HTML을 생성한다. 여기서는 wrap라는 <div>에 변환된 <li>를 넣도록 만들었다. 이제 <li>태그를 만들때 name이 모음으로 시작하는 경우에는 다른 스타일을 주기 위해서 if 문을 사용한다고 해보자.

1
2
3
4
5
6
7
8
9
Html

{{#each members}}
  {{#if @index % 2 == 0}}
    <li class="vowel">{{name}}</li>
  {{else}}
    <li class="consonant">{{name}}</li>
  {{/if}}
{{/each}}

템플릿을 위와 같이 작성하기 쉽지만 handlebars는 저런식의 if문을 제공하지 않는다. if자제가 헬퍼메서드로 등록되어 있는데 if 헬퍼함수에 전달한 값을 true/false 여부만 판단할 뿐이고 일반적인 자바스크립트처럼 저런식의 표현식은 제공하지 않는다. {{#if name}}과 같은 정도로만 사용할 수 있고 name을 가지고 true/false 여부만 판단한다.(name은 값이 존재하므로 저렇게 사용하면 여기서는 항상 true이다.)

하지만 당연히 간단한 if문 외에 로직이 필요한 if문이 필요하게 마련인데 이는 직접 헬퍼함수를 등록해서 해결할 수 있다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
JavaScript

Handlebars.registerHelper('isVowel', function(options) {
  var regexp = /^[aeiou]/;
  if (regexp.test(this.name)) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

헬퍼함수는 Handlebars.registerHelper()를 사용해서 등록할 수 있고 첫 인자가 헬퍼함수의 이름이고 두번째 함수가 헬퍼함수이다. 헬퍼함수는 기본적으로 options라는 객체를 인자로 받는데 이는 자동으로 전달되는 인자이다. 즉 options만 받도록 작성했다는 것은 전달하는 인자가 없다는 것으로 인자가 있다면 자동으로 앞에 붙는다. 즉 인자가 1개 있으면 function(arg1, options) {} 처럼 작성해야 한다. 여기서는 isVowel이라는 헬퍼함수를 if문처럼 사용할 것이므로 원하는 조건(여기서는 이름이 문자로 시작하면)이 true이면 options.fn(this)를 반환해서 if 구문의 내용을 사용하고 false이면 options.inverse(this)를 반환해서 else 구문을 사용하도록 작성했다. handlebars에서는 대부분 그런데 this에 현재 컨텍스트의 값이 들어간다.(여기서는 each문으로 돌아가는 members의 값들..)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
Html

<ul>
  {{#each members}}
    {{#isVowel}}
      <li class="vowel">{{name}}</li>
    {{else}}
      <li class="consonant">{{name}}</li>
    {{/isVowel}}
  {{/each}}
</ul>

템플릿은 위와 같이 작성한다. if문대신에 isVowel 헬퍼함수를 사용했다.({{/isVowel}}로 닫아준 것에 주의!!) else문은 그대로 사용하고 이렇게 사용하면 원하는 조건으로 if문을 사용할 수 있다. 물론 헬퍼함수에 파라미터가 필요하다면 전달해주면 된다.