디버그 모드란?

오류가 발생했을 때, 코드의 논리적인 순서 흐름을 파악할 수 있도록 코드를 한줄 한줄씩 실행해나가는 과정을 뜻한다.

디버그 모드를 사용하면 어디서 에러가 발생하는지를 좀 더 쉽게 알 수 있다.

디버그 모드 사용

디버그 모드를 사용하려면 먼저 브레이크 포인트를 걸어야 한다.

브레이크 포인트
코드가 처음부터 실행되다가 일시적으로 멈추게 되는 지점이다.

브레이크 포인트부터 사용자가 순차적으로 코드를 진행시키며 코드의 실행 흐름을 파악할 수 있다.

소스코드 좌측에, 라인번호 왼쪽에 파란색으로 칠해진 공간을 더블 클릭하면 브레이크 포인트를 지정할 수 있다.

브레이크 포인트가 걸리면 위 사진처럼 동그란 아이콘이 나타난다.

이 포인트가 디버그 시작점이다.

이후 디버그 모드(단축키 : F11)를 실행하면, 브레이크 포인트부터 코드를 분석할 수 있다.

브레이크 포인트를 해제하려면 동그란 아이콘을 다시 더블 클릭하면 된다.

이런 창이 나타나면 Yes를 눌러주면 된다.

디버그 모드가 실행되면 위와 같은 화면을 볼 수 있다.

우측 상단에 현재 변수가 생성된 목록과 해당 변수의 값이 무엇이 담겼는지 알 수 있다.

여기서 한줄씩 디버그를 진행하려면 F6이나 F5를 누르면 된다.

그러면 브레이크 포인트로부터 한 줄씩 내려가면서 코드가 실행된다.

몇 번 F6을 누른 후의 사진이다.

변수가 어떤 것이 있고, 변수에 무슨 값이 담겨있는지 확인할 수 있다.

소스 코드 수정하는 공간 위에 위와 같은 아이콘을 볼 수 있다.

1. 첫 번째 아이콘 : step into - 메소드를 포함한 라인을 만나면 메소드 안으로 진입 (단축키 F5)
2. 두 번째 아이콘 : step over - 다음 라인으로 이동, 메소드가 있어도 메소드 안으로 진입하지 않고 다음 라인으로 이동 (단축키 F6)
3. 세 번째 아이콘 : step Return - 현재 메소드에서 즉시 리턴 (단축키 F7)
4. 네 번째 아이콘 : 메소드를 처음부터 다시 실행

참고

• https://codedragon.tistory.com/6137
• https://all-record.tistory.com/150

문제설명

소스코드

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.StringTokenizer;

public class Main
{
	static StringBuilder sb = new StringBuilder();
	static Node root = new Node(null, null, null); //루트노드
	static class Node //노드 클래스
	{
		String value; //현재 노드의 값을 저장
		Node left; //왼쪽 자식 노드의 레퍼런스를 저장
		Node right; //오른쪽 자식 노드의 레퍼런스를 저장
		Node(String value, Node left, Node right)
		{
			this.left = left;
			this.right = right;
			this.value = value;
		}
	}
	
	static void insertNode(Node node, String value, String left, String right)
	{
        if(node == null) return; //재귀 종료조건, 리프 노드를 만나면 종료
        if(root.value == null) //루트노드 값이 null이라면
        {
        	root.value = value; //루트노드 값을 저장
        	 if(!left.equals(".")) root.left = new Node(left, null, null); //왼쪽 노드를 생성하고 가리킴
             if(!right.equals(".")) root.right = new Node(right, null, null); //오른쪽 노드를 생성하고 가리킴
        }
        else if(node.value.equals(value)) //삽입할 위치라면
        {
            if(!left.equals(".")) node.left = new Node(left, null, null); //왼쪽 노드를 생성하고 가리킴
            if(!right.equals(".")) node.right = new Node(right, null, null); //오른쪽 노드를 생성하고 가리킴
        } 
        else //삽입할 위치가 아니라면
        {
            insertNode(node.left, value, left, right); //왼쪽 자식노드로 이동(재귀)
            insertNode(node.right, value, left, right); //오른쪽 자식노드로 이동(재귀)
        }
    }
	
	public static void preOrder(Node node) //전위 순회
	{
		if(node == null) return; //재귀 종료조건, 리프 노드라면 종료
		sb.append(node.value); //현재 노드 방문(출력)
		preOrder(node.left); //왼쪽 노드로 이동(재귀)
		preOrder(node.right); //오른쪽 노드로 이동(재귀)
	}
	
	public static void inOrder(Node node) //중위 순회
	{
		if(node == null) return; //재귀 종료조건, 리프 노드라면 종료
		inOrder(node.left); //왼쪽 노드로 이동(재귀)
		sb.append(node.value); //현재 노드 방문(출력)
		inOrder(node.right); //오른쪽 노드로 이동(재귀)
	}
	
	public static void postOrder(Node node) //후위 순회
	{
		if(node == null) return; //재귀 종료조건, 리프 노드라면 종료
		postOrder(node.left); //왼쪽 노드로 이동(재귀)
		postOrder(node.right); //오른쪽 노드로 이동(재귀)
		sb.append(node.value); //현재 노드 방문(출력)
	}
	
	public static void main(String[] args) throws Exception
	{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		int N = Integer.parseInt(br.readLine());
		for(int i = 0; i < N; ++i)
		{
			StringTokenizer st = new StringTokenizer(br.readLine());
			String value = st.nextToken();
			String left = st.nextToken();
			String right = st.nextToken();
			insertNode(root, value, left, right); //노드 삽입, 루트 노드부터 삽입 위치를 재귀적으로 찾아감
		}
		preOrder(root); //전위 순회 메소드 호출
		sb.append("\n");
		inOrder(root); //중위 순회 메소드 호출
		sb.append("\n");
		postOrder(root); //후위 순회 메소드 호출
		sb.append("\n");
		System.out.print(sb.toString());
	}
}

설명

• 재귀를 이용한 방법
• 자세한 코드 설명은 주석 참고

문제설명

소스코드

DFS풀이(스택)

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.Stack;
import java.util.StringTokenizer;

public class Main
{
   static int N; //vertex
   static int M; //edge
   static int V; //첫 탐색
   static boolean visited[]; //방문 표시
   static int vertex[][]; //인접 행렬
   static int count = 0; //감염된 컴퓨터 수
   
   static void DFS(int V) //첫 탐색 위치를 매개변수로 받음
   {
	   Stack<Integer> stack = new Stack<>();
	   visited = new boolean[N + 1]; //(인덱스는 0부터 시작이므로 편의상 1추가)
	   stack.push(V);
	   while(!stack.empty()) //스택이 비어있지 않다면
	   {
		   int temp = stack.pop(); //스택에서 pop한 것을 임시로 저장
		   if(visited[temp] == true) continue; //이미 방문한 곳이라면 pass
		   else //방문한 곳이 아니라면
		   {
			   visited[temp] = true; //방문했다고 표시
			   ++count;
			   for(int j = 1; j < vertex[temp].length; ++j) //해당 행에 있는 모든 vertex를 검사
			   {
				   if(vertex[temp][j] == 1) stack.push(j); //두 노드가 간선으로 연결되어 있다면 스택에 push
			   }
		   }
	   }
	   System.out.println(--count); //1번 컴퓨터는 제외
   }
	public static void main(String[] args) throws Exception
	{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		N = Integer.parseInt(br.readLine()); //vertex 수(정점 수)
		M = Integer.parseInt(br.readLine()); //edge 수(간선 수)
		V = 1; //첫 탐색을 어디로 하는지 
		vertex = new int[N + 1][N + 1]; //인접 행렬 (인덱스는 0부터 시작이므로 편의상 1추가)
		for(int i = 1; i <= M; ++i) //간선의 수 만큼 입력을 받음
		{
			StringTokenizer st = new StringTokenizer(br.readLine());
			int row = Integer.parseInt(st.nextToken());
			int col = Integer.parseInt(st.nextToken());
			vertex[row][col] = 1; //무방향 그래프는 대칭 행렬이므로
			vertex[col][row] = 1; //무방향 그래프는 대칭 행렬이므로
		}
		DFS(V);
	}
}

BFS풀이(큐)

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.LinkedList;
import java.util.Queue;
import java.util.StringTokenizer;

public class Main
{
   static int N; //vertex
   static int M; //edge
   static int V; //첫 탐색
   static boolean visited[]; //방문 표시
   static int vertex[][]; //인접 행렬
   static int count = 0; //감염된 컴퓨터 수
   
   static void BFS(int V) //첫 탐색 위치를 매개변수로 받음
   {
	   Queue<Integer> queue = new LinkedList<>();
	   visited = new boolean[N + 1]; //(인덱스는 0부터 시작이므로 편의상 1추가)
	   queue.offer(V);
	   while(!queue.isEmpty()) //큐가 비어있지 않다면
	   {
		   int temp = queue.poll(); //큐에서 dequeue 한 것을 임시로 저장
		   if(visited[temp] == true) continue; //이미 방문한 곳이라면 pass
		   else //방문한 곳이 아니라면
		   {
			   ++count;
			   visited[temp] = true; //방문했다고 표시
			   for(int j = 1; j < vertex[temp].length; ++j) //해당 행에 있는 모든 vertex를 검사
			   {
				   if(vertex[temp][j] == 1) queue.offer(j); //두 노드가 간선으로 연결되어 있다면 큐에 enqueue
			   }
		   }
	   }
	   System.out.println(--count); //1번 컴퓨터는 제외
   }
	public static void main(String[] args) throws Exception
	{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		N = Integer.parseInt(br.readLine()); //vertex 수(정점 수)
		M = Integer.parseInt(br.readLine()); //edge 수(간선 수)
		V = 1; //첫 탐색을 어디로 하는지 
		vertex = new int[N + 1][N + 1]; //인접 행렬 (인덱스는 0부터 시작이므로 편의상 1추가)
		for(int i = 1; i <= M; ++i) //간선의 수 만큼 입력을 받음
		{
			StringTokenizer st = new StringTokenizer(br.readLine());
			int row = Integer.parseInt(st.nextToken());
			int col = Integer.parseInt(st.nextToken());
			vertex[row][col] = 1; //무방향 그래프는 대칭 행렬이므로
			vertex[col][row] = 1; //무방향 그래프는 대칭 행렬이므로
		}
		BFS(V);
	}
}

설명

• 주석 참고
• 아래의 문제에 사용했던 코드를 재사용했음

2023.11.17 - [백준] - [Java] 백준 1260번 문제 (DFS와 BFS)

문제설명

소스코드

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.LinkedList;
import java.util.Queue;
import java.util.Stack;
import java.util.StringTokenizer;

public class Main
{
   static int N; //vertex
   static int M; //edge
   static int V; //첫 탐색
   static boolean visited[]; //방문 표시
   static int vertex[][]; //인접 행렬
   static StringBuilder sb = new StringBuilder();
   
   static void DFS(int V) //첫 탐색 위치를 매개변수로 받음
   {
	   Stack<Integer> stack = new Stack<>();
	   visited = new boolean[N + 1]; //(인덱스는 0부터 시작이므로 편의상 1추가)
	   stack.push(V);
	   while(!stack.empty()) //스택이 비어있지 않다면
	   {
		   int temp = stack.pop(); //스택에서 pop한 것을 임시로 저장
		   if(visited[temp] == true) continue; //이미 방문한 곳이라면 pass
		   else //방문한 곳이 아니라면
		   {
			   sb.append(temp + " "); //출력
			   visited[temp] = true; //방문했다고 표시
			   for(int j = vertex[temp].length - 1; j > 0; --j) //해당 행에 있는 모든 vertex를 검사, vertex가 작은 수부터 방문해야하므로 역순으로 루프
			   {
				   if(vertex[temp][j] == 1) stack.push(j); //두 노드가 간선으로 연결되어 있다면 스택에 push
			   }
		   }
	   }
	   System.out.println(sb.toString());
   }
   
   static void BFS(int V) //첫 탐색 위치를 매개변수로 받음
   {
	   Queue<Integer> queue = new LinkedList<>();
	   visited = new boolean[N + 1]; //(인덱스는 0부터 시작이므로 편의상 1추가)
	   queue.offer(V);
	   while(!queue.isEmpty()) //큐가 비어있지 않다면
	   {
		   int temp = queue.poll(); //큐에서 dequeue 한 것을 임시로 저장
		   if(visited[temp] == true) continue; //이미 방문한 곳이라면 pass
		   else //방문한 곳이 아니라면
		   {
			   sb.append(temp + " "); //출력
			   visited[temp] = true; //방문했다고 표시
			   for(int j = 1; j < vertex[temp].length; ++j) //해당 행에 있는 모든 vertex를 검사
			   {
				   if(vertex[temp][j] == 1) queue.offer(j); //두 노드가 간선으로 연결되어 있다면 큐에 enqueue
			   }
		   }
	   }
	   System.out.println(sb.toString());
   }
	public static void main(String[] args) throws Exception
	{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		StringTokenizer st = new StringTokenizer(br.readLine());
		N = Integer.parseInt(st.nextToken()); //vertex 수(정점 수)
		M = Integer.parseInt(st.nextToken()); //edge 수(간선 수)
		V = Integer.parseInt(st.nextToken()); //첫 탐색을 어디로 하는지 
		vertex = new int[N + 1][N + 1]; //인접 행렬 (인덱스는 0부터 시작이므로 편의상 1추가)
		for(int i = 1; i <= M; ++i) //간선의 수 만큼 입력을 받음
		{
			st = new StringTokenizer(br.readLine());
			int row = Integer.parseInt(st.nextToken());
			int col = Integer.parseInt(st.nextToken());
			vertex[row][col] = 1; //무방향 그래프는 대칭 행렬이므로
			vertex[col][row] = 1; //무방향 그래프는 대칭 행렬이므로
		}
		DFS(V);
		sb = new StringBuilder(); //StringBuilder 초기화
		BFS(V);
	}
}

설명

• DFS는 스택(LIFO)으로 구현
• BFS는 큐(FIFO)로 구현
• 자세한 설명은 주석 참고

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

 태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 있는데, 이것이 바로 글로벌 속성이다

class 속성

class 속성은 요소에 클래스명을 지정할 때 사용한다.

클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있다.

<p class="red-color">...</p>

id 속성

id 속성은 요소에 아이디를 지정할 때 사용한다.

id는 CSS에서 아이디 선택자로 활용하며, 같은 HTML 문서 내에서 중복될 수 없다.

<h1 id="title">...</h1>

style 속성

style 속성은 CSS 코드를 인라인으로 작성할 때 사용한다.

<p style="">...</p>

title 속성

title 속성은 요소에 추가 정보를 넣을 때 사용하는데,  title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시된다.

<p><span title="World Wide Web Consortium">W3C</span>는 국제 웹 표준 개발 기구입니다.</p>

lang 속성

lang 속성은 요소에 사용한 텍스트의 언어 코드를 지정할 때 사용한다.

일반적으로 HTML 문서의 언어 코드는 html 태그의 lang 속성에 작성한다.

<html lang="ko">

이 코드처럼 작성하면 한국어로 기본 언어 코드가 설정된다.

그런데 한국어(ko)로 기본 설정된 문서에서 독일어가 나올 때 다음처럼 lang 속성으로 독일어 언어 코드(de)를 명시하면 웹 접근성을 높일 수 있다.

<p lang="de">Guten Morgen</p>

data 속성

data-* 속성은 사용자 커스텀 속성을 만든다.

태그에서 사용할 수 있는 속성은 HTML 문법에 정해져 있어서 정해진 속성이 아니면 사용할 수 없었다.

그러나 HTML5에서는 이러한 점이 개선되어 data-* 속성으로 사용자가 원하는 속성을 만들 수 있다.

HTML에는 data-name과 data-hero라는 속성이 존재하지 않지만, 아래 코드처럼 data-* 속성으로 새로 만들 수 있다.

<p data-name="spiderMan" data-hero="true">...</p>

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

시맨틱 태그란?

웹이 점차 발전하고 웹이 가진 정보의 가치가 높아지면서 사람이 아닌 기계도 쉽게 이해할 수 있도록 웹 페이지를 더욱 의미 있게 설계하는 일이 매우 중요해졌다.

이에 따라 새롭게 등장한 트렌드가 시맨틱 웹이다.

시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.

대표적으로 table, form, a 태그등은 시맨틱 태그에 속하고, div, span 태그등은 논 시맨틱 태그에 속한다.

table, form, a 태그는 HTML 문서의 구성 요소로는 적합할지 몰라도 전체 구조를 설계할만한 태그는 아니다.

그래서 웹 페이지의 구조를 설계하기 위한 목적으로 HTML 5에서 시맨틱 태그가 새롭게 추가됐다.

header 태그

header 태그는 웹 페이지에서 헤더 영역을 구분하는 데 사용한다.

헤더 영역은 웹 사이트의 최상단이나 좌측에 위치하고, 로고, 검색, 메뉴와 같은 요소들을 포함한다.

<header>
	헤더 구성 요소
</header>

nav 태그

nav(navigation) 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용

보통 링크 영역에는 아래 사진처럼 헤더 영역에서의 메뉴나 목차와 같은 요소가 많은데, 내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없고, 웹 사이트의 주요 탐색 링크 영역만 포함하면 된다.

<nav></nav>

section 태그

section 태그는 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용한다.

그래서 보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함한다.

아래 사진은 네이버에서 section 태그로 영역을 구분하면 좋을 만한 웹 페이지 구성 요소를 보여 준다.

한 페이지 안에서 ‘뉴스스탠드, 오늘 읽을만한 글’처럼 논리적으로 내용 영역을 구분할 때, section 태그를 사용하면 된다.

<section></section>

article 태그

article 태그는 웹 페이지에서 독립적인 영역을 구분할 때 사용한다.

article 태그를 section 태그와 혼동하기도 하는데, section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹 페이지에서든 독립적으로 사용될 수 있는 영역을 구분한다는 점에서 차이가 있다.

네이버에서는 아래 사진처럼 로그인 영역이 article 태그로 구분하면 좋은 영역입니다. 실제로 로그인 영역은 메인 페이지에서도 사용하지만, 전혀 다른 페이지인 블로그 페이지 등에서도 사용하기 때문.

<article></article>

aside 태그

aside 태그는 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article 태그나 section 태그로 영역을 구분할 수 없을 때 사용한다.

<aside></aside>

footer 태그

footer 태그는 웹 페이지에서 푸터 영역을 구분할 때 사용한다.

푸터 영역은 일반적으로 웹 페이지의 최하단에 있고, 저작권 정보, 연락처, 사이트 맵 등의 요소들을 포함한다.

<footer></footer>

main 태그

main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그이다. 

main 태그에는 문서에서 반복해서 등장하는 요소를 포함해선 안 된다.

그리고 main 태그를 article, aside, footer, header, nav 태그의 하위에 포함할 수도 없다.

그래서 사용하기가 조금 까다로운 태그이다.

<main></main>

추가적인 시맨틱 태그는 아래의 링크에서 확인할 수 있다.
https://developer.mozilla.org/ko/docs/Glossary/Semantics

문제설명

소스코드

import java.util.Scanner;
public class Main 
{
    public static void main(String[] args) throws Exception
    {
    	Scanner sc = new Scanner(System.in);
    	int arr[] = new int[10];
    	int sum = 0;
    	for(int i = 0; i < 10; ++i) arr[i] = sc.nextInt();
    	for(int i = 0; i < 10; ++i)
    	{
    		int temp = sum;
    		sum += arr[i];
    		if(sum > 100) 
    		{
    			if(Math.abs(100-temp) >= Math.abs(100-sum)) System.out.print(sum);
    			else System.out.print(temp);
    			System.exit(0);
    		}
    	}
    	System.out.print(sum);
    }
}

설명

• 루프를 돌 때마다 버섯의 점수를 더하기 전 누적합과 버섯의 점수를 더한 후 누적합을 저장한다.
  더하기 전 누적합은 temp에 임시로 저장한 후 sum에 추가적인 버섯의 점수를 더한 누적합을 구한다.
• 만약 sum이 100 초과라면
  |100-temp| 값과 |100-sum| 중 |100-temp|이 크거나 같다면 sum이 정답이다.
  반대로  |100-temp|이 작다면 temp가 정답이다.
• 루프가 종료된 이후까지 sum이 100 이하라면,  sum을 출력한다.

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

audio 태그

<audio src="Bourree - Joel Cummins.mp3" controls></audio>

src 속성에 오디오 파일의 위치(URL)를 넣어주면 된다.

controls 속성을 제거하면 오디오 컨트롤 패널이 보이지 않게 된다.

video 태그

<video src="sample.mp4" controls></video>

src 속성에 비디오 파일의 위치(URL)를 넣어주면 된다.

controls 속성을 제거하면 비디오 컨트롤 패널이 보이지 않게 된다.

source 태그

source 태그는 audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용한다.

source 태그는 멀티미디어 태그를 사용할 때 필수는 아니지만, 되도록 함께 사용하면 좋은 태그이다.

audio 태그와 video 태그는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 미디어 타입은 각각 다르다.

예를 들어 오디오에서, mp3 포맷은 모든 웹 브라우저에서 지원하지만 wav나 ogg 포맷은 지원하지 않는 웹 브라우저도 있다.

그런데 ogg 포맷을 우선 지원하고 어쩔 수 없는 경우에만  mp3 포맷을 지원해야 하는 경우에 source 태그를 사용한다.

<audio controls>
    <source src="sample.wav" type="audio/wav">
    <source src="sample.mp3" type="audio/mp3">
    지원하지 않는 브라우저입니다.
</audio>

먼저 작성한 source 태그의 파일부터 현재 웹 브라우저에서 해당 파일 포맷을 지원하는지 확인한다.

만약 웹 브라우저에서 지원하지 않는다면 그 다음에 작성된 source 태그를 확인했는데, 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 사용자에게 노출된다.

이러한 과정은 video 태그에서도 마찬가지이다.