• 문제 : https://www.acmicpc.net/problem/17609
  • 분류 : 투포인터 
  • 시간초과를 해결하기 위해 check가 2 이상인 경우는 바로 2를 리턴해준다. 이미 회문, 유사회문이 아닌 것으로 판정났으니 더이상 재귀함수를 호출하지 않도록.
  • 풀이방법 : 투포인터로 문자열의 맨앞부터 시작, 문자열의 맨뒤부터 시작해서 서로 비교한다. 만약 서로 다른 구간이 발생하면 그 앞뒤로 비교하도록 하고, 만약 앞뒤로 비교했을 때 회문으로 충족된다면 유사회문으로 볼 수 있다.
package boj.string;

import java.io.BufferedReader;
import java.io.InputStreamReader;

/**
 * @문제명 회문
 * @분류 투포인터, 문자열
 */
public class BOJ17609 {
    public static void main(String[] args) throws Exception {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        int n = Integer.parseInt(br.readLine());

        String[] arr = new String[n];
        for (int i = 0; i < n; i++) {
            arr[i] = br.readLine();
        }

        for (int i = 0; i < n; i++) {
            String current = arr[i];
            System.out.println(palindrome(0, current.length() - 1, current, 0));
        }
    }

    private static int palindrome(int s, int e, String s1, int check) {
        // 시간초과를 해결하기 위해 아래 조건을 추가함
        if(check >=2) return 2;

        while (s < e) {
            if (s1.charAt(s) == s1.charAt(e)) {
                s++;
                e--;
            } else {
                return Math.min(palindrome(s + 1, e, s1, check + 1), palindrome(s, e - 1, s1, check + 1));
            }
        }
        return check;
    }
}

<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>분류 : 완전탐색, 재귀</li>
<li>풀이</li>
</ul>
<p>

</p>
<pre id="code_1682592342876" class="java" data-ke-language="java" data-ke-type="codeblock"><code>import java.util.Arrays;
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int n = sc.nextInt();
        int count = sc.nextInt();
        sc.nextLine();
        int[] k = new int[count];
        for (int i = 0; i &lt; count; i++) {
            k[i] = sc.nextInt();
        }

        Arrays.sort(k);

        int result = find_max(n, k, 0);
        System.out.println(result);

    }

    private static int find_max(int n, int[] k, int currentMax) {
        if(currentMax &gt; n) return 0;
        int max = currentMax;
        for (int i = k.length - 1; i &gt;= 0; i--) {
            int tmp = currentMax * 10 + k[i];
            max = Math.max(max, find_max(n, k, tmp));
        }
        return max;
    }
}</code></pre>

https://www.acmicpc.net/problem/3085

 

3085번: 사탕 게임

예제 3의 경우 4번 행의 Y와 C를 바꾸면 사탕 네 개를 먹을 수 있다.

www.acmicpc.net

  • 분류 : 완전탐색

 

 

처음에 풀고나서 다른 사람들 풀이를 보고 기존에 제출했던 내 코드를 많이 뜯어고쳤다.

아래는 내가 처음 제출한 코드이다.

 

첫번째 풀이

  • 반복문을 돌면서 swap()메서드로 인접한 사탕 위치(상하좌우)를 서로 바꿔서 clone된(swap된 배열) 배열을 리턴해준다. 그리고 그 swap된 배열을 countMaxCandyCount() 메서드로 행과 열을 체크하여 각 행과 열에 최대 사탕 개수를 찾는다.
import java.util.Scanner;

public class BOJ3085 {
    static char[][] arr;
    static int n;

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        n = sc.nextInt(); //  (3 ≤ N ≤ 50)
        sc.nextLine();
        arr = new char[n][n];
        for (int i = 0; i < n; i++) {
            String s = sc.nextLine();
            for (int j = 0; j < s.length(); j++) {
                arr[i][j] = s.charAt(j);
            }
        }
        findMax();
    }

    static private void findMax() {
        int max = 0;
        for (int i = 0; i < n; i++) {
            for (int j = 0; j < n; j++) {
                //인접한 사탕 swap
                max = Math.max(countMaxCandyCount(swap(i, j, i, j - 1)), max);
                max = Math.max(countMaxCandyCount(swap(i, j, i, j + 1)), max);
                max = Math.max(countMaxCandyCount(swap(i, j, i + 1, j)), max);
                max = Math.max(countMaxCandyCount(swap(i, j, i - 1, j)), max);

            }
        }
        System.out.println(max);
    }

    static int countMaxCandyCount(char[][] clone) {
        if (clone == null) return -1;
        int max = 0;
        // row 체크
        for (int i = 0; i < n; i++) {
            int count = 1;
            for (int j = 0; j < n - 1; j++) {
                if (clone[i][j] == clone[i][j + 1]) count++;
                else count = 1;
                max = Math.max(max, count);
            }
        }

        // column 체크
        for (int i = 0; i < n; i++) {
            int count = 1;
            for (int j = 0; j < n-1; j++) {
                if (clone[j][i] == clone[j + 1][i]) count++;
                else count = 1;
                max = Math.max(max, count);
            }
        }
        return max;
    }

    static private char[][] swap(int i, int j, int a, int b) {
				//가장자리라서 상하좌우 위치가 유효하지 않은 경우
        if (a < 0 || a > n - 1 || b < 0 || b > n - 1) {
            return null;
        }
        // deep copy
        char[][] clone = new char[n][n];
        for(int x = 0; x<n; x++) {
            clone[x] = arr[x].clone();
        }

			  //swap 
        char tmp = clone[i][j];
        clone[i][j] = clone[a][b];
        clone[a][b] = tmp;

        return clone;
    }
}

 

수정한 코드

코드가 좀 지저분함을 스스로 느꼈다. 일단 굳이 swap한 배열을 clone해야하나? 싶기도 했고, 여러모로 리팩토링이 필요했다. 다른 사람들의 풀이를 참고해서 기존 코드를 아래와 같이 수정했다.

 

1. 상하좌우를 전체 다 swap하지 않고, 오른쪽과 아래쪽 값하고만 swap하도록 한다.

  • 중복되는 swap 횟수를 줄였다. 어차피 arr[i][j-1]가 오른쪽에 있는 arr[i][j]와 swap하는 것과 arr[i][j]가 왼쪽에 있는 arr[i][j-1]와 swap하는게 동일하기 때문이다. 

2. swap할 때 굳이 deep copy를 해서 배열을 리턴하기보다는, swap 후 다시 원상복구해서 돌려놓는다. 그러면 매개변수로 굳이 배열을 넘길 필요가 없다.

  • 위에서 언급했던 배열을 copy하는 부분을 제거했다. 배열을 복사하지 않고 swap후에 다시 되돌려놓으면(다시 swap해주면) 굳이 copy할 필요가 없기 때문이다.
import java.util.Scanner;

public class BOJ3085 {
    static char[][] arr;
    static int n;

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        n = sc.nextInt(); //  (3 ≤ N ≤ 50)
        sc.nextLine();
        arr = new char[n][n];
        for (int i = 0; i < n; i++) {
            String s = sc.nextLine();
            for (int j = 0; j < s.length(); j++) {
                arr[i][j] = s.charAt(j);
            }
        }
        findMax();
    }

    static private void findMax() {
        int max = 0;
        for (int i = 0; i < n; i++) {
            for (int j = 0; j < n - 1; j++) {
                // 인접한 사탕(오른쪽과 아래쪽) swap
                swap(i, j, i, j + 1);
                max = Math.max(findMaxCandyCount(), max);
                swap(i, j + 1, i, j); //swap했던걸 돌려놓음
            }
        }

        for (int i = 0; i < n - 1; i++) {
            for (int j = 0; j < n; j++) {
                swap(i, j, i + 1, j);
                max = Math.max(findMaxCandyCount(), max);
                swap(i + 1, j, i, j);
            }
        }
        System.out.println(max);
    }

    static int findMaxCandyCount() {
        int max = 0;
        for (int i = 0; i < n; i++) {
            // row 체크
            int count = 1;
            for (int j = 0; j < n - 1; j++) {
                if (arr[i][j] == arr[i][j + 1]) count++;
                else count = 1;
                max = Math.max(max, count);
            }

            // column 체크
            count = 1;
            for (int j = 0; j < n - 1; j++) {
                if (arr[j][i] == arr[j + 1][i]) count++;
                else count = 1;
                max = Math.max(max, count);
            }
        }
        return max;
    }

    static private void swap(int i, int j, int a, int b) {
        char tmp = arr[i][j];
        arr[i][j] = arr[a][b];
        arr[a][b] = tmp;
    }
}

 

- 분류: 그리디 알고리즘

- 문제 링크 : https://www.acmicpc.net/problem/1931

 

1931번: 회의실 배정

(1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다.

www.acmicpc.net


풀이

 

최대한 많은 회의를 진행할 수 있도록 회의실을 사용하기 위해선 가장 빨리 끝나는 회의순으로 정렬하면 된다. 그러면 가장 많은 수의 회의가 회의실을 이용할 수 있게 된다.

 

 

다른 경우들을 살펴보자.

만약 회의가 가장 빨리 시작하는 순으로 정렬할 경우, 아래와 같은 반례가 존재한다. 회의가 가장 빨리 시작하는 순으로 회의실을 이용할 수 있게 할 경우 1개의 회의만이 회의실을 사용할 수 있지만, 최대 사용 가능 수는 3이다.

회의시간이 짧은 순으로 정렬할 경우는 아래와 같은 반례가 존재한다. 짧은 순으로 회의실을 이용할 수 있게 하면 아래의 경우는 1개 회의만이 회의실을 사용할 수 있게 되는데, 최대 2개의 회의가 이용 가능하기 때문이다.

그래서 회의가 가장 빨리 끝나는 순으로 회의실을 이용할 수 있게 해주면, 최대 수를 구할 수 있다.

 

그런데 여기서도 주의할 점이 있다.

회의를 빨리 끝나는 회의순으로 정렬할 때, 회의가 끝나는 시간이 같을 경우 시작시간이 빠른 순으로 정렬하도록 한다. 아래 그림을 보자. 회의가 끝나는 시간순으로 정렬할 때 시작시간을 고려하지 않으면 3개 회의(빨간색으로 체크한 부분)만이 회의실을 이용할 수 있게 된다.

import java.util.*;

public class Main {
	public static void main(String[] args) {
    Scanner sc = new Scanner(System.in);
        int result = 0;
        
        int count = sc.nextInt(); sc.nextLine();
        int meeting[][] = new int[count][2];
        
        for(int i = 0; i<count; i++) {
            meeting[i][0] = sc.nextInt();
            meeting[i][1] = sc.nextInt();
        }
        
        
        // 끝나는 시간 순으로 정렬 (오름차순)
        Arrays.sort(meeting, (o1, o2) -> {
			// 끝나는 시간이 같으면 시작시간이 빠른 순으로 정렬
            if(o1[1] == o2[1]) {
                return Integer.compare(o1[0], o2[0]);
            } else {
                return Integer.compare(o1[1], o2[1]);
            } 
        });
        
        
        int endTime = meeting[0][1]; // 가장 빨리 끝나는 시간
        result++;
        
        for(int i =  1; i<count; i++) {
            if(meeting[i][0] >= endTime ) {
                endTime = meeting[i][1];
                result++;
            } else {
                continue;
            }
        }
        
        System.out.println(result);
	}
}

[java] 2차원 배열 정렬하기

- Arrays.sort()


// 2차원 배열 정렬하기
public static void main(String[] args) {
//
  int[][] arr = {{1, 2}, {2, 3}, {3, 5}, {3, 4}};

  Arrays.sort(arr, (x, y) -> {
  if (x[0] == y[0]) { // 0번째가 같으면
  return x[1] - y[1]; // 1번째를 기준으로 오름차순
  }
  return x[0] - y[0]; // 0번째를 기준으로 오름차순
  });

  for (int i = 0; i < arr.length; i++) {
  System.out.println(arr[i][0] + " , " + arr[i][1]);
}

}

실행결과

 

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - +자바스크립트 - html과 css를 가볍게 알아보자!

 

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

2019/11/19 - [JavaScript/초보자를 위한 자바스크립트] - 4. 자바스크립트 - 배열(Array)와 반복문(loop)


함수(Fuction)란?

이번 시간에는 자바스크립트(JavaScript)에서 '함수'에 대해 배워보도록 하겠습니다.

함수는 하나의 로직을 재실행할 수 있도록 하는 것입니다. 이러한 함수를 이용해서 반복되는 동일한 작업을 필요할 때마다 불러와서 사용할 수 있습니다. 이러한 것을 '코드 재사용'이라고 하기도 합니다. 한번 만들어둔 함수를 계속해서 불러와서 다시 사용할 수 있기 때문이죠.

 

함수는 1. 함수를 선언하기 2. 함수를 호출하기  [각주:1]이 두가지로 이루어집니다. 함수 선언 = 함수를 만든다고 볼 수 있고, 함수 호출 = 만들어둔 함수를 사용한다 라고 할 수 있습니다.

 

1. 함수 선언하기

function functionName( argument1, argument2, ...) {
	//do something
    }

2. 함수 호출하기

functionName( value1, value2, ...);

함수 예제 살펴보기

1. 덧셈 함수

function add(x, y) {
  document.write(x+y); //document.write는 화면에 x+y결과를 표시해준다.
}

add(2, 3);
add(2, 7);

위를 보면 x와 y라는 두 개의 인수(argument)값을 받아 더해주는 add라는 이름의 함수를 선언했습니다.

그리고 add(2,3); 이런식으로 더해줄 두 값을 넣어주면 add함수를 통해 더한 결과를 확인할 수 있습니다.

 

2. 1부터 n까지 더한 값을 구해주는 함수

function sum(x) {
  var result = 0;
  for(var i = 0; i<=x; i++){
    result += i; //result = i + result와 같다.
  }
  document.write(result);
}

sum(10);

지난 시간에 배운 반복문을 이용하여 이런 식의 함수를 만들어볼 수도 있습니다.

한개의 값(x)을 받아서 1부터 해당 값까지 모두 더한 값을 출력하는 함수입니다.

10을 입력받으면 1부터 10까지 더한 값을 출력해주는 것입니다.


버튼 클릭 이벤트(Button Click Event)

 

자바스크립트에서 함수는 '버튼 클릭 이벤트를 발생'시킬 때도 자주 사용합니다.

예를 들어 사용자가 버튼을 클릭했을 때 "안녕?"이라는 alert창을 띄우고 싶다고 합시다. 이때 버튼을 누르는 사용자의  행위(action)를 이벤트(event)라고 합니다.  그리고 이 이벤트에 맞춰서 발생할 동작을 함수로 구현할 수 있습니다.

 

 

*이벤트(event) : 이벤트(event)는 사용자의 행위(action)를 의미합니다. 즉 사용자가 버튼을 누르거나 브라우저를 닫거나 하는 것들을 이벤트라고 볼 수 있습니다. 위의 예시에서는 버튼을 클릭하는 행위를 이벤트로 볼 수 있습니다.

 

*이벤트 타입(event type) : 이벤트의 종류를 의미합니다. 예를 들어 버튼을 클릭하는 이벤트라고 하면 click이 그 이벤트 타입입니다. 이밖에도 다양한 종류의 이벤트 타입이 존재합니다. [각주:2]

 

*이벤트 타겟(event target): 이벤트가 일어날 객체[각주:3]를 의미합니다. 예를 들어서 id가 A라는 버튼을 클릭했을 때 이벤트가 발생하도록 하고 싶은 거라면 A라는 버튼이 타겟이 되는 것입니다.

 

*이벤트 핸들러(event handler) = 이벤트 리스너(event listener) : 이벤트가 발생했을 때 동작하는 코드를 의미합니다. [각주:4]

 

 

1. 사용자가 버튼을 클릭했을 때 "안녕?"이라는 alert창을 띄우는 예제

  <button id = "btn1">버튼</button>

버튼생성과 같은 content나 구조에 대한 것은 html로 작업합니다.

codesandbox를 켜서 html파일에 위와 같이 적어주면 웹페이지에 버튼이 생성된 것을 확인할 수 있습니다.

document.getElementById("btn1").addEventListener('click',hello);

function hello(){
  alert("안녕?");
}

 버튼에 대해 '동작'하는 부분은 javascript가 담당합니다. 

 

 


2. 숫자 n을 입력받아 1부터 n까지 더한 결과를 출력하는 함수 만들기

 

이는 보다 심화된 예제입니다.

<input id="number" /> 
    <button id="btn1" onclick="addNum();">입력</button>
    <br />
    결과: <span id="output"></span>

먼저 html에는 숫자를 입력받을 창과 누르면 결과를 출력하도록 하는 버튼, 그리고 결과를 출력하는 부분 총 3가지가 필요합니다.

입력받는 것은 input태그[각주:5]를 이용하여 만들 수 있습니다. 그리고 버튼은 button태그를 이용하고, 결과를 띄워주기 위해 span태그를 이용해보도록 하겠습니다. (이때 div태그를 이용해도 괜찮습니다. 일단은 자세한 설명은 생략하고 사용하면서 어떤식으로 이용하는건지 익혀보도록 하겠습니다.) [각주:6]

document.getElementById("btn1").addEventListener("click", addNum);

function addNum() {
  var result = 0;
  var num = document.getElementById("number").value;
  for (var i = 1; i <= num; i++) {
    result += i; // result = result + i 와 같다.
  }

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

 javascript파일에는 버튼을 클릭하는 이벤트가 발생했을 때 실행될 부분을 적어주어야합니다.

 

<코드설명>

 

*getElementById() : id를 이용하여 특정한 값을 가진 요소를 가져옵니다.

위에 코드를 보면 html파일의 button태그에 btn1이라는 id값을 주었습니다. 만약 버튼(button)이 여러개이고, 이중에서 하나의 버튼에 대해서만 특정 함수가 작동하길 바란다면 그 특정 버튼에 id값을 주어 다른 버튼들과 구분할 수 있습니다.

 

*addEventListener(): 이벤트 리스너는 특정 이벤트가 발생했을 대 그 처리를 담당하는 함수를 가리킵니다. addEventListener는 특정 이벤트 발생시 특정 함수를 실행시킵니다.

document.getElementById("btn1").addEventListener("이벤트종류", 함수이름);

우리가 작성할 이벤트리스너는 사용자가 버튼을 클릭했을 때 발생하므로 이벤트 종류는 click이고, 함수이름은 저는 addNum으로 설정했습니다.

 

*document.getElementbyId("아이디").innerHTML : 해당 id를 가진 객체 영역에 html코드를 삽입하는 소스입니다.

 

<div id = "test">김커피</div>
document.getElementById("test").innerHTML = "김라떼로 개명!";

위와 같은 예제를 직접 작성해보면 innerHTML이 어떤식으로 쓰이는지 알 수 있을겁니다 :)

 

 

  1. https://www.codingfactory.net/10386 함수선언,호출 방식에 대한 보다 자세한 블로그 포스팅입니다. 자세히 알고 싶은 분들은 참고하세요. [본문으로]
  2. 다양한 이벤트 타입을 포스팅해둔 게시물 링크입니다. https://abc1211.tistory.com/201 [본문으로]
  3. JavaScript변수 안에는 다양한 형태의 값을 저장할 수 있습니다. 어떤 경우에는 서로 연관된 값들을 하나로 묶어 저장할 필요가 있습니다.객체는 이 때 등장하는 개념입니다.객체 란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 형식입니다. [본문으로]
  4. 이벤트 핸들러 종류 : https://jdh5202.tistory.com/15 이벤트리스너 설명: http://tcpschool.com/javascript/js_event_eventListenerRegister [본문으로]
  5. https://coding-factory.tistory.com/24 [본문으로]
  6. div태그와 span태그의 차이점: https://m.blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140160292268&proxyReferer=https%3A%2F%2Fwww.google.com%2F [본문으로]

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - +자바스크립트 - html과 css를 가볍게 알아보자!

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)


배열(Array)

 

이전에 '변수'에 대해서 배웠을 때 변수란 데이터를 저장하는 공간이라고 했습니다.

1
var name = '김커피'
cs

 

이런식으로 name이라는 변수에 '김커피'란 문자데이터를 저장했습니다.

그렇다면 name이라는 변수 안에 2개 이상의 데이터를 넣을 순 없을까요?

바로 하나의 변수에 여러개의 데이터를 담을 수 있는 것이 '배열'입니다.

1
var name = ['김커피''김라떼''김모카']
cs

배열은 이런식으로 대괄호[]를 이용하여 생성할 수 있습니다.

 

1
alert(name);
cs

 

이런식으로 alert를 이용해서 name에 있는 값을 출력해보면 

name변수 안에 든 모든 값들이 출력되는 것을 볼 수 있습니다. 

그렇다면 만약 이중에서 '김라떼'라는 데이터 하나만을 출력해보고 싶으면 어떻게 할까요?

1
alert(name[1]);
cs

이렇게 하면 '김라떼'라는 값만 출력될 겁니다. 한번 따라해보세요.

이처럼 배열은 '인덱스(index)'를 갖고 있어서 이 인덱스를 통해서 배열 안의 여러 데이터 값들 중 특정 값만을 꺼내올 수 있습니다. 이 인덱스는 1번이 아닌, 0번부터 시작을 해서 첫번째 데이터는 name[0] 이렇게 써서 꺼내올 수 있습니다.

인덱스 번호는 1번이 아닌 0번부터 시작한다는 점을 주의해주세요!

 

이러한 배열은 반복문과 결합하여 자주 사용됩니다. 왜냐구요?

위의  name 배열에 현재는 3개의 데이터값만 들어있지만, 만약 100개 혹은 1000개 이런식의 많은 데이터가 들어있다고 칩시다. 그러면 모든 데이터를 하나씩 출력한다고 했을 때 일일이 alert(name[0]); alert(name[1]); alert(name[2]); .....이런식으로 쳐서 출력해야할까요? 많은 데이터가 있을때 엄청 힘들고 노가다 작업이겠죠?

 

그러면 0번 인덱스부터 99번 인덱스까지 하나씩 출력해줘~ 라고 할 수 있으면 얼마나 편할까요?

이처럼 반복되는 노가다 작업을 줄여주고, 효율적으로 처리할 수 있게 하는 것이 바로 '반복문'입니다.

반복문은 이와 같은 반복되는 작업을 편리하게 처리해줍니다. 그럼 이러한 반복문에 대해 배워볼까요?

 


반복문(loop)

반복문은 반복되는 작업을 처리해주는 것으로 여러가지 반복문 문법이 있습니다. 사용하는 방식이 다르므로 상황에 따라 더 적합한 것을 선택하여 사용하시면 됩니다. 저희는 대표적인 반복문인 while문과 for문에 대해 배워보도록 하겠습니다.

 

while 반복문

while(조건) {
	반복되어 실행될 코드
    }

while반복문은 위와 같이 구성됩니다. 조건이 'true(참)'일 때 '반복되어 실행될 코드'가 실행됩니다.

그리고 조건이 false(거짓)이 되면 반복문을 종료합니다. 

 

alert를 통해 값을 하나씩 순차적으로 출력하고 싶을 때 어떻게 해야할까요?

1
2
3
4
5
6
7
8
9
10
11
12
13
 var name = [
    "김커피",
    "김라떼",
    "김모카",
    "김아메",
    "김뚜비"
  ];
 
  var i = 0;
  while (i < 5) {
    alert(i+"번 학생은"+name[i]+"입니다.");
    i = i + 1//i++나 i+=1 이라고 해도 된다.
  }
cs

while반복문을 이용하여 위와 같이 코드를 짤 수 있습니다. 

이제 위 코드를 통해 while반복문에 대해 이해해보도록 하겠습니다.

 

먼저 i 의 값은 0입니다. while문 안에 든 조건문은 i < 5 입니다. i 는 0보다 작으므로 i < 5 (i는 5보다 작다) 는 true입니다. 그러므로 while문 내부의 코드가 실행됩니다. alert를 통해 "0번 학생은 김커피입니다"를 출력하고, i의 값을 하나 증가시켜줍니다. 

i = i + 1; //i에 1을 더하겠다.
i++; //i의 값을 1 증가시키겠다.
i += 1; // i = i + 1 을 줄여서 쓴 것으로 같은 의미이다.

이때 i의 값이 1증가하는 것은 위와 같이 다양하게 표현될 수 있습니다. 주로 1의 값을 증가시키는 경우

i++ 을 많이 사용합니다. 만약 i의 값을 1 감소시키고 싶으면 i-- 이라고 쓸 수도 있습니다.1

 

반복문의 실행과정

이처럼 i 가 5가 되었을 때는 i<5라는 조건을 만족시키지 못하고 false를 반환하면서 조건이 '거짓(false)'이 되어 while문을 더이상 실행시키지 않고 반복문을 종료하는 것입니다.

이처럼 i=0이고 i<5라는 조건을 주어 while반복문을 실행하였을때 결과적으로 총 5번이 실행되어 배열에 있는 모든 값을 한번씩 출력하고 반복문을 안전히 종료할 수 있었습니다.

 

만약 반복문이 존재하지 않는다면, 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var name = [
    "김커피",
    "김라떼",
    "김모카",
    "김아메",
    "김뚜비"
  ];
 
 
alert("0번 학생은"+name[0+"입니다.");
alert("1번 학생은"+name[1+"입니다.");
alert("2번 학생은"+name[2+"입니다.");
alert("3번 학생은"+name[3+"입니다.");
alert("4번 학생은"+name[4+"입니다.");
  
cs
 

위와 같이 일일이 여러번 적어야하기 때문에 번거롭고, 코드 길이도 길어지게 되는 불편함이 있겠죠.


for반복문

1
2
3
for(초기화; 조건; 반복이 될때마다 실행되는 코드){
    반복해서 실행될 코드
    }
cs

for반복문은 위와 같이 씁니다.

아래 예시를 통해 살펴보도록 하겠습니다.

1
2
3
4
5
var fruit = ["딸기""사과""포도""수박""체리"];
 
  for (var i = 0; i < 5; i++) {
    alert(i + "번째 과일은" + fruit[i] + "입니다.");
  }
cs

위 코드의 3번째 줄을 보면 

i라는 변수의 값은 0으로 초기화하고, 조건은 i < 5 이고, 반복문이 한번 실행될때마다 i의 값을 1씩 증가시켜주겠다.

는 의미입니다. while문으로 바꿔서 써보면

 

1
2
3
4
5
6
7
var i = 0;
 
while(i<5){
 
i++;
 
}
cs

 

이 되겠습니다.


while문과 for문을 둘다 사용할 수 있는 경우도 있지만, 주로 while문은 정확히 몇번 반복해야할지 모를때 사용합니다. 그리고 for문은 정확하게 반복횟수를 지정할 수 있기 때문에 반복횟수를 알고 있을때 사용하는 편입니다.

 

이러한 반복문에서 주의할 점은 조건이 true일 경우엔 계속해서 반복한다는 것입니다. 그래서 반복문을 사용할때는 꼭 반복문을 빠져나올 수 있는 부분을 작성해야합니다. 앞서 진행한 예제를 보면 i값이 1씩 증가하도록 하여 일정 횟수 이후에는 조건문이 false를 반환하여 반복문을 종료할 수 있도록 하였습니다. 만약 이러한 부분이 작성되어있지 않으면 반복문은 종료하지 않고 계속해서 반복하여 프로그램은 종료되지 않고 무한루프에 빠지게 됩니다.

 

코드

-

퀴즈

1. 반복문을 사용하여 구구단을 출력해보세요.

(기존에는 alert를 이용하여 출력을 했으나 이번에는 console.log()를 이용해서 콘솔창에 출력을 하세요.)

콘솔창은 codesandbox에서 오른쪽 실행결과창 아래에 console이라고 적힌 부분을 클릭하면 볼 수 있습니다.

위와 같은 식으로 구구단이 콘솔창에 9단까지 출력되도록 하세요.

 

더보기

<힌트>

 

구구단은 1단부터 9단까지 입니다.

1단은 1에 1부터 9까지를 곱합니다. 그러므로 총 9번이 반복됩니다. (횟수가 정해져있으니 for문을 쓰는게 좋습니다) 2단 역시 2에 1부터 9까지를 곱합니다. 2단 역시 9번 반복됩니다.

이런식으로 9단까지하면 각 단마다 9번씩 곱셈을 하기 때문에 총 81번 반복하게 됩니다.

 

1. 앞서 곱셈은 * 연산자를 통해 한다고 배웠습니다.

2. 두 값을 곱해야하므로 2개의 변수가 필요합니다. 

3. 반복문 안에 반복문을 넣어서 쓸 수 있습니다. 이런 것을 '중첩반복문'이라고 합니다.

 

2. 아래 사진과 같이 콘솔창에 출력하도록 반복문을 작성해보세요.

*은 문자로 "*"로 쓰면 됩니다.

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - +자바스크립트 - html과 css를 가볍게 알아보자!

 


이번에는 지난 시간에 배웠던 html, css, 그리고 비교연산자와 조건문을 활용하여

"자바스크립트(JavaScript)로 자판기 만들기" 예시를 진행해보도록 하겠습니다.

이런 "실습예제" 포스팅은 어렵다고 느껴지시면 이후 개념진도를 다 나간 후에 몰아보셔도 좋습니다.

궁금한 점은 언제든지 댓글로 남겨주시면 답변드리겠습니다.


문제

 

*먼저 자판기는 아래와 같은 형식으로 구성이 될 것입니다.*

자판기 예시 이미지

1. 판매하는 제품 : 옥수수수염차(1000원) / 커피(700원) / 물 (500원)

2. 넣을 수 있는 동전과 지폐: 100원 / 500원 / 1000원

3. 현재 넣은 금액 표시하기 (돈 100원을 넣었으면 '현재 금액: 100원' 이라고 표시해야한다)

4. 돈을 넣었을때 구매할 수 있는 경우 구매가능한 제품명을 파란색으로 표시하고, 구매할 수 없는 경우 빨간색으로 표시한다.

5. 제품버튼을 눌러 구매했을 경우 해당 구매한 제품의 금액만큼 '현재 금액'이 줄어야한다. (옥수수수염차를 구매했을 경우 1000원이 줄어야한다)

 

좀더 자세히 설명

 

자세한 설명

실습코드

 

 

목차

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

 

 


지금까지 저희는 codesandbox에서 index.js 파일 [각주:1]만 이용해서 공부했습니다. 

지난 포스팅 내용

맨 첫 시간에 웹페이지는 html과 css, JavaScript 이 3가지로 구성되어있다고 했습니다. 그러나 지금까지 저희가 배운 건 오로지 자바스크립트고 html과 css에 대해서는 배우지 않았습니다. 이 3가지는 긴밀히 연결되어 웹페이지를 구성하므로 이번 시간엔 간단하게 html과 css에 대해서도 배워보도록 하겠습니다.

 

html

먼저 html이란 웹의 뼈대(구조)를 담당합니다. html은 한번쯤 본 적이 있을텐데요,

이런식으로 구성이 되어있습니다. 

<head>안에 들어가는 내용은 우리가 보는 웹페이지 화면에 직접적으로 보여지지는 않지만 웹브라우저가 알아야할 주요한 정보들이 들어있습니다. 그리고 <body>안에는 웹페이지 화면에 직접 출력되는 내용들이 들어있습니다.

 

이러한 <> 것들을 '태그'라고 부릅니다. 이러한 태그들의 종류는 다양합니다. [각주:2]

자주 쓰이는 것들 중 하나로 버튼 태그가 있습니다. <button></button>이런식으로 쓰면 버튼이 생성됩니다.

 

그럼 몇가지 정말 자주 쓰이는 기본적인 태그들을 직접 타이핑하면서 공부해볼까요?

평소처럼 codesandbox에 들어가서 vanilla sandbox를 생성해주시고, index.js에 들어가서 불필요한 부분을 삭제 후 index.html에 들어가서 아래와 같이 타이핑 해봅니다. 오른쪽에 있는 화면은 실제 웹브라우저에 출력되는 모습입니다.

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
30
31
32
33
34
35
<!DOCTYPE html>
<html>
  <head>
    <title>예시</title>
    <meta charset="UTF-8" />
  </head>
 
  <body>
    <div id="app"></div>
    <h1>제목입니다</h1>
    <h2>소제목입니다.</h2>
    <button>버튼</button>
    <ul>
      <li>목차1</li>
      <li>목차2</li>
      <li>목차3</li>
    </ul>
    <p>문단에 여러가지 내용들~</p>
    <p>
      문단에 여러가지 내용들~문단에 여러가지 내용들~문단에 여러가지
      내용들~문단에 여러가지 내용들~문단에 여러가지 내용들~문단에 여러가지
      내용들~문단에 여러가지 내용들~문단에 여러가지 내용들~
    </p>
 
    <!--주석입니다. 코드에 아무런 영향을 미치지 않고 코드에 대한 설명을 적을 수 있습니다.-->
 
    <a href="https://kim-coffee.tistory.com/">김커피 블로그주소</a>
    <br />
    <img
      style="width: 400px"
      src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681"
    />
    <script src="src/index.js"></script>
  </body>
</html>
cs

 

<주요 태그 설명>

<h1> 

제목. <h2>...<h6>까지 있다. 점점 폰트크기가 작아진다.
<button> 버튼
<ul> <li> 항목 나열
<p> 문단
<a> 링크 (href = "여기에 연결할 주소 넣으면 된다")
<br> 엔터키와 같은 역할을 한다. 한줄 띄기.
<img> 이미지 삽입 태그. (src = "여기에 이미지 주소를 넣으면 된다")

주요태그 설명을 한번 읽어보시고 직접 코드를 치면서 웹브라우저 화면에 어떻게 출력되는지를 살펴보세요. 하나하나 직접 타이핑해보는 편이 더 이해가 빠를 것 같습니다.

 


CSS

 

css는 웹페이지에서 디자인을 담당하는 부분입니다.  이런 css를 통해 폰트의 색상을 바꾸거나 가운데정렬을 하거나 하는 등 다양한 디자인적인 부분을 꾸밀 수 있습니다. css를 html에 적용하는 방법은 몇가지가 있습니다. 

 

1. html에 <style>태그를 삽입

html파일에 <style>태그를 삽입하여 <style></style>태그 내부에 css를 적어주면 html파일에 css를 통한 디자인이 적용됩니다. 

 

2. css파일에 작성

codesandbox에 보시면 style.css파일이 있습니다. 이 파일 내에 css코드를 적어주면 html파일에 css가 적용됩니다.

 

h1 {
  color: brown;
}

css코드는 이런식으로 생겼습니다. 우리가 위에 적은 html코드에 css를 적용해줄건데요. <h1>태그에 폰트컬러를 브라운컬러로 바꾸고 싶으면 위와 같이 적어주면 됩니다. red, blue 등등 다양한 색상을 쓸 수 있습니다. 

 

css구성

css는 이와같이 선택자(selector), 속성(property), 값(value)으로 구성되어있습니다.

 


CodeSandbox 코드

 

 

앞서 공부한 예시들을 적어놓은 codesandbox입니다. 실습을 하실 때 위 코드를 참고하셔서 자신의 코드가 맞게 쓰여졌는지, 에러가 발생한다면 어느 부분이 잘못되었는지 비교하면서 봐주세요.

모르는 점은 댓글로 질문을 남겨주시면 답변 드리겠습니다 :)

 

codesandbox의 share버튼 클릭했을 때 뜨는 창-editor url복사

본인의 codesandbox에서 에러가 발생했을 경우 codesandbox 오른쪽 상단에 있는 share버튼을 클릭하셔서 url을 복사해서 댓글로 남겨주시면 제가 코드를 직접 확인하고 답변을 달아드릴 수 있습니다.


*참고자료: 

http://www.homejjang.com/03/html_structure.php

http://egloos.zum.com/fundoodle/v/3131696

https://www.codingfactory.net/10187

  1. js가 JavaScript파일을 의미합니다 [본문으로]
  2. 다양한 html태그들이 정리되어있는 포스팅입니다. 참고하세요. http://egloos.zum.com/fundoodle/v/3131696 [본문으로]

+ Recent posts