Arrays.sort() vs Collections.sort()

자바에서 정렬을 할 때에는 크게 두 가지 방법이 있다.

• Arrays.sort()
• Collections.sort()

둘 다 정렬할 때 쓰이지만 적용 대상과 내부 동작에서 차이가 있다.

1. Arrays.sort()

• 대상 : 배열(array)
• 라이브러리 : java.util.Arrays

public static void main(String[] args) {
    int[] arry = {5, 3, 1, 4, 2};

    Arrays.sort(arry);    // 기본 오름차순 정렬
    System.out.println(Arrays.toString(arry));    // [1, 2, 3, 4, 5]
}

⇒ Arrays.sort()에서는 Comparator가 사용 불가능하다.

2. Collections.sort()

• 대상 : 리스트(List)
• 라이브러리 : java.util.Collections

public static void main(String[] args) {
    List<Integer> list = Arrays.asList(5, 3, 1, 4, 2);

    Collections.sort(list);
    System.out.println(list);    // [1, 2, 3, 4 ,5]

    Collections.sort(list, Comparator.reverseOrder());    // Comparator 내림차순 정렬
    System.out.println(Arrays.toString(list));    // [5, 4, 3, 2, 1]
}

정리

참고문서) [Java 기초] Arrays.sort() vs Collections.sort() 차이 정리

Comparable vs Comparator

자바에서 컬렉션을 정렬하는 방법에는 두 가지가 있다.

• Comparable 인터페이스에 compareTo 구현

• Comparator 인터페이스에 compare 구현

  
  

1. Comparable 인터페이스 - compareTo()

Comparable 인터페이스는 객체 자체에 기본적인 정렬 기준을 설정하는 인터페이스다. 해당 클래스가 Comparable<클래스명>을 implements하고, compareTo() 메서드를 Override하면 기본 정렬 기준을 정의할 수 있다.

public class Student implements Comparable<Student> {
    private int StudentNo;
    private String name;
    private String number;
    private int age;
    private String major;

    // 생성자 및 getter, setter

    @Override
    public int compareTo(Student o) {
        return this.getStudentNo() - o.getStudentNo();    // 학번 오름차순 정렬
    }
}

Comparable<>을 implements해야 하는 이유?

⇒ Integer, Double과 같은 자바가 기존에 Comparable을 구현해놓은 Wrapper 클래스가 아닌 사용자가 직접 생성한 클래스 객체는 컴퓨터가 어떤 멤버 변수를 기준으로 정렬할 지 모르기 때문에 사용자가 직접 Comparable 인터페이스를 implements해서 compareTo() 메서드에 클래스 정렬 기준을 명시해야 한다.

⇒ Collections.sort()의 내부 구조를 보면 인자로 받는 리스트의 요소들이 반드시 Comparable<>을 구현하고 있어야 한다고 정의되어 있다.

2. Comparator 인터페이스 - compare()

Comparator 인터페이스는 클래스에 정렬 기준을 고정시키지 않고 필요할 때마다 원하는 정렬 기준을 동적으로 적용할 수 있다. Comparator을 사용하면 다양한 방식으로 객체를 정렬할 수 있다.

public static void main(String[] args) {
    List<Student> list = new ArrayList<>();
    // 리스트 요소 추가(생략)

    Collections.sort(list, new Comparator<Student>() {
        @Override
        public int compare(Student o1, Student o2) {
              if(o1.getMajor().equals(o2.getMajor())    
                return o2.getAge() - o1.getAge();    // 나이 내림차순 정렬
              return o1.getMajor().compareTo(o2.getMajor());
        }
    }
}

클래스에서 Comparable<>의 compareTo()를 오버라이딩 했는데 main에서 Comparator<>의 compare()을 다시 오버라이딩한 경우

⇒ compareTo() 메서드는 클래스 내부에 그대로 유지되지만, Collections.sort()의 두 번째 인자에 Comparator을 넘기면, 자바는 compareTo()를 무시하고 인자로 넘겨받은 compare()의 규칙을 최우선으로 적용함

• Comparable<>의 compareTo() : 객체의 기본 정렬 기준 (하나만 설정 가능)

• Comparator<>의 compare() : 객체의 특별 정렬 기준

  
  
  

return 방식

• 숫자형(int) 비교 방식

@Override
public int compare(Student o1, Student o2) {
    return o1.getStudentNo() - getStudentNo();
}

@Override
public int compare(Student o1, Student o2) {
    return Integer.compare(o1.getStudentNo(), o2.getStudentNo());
}

⇒ o1.x - o2.x 방식을 사용하면 정수 오버플로우가 발생한 경우 다른 결과를 도출하기 때문에 Integer.compare() 방식이 안전하다

• 문자열(String 비교 방식)

@Override
public int compare(Student o1, Student o2) {
    return o1.getName().compareTo(o.getName());
}

⇒ 문자열은 숫자 타입이 아니기 때문에 빼기 연산(-)이 불가능하다. 따라서 문자열끼리 비교하기 위해서는 compareTo() 메서드를 사용하면 된다. (기존에 클래스에서 오버라이딩 했던 compareTo() 메서드와는 별개의 Stirng 비교 메서드이다.)

https://velog.io/@faulty337/Java%EC%9D%98-Collection-%EC%A0%95%EB%A0%AC-%EB%B0%A9%EB%B2%95

참고)

🚀 더 세련된 최신 방식 (Java 8+)

• 학번으로 정렬할 때

Collections.sort(list, Comparator.comparingInt(Student::getStudentNo));

• 이름으로 정렬할 때

Collections.sort(list, Comparator.comparing(Student::getName));

이 방식은 내부적으로 알아서 Integer.compare나 String.compareTo를 호출해주기 때문에 실수할 확률이 줄어든다

1. 상속의 문제 : Stack은 Vector 클래스를 상속받는데, 이 때문에 Stack의 LIFO 원칙에 맞지 않게 인덱스로 중간의 값을 수정하거나 삭제하는 것이 가능해짐.

2. 성능의 문제 : Stack은 모든 메서드에 synchronized되어 있어 멀티스레드 환경이 아닌 일반적인 싱글스레드 코딩테스트 환경에서는 성능이 느림

3. 공식 문서의 권고 : Java 공식 문서에서도 ‘Stack 구조가 필요하다면 Stack 클래스 대신 ArrayDeque를 사용하라’고 명시되어 있음

Stack / Queue / Deque 선언 방법

// stack
Deque<Integer> stack = new ArrayDeque();

// queue
Deque<Integer> queue = new ArrayDeque();
Queue<Integer> queue = new ArrayDeque();  // Queue의 기능을 강조하고 싶을 때 사용

// deque
Deque<Integer> deque = new ArrayDeque();

Stack / Queue / Deque 사용 방법

stack.push();    // 데이터 삽입
stack.pop();     // Last 데이터 추출
stack.peek();    // Last 데이터 확인

queue.offer();   // 데이터 삽입
queue.poll();    // First 데이터 추출
queue.peek();    // First 데이터 확인

** 참고 : ArrayDeque에서 push()는 내부적으로 addFirst()를 호출하고, pop()은 removeFirst()를 호출함(Stack). offer()은 addLast()를 호출하고, poll()은 removeFirst()를 호출함.

TreeSet이란?

• Set의 성질을 그대로 상속받는 Tree 데이텉
• 이진 탐색 트리(Binary Search Tree)의 구조로 이루어져 있음
• 이진 탐색 트리 형태로 데이터를 저장하기에 nature ordering을 지원함
• 생성자 매개변수로 Comparator 객체를 입력해 정렬 방법을 임의로 지정 가능함

** 이진 탐색 트리(Binary Search Tree)

• 데이터 정렬, 검색에 높은 성능을 보이는 자료구조
• 데이터 추가, 삭제에는 시간이 소요됨

• TreeSet은 이진 탐색 트리 중에서도 성능을 향상시킨 레드-블랙 트리로 구현됨 ⇒ 레드 블랙 트리 : 부모 노드보다 작은 값을 가지는 왼쪽 자식으로, 큰 값을 가지는 노드는 오른쪽 자식으로 배치하여 데이터 추가, 삭제 시 트리가 한 쪽으로 치우쳐지지 않도록 균형을 맞춤

TreeSet 생성

import java.util.TreeSet;

TreeSet<Integer> tset = new TreeSet<>();

TreeSet 메서드

// 요소 값 추가
tset.add(5);
tset.add(3);
tset.add(9);
tset.add(7);

System.out.println(tset);    // [3, 5, 7, 9]

// 요소 값 삭제
tset.remove(5);
System.out.println(tset);    // [3, 7, 9]

// tree set의 크기
tset.size();

// tree set의 최소값
tset.first();

// tree set의 최대값
tset.last();

TreeSet의 내림차순 정렬 : Comparator 객체를 이용해 정렬 방법 설정

TreeSet<Integer> tset = new TreeSet<>(Comparator.reverseOrder());

tset.add(5);
tset.add(3);
tset.add(9);

System.out.println(tset);    // [9, 5, 3]

TreeMap

TreeMap이란?

• TreeSet과 동일하게 이진 탐색 트리 형태로 데이터 저장
• Map 특성을 사용하기 때문에 key와 value로 이루어진 entry 객체 형태로 저장
• key를 추가하면 정렬됨

TreeMap 생성

import java.util.TreeMap;

TreeMap<Integer, String> tmap = new TreeMap<>();

TreeMap 메서드

// 요소 값 추가
tmap.put(1, "부산");
tmap.put(2, "인천");
tmap.put(3, "대구");
tmap.put(4, "대전");
tmap.put(5, "광주");

System.out.println(tmap);    // {1=부산, 2=인천, 3=대구, 4=대전, 5=광주, 6=울산}

// 요소 값 삭제
tmap.remove(1);

// tree set 크기
tmap.size();

// 요소 값 찾기
tmap.get(1);    // 부산

// key 값만 추출(중복X)
tmap.keySet();

HashMap이란?

• key와 value로 구성되어 있는 순서쌍
• key는 중복을 허용하지 않고, value는 중복을 허용함
• 요소의 저장 순서가 없음

HashMap의 생성

HashMap<String, String> map = new HashMap<>();

HashMap 메서드

// key & value 추가
map.put("people", "사람");
map.put("baseball", "야구");

// key에 대한 value 값 추출
map.get("people");    // 사람

// key 값에 해당되는 아이템(key, value) 삭제
map.remove("people");    // 사람

// map의 크기
map.size()

// key 값만 추출(중복x) : Set<key 자료형> 반환
map.keySet();

// value 값만 추출(중복o) : Collection<value 자료형> 반환
map.values();

// key값/value값이 존재하는지 여부
map.containsKey("people");    // false
map.containsValue("야구");    // true

HashMap의 정렬

• HashMap을 다루다 보면 HashMap을 특정 기준에 맞춰 정렬해야 할 경우가 있다. HashMap은 동시에 두 개의 데이터를 다루기 때문에 정렬 방식이 다양하고 복잡하기 때문에 자세히 공부할 필요가 있다.

① Key 값을 기준으로 정렬

• HashMap의 keySet 메서드를 이용하여 List 컬렉션에 담음
• 오름차순 시 Collection.sort(), 내림차순 시 Collection.reverse() 사용

HashMap<String, Integer> map = new HashMap<>();

map.put("A", 10);
map.put("B", 20);
map.put("C", 30);
map.put("D", 40);

List<String> keySet = new ArrayList<>(map.keySet());

// key 값으로 오름차순 정렬
Collection.sort(keySet);        // A B C D
// key 값으로 내림차순 정렬
Collections.reverse(keyset);    // D C B A

② Value 값을 기준으로 정렬

• HashMap의 keySet 메서드를 이용하여 List 컬렉션에 담음
• comparator을 사용하여 정렬
• comparator은 람다 표현식으로 간단하게 표현할 수 있음

HashMap<String, Integer> map = new HashMap<>();

map.put("A", 10);
map.put("B", 20);
map.put("C", 30);
map.put("D", 40);

List<String> keySet = new ArrayList<>(map.keySet());

// value 값으로 오름차순 정렬
keySet.sort(new Comparator<String>() {

    @Override
    public int compare(String o1, String o2) {
        return map.get(o1).compareTo(map.get(o2));
    }
});

// value 값으로 내림차순 정렬
keySet.sort((o1, o2) -> {map.get(o2).compareTo(map.get(o2))};

주의) compareTo의 앞 뒤 파라미터에는 참조형 변수만 접근 가능

HashSet

HashSet이란?

• Set의 성질을 그대로 상속받는 Hash 데이터
• 자료의 순서가 없음
• 중복 값이 허용되지 않음
• null 값을 허용

HashSet의 생성

HashSet<String> set = new HashSet<>();

HashSet 메서드

// 요소 값 추가
set.add("tiger");

// 요소 값 삭제
set.remove("tiger");

// set의 크기
set.size();

// 요소 값 검색
set.contains("lion");    // false

• HashSet의 add 메서드 : 추가하는 요소가 내부에 존재하지 않는다면 값을 추가하고 true 반환 내부에 존재한다면 false 반환
• HashSet의 remove 메서드 : 추가하는 요소가 내부에 존재한다면 값을 삭제하고 true 반환 내부에 존재하지 않는다면 false 반환

특징

• 배열의 크기(길이)는 변경할 수 없음. ⇒ 정적 할당(static allocation), 불변(immutable)
• 데이터가 메모리에 연속적으로 나열되어 있기 때문에 인덱스를 통한 접근 속도가 빠름
• 인덱스를 통해 데이터를 삭제하더라도 해당 위치는 빈 공간으로 계속 남음

배열의 선언

int[] points = new int[3];
int[] points2 = new int[] {1, 3, 5};
int[] points3 = {1, 3, 5}

배열의 순회

• for문

for(int i = 0; i < intArry.length; i++) {
    int x = intArray[i];
    System.out.println(x);
}

• for-Each문

for(int x : intArray) {
    System.out.println(x);
}

배열의 API 활용 : Arrays

• 배열 정렬

int[] arry = {10, 5, 8, 20, 3};
Arrays.sort(arry);    // {3, 5, 8, 10, 20}

• 배열의 최댓값

int[] arry = {10, 5, 8, 20, 3};
int max = Arrays.stream(arry).max().getAsInt();    // 20

• 배열의 최솟값

int[] arry = {10, 5, 8, 20, 3};
int max = Arrays.stream(arry).min().getAsInt();    // 3

• 배열의 복사

int[] arry = {10, 5, 8, 20, 3};
int[] copy = Arrays.copyOf(arry, arry.length);    // 배열 그대로 복사
int[] copyExtends = Arrays.copyOf(arry, 5);       // 배열 크기를 늘려서 복사

⇒ 원본 배열은 변경되지 않고 새로운 배열 객체를 생성 ⇒ 배열 크기를 늘린 경우 기본형 배열은 0, 객체 배열은 null로 채워짐

** Arrays.copyOf()와 System.arraycopy()

• System.arraycopy(원본배열, 원본 배열 복사 시작 인덱스, 새배열, 새배열의 복사 시작 인덱스, 복사할 요소 개수)
• Arrays.copyOf(원본배열, 원본 배열에서 복사해올 길이)

⇒ Arrays.copyOf는 System.arraycopy를 래핑한 함수임. 즉, 동일한 기능을 함. 하지만, Arrays.copyOf가 조금 더 직관적이라 더 많이 사용됨

다차원 배열 순회/탐색

다차원(특히 2차원) 배열에서 상하좌우의 값을 탐색하는 경우 delta 배열을 이용하여 탐색하면 효율적임

• 좌/우 탐색 delta = {(0, -1), (0, 1)}
• 상/하 탐색 delta = {(-1, 0), (1, 0)}
• 4방 탐색 delta = {(-1, 0), (0, -1), (0, 1), (1, 0)}
• 8방 탐색 delta = {(-1, -1), (-1, 0), (1, 0), (0, -1), (0, 1), (1, -1), (1, 0), (1, 1)}

Collection : ArrayList

특징

• 리스트의 길이는 가변적임 ⇒ 동적 할당(dynamic allocation), 가변(mutable)
• 데이터가 메모리에 연속적으로 나열되어 있지 않기 때문에 인덱스를 통한 접근 속도가 비교적 느림
• 데이터가 삭제되면 해당 공간은 삭제됨

ArrayList의 생성

// 기본 생성
ArrayList<Integer> list1 = new ArrayList<>();

// 초기 용량(capacity) 지정
ArrayList<Integer> list2 = new ArrayList<>(10);

// 배열을 넣어 생성
ArrayList<Integer> list3 = new ArrayList<>(Arrays.asList(1, 2, 3));

ArrayList의 추가

ArrayList<Integer> list1 = new ArrayList<>();

list1.add(1);    // {1}
list1.add(2);    // {1, 2}
list1.add(3);    // {1, 2, 3}

• addAll() 메서드

  ArrayList<String> list1 = new ArrayList<>(Arrays.asList(1, 2));
  ArrayList<String> list2 = new ArrayList<>(Arrays.asList(3, 4));
  

list1.addAll(list2); // list1에 list2의 내용 추가

⇒ 컬렉션 자체를 ArrayList에 추가할 수 있음

<br>

**ArrayList의 삭제**

```java
ArrayList<String> list1 = new ArrayList<>(Arrays.asList(1, 2));

// 1번째 인덱스 요소 삭제
list1.remove(1);    // {1}

// list1의 데이터 모두 삭제
list1.clear();

ArrayList의 검색

ArrayList<String> list1 = new ArrayList<>(Arrays.asList("A", "B", "C"));

// 특정 인덱스에 저장된 객체 반환
list1.get(1);    // B

// list에 A가 있는지 검색
list1.contains("A");    // true

// list에 A가 있는지 순차적으로 검색하고 index를 반환 (만일 없으면 -1)
list1.indexOf("A");    // 0

ArrayList의 요소 변경

ArrayList<String> list1 = new ArrayList<>(Arrays.asList("A", "B", "C"));

// 특정 인덱스 값을 설정값으로 변환
list1.set(1, "D");    // {"A", "D", "C"}

ArrayList의 크기

ArrayList<String> list1 = new ArrayList<>(Arrays.asList("A", "B", "C"));

list1.size();    // 3

모든 가능한 경우의 수를 탐색하여 최적의 결과를 찾는 방법. 모든 가능성을 고려하기 때문에 경우의 수가 많은 경우 시간과 메모리 부담이 큼. 문제의 특성에 따라 다른 탐색 기법을 사용해야 함.

종류

시간 복잡도

비트마스크 > DFS/BFS > Brute-Force > 재귀함수 > 순열 > 백트래킹

참고 문서 추가 자료

배열의 0번째 인덱스부터 특정 구간까지의 합을 새로운 배열로 정의하는 것. 선형 탐색 대신 구간 합 계산 방식으로 시간 복잡도를 줄임

특징

• 배열 A에 대해 합 배열 S를 정의
• 합 배열 S[i]는 배열 A의 0번째 원소부터 i번째 원소까지의 합에 대한 정보를 담음 ⇒ S[i] = A[0] + A[1] + A[2] + … + A[i-1] + A[i]
• 합 배열을 통해 선형 탐색을 할 필요가 없어지고 시간 복잡도가 O(1)로 줄어듦

구현 방식

• S[i] = S[i-1] + A[i]

특정 구간(i~j)의 구간 합 구하기

• S[j] - S[i-1]

참고 문서

Two Pointers 알고리즘

배열이나 리스트에서 두 개의 포인터(인덱스)를 사용하여 특정 조건을 만족하는 부분 구간을 효율적으로 탐색하는 알고리즘. 일반적으로 배열이나 리스트가 정렬되어 있을 때 사용

특징

• 왼쪽 포인터 & 오른쪽 포인터를 사용. 이들은 각각 탐색 범위의 시작과 끝을 가리킴

• 왼쪽 포인터를 고정한 상태에서 오른쪽 포인터를 이동하여 탐색하는 방식

• 두 개의 포인터를 적절히 이동시키며 시간 복잡도를 최적화할 수 있음

• (1) 특정 배열 내에 target 값과 같거나 유사한 부분 합이 몇 개 존재하는지 계산

• (2) 배열 내 target = arr[i] + arr[j]를 만족하는 (i, j) 쌍이 몇 개 존재하는지 계산

• 중첩 반복문의 시간 복잡도 : O(N²)

• 투 포인터의 시간 복잡도 : O(N)

실행 과정

조건)

• 두 포인터 start와 end는 0에서부터 시작
• 항상 start ≤ end를 만족
• start와 end가 배열의 크기(N)에 도달하면 알고리즘이 끝남
• start와 end 사이의 부분 합을 S라고 가정
• 부분 합이 M인 경우의 수를 cnt라고 가정

구현)

• S > M혹은 end == N : start++
• S < M : end++
• S == M : cnt++

Sliding Window 알고리즘

투 포인터 알고리즘과 유사. 배열이나 리스트에서 특정 길이의 특정 조건을 만족하는 구간을 효율적으로 탐색하는 알고리즘. 구간의 넓이가 일정하기 때문에 포인터가 2개일 필요가 없음

특징

• 핵심은 “중복된 데이터를 다시 계산하지 않고 재사용하는 것”

• 교집합의 정보는 공유하고, 양쪽 끝 원소만 갱신

• (1) 고정 크기 구나 합의 최댓값/최솟값 찾기

• (2) 문자열 패턴 탐색 : 아나그램 찾기

• 중첩 반복문의 시간 복잡도 : O(N²)

• 슬라이딩 윈도우의 시간 복잡도 : O(N)

실행 과정

조건)

• 배열의 구간 길이를 N이라고 가정

구현)

• 배열의 길이가 N인 첫 번째 구간의 부분 합 계산
• 첫번째 구간의 부분 합에서 맨 처음 배열 값을 빼고, 마지막 배열 값을 더함

Two Pointers 알고리즘과 Sliding Window 알고리즘의 핵심

시간 복잡도를 많이 차지하는 중첩 반복문이 아닌, start&end 포인터를 활용해 O(N)의 시간 복잡도 알고리즘을 구현하는 것

BufferedReader 사용법

BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
String str = br.readLine();
StringTokenizer st = new StringTokenizer(str);

특징

• readLine()의 리턴 값은 String
• main에 throws IOException 예외 처리를 해줘야 함
• readLine()은 입력을 line 단위로 읽어옴 ⇒ 공백 단위로 데이터를 가공하려면 nextToken()을 사용해야 함 ⇒ 새로운 line을 받아오려면 다시 readLine() 해야 함

BufferedReader란?

데이터를 한 번에 읽어와 버퍼에 보관한 후 버퍼에서 데이터를 읽어오는 방식으로 동작하는 클래스. 즉, 사용자가 입력한 문자 스트림은 읽는 것(read)이다.

• buffer : 데이터를 한 곳에서 다른 한 곳으로 전송하는 동안 일시적으로 해당 데이터를 보관하는 임시 메모리 영역

InputStreamReader란?

문자 기반의 보조 스트림으로써 바이트 기반 스트림을 문자 기반 스트림으로 연결시켜 주는 역할을 한다

System.in이란?

사용자로부터 입력을 받기 위한 입력 스트림. Scanner 클래스뿐만 아니라 다른 입력 클래스들도 System.in을 통해 사용자 입력을 받아야 한다

StringTokenizer란?

문자열을 지정한 구분자로 쪼개주는 클래스. 쪼개어진 문자열을 ‘토큰(Token)’이라고 한다.

Scanner와 차이점

1. 타입(Type)

• BufferedReader : readLine() 함수를 통해 String 형식으로만 입력받음. 형 변환을 위해 추가적인 코드 작성 필요
• Scanner : nextInt(), nextDouble()과 같은 함수로 입력 값을 원하는 타입으로 읽고 파싱할 수 있음

2. 메모리 용량

• BufferedReader : 버퍼 메모리 8KB. 많은 입력이 있을 경우 Scanner보다 효율적. 하지만 초기에 큰 메모리를 사용하게 됨
• Scanner : 버퍼 메모리 1KB

3. Thread-safe

• BufferedReader : Thread-safe. 멀티 스레드 환경에서 안전함. 스레드 간 입력 값을 공유할 수 있음
• Scanner : Thread-unsafe.

4. 실행 속도

• BufferedReader : 입력 값을 줄 별로 버퍼에 담아두고 처리하여 효율적임
• Scanner : 문자가 입력될 때마다 입출력을 처리하여 비효율적임

입력받은 토큰(String) 형 변환

1. String ⇒ Number

int n = Integer.parseInt(st.nextToken());
float n = Float.parseFloat(st.nextToken());
double n = Double.parseDouble(st.nextToken());

2. String ⇒ char

charAt(i) : 문자열의 i번째 char를 반환하는 메서드

String str = st.nextToken();    // "Hello"
for(int i = 0; i < str.length(); i++) {
    char ch = str.charAt(i);
    System.out.println(ch);
}

toCharArray() : 문자열을 char 배열로 변환

String str = st.nextToken();
for(char ch : str.toCharArray()) {    // for-Each문으로 바로 탐색 가능
    System.out.println(ch);
}

번외) String형으로 변환

valueOf() : 괄호 안의 객체를 문자열로 변환

int n = 1;
double d = 3.14;
char c = 'a';
boolean b = true;

String str1 = String.valueOf(n);    // "1"
String str2 = String.valueOf(d);    // "3.14"
String str3 = String.valueOf(c);    // "a"
String str4 = String.valueOf(b);    // "true"

• 기본형(primitive type)을 Wrapper 클래스 객체로도 변환할 수 있음

int n = 1;
Integer num = Integer.valueOf(n);    // Integer 객체 1

double d = 3.14;
Double dnum = Double.valueOf(d);    // Double 객체 3.14

toString() : 괄호 안의 객체를 문자열로 변환

int n = 1;
double d = 3.14;
char c = 'a';
boolean b = true;

String str1 = Integer.toString(n);      // "1"
String str2 = Double.toString(d);       // "3.14"
String str3 = Character.toString(c);    // "a"
String str4 = Boolean.toString(b);      // "true"

String 메서드

문자열 길이

String str = "Hello";
int len = str.length();    // 5

문자열 연결

String str1 = "Hello";
String str2 = "World";
String res = str1 + " " + str2;    // Hello World

문자열 잘라내기

String str = "Hello World";
String res = str.substring(0,5);    // Hello

문자열 비교하기

// String Pool에 저장(literal 할당)
String str1 = "Hello";
String str2 = "Hello";
System.out.println(str1 == str2);        // true
System.out.println(str1.equals(str2));   // true

// Heap에 저장(생성자 할당)
String str3 = new String("Hello");
String str4 = new String("Hello");
System.out.println(str3 == str4);        // false
System.out.println(str3.equals(str4);    // true

StringBuilder / StringBuffer

• ‘+’을 통해 String을 연결하게 되면, 메모리에 새로운 주소를 할당하여 메모리 낭비가 발생함 ⇒ StringBuilder/StringBuffer는 내부 메서드를 통해 메모리 낭비를 최소화할 수 있음

StringBuilder sb = new StringBuilder();

// append()
sb.append("Hello");    // Hello
sb.append("World");    // Hello World

// substring(start, end)
sb.substring(0, 5);    // Hello

// delete(start, end)
sb.delete(6, 11);      // Hello 

// insert(offset, str)
sb.insert(6, "Java");  // Hello Java

// toString()
String str = sb.toString();

→ StringBuffer도 사용법은 동일함

StringBuilder와 StringBuffer의 차이점

• StringBuilder : 문자열 파싱 성능이 우수함. 하지만 동기화를 지원하지 않아 멀티 스레드 환경보다 단일 스레드 환경에서 더 적합함. 코딩테스트의 경우 더 빠른 StringBuilder가 선호됨
• StringBuffer : 멀티 스레드 환경에서 안전함. 하지만 속도가 느림

&nbsp이제 Week 2로 들어갈 차례인데, 본격적으로 데이터 분석을 시작하는 것 같다. '리텐션' 에 대해 배운다고 한다. 이 리텐션에 관련한 글을 읽고 감상을 작성해보도록 하겠다.

&nbsp입문반 4주차, 우리는 매출 분석이론으로 'AARRR' 방법론을 배웠다. AARRR은 서비스 성장 분석 방법론 중 하나인데, 매출이 증가 혹은 감소했을 때 이 원인이 무엇인가?를 생각하는 데에 있어서 중요한 관점을 제공한다.

• Acquisition (고객 유치) : 광고 등으로 새로운 고객을 유치하는 단계
• Activation (활성화) : 회원가입, 튜토리얼 등 고객을 활성화시키는 단계
• Retention (리텐션) : 지속적으로 서비스를 사용하게 만드는 단계
• Revenue (매출) : 매출을 만드는 단계
• Referral (추천) : 기존 고객이 다른 고객에게 제품을 추천하는 단계

&nbsp'롤링 리텐션' 파트에서, 데이터분석을 하다 보면 시간이 지나면 데이터 숫자가 변하기 마련이고, 데이터를 다루지 않는 사람들은 이를 받아들이기 어려워한다 라는 부분이 있었다. 물론 저는 실무에서 일해 본 경험이 없지만, 충분히 겪을 수 있는 상황이고 나라면 어떻게 대처해야 할 지 고민이 됐다. 또, 데이터리안 멘토분들의 슬랙 대화에서 '방어 로직'을 넣으셨다고 했는데 이 또한 실무에 들어가면 해야 하는 부분이라고 생각하니 조금은 막막해진 것도 같다.

&nbsp같은 데이터라도 활용하는 리텐션 방식에 따라서 결과 값이 달라지는 것은 당연하다. 하지만, 어떤 상황에서 어떤 방식을 활용해야 할지 또 주의점은 무엇인지 항상 궁금했다. 그런데 '범위 리텐션' 파트에서 이 부분을 확실히 짚어주셔서 드디어 궁금증이 해결되었다.

&nbsp마지막 두 글은 상당히 난이도가 높았지만, 역시 데이터리안 블로그의 포스트에서는 양질의 지식을 얻어갈 수 있다는 것을 한 번 더 느꼈다. 간단한 데이터로 넓은 인사이트를 주고, 독자들이 이해하기 쉽게 풀어서 설명해준다. 물론, 내용 자체가 쉬운 내용은 아니기 때문에 두 번 세 번 반복해서 읽는다. 그러다보면, 데이터분석 이론은 내 것이 되어있다.

학교 시험이랑 실전반 시기가 겹쳐서 조금은.. 힘든 하루하루를 보내고 있지만, 그래도 매일매일 열심히 수강해서 끝까지 수료하고 싶다! 포스트를 읽다 보니 GA4 데이터 분석 캠프도 수강해보고 싶기도 하고..

&nbsp오늘은 교수님께서 주신 첫 번째 과제 xv6 Project에서 xv6 설치 과정에 대해 포스팅 해보겠다.

1. 우분투 설치 확인하기

커맨드 창에

wsl --list --online

을 입력하면 위 사진처럼 리스트가 뜬다. 이 중 Ubuntu-24.04 파일이 있다면 우분투 설치가 되어 있는 것이다. 만약, 우분투 설치가 되어있지 않다면 Linux용 Windows 하위 시스템 설치되어 있지 않습니다. 라고 뜨면서 설치할 수 있는 커맨드가 나타나므로 보고 설치하면 된다.

2. 우분투 환경으로 변경하기

교수님께서 알려주신 설치를 진행하려면 우분투 환경으로 바꿔야하는데 어떻게 하지? 생각하다가 그냥 커맨드 창에

ubuntu

를 쳐봤다. 근데 바뀌었다. 얻어걸렸다. 얏호~

3. 우분투 버전 정보 확인하기

cat /etc/issue

를 커맨드 창에 입력하면 우분투의 버전을 확인할 수 있다. cat가 뭔가 했더니 concatenate, 파일에 연결한다는 뜻이라고 한다.

4. 패키지 설치하기

&nbsp여기서 시행착오가 있었다. GitHub에서 생성한 레포지토리의 SSH key를 가져와서 git clone을 해야되는데, 그 전에 패키지 설치를 해야한다. 그런데 자료를 제대로 안보고 바로 빌드를 해버려서 오류가 났다. 물론, 구글 검색을 해서 패키지는 바로 설치했지만 자료만 제대로 봤다면 바로 진행했을 텐데..

어쨌든 패키지를 설치하려면

sudo apt update

로 업데이트를 한 후,

sudo apt install -y build-essential expect qemu-system-misc gcc-riscv64-unknown-elf

를 입력하여 여러 패키지를 설치해준다. 물론 나는 이미 다 설치해놓은 상태여서 사진을 보면 알 수 있듯이, 이미 설치되어 있다고 뜬다. 내 커맨드 결과와 같지 않다고 해서 문제될 것은 없다. 에러만 뜨지 않으면 된다.

5. 패키지 빌드하기

&nbsp여기서 어려움을 겪었다. 1시간을 헤맸다. 'make', 'make qemu' 커맨드를 입력하는데 오류가 많이 떴다... 일단 이 얘기는 뒤에 가서 하고

git clone (SSH key 주소) p1
cd p1/xv6-riscv

를 입력하여 깃을 클론해주고, 클론된 파일에 접근해준다. 해당 깃이 이미 클론되어 있어, 사진에는 이미 존재한다는 문구가 떴다.

make

위 커맨드를 입력해서 make 해주면 되는데(뭘 make 하는지는 몰겟다ㅋㅋ)

Error: Couldn't find a riscv64 version of GCC/binutils.

에러가 떴다. ㅠㅠ

바로 구글에 검색하니 stackoverflow 페이지를 찾을 수 있었고, 답변에서 좋은 사이트를 찾았다.

https://pdos.csail.mit.edu/6.828/2019/tools.html

그리고 이 페이지에서 알려준대로

riscv64-unknown-elf-gcc --version

을 입력했더니 무언가가 설치 안됐다고, 명령어를 입력하라고 해서 설치를 완료 했다. 알고 보니 내가 자료를 읽지 않고 설치하지 않았던 패키지(4번 과정) 때문이었다. 그래서 이 포스트 순서대로 잘 따라오신 분들은 오류가 나지 않았을 것이다.

이후

make qemu

를 입력했는데, qemu의 버전이 낮다고. 7.2.0 이상이어야 한다고 했다. 이것 또한 구글 검색과 제미나이의 도움을 받으며 30분 넘게 설치하고, 입력하고 했는데 도저히 7.2.0 이상 버전이 설치되지 않았다.. 왜지? 하라는 대로 다 했는데 안됐다.

sudo apt update
sudo apt install build-essential zlib1g-dev libglib2.0-dev libpixman-1-dev
wget https://download.qemu.org/qemu-7.2.0.tar.xz
tar xf qemu-7.2.0.tar.xz
cd qemu-7.2.0

여기까진 순조로웠다. 이후 './configure ...' 어쩌구 하는 커맨드를 입력하고 설치할 것을 다 설치해도 qemu의 버전이 6.2에서 머물렀다. 그런데 아까 찾았던 페이지에서 qemu 설치 방법이 있길래 시도해봤다.

./configure --disable-kvm --disable-werror --prefix=/usr/local --target-list="riscv64-softmmu"
make
sudo make install
cd ..

를 진행하고 (시간이 꽤 많이 걸린다)

make qemu

를 입력하니

드디어 떴따!!

그리고 밑에 뜨는 커맨드창에 'ls'를 입력하면 빌드 정보가 뜬다.

ㅠㅠ 힘들엇다

RFM 분석이란

** - Recency : 얼마나 최근에 구매했는가** ** - Frequency : 얼마나 자주 구매했는가** ** - Monetary : 얼마나 많은 금액을 지출했는가**

로 나눠진다. 즉, 사용자가 얼마나 최근에, 얼마나 자주, 얼마나 많은 금액을 지출했는지에 따라 사용자들의 분포를 확인하거나 사용자 그룹 또는 등급을 나누어 분류하는 분석기법이다.

&nbsp사용자의 최근 구매일, 총 구매 횟수, 총 구매 금액을 각각의 기준을 세워 recent/past, high/low, high/low의 값으로 변환하고 간단하게 분류한 것에 조금 놀랐다. 복잡한 데이터들을 기준 하나로 이렇게 간단하게 표현할 수 있구나 깨달았다. 물론, 실무에서 다뤄지는 데이터들은 이 예시보다 훨씬 복잡하고 분석이 어려울 것이다. 하지만, 천리길도 한 걸음부터라고 이런 RFM 분석 기법의 기초를 데이터리안에서 하나씩 배워가면 나만의 데이터 분석 방법이 생길 것이라고 믿어 의심치 않는다.

&nbsp지금까지의 데이터리안 부트캠프에서는 MySQL 언어를 배우고 적용하고 코딩테스트를 진행해보는 비교적 간단한 과제들을 했다. 남은 2주 동안은 RFM 고객 세분화 분석, 데이터 연결, EDA, 매출 분석 등 진짜로 실무에서 이루어지는 내용들을 배울 것이다. 드디어 이런 내용들을 배울 수 있다는 게 설렌다.

&nbsp'데이터리안 부트캠프 입문반'을 수강하는 9월 한달 동안의 내 목표는, 원하는 데이터를 직접 찾아보고, 분석하고, 높은 퀄리티의 데이터분석 결과를 도출해내는 것이다. 물론, 나는 전문가가 아니라서 시행착오가 많을 것이라고 생각한다. 하지만, 막히는 부분이나 어떻게 분석해야할 지 모를 때에는 멘토분들께 여쭤가면서 적극적으로 해볼 예정이다. 데이터리안 부트캠프에서는 언제 어디서나, 멘토분들께 편하게 여쭤볼 수 있다는 게 정말 큰 장점인 것 같다. 남은 2주도, 다음 달의 실전반도 열심히 참여해야겠다!

&nbsp클라우드 컴퓨팅? 들어만 봤지 한 번도 해본 적이 없어서 감도 안오고 어떻게 해야할 지 모르겠던 와중 에브리타임에서 어떤 분이 Google Colab으로 실습할 것이라고 말씀하신 것을 보고 나도 코랩으로 해보기로 했다. (감사합니다🥹)

1. 구글 드라이브에서 Google Colab 추가하기

구글 드라이브에 들어오면, 좌측 상단에 '+ 신규' 버튼이 있다.

&nbsp신규 버튼을 누르면 가장 아래 '더보기'에 들어가야 하는데, Google Colab을 사용해본 적이 없다면 코랩이 뜨지 않을 것이다. 그러면 '+ 연결할 앱 더보기' 를 눌러서 마켓플레이스에서 Google Colab을 설치해야 한다.

&nbsp설치하면 위 더보기 란에 자동으로 추가된다. 다시 돌아와서 Google Colab을 열어주면 Google Colab 설치는 끝이다.

2. GPU 사용 설정하기

Google Colab에 들어오면 이렇게 보인다.

먼저, CUDA 실행을 위한 GPU 설정부터 해야하는데, 상단의 '런타임' - '런타임 유형 변경'을 눌러 들어간다.

우리는 GPU를 사용해야 하기 때문에 - 런타임 유형 : Python3 - 하드웨어 가속기 : T4 GPU 로 설정해준다.

&nbsp내가 서치해서 본 글들은 전부 2018~2022년 글이라서 이 부분의 UI가 조금씩 달랐다. '런타임 유형 변경' 이 아닌 '노트 설정', 하드웨어 가속기도 'T4 GPU'가 아닌 그냥 'GPU'였다. 그래서 조금 헷갈리긴 했는데, 일단 설정해보고 실행해보니 돼서 이 설정이 맞는 듯하다.

3. CUDA 작업환경 설정하기

&nbspGoogle Colab에는 이미 CUDA가 설치되어 있기 때문에 잘 설치되어 있는지만 확인하면 된다.

CUDA 설치 여부 확인하기

!nvcc --version

위 코드를 넣고 실행하면

nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2024 NVIDIA Corporation
Built on Thu_Jun__6_02:18:23_PDT_2024
Cuda compilation tools, release 12.5, V12.5.82
Build cuda_12.5.r12.5/compiler.34385749_0

이렇게 결과가 나오면 NVIDA GPU에서 CUDA가 정상적으로 실행된다는 의미이다.

플러그인 설치하기

우리는 CUDA에서 C/C++을 이용할 것이기 때문에 플러그인을 설치해주어야 한다.
!pip install nvcc4jupyter

Collecting nvcc4jupyter
  Downloading nvcc4jupyter-1.2.1-py3-none-any.whl.metadata (5.1 kB)
Downloading nvcc4jupyter-1.2.1-py3-none-any.whl (10 kB)
Installing collected packages: nvcc4jupyter
Successfully installed nvcc4jupyter-1.2.1

이렇게 nvcc4jupyter을 설치해주면 위와 같이 성공적으로 설치가 완료되었다는 문구가 뜨고, 이제 이 nvcc4jupyter을 사용하기 위해 로드를 해주면 끝이다.

플러그인 로드하기

%load_ext nvcc4jupyter

Detected platform "Colab". Running its setup...
Source files will be saved in "/tmp/tmpzftpf343".

성공적으로 로드되었다.

&nbsp플러그인 설치-로드 과정에서 시행착오를 겪었는데, 2022년 글을 참고해서 그런지 intall도 github 저장소의 패키지를 설치하고, 플러그인 로드도 'nvcc4jupyter'가 아닌 'nvcc_plugin'이었다. 그래서 %load_ext nvcc_plugin을 하는 과정에서 계속 오류가 뜨고, Google Colab 내부의 AI도 해결하지 못해서 구글링을 해서 다른 방안을 찾아냈고, 찾아낸 것이 이 방법이다.

&nbsp사실 영어를 못하는 건 아닌데 읽기가 너무 귀찮아서 여태까지 프로그래밍을 하면서 최대한 영어 문서를 피해다녔다. 그런데 오늘, 무슨 심정의 변화가 있었는지 영어로된 AI 말을 읽고, 영어로 검색하고, 영어 문서를 읽었는데 생각보다 힘들지 않았다. 앞으로 영문 검색과 영문서 읽기를 습관화 해봐야겠다.

4. 실행 확인하기

설치가 완료되었다면 마지막으로 CUDA에서 C/C++ 코드가 실행되는지 확인해야한다.

%%cuda
#include <iostream>
    int
    main()
{
    std::cout << "Hello, World\n";
    return 0;
}

위 코드를 실행해보고 'Hello, World'가 잘 뜨는지 확인해보면 된다.

[참고문서]

• Google Colab 사용하기
• [Colab에서 CUDA로 C++ 사용하기] (https://velog.io/@lamknh/Colab%EC%97%90%EC%84%9C-CUDA-%EB%8F%8C%EB%A6%AC%EA%B8%B0)
• [Colab에서 C/C++ 플러그인 설치하기] (https://www.geeksforgeeks.org/c/how-to-run-cuda-c-c-on-jupyter-notebook-in-google-colaboratory/)

[5/20]

- vector 원소의 합 구하기

라이브러리 : #include <numeric> 함수 : accumulate(InputIt first, InputIt last, T init);

first : 계산 시작 위치 last : 계산 마지막 위치 init : sum의 초기값

예제

#include <numeric>

sum = accumulate(v.begin(), v.end(), 0);    // 소수점 결과가 필요하다면 sum 파라미터에 double(0)을 넣어도 됨

- vector 원소의 최대값 & 최소값

라이브러리 : #inlcude <algorithm> 함수 ① 최대값 인덱스 구하기 max_element(v.begin(), v.end()) - v.begin(); ② 최대값 구하기 *max_element(v.begin(), v.end()); ③ 최소값 인덱스 구하기 min_element(v.begin(), v.end()) - v.begin(); ④ 최소값 구하기 *min_element(v.begin, v.end());

예제

#include <algorithm>

int max_idx = max_element(v.begin(), v.end()) - v.begin();
int max = *max_element(v.begin(), v.end());

int min_idx = min_element(v.begin(), v.end()) - v.begin;
int min = *min_element(V.begin(), v.end());

[8/18]

- 시간 단축하기

① ios::sync_with_stdio(false) C의 stdio와 C++의 iostream의 동기화를 비활성화함. C++ 독립 버퍼 사용

② cin.tie(NULL), cout.tie(NULL) 하나로 묶인 cin, cout 스트림을 해제함. cin과 cout은 기본적으로 하나로 묶여있는데, cin을 수행하기 전 cout 출력 버퍼를 지움으로써 속도를 향상

③ \n 사용 C++에서는 개행을 위해 보통 endl을 사용하지만, endl보다 \n을 사용하는 편의 속도가 더 빠름

- 동적 배열 생성

① 1차원 동적 배열 ② 2차원 동적 배열

properties. 컴포넌트의 속성을 설정할 때 사용하는 요소

props 렌더링

    MyComponent.js

const MyComponent = props => {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

export default MyComponent;

 MyComponent 컴포넌트에서 name이라는 props를 렌더링하도록 설정했다.

props 값 지정하기

    App.js

import MyComponent from './MyComponent';

const App = () => {
    return <MyComponent name="react" />;
};

export default App;


// 출력 결과 : 안녕하세요, 제 이름은 react입니다.

props 기본값 설정 : defaultProps

    MyComponent.js

const MyComponent = props => {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};


MyComponent.defaultProps = {
    name : '최수연'
};

export default MyComponent;


// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.

children

컴포넌트 태그 사이의 내용을 보여주는 props이다

    App.js

import MyComponent from './MyComponent';

const App = () => {
    return <MyComponent>리액트</MyComponent>;
};

export default App;

 위 코드에서 MyComponent 태그 사이에 작성한 문자열을 MyComponent 파일 내부에서 보여주려면 props.children을 사용한다.

    MyComponent.js

const MyComponent = props => {
    return (
        <div>
            안녕하세요, 제 이름은 {props.name}입니다. <br />
            children 값은 {props.childern}
            입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name : '기본 이름'
};

export default MyComponent;

// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
//              children 값은 리액트입니다.

비구조화 할당 문법 : 내부 값 바로 추출하기

 위의 MyComponent에서는 props의 값을 조회할 때마다 'props.'라는 키워드를 붙여주고 있다. 이러한 작업을 생략하기 위해 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법이 있다.

    MyComponent.js

const MyComponent = props => {
    const { name, children } = props;    // 추가됨
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {childern}
            입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name : '기본 이름'
};

export default MyComponent;

// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
//              children 값은 리액트입니다.

 MyComponent.js 파일을 다음과 같이 수정하면 name 값과 children 값을 간결하게 사용할 수 있다. 이와 같이 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.

    MyComponent.js

const MyComponent = ({ name, children }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {childern}
            입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name : '기본 이름'
};

export default MyComponent;

// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
//              children 값은 리액트입니다.

 객체인 함수 파라미터를 비구조화해서 사용하는 것이다. 이렇게 사용하면 훨씬 편하다. 앞으로도 함수 컴포넌트에서 props를 사용할 때 파라미터 부분에서 비구조화 할당 문법을 사용하도록 한다.

propTypes를 통한 props 검증

 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용한다. propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.

    MyComponent.js

import PropTypes from 'prop-types';        // propTypes 불러오기

const MyComponent = ({ name, children }) => {
    return(...);
};

MyComponent.defaultProps = {
    name: '최수연'
};

MyComponent.propTypes = {
    name: propTypes.string
};

export default MyComponent;

 위 코드처럼 propType을 설정해 주면 name 값은 무조건 문자열(string)형태로 전달해야 된다는 것을 의미한다. App 컴포넌트에서 name 값을 문자열이 아닌 값으로 전달하고, 개발자 도구의 Console 탭을 열어보아라.

    App.js

import MyComponent from './MyComponent';

const App = () => {
      return <MyComponent name={3}>리액트</MyComponent>;
};

export default App;

// 출력 결과 : 안녕하세요, 제 이름은 3입니다.

 MyComponent 컴포넌트에서 name의 propTypes를 string으로 설정하고 App 컴포넌트에서 name을 숫자형으로 설정했을 때 출력은 정상적으로 실행되지만, Console에서는 아래와 같은 오류가 발생한다.  위 경고 메세지는 propTypes가 잘못되었다는 것을 알려준다. 오류를 수정하기 위해 App 컴포넌트의 return 부분을 수정해줬다.

const App = () => {
  return <MyComponent name="React">리액트</MyComponent>;
};

isRequired를 통한 필수 propTypes 설정

 propTypes를 지정하지 않았을 때 경고 메세지를 띄우 주는 작업을 해 보자.

    MyComponent.js

import PropTypes from 'prop-types';

const MyComponent = ({ name, children, favoriteNumber }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {childern}
            입니다. <br />
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name: '기본 이름'
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

    App.js

import MyComponent from './MyComponent';

const App = () => {
      return <MyComponent name="React">리액트</MyComponent>;
};

export default App;

 MyComponent 컴포넌트에 객체 favoriteNumber의 propTypes를 숫자형으로 설정하고 isRequired를 붙여주었다. 코드를 저장한 후 개발자 도구의 Console을 확인해보면 아래와 같은 경고가 나타난다.  오류를 수정하기 위해 App 컴포넌트의 return 부분을 수정해줬다.

const App = () => {
  return (
    <MyComponent name="React" favoriteNumber={1}>리액트</MyComponent>
  );
};

 이 글에서는 string과 number PropTypes를 알아봤다. 하지만, PropTypes는 이 외에도 여러가지 종류를 설정할 수 있다.

• array : 배열
• arrayOf(다른 PropType) : 특정 PropType로 이루어진 배열
• bool : true/false 값
• func : 함수
• number : 숫자
• object : 객체
• string : 문자열
• symbol : ES6의 Symbol
• node : 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드, children 등)
• instanceOf(클래스) : 특정 클래스의 인스턴스
• oneOf(['dog', 'cat']) : 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]) : 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number) : 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTyes.number }) : 주어진 스키마를 가진 객체
• any : 아무 종류

 등 다양한 종류의 PropTypes가 있다. 더 자세한 정보는 https://github.com/facebook/prop-types 에서 확인할 수 있다.

클래스형 컴포넌트의 props

 클래스형 컴포넌트에서도 props를 사용할 수 있다. 함수형 컴포넌트와의 차이점은 코드를 확인한 후 알아보자.

    MyComponent.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  static defaultProps = {
    date: '기본 이름'
  };

  static propTypes = {
    data: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };

  render() {
    const { name, children, favoriteNumber } = this.props; // 비구조화 할당
      return (
          <div>
              안녕하세요, 제 이름은 {name}입니다. <br />
              children 값은 {childern}
              입니다. <br />
              제가 좋아하는 숫자는 {favoriteNumber}입니다.
          </div>
      );
  }
};

// 함수 외부에 선언 가능
/*
MyComponent.defaultProps = {
    name: '기본 이름'
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
*/

export default MyComponent;

함수형-클래스형 컴포넌트에서의 props 사용 차이점

• render 함수에서 비구조화 할당과 return을 실행한다
• defaultProps와 propTypes는 class 내부에서도 선언 가능하다

defaultProps와 propTypes는 꼭 사용해야 하는가?  이 두 가지 설정은 컴포넌트의 필수 사항이 아니므로 꼭 사용할 필요는 없다. 하지만 React를 통해 큰 규모의 프로젝트를 진행한다면, 특히 다른 개발자들과 협업한다면 해당 컴포넌트에서 어떤 props가 필요한지 쉽게 알 수 있어 개발 능률이 좋아질 것이다.

컴포넌트

컴포넌트란?

사용자 인터페이스 일부를 표시하는 재사용 가능한 코드의 조각

 함수가 입력을 받아 출력을 리턴하는 것처럼 Component도 입력을 받아 정해진 출력을 리턴한다. Component의 입력은 props, 출력은 Element가 된다. 따라서 Component를 마크업을 반환하는 하나의 자바스크립트 함수라고 생각할 수 있다.

 컴포넌트는 고유한 로직과 모양을 가진 하나의 작은 UI 덩어리라고 표현할 수 있다. 다시 말해, 페이지를 구성하는 작은 단위이다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 조각으로 나누고, 각 조각을 상황에 따라 활용할 수 있다. 컴포넌트는 어플리케이션의 UI 엘리먼트를 렌더링, 관리, 업데이트할 때 사용한다.

컴포넌트의 장점

1. 코드 양을 줄일 수 있다.
2. 개발 시간을 줄일 수 있다.
3. 유지 보수 비용이 줄어든다

함수형 컴포넌트

 이전의 'React - 1' 포스팅에서 사용했던 App 컴포넌트가 함수형 컴포넌트이다.

함수형 컴포넌트의 구조

    App.js

import './App.css';

function App() {
    const name = 'react';
    return <div className="react">{name}</div>;
}

export default App;        // export default : 파일의 기본 컴포넌트 지정

함수형 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언하기 쉽다
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다
• 프로젝트를 완성하여 빌드한 후 배포할 때 파일 크기가 작다

함수형 컴포넌트의 단점

• state와 라이프사이클 API 사용이 불가능하다 => Hooks 기능 도입으로 비슷한 작업이 가능하게 되었다

클래스형 컴포넌트

클래스형 컴포넌트의 구조

    App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        const name = 'react';
        return <div className='react'>{name}</div>;
    }
}

export default App;

클래스형 컴포넌트의 장점

• state 기능을 사용할 수 있다
• 라이프사이클 기능을 사용할 수 있다
• 임의 메서드를 정의할 수 있다

클래스형 컴포넌트의 특징

• render 함수가 꼭 있어야 한다
• JSX를 반환해야 한다
  
  
  
  
  

  컴포넌트 렌더링

  뭔소리야..?

※ 리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks 사용을 권장하고 있다.

[MyComponent.js]

export default MyComponent;

 다른 파일(App.js)에서 이 파일(MyComponent.js)를 import할 때, 위에서 선언한 MyComponent 컴포넌트를 불러오도록 설정한다

[App.js]

import MyComponent from './MyComponent';

const App = () => {
    return <MyComponent />;
};

export default App;

 import 구문을 사용하여 MyComponent 컴포넌트를 불러온다.

구현 방법

1. 변수를 선언하고, 그 위치에 함수를 선언한다.

let add = function(num1, num2) {
    return num1 + num2;
}

2. 함수명 ‘function’을 없애고, 괄호 우측에 화살표를 표시한다.

let add = (num1, num2) => {
    return num1 + num2;
}

주의사항

• 함수 코드에 return문만 있을 때에는 중괄호에서 소괄호로 바꿀 수 있다.

let add = (num1, num2) => (
    num1 + num2;
)

• 함수 코드에 여러 줄의 코드가 있을 경우 소괄호로 바꿀 수 없다.

let add = function(num1, num2) {
    const result = num1 + num2;
    return result;
}

• return이 한 줄이라면 괄호는 생략 가능하다

  let add = (num1, num2) => num1 + num2;

• 매개변수가 하나라면 괄호는 생략 가능하다

let sayHello = name => Hello, ${name};

• 매개변수가 없는 함수라면 괄호는 생략 불가능하다

let showError = () => {
    alert('error!');
}

화살표 함수의 this

: 화살표 함수에는 'this'가 없기 때문에 상위 스코프의 this를 참조한다

function BlackDog() {
    this.name = '흰둥이';
    return {
        name : '검둥이',
        bark : function() {
            console.log(this.name + ': 멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark();    // 검둥이 : 멍멍!

 메소드로 function()을 사용했을 때에는 name으로 '검둥이'가 나타난다. 일반 함수는 자신이 종속된 객체를 this로 가리키기 때문이다.

function WhiteDog() {
    this.name = '흰둥이';
    return {
        name : '검둥이',
        bark : () => {
            console.log(this.name + ': 멍멍!');
        }
    }
}

const whiteDog = new WhiteDog();
whiteDog.bark();    // 흰둥이 : 멍멍!

 메소드로 () =>를 사용했을 때에는 name으로 '흰둥이'가 나타난다. 화살표 함수는 자신이 종속된 인스턴스를 가리키기 때문이다.

import logo from './logo.svg';    // import : 특정 파일을 불러옴  <-  자바스크립트 파일에서는 import를 사용해서 다른 파일들을 불러와 사용가능
import './App.css';               // 모듈을 불러와서 사용하는 것은 브라우저에는 X. Node.js에서 지원하는 기능

function App() {          // 'App'이라는 함수 컴포넌트 생성(function)
  return (                // 반환값은 HTML이 아님. JSX이다.
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

JSX의 장점

1. 보기 쉽고 익숙하다
2. 더욱 높은 활용도 => 한 파일에서 생성된 컴포넌트를 다른 파일에서 import하여 HTML 태그 쓰듯이 작성할 수 있다

JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함.

function App() {
    return (
        <h1>안녕하세요</h1>
        <h2>잘 작동하나?</h2>
    );
}

export default App;

=> 오류발생

해결법

: 여러 태그들을 한 개의 div 태그로 감싼다

function App() {
    return (
        <div>
            <h1>안녕하세요</h1>
            <h2>잘 작동하나?</h2>
        </div>
    );
}

export default App;

왜 하나의 요소로 감싸야할까? : Virtual DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 하기 위해  컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다.

import {Fragment} from 'react';

function App() {
    return (
        <Fragment>
            <h1>안녕하세요</h1>
            <h2>잘 작동하나?</h2>
        </Fragment>
    );
}

export default App;

import {Fragment} from 'react';

function App() {
    return (
        <>
            <h1>안녕하세요</h1>
            <h2>잘 작동하나?</h2>
        </>
    );
}

export default App;

2. 자바스크립트 표현

 JSX에서는 DOM 요소를 렌더링하는 기능뿐만 아니라 자바스크립트 표현식도 사용할 수 있다.

function App() {
  const name = 'react';
  return (                        
    <div>
      <h1>안녕 {name}!</h1>
      <h2>잘 작동하나?</h2>
    </div>
  );
}

export default App;

3. If문 대신 조건부 연산자

 JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. 조건에 따라 다른 내용을 렌더링해야 할 때는 (1) JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, (2) {} 안에 조건부 연산자를 사용하면 된다.

function App() {
  const name = 'react';
  return (                        
    <div>
      {name === 'react' ? (        // 삼항 연산자
        <h1>react입니다.</h1>
      ) : (
        <h2>react가 아닙니다.</h2>
      )}
    </div>
  );
}

export default App;

4. AND 연산자(&&)를 사용한 조건부 렌더링

 특정 조건을 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 상황에서, 조건부 연산자를 통해 구현할 수 있지만

function App() {
  const name = 'react';
  return (                        
    <div>
      {name === 'react' ? <h1>react입니다.</h1> : null}
    </div>
  );
}

export default App;

AND 연산자(&&)를 통해서 더 짧은 코드로 똑같은 작업을 할 수 있다.

function App() {
  const name = 'react';
  return (                        
    <div>
      {name === 'react' && <h1>react입니다.</h1>}
    </div>
  );
}

export default App;

5. undefined를 렌더링하지 않기

 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안된다. 그렇게 되면, 다음과 같은 오류를 발생시킨다.

import './App.css'

function App() {
  const name = undefined;
  return name;
}

export default App;



App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

해결법

 어떤 값이 undefined일 수 있다면, Or 연산자(||)를 사용하면 해당 값이 undefined일 때 대신 사용할 값을 지정할 수 있어  오류를 방지할 수 있다.

import './App.css'

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

export default App;

import './App.css'

function App() {
  const name = undefined;
  return <div>{name}</div>;
}

export default App;

import './App.css'

function App() {
  const name = undefined;
  return <div>{name || '보여주고 싶은 문구'}</div>;
}

export default App;

6. 인라인 스타일링

 인라인 스타일링이란, html 태그에 직접 style을 적용하는 방식이다. 리액트에서 DOM 요소에 style을 적용할 때에는 문자열 형태가 아닌, 객체 형태로 적용해야 한다.

(1) style 객체 미리 선언 후 적용

import './App.css'

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',    // 카멜 표기법(camelCase)
    color: 'aqua',
    fontSize: '48px',            // font-size => fontSize
    fontWeight: 'bold',            // font-weight => fontWeight
    padding: 16                    // 단위 생략시 px
  };
  return <div style={style}>{name}</div>;
}

export default App;

** (2) style 바로 선언 **

import './App.css'

function App() {
  const name = 'react';
  return <div 
            style={{
              backgroundColor: 'black',
              color: 'aqua',
              fontSize: '48px',
              fontWeight: 'bold',
              padding: 16
            }}
          >
            {name}
          </div>;
}

export default App;

7. class → className

 일반 HTML에서 CSS 클래스를 사용할 때에는 <div class="react"></div>와 같이 class 속성을 설정한다. JSX에서는 class가 아닌 className으로 설정해주어야 한다.

[ App.css ]

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

[ App.js ]

import './App.css'

function App() {
  const name = 'react';
  return <div className="react">{name}</div>;
}

export default App;

Warning: Invalid DOM property `class`. Did you mean `className
    in div (at App.js:6)
    in App (at src/index.js:7)

8. 꼭 닫아야 하는 태그

 HTML에서는 <input>, <br>과 같이 태그를 닫지 않아도 되는 오픈 태그가 존재한다. 하지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다. 따라서 오픈 태그도 닫아주어야 한다.

import './App.css'

function App() {
  const name = 'react';
  return (
    <>
      <div className="react">{name}</div>
      <input></input>
    </>
  )
}

export default App;

 태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수 있다. 우리는 이러한 태그를 self-closing 태그라고 한다. 태그를 선언하면서 동시에 닫을 수 있다.

import './App.css'

function App() {
  const name = 'react';
  return (
    <>
      <div className="react">{name}</div>
      <input />        // self-closing 태그
    </>
  )
}

export default App;

9. 주석

 JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 다르다.

import './App.css'

function App() {
  const name = 'react';
  return (
    <>
      {/* 주석은 이렇게 작성한다 */}
      <div 
        className="react"   // 시작 태그를 여러 줄로 작성한다면 '//'로 주석을 작성할 수 있다.
      >
        {name}
      </div>

        // 하지만 이런 주석이나
        /* 이런 주석은 페이지에 그대로 나타난다.

    </>
  )
}

export default App;

Document Object Model의 약자로, 문서 객체 구조를 표현하는 방식

 DOM은 동적 UI에 최적화되어 있지 않다. 그렇기 때문에 DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 많은 시간이 소요된다. 따라서 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 발생하기 시작한다.

해결법

 성능 저하를 해결하기 위해 DOM을 최소한으로 저작하여 작업을 처리하는 방식으로 개선할 수 있다. 그것이 바로 Virtual DOM 방식이다.

Virtual DOM

 리액트에서는 실제 DOM에 접근하여 조작하는 대신, DOM을 추상화한 자바스크립트 객체 Virtual DOM을 구성하여 사용한다. 이를 통해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행할 수 있다.

DOM 업데이트의 3가지 절차

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용