Set은 중복 없는 데이터를 저장하는 자료구조다

• 중복 자동 제거
• 순서는 보장하지 않음
• O(1) 시간복잡도
• 가장 빠름

HashSet<Integer> set = new HashSet<>();
set.add(1);
set.add(2);
set.add(1);  // 중복, 추가 안됨
System.out.println(set.size());  // 2

// 존재 여부 확인
if (set.contains(1)) { }  // O(1)

// 삭제
set.remove(1);  // O(1)

1-1) TreeSet

• 자동 정렬(오름차순)
• O(log n)
• 범위 검색이 필요할 때 사용

TreeSet<Integer> set = new TreeSet<>();
set.add(5);
set.add(1);
set.add(3);
// 저장 순서: [1, 3, 5] 자동 정렬됨

// 유용한 메서드들
set.first();     // 1 (최솟값)
set.last();      // 5 (최댓값)
set.lower(3);    // 1 (3보다 작은 수 중 최대)
set.higher(3);   // 5 (3보다 큰 수 중 최소)
set.floor(4);    // 3 (4 이하인 수 중 최대)
set.ceiling(2);  // 3 (2 이상인 수 중 최소)


// 역순 정렬
TreeSet<Integer> set2 = new TreeSet<>(Collections.reverseOrder());

2. Map

• Key-value 형태로 쌍을 저장함
• 순서를 보장하지 않음

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

// 추가/수정
map.put("apple", 1);
map.put("banana", 2);
map.put("apple", 3);  // 덮어쓰기, apple의 값이 3으로 변경

// 조회
map.get("apple");  // 3
map.get("grape");  // null (없으면 null 반환)
map.getOrDefault("grape", 0);  // 0 (없으면 기본값 반환)

// 존재 여부
map.containsKey("apple");    // true
map.containsValue(2);        // true

// 삭제
map.remove("apple");

// 크기
map.size();

2-1) TreeMap

• Key 기준으로 자동정렬

TreeMap<Integer, String> map = new TreeMap<>();
map.put(3, "three");
map.put(1, "one");
map.put(2, "two");
// Key 순서: 1, 2, 3 (자동 정렬)

리스트는 순서가 있는 자료구조로 중복을 허용하는 자료구조입니다.

// 선언
List<Integer> arrayList = new ArrayList<>();
List<Integer> linkedList = new LinkedList<>();

//할당부의 new ArrayList<>()의 <>()는 각각 제너릭 옵션,초기화 옵션이다.

// 배열에서 초기화
Integer[] array = {1, 2, 3, 4, 5};
List<Integer> listFromArray = new ArrayList<>(Arrays.asList(array));

// 리스트의 제너릭 옵션으로 리스트를 받을 수 있다.
// 보통 정점-간선 느낌의 그래프를 선언할때 해당 방식 씀
    private List<List<Integer>> adjList;

    public Graph(int vertices) {
        // 정점 수만큼 용량 지정
        adjList = new ArrayList<>(vertices);

        // 각 정점마다 빈 리스트 초기화
        for (int i = 0; i < vertices; i++) {
            adjList.add(new ArrayList<>());
        }
    }

• arraylist : 배열 기반이므로 인덱스 접근이 빠름.
• linkedlist : 이중 연결 리스트 기반이므로 삽입,삭제가 빠름.

1-1) 메소드(CRUD)

// 추가
list.add(element);              // 끝에 추가
list.add(index, element);       // 특정 위치에 삽입
list.addAll(collection);        // 다른 컬렉션 전체 추가

// addAll은 리스트에 리스트를 넣는다고 생각하면 됨
List<Integer> list1 = new ArrayList<>(Arrays.asList(1, 2, 3));
List<Integer> list2 = new ArrayList<>(Arrays.asList(4, 5, 6));

// - CASE 1
// list2의 모든 요소를 list1 끝에 추가
list1.addAll(list2);
System.out.println(list1); // [1, 2, 3, 4, 5, 6]

// - CASE 2
// 인덱스 1 위치에 list2 추가
list1.addAll(1,list2);
System.out.println(list1); // [1, 4, 5, 6, 2, 3]

// 조회
list.get(index);               // 인덱스로 조회
list.size();                   // 크기 반환
list.isEmpty();                // 비어있는지 확인

// 삭제
list.remove(index);            // 인덱스로 삭제
list.remove(element);          // 객체로 삭제
list.clear();                  // 전체 삭제

1-2) 메소드(검색 및 확인)

list.contains(element);        // 요소 포함 여부(boolean)
list.indexOf(element);         // 중복일 경우 처음에 나타나는 요소의 인덱스 번호
list.lastIndexOf(element);     // 마지막 인덱스

1-3) 메소드(정렬)

Collections.sort(list)
Collections.reverse(list)

2. 스택

스택은 위에 작성한 자바의 Arraylist와 linkedlist로 구현이 가능합니다.

3. 큐

큐는 Arraylist보단 Linkedlist로 구현하는것이 더 효율적입니다

• Arraylist로 구현 시 poll() 연산에서 시간복잡도가 O(n)

3-1) 큐 연산

queue.offer(1) // 큐 뒤쪽에 연산 추가

queue.poll() // 큐 앞쪽 요소 제거하고 *반환*

queue.peek() // 큐 앞쪽 요소 조회 (제거 안함)

queue.isEmpty() // 큐가 비어있는지 확인

3-2) 큐 & BFS

public void bfs(int[][] graph, int start) {
    Queue<Integer> queue = new LinkedList<>();
    boolean[] visited = new boolean[graph.length];

    queue.offer(start);
    visited[start] = true;

    while (!queue.isEmpty()) {
        int current = queue.poll();
        System.out.print(current + " ");

        // 인접한 모든 노드를 큐에 추가
        for (int i = 0; i < graph[current].length; i++) {
            if (graph[current][i] == 1 && !visited[i]) {
                queue.offer(i);
                visited[i] = true;
            }
        }
    }
}

큐는 추후에 정리할 너비 우선 탐색기법인 BFS에서 주로 사용합니다.

3-3) 큐의 구현체

// 1. LinkedList
Queue<Integer> queue = new LinkedList<>();
// 장점: offer/poll 모두 O(1)
// 단점: 메모리 오버헤드

// 2. ArrayDeque
Queue<Integer> queue = new ArrayDeque<>();
// 장점: 메모리 효율적, 빠른 성능
// 단점: 없음 (대부분의 경우 최선)
// 웬만하면 이거 사용

// * Arraylist로는 큐 구현하지 말기

4. 우선순위 큐(PriorityQueue)

우선순위 큐는 큐 내에서 우선순위가 높은 요소가 먼저 나오는 자료구조입니다. 최소 힙으로 구현되어 있으며, 숫자가 작을수록 높은 우선순위입니다.

• 힙 구조라 큐 자체는 정렬된 순서가 아님

4-1) 우선순위 큐 구현

// 1. 기본
PriorityQueue<Integer> minHeap = new PriorityQueue<>();

// 2. 역순으로 구현
PriorityQueue<Integer> maxHeap = new PriorityQueue<>(Collections.reverseOrder());

// 3. 커스텀 정렬
// 절댓값 기준 정렬
PriorityQueue<Integer> absHeap = new PriorityQueue<>((a, b) -> {
    if (Math.abs(a) == Math.abs(b)) {
        return a - b;  // 절댓값 같으면 더 작은 수 우선
    }
    return Math.abs(a) - Math.abs(b);
});

etc) 큐,리스트의 용량 및 성능

큐나 Array리스트 선언 시 초기 용량을 설정해주는 편이 더 성능이 좋아지는 특징이 있습니다.

자료구조의 용량이 예상 가능하면 선언시 용량을 설정해주는 편이 좋습니다.

// 문제의 범위가 1~10000이면
List<Integer> result = new ArrayList<>(10000);

• 용량 지정이 없을경우 요소가 추가될때마다 재할당 및 요소 복사됨
• 용량 지정해줄 경우 추가만 됨

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

문제를 간략하게 요약하자면

기능 값 모양으로 입력받으며 기능에 따라 값을 넣을지 뺄지를 선택하는 것이다.

D 1 : 큐의 최댓값 삭제 D -1 : 큐의 최소값 삭제 I n : n이란값을 넣기

최종적으로 최댓값 최소값 형태를 출력하는 것이고 만약 큐가 비어있다면 empty 를 출력한다.

1. 내 풀이

import java.util.*;
import java.io.*;

public class Main{
    public static void Que(String[] input,PriorityQueue<Integer> upperqueue,PriorityQueue<Integer> lowerqueue){
        // 우선순위큐를 2개 써서 하나는 오름차순 하나는 내림차순 으로 사용함

        String order = input[0];
        int num = Integer.parseInt(input[1]);

        if(Objects.equals(order, "D")){
            if(num==-1){
                Integer a = upperqueue.poll(); // 최소값
                if(a!=null){
                    lowerqueue.remove(a);
                }

            }
            else{
                Integer a = lowerqueue.poll(); // 최댓값
                if(a!=null){
                    upperqueue.remove(a);
                }

            }
        }
        else{
            upperqueue.add(num);
            lowerqueue.add(num);
        }

    }
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));

        int tc = Integer.parseInt(bf.readLine());

        for(int i=0;i<tc;i++){
            PriorityQueue<Integer> upperqueue = new PriorityQueue<>();
            PriorityQueue<Integer> lowerqueue = new PriorityQueue<>(Collections.reverseOrder());
            int ordercount = Integer.parseInt(bf.readLine());
            for(int j=0;j<ordercount;j++){
                String[] input = bf.readLine().split(" ");
                Que(input,upperqueue,lowerqueue);
            }
            StringBuilder sb = new StringBuilder();
            if(upperqueue.isEmpty() && lowerqueue.isEmpty()){
                sb.append("EMPTY");
            }
            else{
                sb.append(lowerqueue.peek()).append(" ").append(upperqueue.peek());
            }
            System.out.println(sb);
        }
    }
}

나는 우선 순위 큐를 사용하였다.

PriorityQueue<Integer> upperqueue = new PriorityQueue<>();
PriorityQueue<Integer> lowerqueue = new PriorityQueue<>(Collections.reverseOrder());

PriorityQueue는 기본적으로 어떤 값이 들어와도 오름차순 형태로 정렬해주는 Queue 자료구조다.
PriorityQueue 뒤에 Collections.reverseOrder()) 를 사용하면 역순으로 정렬해준다.
PriorityQueue의 peek() , poll() 을 사용하여 각 큐에서 최솟값, 최댓값을 추출할 생각이다.

public static void Que(String[] input,PriorityQueue<Integer> upperqueue,PriorityQueue<Integer> lowerqueue){
        // 우선순위큐를 2개 써서 하나는 오름차순 하나는 내림차순 으로 사용함

        String order = input[0];
        int num = Integer.parseInt(input[1]);

        if(Objects.equals(order, "D")){
            if(num==-1){
                Integer a = upperqueue.poll(); // 최소값
                if(a!=null){
                    lowerqueue.remove(a);
                }
            }
            else{
                Integer a = lowerqueue.poll(); // 최댓값
                if(a!=null){
                    upperqueue.remove(a);
                }
            }
        }
        else{
            upperqueue.add(num);
            lowerqueue.add(num);
        }

    }

poll() 과 peek()은 큐가 비었을 경우 null을 반환시킨다.

따라서 추출한 값이 null이 아닌 경우(실제로 추출했을때)만 다른 큐도 똑같이 해당 값을 삭제해줘서 두개의 큐를 동기화 시켜줬다.
로직만으로는 정상 작동하였지만 시간초과가 발생하였다.

2. 문제점

시간초과의 원인은 Queue.remove(num) 에서 발생하였다. Queue.remove(num) 은 내부를 선형 탐색하여 값을 찾는것으로 한쪽에서 값을 삭제(추출) 시키면 다른쪽에서 해당 값을 찾는데 처음부터 끝까지 순회해서 찾아야 한다.
따라서 개수가 많아질수록 당연히 선형 탐색하는 시간이 길어져 시간초과가 날 수 밖에 없다.

3. 해결법

3-1. Lazy detection + clean()

이번에 처음 듣는 기법이였다.

• Lazy detection Lazy detection은 두개의 큐를 동기화할때 한쪽만 처리하고 나머지 큐는 Map을 통해 검증하여 쓰레기값일 경우 그냥 없애버리는 방식이다.
  해당 기법의 가장 핵심은 ```Map cnt``` 를 통한 유효 카운팅을 이용해 유효 값만 남기고 나머지는 버려버리는 기법이다.
  ```java upperqueue.add(x); lowerqueue.add(x);

if (map.containsKey(x)) { map.put(x, map.get(x) + 1); } else { map.put(x, 1); }

x라는 값을 두 큐에 넣었을 경우 ```map``` 자료구조에 해당 값이 몇개 있는지 넣어준다.

```java
static void clean(PriorityQueue<Integer> pq, Map<Integer,Integer> cnt) {
    while (!pq.isEmpty()) {
        int x = pq.peek();
        Integer c = cnt.get(x);
        if (c == null || c == 0) pq.poll(); // 구식 값 버리기
        else break; // 유효한 값이면 멈춤
    }
}

여기가 가장 중요한 곳이다. 큐의 head값을 검사하여 map에 더이상 없는(카운팅이 되지 않는)값일경우 전부 버려버린다. 언제까지 > 큐가 전부 비거나 유효값(아직 살아있는값)이 나올때까지 버린다.
위 방식을 이용하면 결론적으로 선형 큐를 딱 한번만 탐색하는 모습이 그려진다.
clean() 함수가 동작하는 작은 예시로

I 3
I 3
I 2
D 1

라는 테스트케이스가 있다고 가정하자.

• case1 (I 3)

  minPQ = [3]
  maxPQ = [3]
  cnt = {3:1}

• case2 (I 3)

  minPQ = [3,3]
  maxPQ = [3,3]
  cnt = {3:2}

• case3 (I 2)

  minPQ = [2,3,3] // 오름차순 우선순위큐
  maxPQ = [3,3,2] // 내림차순 우선순위큐
  cnt = {3:2 , 2:1}

• case4 (D 1) 최댓값 삭제

  clean(maxPQ,cnt)
  maxPQ.peek() = 3 // cnt[3] = 2니까 유효한 상태임
  maxPQ.poll() // cnt[3] = 1 꺼냇으니까 1 줄어듬
  

clean(minPQ,cnt) minPQ.peek() = 2 // cnt[2] = 1니까 유효한 상태임 건드리기x

결론적으로 최종 코드는
```java
import java.util.*;
import java.io.*;

public class Main {

    // pq의 꼭대기에 이미 반대쪽에서 소진되어 유효하지 않은 값(= cnt[x]==0)이 올라와 있으면
    // 그 값을 버리면서( poll ) 유효한 값이 나올 때까지 정리해주는 함수
    static void clean(PriorityQueue<Integer> pq, Map<Integer, Integer> cnt) {
        while (!pq.isEmpty()) {
            int x = pq.peek();
            Integer c = cnt.get(x);
            if (c == null || c == 0) {
                pq.poll(); // 구식(stale) 값 제거
            } else {
                break;     // 유효한 값이면 중단
            }
        }
    }


    public static void Que(String[] input,
                           PriorityQueue<Integer> minPQ,
                           PriorityQueue<Integer> maxPQ,
                           Map<Integer,Integer> cnt) {

        String order = input[0];
        int num = Integer.parseInt(input[1]);

        if (order.equals("I")) {
            // 삽입: 두 힙에 모두 넣고 유효 개수 +1
            minPQ.offer(num);
            maxPQ.offer(num);
            cnt.put(num, cnt.getOrDefault(num, 0) + 1);
        } else { // "D"
            if (num == 1) { // 최댓값 삭제
                clean(maxPQ, cnt);
                if (!maxPQ.isEmpty()) {
                    int top = maxPQ.poll();
                    int c = cnt.get(top) - 1;
                    if (c == 0) cnt.remove(top);
                    else cnt.put(top, c);
                }
            } else {        // num == -1, 최솟값 삭제
                clean(minPQ, cnt);
                if (!minPQ.isEmpty()) {
                    int top = minPQ.poll();
                    int c = cnt.get(top) - 1;
                    if (c == 0) cnt.remove(top);
                    else cnt.put(top, c);
                }
            }
        }
    }

    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        StringBuilder out = new StringBuilder();

        int tc = Integer.parseInt(bf.readLine());

        for (int i = 0; i < tc; i++) {
            int ordercount = Integer.parseInt(bf.readLine());

            PriorityQueue<Integer> minPQ = new PriorityQueue<>();                         // 최소힙
            PriorityQueue<Integer> maxPQ = new PriorityQueue<>(Collections.reverseOrder()); // 최대힙
            Map<Integer,Integer> cnt = new HashMap<>();                                    // 유효 개수 카운트

            for (int j = 0; j < ordercount; j++) {   // ← j 사용 주의!
                String[] input = bf.readLine().split(" ");
                Que(input, minPQ, maxPQ, cnt);
            }

            // 출력 전 최종 정리
            clean(minPQ, cnt);
            clean(maxPQ, cnt);

            if (cnt.isEmpty()) {
                out.append("EMPTY\n");
            } else {
                out.append(maxPQ.peek()).append(' ').append(minPQ.peek()).append('\n');
            }
        }

        System.out.print(out.toString());
    }
}

3-2. Treemap

PQ는 head만 처리하고 tail은 처리하지 않아 Lazy Detection 기법을 사용해서 풀어야만 했다.

하지만, 중복을 허용하면서 정렬 기반 자료구조며 tail도 처리 가능한 자료구조인 Treemap을 사용하는 방법이 오히려 이 문제에 더 적합한 자료구조다.

• 전체 코드

  import java.io.*;
  import java.util.*;
  

public class Main { public static void main(String[] args) throws Exception { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringBuilder out = new StringBuilder(); int T = Integer.parseInt(br.readLine());

    for (int tc = 0; tc < T; tc++) {
        int k = Integer.parseInt(br.readLine());
        TreeMap<Integer, Integer> map = new TreeMap<>();

        for (int i = 0; i < k; i++) {
            StringTokenizer st = new StringTokenizer(br.readLine());
            String op = st.nextToken();
            int x = Integer.parseInt(st.nextToken());

            if (op.equals("I")) {
                map.put(x, map.getOrDefault(x, 0) + 1);
            } else { // "D"
                if (map.isEmpty()) continue; // 비었으면 무시
                if (x == 1) { // 최댓값 삭제
                    Map.Entry<Integer,Integer> e = map.lastEntry();
                    int cnt = e.getValue() - 1;
                    if (cnt == 0) map.pollLastEntry(); else map.put(e.getKey(), cnt);
                } else {      // 최솟값 삭제
                    Map.Entry<Integer,Integer> e = map.firstEntry();
                    int cnt = e.getValue() - 1;
                    if (cnt == 0) map.pollFirstEntry(); else map.put(e.getKey(), cnt);
                }
            }
        }

        if (map.isEmpty()) out.append("EMPTY\n");
        else out.append(map.lastKey()).append(' ').append(map.firstKey()).append('\n');
    }
    System.out.print(out.toString());
}

}

위 코드를 살펴보면
```java
if (map.isEmpty()) continue;

우선 삭제 명령인 D가 들어갔는데 맵이 비어있으면 아무것도 하지 않고 넘겨준다.

                    if (x == 1) { // 최댓값 삭제
                        Map.Entry<Integer,Integer> e = map.lastEntry();
                        int cnt = e.getValue() - 1;
                        if (cnt == 0) map.pollLastEntry(); else map.put(e.getKey(), cnt);
                    } else {      // 최솟값 삭제
                        Map.Entry<Integer,Integer> e = map.firstEntry();
                        int cnt = e.getValue() - 1;
                        if (cnt == 0) map.pollFirstEntry(); else map.put(e.getKey(), cnt);
                    }

최댓값 삭제일 경우 오름차순 정렬이므로 가장 뒤에 있는 값의 Entry를 가져온다. 여기서 Entry는 (key,value)쌍을 담는 객체다. 최댓값을 추출했으므로 해당 값의 카운팅(cnt)를 하나 줄여준 뒤에 값을 검사한다. cnt가 0이면 더이상 필요없는 값이므로 map에서 없애준다 pollLastEntry cnt가 0이 아니면 값만 갱신해준다. map.put

if (map.isEmpty()) out.append("EMPTY\n");
else out.append(map.lastKey()).append(' ').append(map.firstKey()).append('\n');

결론적으로 정렬된 map을 통해 최대,최소 혹은 비어있는지 유무까지 검사하여 최종 답안을 도출할 수 있다.

두 영어 단어가 철자의 순서를 뒤바꾸어 같아질 수 있을 때, 
그러한 두 단어를 서로 애너그램 관계에 있다고 한다. 
예를 들면 occurs 라는 영어 단어와 succor 는 서로 애너그램 관계에 있는데, 
occurs의 각 문자들의 순서를 잘 바꾸면 succor이 되기 때문이다.

한 편, dared와 bread는 서로 애너그램 관계에 있지 않다. 
하지만 dared에서 맨 앞의 d를 제거하고, bread에서 제일 앞의 b를 제거하면,
ared와 read라는 서로 애너그램 관계에 있는 단어가 남게 된다.

두 개의 영어 단어가 주어졌을 때, 
두 단어가 서로 애너그램 관계에 있도록 만들기 위해서 제거해야 하는 최소 개수의 문자 수를 구하는 프로그램을 작성하시오. 
문자를 제거할 때에는 아무 위치에 있는 문자든지 제거할 수 있다.

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

2. 내 풀이

import java.io.*;
import java.sql.Array;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Objects;
import java.util.stream.Collectors;


public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        String word1 = bf.readLine();
        String word2 = bf.readLine();

        String[] parts1 = word1.split("");
        String[] parts2 = word2.split("");

        Arrays.sort(parts1);
        Arrays.sort(parts2);
        int count1 = 0;
        int count2 = 0;
        for(int i=0;i<parts1.length;i++){
            for(int j=0;j<parts2.length;j++){
                if(Objects.equals(parts1[i], parts2[j])){
                    parts1[i]="0";
                    parts2[j]="0";
                    count1++;
                    count2++;
                    break;
                }
            }
        }
        int result = parts1.length-count1 + parts2.length-count2;
        bw.write(result+"");
        bw.flush();
        bw.close();
    }
}

3. 다른 풀이

import java.io.*;
import java.util.Arrays;
import java.util.List;
import java.util.ArrayList;
import java.util.Scanner;


public class Main {
    public static void main(String[] args) throws IOException {
            Scanner sc = new Scanner(System.in);

            String a = sc.next();
            String b = sc.next();

            int[] countA = new int[26];
            int[] countB = new int[26];

            for(int i=0;i<a.length();i++){
                countA[a.charAt(i)-'a']++; // char - char 계산은 아스키코드로 변환 후 정수 계산 방식으로 전환된다.
            }
            for(int i=0;i<b.length();i++){
                countB[b.charAt(i)-'a']++;
            }

            int answer = 0;
            for(int i=0;i<26;i++){
                if(countA[i]>countB[i]){ // A의 단어 갯수가 더 많은 경우
                    answer += countA[i]-countB[i]; // 만약 a,b 둘다 가지고 있는 단어지만 A가 더 많을 경우 A에서 지워야 할 갯수를 알려준다.
                }
                if(countB[i]>countA[i]){
                    answer += countB[i]-countA[i];
                }
            }
            System.out.println(answer+"");
    }
}

아스키 코드를 이용한 방법이다.

char-char 를 통해 정수 방식으로 계산하여 몇 번째 인덱스인지 확인하는 방법이다.

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

정수를 저장하는 큐를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.

명령은 총 여섯 가지이다.

push X: 정수 X를 큐에 넣는 연산이다.
pop: 큐에서 가장 앞에 있는 정수를 빼고, 그 수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.
size: 큐에 들어있는 정수의 개수를 출력한다.
empty: 큐가 비어있으면 1, 아니면 0을 출력한다.
front: 큐의 가장 앞에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.
back: 큐의 가장 뒤에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.

#입력
첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 2,000,000)이 주어진다. 
둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 
주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 
문제에 나와있지 않은 명령이 주어지는 경우는 없다.

2. 내 풀이

import java.io.*;
import java.util.List;
import java.util.ArrayList;


public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));


        int count = Integer.parseInt(bf.readLine()); // 명령의 갯수
        List<Integer> queue = new ArrayList<>();

        for(int i=0;i<count;i++){
            String input = bf.readLine();
            String[] part = input.split(" ");

            String order = part[0];
            int value=0;
            if(part.length==2){
                value = Integer.parseInt(part[1]);
            }
            switch (order) {
                case "push":
                    queue.add(value);
                    break;
                case "pop":
                    if (queue.isEmpty()) {
                        bw.write(-1 + "\n");
                    } else {
                        int popnum = queue.get(0);
                        queue.remove(Integer.valueOf(popnum));
                        bw.write(popnum + "\n");
                    }
                    break;
                case "size":
                    bw.write(queue.size() + "\n");
                    break;
                case "empty":
                    int isEmpty = queue.isEmpty() ? 1 : 0;
                    bw.write(isEmpty + "\n");
                    break;
                case "front":
                    if (queue.isEmpty()) {
                        bw.write(-1 + "\n");
                    } else {
                        bw.write(queue.get(0) + "\n");
                    }
                    break;
                case "back":
                    if (queue.isEmpty()) {
                        bw.write(-1 + "\n");
                    } else {
                        bw.write(queue.get(queue.size() - 1) + "\n");
                    }
                    break;
                default:
                    break;
            }
        }
        bw.flush();
        bw.close();

    }

}

큐는 동적으로 크기가 변환되는 특징을 가지고 있기 때문에 java의 배열로는 구현이 힘들다고 생각했다.

따라서 ArrayList를 이용하여 동적 배열 및 switch를 통해 메소드 case에 따른 동작을 지정해주었다.

하지만, 위 코드는 시간초과가 났다.

내 코드의 문제점은 다음과 같았다.

1. ArrayList를 큐로 사용한 점

• ArrayList를 큐로 사용하면 queue.remove(0)같은 연산은 O(N) 만큼의 시간이 걸린다
• ArrayList 대신 LinkedList나 ArrayDequeue 사용
• 또한 큐 구현에는 Dequeue가 더 적합하다.

  2. queue.remove(Integer.valueOf(popnum));

• pop 에서 작성한 코드인데 어차피 맨 앞의 인덱스 빼는건데 왜 굳이 이렇게 사용했는지 모르겠음

3. 최종 풀이

import java.io.*;
import java.util.Deque;
import java.util.ArrayDeque;

public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        int count = Integer.parseInt(bf.readLine());
        Deque<Integer> queue = new ArrayDeque<>();

        for (int i = 0; i < count; i++) {
            String input = bf.readLine();
            String[] part = input.split(" ");

            switch (part[0]) {
                case "push":
                    queue.addLast(Integer.parseInt(part[1]));  // O(1) 연산
                    break;
                case "pop":
                    bw.write(queue.isEmpty() ? "-1\n" : queue.pollFirst() + "\n");  // O(1) 연산
                    break;
                case "size":
                    bw.write(queue.size() + "\n");
                    break;
                case "empty":
                    bw.write(queue.isEmpty() ? "1\n" : "0\n");
                    break;
                case "front":
                    bw.write(queue.isEmpty() ? "-1\n" : queue.peekFirst() + "\n");
                    break;
                case "back":
                    bw.write(queue.isEmpty() ? "-1\n" : queue.peekLast() + "\n");
                    break;
            }
        }
        bw.flush();
        bw.close();
    }
}

• Dequeue<Integer> queue = new ArrayDequeue<>(); 를 통해 큐 구현
• 정수를 입력하는 push에만 part[1] (사용자입력란) 넣어줌
• Dequeue 내 메소드 ex)pollFirst , peekFirst , peekLast 사용

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

무한히 큰 배열에 다음과 같이 분수들이 적혀있다. 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … … 3/1 3/2 3/3 … … … 4/1 4/2 … … … … 5/1 … … … … … … … … … … … 이와 같이 나열된 분수들을 1/1 → 1/2 → 2/1 → 3/1 → 2/2 → … 과 같은 지그재그 순서로 차례대로 1번, 2번, 3번, 4번, 5번, … 분수라고 하자. X가 주어졌을 때, X번째 분수를 구하는 프로그램을 작성하시오.

2. 내 풀이

대각선 경로 하나당 한 사이클의 규칙을 찾아 코드를 작성했다

import java.io.*;
import java.util.ArrayList;
import java.util.Arrays;

import java.util.Objects;


public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        int input = Integer.parseInt(bf.readLine());
        int count = 1; // 현재 수
        int check = 1; // 기준 수

        while(true){
            if(input==1){
                bw.write("1/1");
                break;
            }
            if(count+check<input){
                count=count+check; // 현재 수
                check++; // 기준 수 증가
            }
            else if(count+check>input){
                bw.flush();
                int k =(input-count)+1;
                int n =(count+check)-input;
                if(check%2==1){
                    //기준 수가 홀수일 경우
                    bw.write(n+"/"+k);
                    bw.flush();
                    break;
                }
                else{
                    // 기준 수가 짝수일 경우
                    bw.write(k+"/"+n);
                    bw.flush();
                    break;
                }
            }
        }



        bw.close();

    }

}

위 풀이는 시간초과가 걸렸다.

생각해보니까 count+check == input 인 경우를 if문에 넣어주지 않았다. (위 이유때문에 특정 수에서 무한루프 돌았음)

하지만 위 조건을 넣어줄 경우 input이 2일때 바로 결과를 출력하는 if문으로 넘어가게 된다.

바로 넘어갈 경우 기준 수가 1인데 두번째 라인에서 함수가 돌고있는 엉뚱한 상황이 발생한다.

처음에 시간초과가 떳길래 풀이를 찾아봤는데 나랑 똑같은 로직이라 일부분을 수정하여 리팩토링 하였다.(변수명 변경 등등)

3. 최종 풀이

import java.io.*;


public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        int input = Integer.parseInt(bf.readLine());
        int prevLastnum = 0; // 이전 라인의 마지막 수
        int cross_count = 1; // 이번 라인에서의 분수의 나열 갯수

        while(true){
            if(input==1){
                bw.write("1/1");
                break;
            }
            if(prevLastnum + cross_count <input){
                prevLastnum = prevLastnum + cross_count; // 이전 라인의 마지막 수 증가(범위 내에 없으므로 끝까지 보냄)
                cross_count++; // 다음라인(분수 나열갯수 증가)
            }
            else if(prevLastnum + cross_count >=input){
                bw.flush();
                int k =(input- prevLastnum);
                int n =(prevLastnum + cross_count)-input+1;
                if(cross_count %2==1){
                    //라인 수가 홀수일 경우
                    bw.write(n+"/"+k);
                    bw.flush();
                    break;
                }
                else{
                    // 라인 수가 짝수일 경우
                    bw.write(k+"/"+n);
                    bw.flush();
                    break;
                }
            }
        }



        bw.close();

    }

}

Java.lang.String 으로 사용되는 java 문자열 클래스인 String은 별도의 import 없이 사용 가능하다.

01-1. 문자열 수정

• 한 번 인스턴스가 생성되면 수정 할 수 없음

  String str = "abcdef";
  str[4] = 'E';
  System.out.println(str); // 컴파일 에러

• 값의 변경은 불가능하지만 새 String을 만들어서 바꿀 수는 있음.

  String str = "abcdef";
  str = "ABCDEF";
  System.out.println(str); // ABCDEF
  

======================================

String str = "abcdef"; char[] temp_arr = str.toCharArray(); // 배열로 변환 temp_arr[4] = 'E'; str = new String(temp_arr) // 배열을 string으로 변환 후 기존 str에 대입 System.out.println(str)// abceEf

### 01-2. 서로 같은 두 문자열


java에서 ```==``` 연산은 주소값을 비교하기 때문에 다음과 같은 경우에는 서로 다른 주소이므로 false가 발생한다

```java
String str1 = "abc"; 
String str2 = new String("abc"); 

str1==str2 // false 

리터럴 방식으로 선언한 서로 같은 두 문자열을 비교 시 true를 반환한다.

리터럴 방식으로 선언하면 String Constant Pool 이라는 영역에 할당된다.

// 리터럴 방식 선언
String str_literal1 = "test";
String str_literal2 = "test";
str_literal1 == str_literal2 // true

위와 같이 선언하면 String constant pool 영역 내에 "test"가 할당되고 두개 모두 하나의 "test"를 가르키게 된다.

따라서 비교시 true가 나옴

반면 객체 방식으로 선언한 서로 같은 두 문자열을 비교하면 false를 반환한다.

// 객체 방식 선언
String str_object1 = new String("test");
String str_object2 = new String("test");

str_object1==str_object2 // false

기존에 같은 값을 가지고 있는 string이 heap 영역에 있더라도 따로 확인하지 않고 새로운 주소에 선언하기 때문.

String의 value를 비교하는 방법은 .equals(value) 를 사용하면 된다.

String str_literal1 = "test";

String str_object1 = new String("test");
String str_object2 = new String("test");

str_literal1.equals(str_object1) // true
str_literal1.equals(str_object2) // true
str_object1.equals(str_object2) // true

• 자주 사용하는 String Methods

2025.01.22

CORS란 특정 유형의 악성 웹 콘텐츠로부터 사용자를 보호하기 위해 만들어진 보안 메커니즘이다.

웹 페이지나 애플리케이션이 제공하는 출처가 아닌 다른 출처의 리소스와 상호 작용할 수 있는 방법을 결정하는 규칙이다.

1. SOP

CORS를 사용하기 전에 SOP를 먼저 알아두면 좋다.

Same Origin Policy 동일 출처 정책, 같은 출처의 리소스만 공유 가능하다.

URL은 Protocol / Host / Path 로 나뉘어지는데 이 3개가 모두 동일하면 같은 출처라고 볼 수 있다.

하나라도 다르면 다른 출처라고 인식된다.

만약 로그인 토큰이 어떠한 방법으로 인해 탈취당한 후 악성 사용자가 토큰을 이용해 부정적인 이득을 취하려 해도 동일 출처가 아니기 때문에 SOP에 위배된다.

하지만, 다른 출처의 접근도 허용할 경우가 생긴다. 이때 사용하는 것이 CORS이다.

2. CORS

CORS는 다른 출처의 자원을 공유하는 것으로 크게 3가지 동작 방식이 있다.

• Preflight Request
• Simple Request
• Credentialed Request

Preflight Request는 실제 요청을 보내기 전, Option 메서드로 사전 요청을 보내 접근 권한이 있는지 확인하는 요청이다.

Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보내게 된다.

simple Request 는 특정 조건이 만족되면 프리폴라이트 요청을 생략하고 보내는 것이다.

조건에는 GET,HEAD,POST 요청 중 하나이며 Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정하 수 있어야 한다.

2.Proxy

React 라이브러리에서 CORS를 우회하는 방법이 있는데 그것이 바로 proxy다.

Proxy를 적용하기 전의 흐름

Proxy를 적용한 후 흐름

Proxy를 사용하는 방법엔 두 가지가 있다.

첫 번째는 webpack dev server에서 제공하는 proxy 기능을 이용하는 방법이 있다.

package.json에서 proxy를 설정해줄 수 있다.

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
    "proxy" : "우회할 API 주소"
}

그 후, 기존의 api call 코드에서 도메인 부분을 제거한다.

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
            ...
        })
}


export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
            ...
        })
}

React에서 proxy를 사용하는 다른 방법은 http-proxy-middleware 라이브러리를 설치하는 것이다.

npm install http-proxy-middleware --save 로 설치 후

// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

프록시 setup파일을 설정해준다.

CD는 지속적인 서비스 제공 및 지속적인 배포를 의미한다.

CI를 성공적으로 구현할 경우, app에 대해 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 repo에 통합되므로, 여러 명의 개발에 대한 코드가 서로 충돌할 수 있는 문제를 해결할 수 있다.

1. CI(지속적 통합)

일반적인 개발의 단계는 다음과 같다.

Code - Build - Test 단계에서 CI를 고려해 볼 수 있다.

• Code : 개발자가 코드를 원격 저장소에 PUSH 하는 단계
• Build : 원격 저장소에서 코드를 가져와 테스트 후 빌드하는 단계
• Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 확인하는 과정

이 과정에서 지속적으로 코드를 push하고 build하며 해당 build의 Test 결과를 통해 개선 방안을 찾는다.

이러한 과정을 통해 개발자는 버그를 일찍 발견할 수 있고 테스트가 완료된 코드에 빠른 전달이 가능해진다.

위와 같은 지속적 통합을 통해 보안 이슈, 에러 등을 빠르게 파악할 수 있으며 보다 더 훨씬 효율적인 개발이 가능하다.

2. CD(지속적 배포)

Release - Deploy - Operate 단계에서 지속적 배포를 고려해 볼 수 있다.

• Release : 배포 가능한 소프트웨어 패키지 작성
• Deploy : 프로비저닝을 실행하고 서비스를 사용자에게 노출, 실질적인 배포 부분
• Operate : 서비스 현황을 파악하고 생길 수 있는 문제를 감지함.

지속적 배포의 경우, 코드 변경 사항의 병합부터 프로덕션에 적합한 빌드 제공에 이르는 모든 단계를 뜻한다.

이 프로세스를 완료하면, Repo에 자동으로 배포가 가능하므로 운영팀이 보다 빠르고 손쉽게 App을 배포할 수 있게 된다.

3. Github Action

Github Action은 Github 내에서 위와 같은 CI/CD의 자동화를 제공하는 플랫폼이다.

Repo에서 PR 이나 push 같은 트리거로 워크플로우를 구성할 수 있다.

이 때, 워크플로우는 자체 가상 머신에서 실행된다.

.yml 파일 내에서 워크플로우가 구성 되며 .github/workflows 디렉토리 아래에 위치된다.

# .github/workflows/client.yml
name: client // 현재 디렉토리 이름
on: // 트리거
  push: 
    branches:
      - main // 현재 branch
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install // 실행하는 npm
        working-directory: ./my-agora-states-client-react
      - name: Build
        run: npm run build
        working-directory: ./my-agora-states-client-react
      - name: SHOW AWS CLI VERSION
        run: aws --version
      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync \
            --region ap-northeast-2 \
            build s3://fe-99-limjaesub-s3 \
            --delete
        working-directory: ./my-agora-states-client-react

여기서 env 부분의 AWS key 부분은 직접적으로 입력하면 AWS에서 보안상의 이유로 접근을 거부할 수 있다.

따라서, Github Action에서 Secret Key를 설정해줘야한다.

S3에서 잘 보이는것을 확인할 수 있다.

타입스크립트의 Enum은 특정 값의 집합을 정의할 때 사용한다.

enum Color{
  Red,
  Green,
  Blue,
}

위 열거형에 값을 지정할 수도 있다.

enum Color{
  Red=1,
  Green=2,
  Blue=4,
}

지정한 값을 가지고 산술 연산도 수행이 가능하다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

숫자 말고도 문자로도 지정할 수 있다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

문자형 열거형은 다음과 같은 상황에서 정의하기 좋다.

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

HTTP 요청 방식을 열거형으로 정리하여 코드의 가독성과 안정성을 높였다.

숫자형 열거형에는 역 매핑 이란것이 존재한다.

enum Enum{
  A
}
let a = Enum.A;
let akey = Enum[a]; // A

2. Interface

타입스크립트에서 인터페이스는 타입 체크를 위해 사용이 된다.

interface User {
    name?: string;
    age: number;
}

const user1: User = {
    name: "anna",
    age: 20
}

const user2: User = {
    age: 20,
    name: "anna"
}

const user3: User = {
  age:20
}

인터페이스는 다음과 같이 객체처럼 사용될 수 있다.

다만, 반드시 정의된 프로퍼티를 사용해야 하며, ? 를 통해 선택적으로도 사용할 수 있다.

인터페이스는 함수도 정의할 수 있다.

interface User{
  name:string;
  age:number;
  job:string;
}

interface Greeting {
  (user:User,greeting:string):string; // 두 개의 매개변수와 리턴 타입
}

const greet:Greeting = (user,greeting)=>{
  return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

const user: User = {
    name: "anna",
    age: 30,
    job: "developer"
};

const message = greet(user, "Hi");

console.log(message);

인터페이스는 클래스와 같이 extends를 이용하여 기존 인터페이스를 상속해서 확장이 가능하다.

interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

또한, 여러 인터페이스를 상속받아 사용할 수도 있다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount { // 2개의 인터페이스를 FoodFreshness랑 사용가능
       isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

3. 타입 별칭

타입 별칭은 타입의 새로운 이름을 만드는 것이다.

type myType = string;

let str1:myType = "hello";

type Person = {
  id: number;
  name: string;
  email: string;
}

//Commentary 인터페이스에서 Person 타입을 참조하고 있습니다.
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

//객체에서 Commentary 인터페이스를 참조하고 있습니다.
let comment1: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
}

위처럼 타입별칭->인터페이스->객체 로 사용할 수 있다.

인터페이스와 비슷한 것 같지만, 차이점이 있다. 바로 타입 별칭은 인터페이스처럼 확장이 불가능하다.

ts는 js의 한계점을 극복하기 위해 만들어졌다.

let add = (x,y)=>{
  return x+y;
}
add(5,"7"); // "57"

Javascript는 위와 같은 코드에서 number타입의 변수를 강제적으로 문자열로 변환시켜서 원하지 않는 결과를 초래한다.

이런 문제점을 보완한 게 TypeScript다.

let add = (x:number,y:number):number=>{
  return x+y;
}
add(5,7); // 12

2. TypeScript의 타입

1. Boolean 타입

let imtrue:boolean = true;
let imfalse:boolean = false;

2. Number 타입

let number1:number = 5;
let number2:number = 0.1;

3. String 타입

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.

4. Array 타입

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

5. Tuple 타입

let user: [string, number, boolean] = ["kimcoding", 20, true];

요소의 타입과 갯수가 고정된 배열을 표현한다.

6. Object 타입

let user: {name: string, age: number} = {
    name: "kimcoding",
    age: 20
}

7. Any 타입

any 타입을 사용하게 되면 변수의 타입에 구애받지 않고 값을 재할당 가능하다.

let maybe: any = 4;


maybe = true;// 값 재할당이 정상적으로 이루어진다.

3. TypeScript의 함수

다음과 같은 함수를 Ts로 변환해보겠다.

// Javascript
function add(x, y){
    return x + y;
}

let add = (x, y) => {
    return x + y;
}


// TypeScript
function add(x: number, y: number):number {
    return x + y;
}

let add = (x: number, y: number): number => {
    return x + y;
}

함수의 리턴 값에도 Type을 명시해줘야 하며, 함수에 리턴값이 없는 함수는 void를 이용한다.

let consolePrint = ():void=>{
  console.log("hello");
}

또한 타입스크립트는 매개변수의 갯수에 맞춰서 인자를 전달해야한다.

let greeting = (firstName: string, lastName: string): string => {
    return `hello, ${firstName} ${lastName}`;
}

//error
greeting('coding');

//Good
greeting('coding', 'kim');

//error
greeting('coding', 'kim', 'hacker');

위 코드에서 선택적으로 매개변수를 보낼 경우(2갠데 1개만 보낼때) 매개변수의 이름 끝에 ?를 붙인다.

let greeting = (firstName: string, lastName?: string): string => {
    return `hello, ${firstName} ${lastName}`;
}

//Good
greeting('coding');

//Good
greeting('coding', 'kim');

//error
greeting('coding', 'kim', 'hacker');

4. Union & InterSection

1. Union Type

유니온 타입은 둘 이상의 타입을 합쳐서 만든 새로운 타입이다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

value에 number또는 string형태의 인자가 들어갈 수 있다.

다만, 아래와 같은 경우는 주의를 해야한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}



function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

name은 공통이지만, skill과 age는 공통이 아니라 사용할 수 없다.

위와 같은 경우는 in 연산자를 사용한다.

2. InterSection Type

인터섹션 타입은 유니온 타입과 마찬가지로 둘 이상의 타입을 결합한다.

다만 in 연산자를 사용하지 않아도 된다.(타입 가드가 필요 없음)

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
    console.log(someone.name);
    console.log(someone.skill);
}

대신 모든 프로퍼티를 전부 보내줘야한다.

반복되는 로직을 하나의 커스텀 훅으로 재사용 할 수 있다.

//FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트
function FriendStatus(props) {
      // 이부분
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
    // 이부분
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

//FriendListItem : 친구가 online일 때 초록색으로 표시하는 컴포넌트
function FriendListItem(props) {
      // 이부분
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
    // 이부분
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

지금 코드를 보면

const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };

부분이 중복되는 로직인 것을 확인할 수 있다.

따라서, 이것만 따로 빼서 customHook을 제작한다.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

이러한 커스텀 훅을 만들때는 규칙이 필요하다.

CUSTOM HOOK의 규칙

• Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙이다.
• 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치시킨다.
• Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안 된다. 그렇기 때문에 위의 이 useFriendStatus Hook은 온라인 상태의 여부를 boolean 타입으로 반환하고 있다.

위에서 만든 커스텀 hook인 useFriendStatus를 다른 컴포넌트에 적용시켜보겠다.

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

CUSTOM HOOK 예시

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState();

  useEffect(() => {
    fetch("data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        setData(myJson);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="App">
      <h1>To do List</h1>
      <div className="todo-list">
        {data &&
          data.todo.map((el) => {
            return <li key={el.id}>{el.todo}</li>;
          })}
      </div>
    </div>
  );
}

다음과 같은 코드가 있다.

useEffect 내부의 로직을 커스텀 훅으로 분리시키려고 한다.

// 1. custom hook
```jsx
import { useState, useEffect } from "react";
const useHooks = (fetchUrl) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetch(fetchUrl, {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        setData(myJson);
      })
      .catch((error) => {
        setError(error);
      });
  }, [fetchUrl]);

  return { data, error };
};

export default useHooks;

// 2. components
import "./styles.css";
import { useEffect, useState } from "react";
import useHooks from "./util/hooks";
export default function App() {
  const {data,error} = useHooks('data.json'); // Custom Hook 사용
  return (
    <div className="App">
      <h1>To do List</h1>
      <div className="todo-list">
        {data &&
          data.todo.map((el) => {
            return <li key={el.id}>{el.todo}</li>;
          })}
      </div>
    </div>
  );
}

하지만, 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.

이때, 사용하는 React Hook이 useMemo와 useCallback이다.

1. UseMemo

useMemo는 특정 값을 재사용하고자 할 때 사용한다.

function Calculator({value}){

    const result = calculate(value);

    return <>
      <div>
        {result}
      </div>
  </>;
}

위 컴포넌트는 값을 받아와서 calculate라는 함수에넣은 후 result값을 출력하는 함수다.

만약 calculate가 복잡한 연산을 하는 함수면, 렌더링을 할 때 마다 함수를 호출하여 오랜 시간이 걸릴 것이다.

만약, result의 값이 변하지 않는데도 불구하고 계속 렌더링이 되면 그만큼 성능이 떨어질 것이다.

import { useMemo } from "react";

function Calculator({value}){

    const result = useMemo(() => calculate(value), [value]);

    return <>
      <div>
        {result}
      </div>
  </>;
}

위 처럼 useMemo를 사용하면 변하지 않을 경우의 value값을 어딘가에 저장할 수 있다.

2.useCallback

useCallback은 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이며

useMemo는 값을 재사용하는 목적이지만, useCallback은 함수의 재사용을 위해 사용하는 hook이다.

function Calculator({x, y}){

    const add = () => x + y;

    return <>
      <div>
        {add()}
      </div>
  </>;
}

위와 같은 함수도 렌더링 될 떄마다 실행되게 된다.

하지만, 의존값인 x와 y가 바뀌지 않으면 함수를 그대로 사용해도 된다.

다만, param으로 값을 받는 함수는 해당이 되지 않는다.

import React, { useCallback } from "react";

function Calculator({x, y}){

    const add = useCallback(() => x + y, [x, y]);

    return <>
      <div>
        {add()}
      </div>
  </>;
}

useCallback은 props로 함수를 전달해줄 때 사용하기 좋다.

React는 리렌더링 시 함수를 새로이 만들어서 호출을 한다.

새로이 만들어 호출된 함수는 기존의 함수와 같은 함수가 아니다.

그러나 useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있다.

따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있는 효과가 있다.

0.시작하기

dom은 html 요소를 조작할수 있는 model이다. javascript로 HTML을 조작이 가능하다.

DOM을 이용하면 보다 동적인 웹 페이지 구현이 가능하다.

1. createElement

DOM조작을 script.js 파일에서 진행하겠다. div를 생성하려면 createElement를 사용한다

const newdiv = document.createElement("div");

하지만 현재 tree로 연결되있지 않는 공중부양 상태가되어 화면에 출력되지 않는다.

위 div를 출력하려면 append를 사용해야한다.

2.append

append를 사용해 상위 root에 연결시켜준다

document.body.append(newdiv);

div가 추가되는 것을 볼 수 있다. 하지만 안에 아직 아무런 내용도 없어서 화면에 보이지가 않는다.

내용을 넣으려면 textContent를 사용해야 한다.

3.Update & Read

div 생성 후 안에 내용과 class를 추가 하려고 한다.

const newdiv = document.createElement("div");
newdiv.textContent = "hello";
newdiv.classList.add("tweet");

textcontent로 내용을 추가해주고 classList.add로 class까지 추가해줘서 css를 적용받게 한다.

다만 새 div의 부모요소는 container여야기 때문에 container에 append를 해줘야한다.

container를 받아오는 방법에는 querySelector가 있다.

const container = document.querySelector("#container");
container.append(newdiv);

잘 적용되는 것을 볼 수 있다.

4.Delete

요소를 삭제하는 방법은 다양하다.

1. remove

   newdiv.remove()

혹은 특정 class를 선언하고 remove로 삭제를 해도 된다

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})

2.innerHTML(여러개 지우기)

document.querySelector("#container").innerHTML="";

이 방법을 쓰면 id가 container인 자식 요소를 모두 지운다. 하지만 innerHTML은 보안에서 몇 가지 문제를 가지고 있으므로 다른 방법을 사용하는 편이 좋다.

3.removeChild+반복문

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

위 코드는 첫번째 자식요소가 남아있으면 첫번째 자식요소를 삭제하는 코드다.

위 방법중 상황에 맞는 것을 찾아 사용하면 될 것 같다.

5.append

사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져온다. 다시 말해, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체다.

이벤트를 직접 출력시켜 보면 맨 밑에 Type란이 나오는데

위 이벤트는 onClick으로 진행 된 Type이다.

let menus = document.querySelectorAll("button"); 

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; 

function handleClick(e) {
  let currentMenu = e.target; 
  console.log(currentMenu + "를 클릭하셨습니다.");
}

따라서 각 버튼마다 target이 설정되므로 밑의 함수처럼 event를 param으로 받아 출력이 가능하다.

자료구조 Tree는 나무의 형태를 띈 계층적 자료구조다.

하나의 데이터 아래 여러 개의 데이터가 존재하는 비선형 구조다.

아래로만 뻗어나가기 때문에 사이클이 존재하지 않는다.

1. 트리의 구조

트리는 Root라는 하나의 꼭짓점 데이터를 시작으로 여러 개의 데이터를 간선으로 연결한다.

각 데이터를 노드라 하며, 간선으로 연결되면 부모/자식 관계가 된다.

자식이 없는 노드는 Leaf Node(리프 노드) 가 된다.

2. 트리의 구현

트리는 javascript의 class로 구현 할 수 있다.

class Tree {
  // 트리의 생성자(구조)
  constructor(value) {
    this.value = value;
    this.children = [];
  }

  // 트리의 삽입 메서드
  insertNode(value) {
    const childNode = new Tree(value); // 자식도 결국 서브트리의 node기 때문에 tree로 선언해줌.
    this.children.push(childNode);
  }

  // 트리 안에 해당 값이 포함되어 있는지 확인하는 메서드
  contains(value) {
    if (this.value === value) {
      return true;
    }
    for (let i = 0; i < this.children.length; i += 1) {
      if (this.children[i].contains(value)) { // 재귀를 이용해 탐색을 진행함.
        return true;
      }
    }
    return false;
  }
}

3. 이진 트리

이진 트리는 자식 노드가 최대 두 개인 노드로 구성된 트리다.

이진 트리는 자료의 삽입 삭제 방법에 따라 위 3개로 나뉘어진다.

4. 이진 탐색 트리

이진 탐색을 적용한 이진 트리다.

이진 탐색?

• 이진 탐색 알고리즘은 정렬된 데이터 중에서 특정한 값을 찾기 위한 탐색 알고리즘중 하나다.
• 배열을 오름차순으로 정렬 후 중간값부터 시작하여 찾고자 하는 값의 탐색 범위를 제한하는 알고리즘이다.

이진 트리의 특징은 트리 안에 찾고자 하는 값이 없더라도 최대 트리의 높이만큼 탐색이 진행된다.

5. 트리 순회

1. 전위 순회 : 루트에서 시작해 왼쪽의 노드를 전부 탐색한다. 이후 오른쪽으로 넘어간다.

Root -> Left -> Right

2. 중위 순회 : 왼쪽에서 시작해 부모를 거쳐 오른쪽으로 넘어간다.

Left -> Root -> Right

3. 후위 순회 : 왼쪽 자식 노드에서 시작해 오른쪽 노드를 거쳐 부모 노드로 넘어간다.

Left -> Right -> Root

6. 이진 탐색 트리 구현

```jsx class BinarySearchTree { constructor(value) { this.value = value; this.left = null; this.right = null; } insert(value) { if (value < this.value) { if (this.left === null) { this.left = new BinarySearchTree(value); } else { this.left.insert(value); } } else if (value > this.value) { if (this.right === null) { this.right = new BinarySearchTree(value); } else { this.right.insert(value); } } else { } } contains(value) { if (value === this.value) { return true; } if (value < this.value) { return !!(this.left && this.left.contains(value)); } if (value > this.value) { return !!(this.right && this.right.contains(value)); } } preorder(callback) { callback(this.value); if (this.left) { this.left.preorder(callback); } if (this.right) { this.right.preorder(callback); } } inorder(callback) { if (this.left) { this.left.inorder(callback); } callback(this.value); if (this.right) { this.right.inorder(callback); } } postorder(callback) { if (this.left) { this.left.postorder(callback); } if (this.right) { this.right.postorder(callback); } callback(this.value); } }

세션은 쿠키와 다르게 중요한 데이터를 서버에 저장한다.

중요한 데이터를 클라이언트에 전달할 때 직접 전달하지 않고 암호화 된 상태로 전달한다.

마치 신분증과 같은 역할을 하는 것.

세션은 서버에서 추가적인 검증을 하므로 좀 더 보안에 용이하다.

Node.js에서는 세션을 관리해주는 express-session 이라는 모듈이 있다.

const express = require('express');
const session = require('express-session');

const app = express();

app.use(
  session({
    secret: '@codestates', // 비밀키 이용
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

세션으로 로그인 유지하기

https://velog.io/@liso_o/TIL-17-Cookie 상세하게 써논 로직

지난번 쿠키와 같은 로직을 사용한다. 다만, server 단에서 세션으로 받아오는 것의 차이가 있다.

//server/index.js
app.use(
  session({
    secret: '@codestates',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      httpOnly: true,
      sameSite: 'strict',
    },
  })
);

서버에서 세션을 사용한다고 선언 후,

//server/login.js
const { USER_DATA } = require("../../db/data");
module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter(
      (user) => user.userId === userId && user.password === password
    )[0],
  };
  if (!userInfo.id) {
    res.status(401).send("Not Authorized");
  } else if (checkedKeepLogin) {
    req.session.sessionId = userInfo.id;
    console.log(req.session);
  }
};

로그인 처리에서 세션의 구조를 확인해보면 다음과 같이 나온다.

usefInfo에서 필터링된 id는 sessionId에 들어가고 그 외의 추가적인 옵션이 담겨져있는 쿠키는 req.session.cookie 안에 있다.

따라서 req.session.cookie 안에 정보를 넣어주면 된다.

express-session의 핵심은 req 객체를 사용하는 것!! res 아님 헷갈리지 않게 주의

//server/login.js
const { USER_DATA } = require('../../db/data');
module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
  };
  if (!userInfo.id) {
    res.status(401).send('Not Authorized');
  } else if (checkedKeepLogin) {
    req.session.userId = userInfo.id;
    req.session.cookie.maxAge = 1000 * 60 * 30;
    res.redirect('/userinfo');
  } else {
    req.session.userId = userInfo.id;
    res.redirect('/userinfo');
  }
};

이후 redirect로 보낸 데이터를 userinfo 에서 관리한다.

//server/userinfo.js
const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
  const userInfo = USER_DATA.filter((it)=>{
    return it.id===req.session.userId
  })[0];

  if(!userInfo){
    res.status(401).send("Not Authorized");
  }
  else{
    delete userInfo.password;
    res.send(userInfo);
    // 혹은 이렇게 작성도 가능
    // res.json({...userInfo,password:undefined});
  }
};

세션에 담긴 userId와 알맞은 유저의 정보를 보내고,

세션 내의 쿠키의 옵션을 통해 추가적인 옵션을 부여해준다.

비밀번호는 민감한 정보니 꼭 삭제해서 보내자.

//server/logout.js
  req.session.destroy();
  res.status(205).send("Logged Out Successfully");

이후 로그아웃 시 세션을 없애준다.

2. Token

토큰 기반 인증은 기존의 세션 기반 인증의 단점을 보완하기 위해 만들어졌다.

세션 기반 인증은 서버에서 유저의 상태를 관리해야한다.

만약 서버가 여러 개 있으면, 하나의 큰 store를 통해 서버끼리 세션 정보를 교환해야 한다.

이는, 서버에게 부담이 갈 수가 있다.

이를 해결하기 위한 토큰 기반 인증방식은, 유저의 인증상태를 서버가 아닌 클라이언트에 저장하는 방식이다.

토큰 전달 방식이다.

세션 기반 인증이랑 비슷해 보이지만, 서버 메모리에 저장하는 거와는 달리 토큰과 서버의 비밀 키를 생성해서 클라이언트에 전달해준다.

전달 해줄때 쿠키가 아닌 Authorization 헤더를 통해 전달 해주는데 이는 쿠키에 크기 제한이 있기 때문이다.

클라이언트는 요청과 함께 토큰을 전달하는데 이때 서버는 해당 토큰이 유효한 토큰인지를 검증한다.

이러한 토큰 기반 인증 방식을 대표적으로 사용하는 기술이 JSON Web Token (JWT) 방식이다.

3. JWT

JWT 방식은 JSON 객체에 정보를 담고 이를 토큰으로 암호화하여 전송하는 기술이다.

JWT는 다음과 같이 . 과 문자열로 구성된 부분이 존재하여 . 으로 세 부분으로 나눌 수 있다.

1. Header

Header에는 HTTP의 헤더처럼 해당 토큰 자체를 설명하는 데이터가 담겨 있다.

{
  "alg": "HS256",
  "typ": "JWT"
}

이 JSON 객체를 base64방식으로 인코딩하면 JWT의 헤더 부분이 완성된다.

base64 방식은 원한다면 얼마든지 디코딩할 수 있는 인코딩 방식이다. 따라서 비밀번호와 같이 노출되어서는 안 되는 민감한 정보를 담지 않도록 해야 한다.

2. Payload

HTTP의 Payload와 마찬가지로 전달하려는 내용물이 담겨있다.

어떤 정보에 접근 가능한지, 토큰의 발급 만료 시간, 유저의 이름 같은 개인정보 등이 담겨있다.

{
  "sub": "someInformation",
  "name": "phillip",
  "iat": 151623391
}

마찬가지로, 위 JSON을 base64로 인코딩하면 Payload가 완성된다.

3. Signature

Signature는 토큰의 무결성을 확인할 수 있는 부분이다.

Header와 Payload를 salt를 추가시켜 Header에서 지정한 알고리즘을 이용해 해싱한다.

HMACSHA256(base64UrlEncode(header) + '.' + base64UrlEncode(payload), secret);

4. 토큰기반 인증의 한계

• 무상태성 : 제 3자가 토큰을 탈취하는 경우 서버가 해당 토큰을 강제로 만료시킬 수 없다.

• 유효 기간 : 토큰 탈취를 대비해 토큰 유효기간을 짧게 설정하면 사용자가 불쾌한 경험을 가질 수 있다. (ex)재로그인 비중 증가)

• 토큰의 크기 : 토큰에 많은 데이터를 담으면 암호화하는 과정도 길어지며 클라이언트~서버 간의 네트워크 비용도 증가한다.

5. Access Token & Refresh Token

• Access Token

  액세스 토큰은 말 그대로 서버에 접근하기 위한 토큰으로 앞서 다룬 토큰과 비슷한 역할을 합니다. 따라서 보안을 위해 보통 24시간 정도의 짧은 유효기간이 설정되어 있습니다.

• Refresh Token

  리프레시 토큰은 서버 접근을 위한 토큰이 아닌 액세스 토큰이 만료되었을 때 새로운 액세스 토큰을 발급받기 위해 사용되는 토큰입니다. 따라서 리프레시 토큰은 액세스 토큰보다 긴 유효기간을 설정합니다.

쿠키는 어떤 웹사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터다.

서버가 웹 브라우저(클라이언트)에 정보를 저장하고 불러올 수 있는 수단으로 해당 도메인에 쿠키가 존재하면 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다.

서버가 클라이언트에게 응답 헤더를 전달할 때 위와 같이 Set-Cookie를 전달한다. 클라이언트는 이후 매 요청 시마다 헤더에 쿠키의 이름과 정보를 전달한다.

쿠키는 클라이언트에 남아서 로그인 유지나 테마 유지 등의 기능을 한다.

쿠키 옵션

• Domain : 서버와 요청의 도메인이 일치하는 경우 쿠키 전송 http://www.localhost.com:3000/users/login 에서 localhost.com이 도메인으로써 요청과 응답이 같은 도메인이여야 전송됨

• Path : 서버와 요청의 세부 경로가 일치하는 경우 쿠키 전송 http://www.localhost.com:3000/users/login 에서 라우팅단인 /users/login이 Path로써 최상위 경로만 알맞다면 쿠키 전송이 가능하다 ex) cookie path : /users 일 경우 /users/option 같은 경로면 쿠키 전송 가능 하지만, /items/option 같이 상위 경로가 다르면 전송 불가능.

• MaxAge or Expires : 쿠키의 유효기간을 설정한다. 쿠키는 이 옵션의 여부에 따라 세션 쿠키와 영속성 쿠키로 나뉜다. 세션 쿠키 : 위 옵션이 없는 쿠키,브라우저가 실행 중일때 사용할수 있는 쿠키로 브라우저 종료시 쿠키도 삭제된다. 영속성 쿠키 : 위 옵션에 지정된 시간만큼 사용가능하다.

• Secure : Https 프로토콜에만 쿠키 전송 여부 결정

• SameSite : CORS 요청의 옵션 및 메서드에 따라 쿠키 전송 여부 결정

1. Lax : GET 메서드 요청만 쿠키 전송 가능
2. Strict : 쿠키 전송 불가
3. None : 모든 메서드 요청에 대해 쿠키 전송 가능, 단 Secure 쿠키 옵션이 필요 위와 같이 CSRF 공격을 받았을 경우에 효과적이다.

쿠키 활용 실습

로그인 상태 유지를 하는 기능을 만들어보려 한다.

한 파일에 서버/클라이언트가 있으며, 각각의 요구사항을 충족하면 된다.

1. CORS 설정

서버의 index.js에서 cors 설정을 해야한다.

cors 설정은 클라이언트와 서버가 서로 쿠키를 주고받기 위해 꼭 필요한 설정이다.

// server/index.js

const corsOptions = {
  // TODO
  // CORS 설정
  origin: "http://localhost:3000", // 접근 권한을 허용하는 도메인
  credentials: true, // Access-Control-Allow-Origin 접근 허용
  methods: ["GET", "POST", "OPTION"], // 허용할 메소드
};

app.use(cors(corsOptions));
// cors 설정을 사용함

app.post("/login", controllers.login);
app.post("/logout", controllers.logout);
app.get("/userinfo", controllers.userInfo);
// 각 컨트롤러마다 endpoint를 연결해줌

2. <클라이언트> 서버로 로그인 요청 보내기

총 3개의 state가 있다.

  const [loginInfo, setLoginInfo] = useState({
    userId: "",
    password: "",
  }); // 로그인 정보
  const [checkedKeepLogin, setCheckedKeepLogin] = useState(false); // 로그인 유지 할건지
  const [errorMessage, setErrorMessage] = useState(""); // 에러 발생 시 로그인 버튼 밑에 에러메시지 표시 여부

첫 번째로 ID와 Password가 업데이트 되는 LoginInfo 두 번째로 로그인 유지 할건지에 대한 상태 checkedKeepLogin 세 번째로 에러 발생시 에러 메시지은 errorMessage 이다.

1. 로그인 에러가 발생하는 경우는 아이디 또는 비밀번호가 입력되지 않았을 경우다.

2. 아이디와 비밀번호가 전부 잘 입력되었으면, 서버에 로그인 데이터를 보낸다.

  const loginRequestHandler = () => {
    // 1. 아이디,비밀번호 중 하나라도 입력이 되지 않았다면 에러를 띄워줌
    if (!loginInfo.userId || !loginInfo.password) {
      setErrorMessage("아이디와 비밀번호를 입력하세요");
      return;
    }
    // 2. 입력이 전부 들어왔으면, axios.post를 통해 정보를 전달해줌
    // endpoint는 server/users/index.js를 보면 login이라고 적혀있다.
    // endpoint의 login은 controllers의 user에 login 컨트롤러로 데이터가 전달된다.
    return axios
      .post("http://localhost:4000/login", { loginInfo, checkedKeepLogin })
      .then((res) => {
        return res;
      });
  };

위 상태로 로그인정보를 보내고,

// server/controller/login.js
const { USER_DATA } = require("../../db/data");

module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter(
      (user) => user.userId === userId && user.password === password // req로 들어온 데이터와 같은 id,password인 user를 가져옴.
    )[0],
  };
  console.log(req.body);
  console.log(userInfo);
}

database에 있는 USER_DATA를 가져온 다음 입력된 정보와 비교해본다.

userInfo는 req.body에 있는 loginInfo와 비교하여 알맞은 요소를 추출한다.

콘솔창을 띄워보면 위와 같이 req.body의 정보와 userInfo를 확인할 수 있다.

3. <서버> 로그인 요청 처리하기

2번에서 userInfo는 올바른 아이디와 비밀번호가 들어오면 객체를 리턴한다.

하지만, 올바르지 않은 아이디 또는 비밀번호가 들어오면 빈 배열을 리턴한다.

이것을 이용해 로그인 성공 여부를 가릴 수 있다.

로그인 실패 시 401 상태코드와 함께 Not Authorized 라는 문구를 보내야하고

로그인 성공 시 로그인 유지를 체크하여 쿠키를 전송하면 된다.

다만, 클라이언트에 바로 쿠키를 보내지 않고 userInfo.js 로 리다이렉트 시킨 후 검증해서 보낸다.

// server/controller/login.js

// 쿠키의 옵션 설정해줌
  const cookiesOption = {
    domain: "localhost",
    path: "/",
    secure: true,
    httpOnly: true,
    sameSite: "strict",
  };


  if (userInfo.id === undefined) {
    // 로그인 실패!
    res.status(401).send("Not Authorized");
  } else if (checkedKeepLogin === true) {
    // 로그인 유지가 true일 경우 cookiesOption의 max-age와 expires 옵션을 추가해준다.
    const time = 1000 * 60 * 30;
    cookiesOption.maxAge = time; // 단위 ms, 해당 시간 동안 쿠키 "유지"
    cookiesOption.expires = new Date(Date.now() + time); // 지금시간+넣은 시간 후에 쿠키 "삭제"
    // 로그인 성공!
    // express에서 쿠키를 전송하려면 cookie() 메소드를 사용하면 된다.
    // cookie 메서드는 전달인자로 쿠키 이름,값,옵션을 받는다.
    res.cookie("cookieId", userInfo.id, cookiesOption);
    res.redirect("/userinfo");
  } else {
    // 로그인 유지를 안 하고 싶을때
    res.cookie("cookieId", userInfo.id, cookiesOption); // 추가적인 옵션 없이 쿠키 설정
    res.redirect("/userinfo");
    // userinfo controller로 redirect
  }
};

// 여기선 쿠키만 생성 !
// userInfo에서 쿠키 검증

이후 userInfo에서 쿠키를 검증한다.

//server/controller/userInfo
const { USER_DATA } = require("../../db/data");

module.exports = (req, res) => {
  const userInfo = {
    ...USER_DATA.filter(
      (user) => user.id === cookieId // id와 비교
    )[0],
  };
  if (!cookieId || !userInfo.id) {
    res.status(401).send("Not Authorized");
  } else {
    // 비밀번호는 민감한 정보라서 삭제 후에 보내야 함.
    delete userInfo.password;
    res.send(userInfo); // 클라이언트로 다시 보내주기.
  }
};

이러면 userInfo에서 쿠키 검증 후 다시 클라이언트로 보내지게 된다.

4. <클라이언트> 응답 쿠키로 React 상태 업데이트

userInfo에서 받아온 쿠키는 어떤 모습인지부터 확인해보겠다.

위 정보를 가지고 React의 상태를 업데이트 해보겠다.

우선, App.js에서 각각 Login과 Mypage에 setIsLogin과 setUserInfo를 넘겨준다.

//client/Login.js
    return axios
      .post("http://localhost:4000/login", { loginInfo, checkedKeepLogin })
      .then((res) => {
        setUserInfo(res.data);
        setIsLogin(true);
        setErrorMessage("");
      })
      .catch((err)=>{
        setErrorMessage("로그인 실패");
      });

로그인이 성공해 쿠키가 담긴 res가 오면 사용자 정보에 res.data를 넘겨주고 setIsLogin을 통해 현재 로그인 상태를 변경시켜준다.

client의 userInfo는 받아온 쿠키를 가지고 로그인 페이지를 렌더링시킨다.

//client/userInfo
return (
    <div className='container'>
      <div className='left-box'>
        <span>
          {`${userInfo.name}(${userInfo.userId})`}님,
          <p>반갑습니다!</p>
        </span>
      </div>
      <div className='right-box'>
        <h1>AUTH STATES</h1>
        <div className='input-field'>
          <h3>내 정보</h3>
          <div className='userinfo-field'>
            <div>{`💻 ${userInfo.position}`}</div>
            <div>{`📩 ${userInfo.email}`}</div>
            <div>{`📍 ${userInfo.location}`}</div>
            <article>
              <h3>Bio</h3>
              <span>{userInfo.bio}</span>
            </article>
          </div>
          <button className='logout-btn' onClick={logoutHandler}>
            LOGOUT
          </button>
        </div>
      </div>
    </div>
  );

5. <클라이언트> 로그아웃 버튼 클릭 시 요청 보내기

userInfo에 로그아웃 버튼을 누르면 로그아웃 되는 기능을 구현해야한다.

그러면 현재 로그인 상태도 변경해줘야 하고 유저의 정보도 없애줘야한다.

로그아웃의 endpoint는 /logout 이므로 다음과 같이 작성해준다.

//client/userInfo

  const logoutHandler = () => {

    return axios
      .post("http://localhost:4000/logout")
      .then((res) => {
        setIsLogin(false);
        setUserInfo(null);
      })
      .catch((err) => {
         console.log(err);
      });
  };

6. <서버> 로그아웃 로직

로그아웃 요청을 보냈으면 서버에서 로그아웃을 해줘야한다.

쿠키를 삭제해야 하므로 쿠키 삭제에 쓰이는 clearCookie를 이용한다.

//server/logout
module.exports = (req, res) => {
  res
    .status(205)
    .clearCookie('cookieId', {
      domain: 'localhost',
      path: '/',
      sameSite: 'strict',
      secure: true,
    })
    .send('Logged Out Successfully');
};

클라이언트에서 따로 데이터를 담아 요청하지 않았으므로 req는 사용하지 않는다.

7. <클라이언트> 로그인 유지 로직

로그인 페이지에 도달했을때 클라이언트에 이미 쿠키가 있다면(로그인 후 쿠키가 유지되어있으면) 바로 userInfo 페이지를 보여지게 만든다.

//client/app.js
  const authHandler = () => {
    axios
      .get('http://localhost:4000/userinfo')
      .then((res) => {
        setIsLogin(true);
        setUserInfo(res.data);
      })
      .catch((err) => {
        if (err.response.status === 401) {
          console.log(err.response.data);
        }
      });
  };

  useEffect(() => {
    authHandler();
  }, []);

useEffect로 리렌더링 될때마다 실행시킨다.

dfs는 깊이 우선 탐색이라고 하며, 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘이다.

1-1) 스택을 이용한 DFS 구현

탐색을 마친 노드와 탐색이 필요한 노드를 각각 배열로 선언한다.

첫 번째 노드를 탐색이 필요한 노드에 push 하면서 탐색이 시작된다.

탐색이 필요한 노드가 없어질 때까지 탐색을 계속한다.

const graph = {
  A: ["B", "C"],
  B: ["A", "D"],
  C: ["A", "G", "H", "I"],
  D: ["B", "E", "F"],
  E: ["D"],
  F: ["D"],
  G: ["C"],
  H: ["C"],
  I: ["C", "J"],
  J: ["I"],
};


const dfs1 = (graph, startNode) => {
  const visited = []; // 탐색을 마친 노드
  let needVisit = []; // 탐색이 필요한 노드

  needVisit.push(startNode); // 탐색 시작

  while (needVisit.length > 0) {
    // 탐색이 필요한 노드가 0이 될때까지 반복
    const node = needVisit.shift(); // pop과 shift로 어디 방향부터 탐색할 지 정한다. shift는
    if (!visited.includes(node)) {
      // 탐색을 마친 노드에 없다면?
      console.log(`탐색을 마친 노드 node ${node}`);
      visited.push(node); //탐색을 마쳤으므로 탐색을 마친 노드에 넣어줌
      needVisit = [...graph[node], ...needVisit];
      console.log(`다음 탐색할 노드인 needVisit : ${needVisit}`);
    }
  }
  return visited;
};


// output
탐색을 마친 노드 node A
다음 탐색할 노드인 needVisit : B,C
탐색을 마친 노드 node B
다음 탐색할 노드인 needVisit : A,D,C
탐색을 마친 노드 node D
다음 탐색할 노드인 needVisit : B,E,F,C
탐색을 마친 노드 node E
다음 탐색할 노드인 needVisit : D,F,C
탐색을 마친 노드 node F
다음 탐색할 노드인 needVisit : D,C
탐색을 마친 노드 node C
다음 탐색할 노드인 needVisit : A,G,H,I
탐색을 마친 노드 node G
다음 탐색할 노드인 needVisit : C,H,I
탐색을 마친 노드 node H
다음 탐색할 노드인 needVisit : C,I
탐색을 마친 노드 node I
다음 탐색할 노드인 needVisit : C,J
탐색을 마친 노드 node J
다음 탐색할 노드인 needVisit : I
[
  'A', 'B', 'D', 'E',
  'F', 'C', 'G', 'H',
  'I', 'J'
]

1-2) 재귀를 이용한 DFS 구현

스택을 계속해서 반복하는 것과 비슷하게 재귀도 구현하면 된다.

방문하지 않은 노드만을 찾아서 dfs함수를 다시 호출하여 실행한다.

// 그래프는 위와 같음

let visited = [];
const dfs2 = (graph, start) => {
  if (!visited.includes(start)) {
    // 방문하지 않은 노드만 탐색
    visited.push(start);
    for (let i = 0; i < graph[start].length; i++) {
      dfs2(graph, graph[start][i]); 
      // 해당 노드의 자식,부모 모두 dfs2의 param으로 전달해서 재호출한다.
    }
  }
};

dfs2(graph, "A");
console.log(visited);

// output
[
  'A', 'B', 'D', 'E',
  'F', 'C', 'G', 'H',
  'I', 'J'
]

2. BFS

BFS는 Breadth Frist Search의 약자로 넓이 우선 탐색이다.

2-1) BFS를 큐로 구현

const Bfs = (graph, startNode) => {
  const visited = []; // 탐색을 마친 노드
  let needVisit = []; // 탐색이 필요한 노드

  needVisit.push(startNode); // 탐색 시작

  while (needVisit.length > 0) {
    // 탐색이 필요한 노드가 0이 될때까지 반복
    const node = needVisit.shift(); // pop과 shift로 어디 방향부터 탐색할 지 정한다. shift는
    if (!visited.includes(node)) {
      // 탐색을 마친 노드에 없다면?
      console.log(`탐색을 마친 노드 node ${node}`);
      visited.push(node); //탐색을 마쳤으므로 탐색을 마친 노드에 넣어줌
      needVisit = [...needVisit, ...graph[node]];
      //console.log(`need Visit : ${needVisit}`);
      console.log(`다음 탐색할 노드의 집합인 needVisit : ${needVisit}`);
      console.log(
        `추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:${graph[node]}`
      );
      console.log("=======");
    }
  }
  return visited;
};
console.log(Bfs(graph, "A"));


// output
탐색을 마친 노드 node A
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:B,C
다음 탐색할 노드의 집합인 needVisit : B,C
=======
탐색을 마친 노드 node B
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:A,D
다음 탐색할 노드의 집합인 needVisit : C,A,D
=======
탐색을 마친 노드 node C
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:A,G,H,I
다음 탐색할 노드의 집합인 needVisit : A,D,A,G,H,I
=======
탐색을 마친 노드 node D
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:B,E,F
다음 탐색할 노드의 집합인 needVisit : A,G,H,I,B,E,F
=======
탐색을 마친 노드 node G
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:C
다음 탐색할 노드의 집합인 needVisit : H,I,B,E,F,C
=======
탐색을 마친 노드 node H
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:C
다음 탐색할 노드의 집합인 needVisit : I,B,E,F,C,C
=======
탐색을 마친 노드 node I
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:C,J
다음 탐색할 노드의 집합인 needVisit : B,E,F,C,C,C,J
=======
탐색을 마친 노드 node E
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:D
다음 탐색할 노드의 집합인 needVisit : F,C,C,C,J,D
=======
탐색을 마친 노드 node F
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:D
다음 탐색할 노드의 집합인 needVisit : C,C,C,J,D,D
=======
탐색을 마친 노드 node J
추가 탐색을 위해 needVisit에 들어가야할 ...graph[node]:I
다음 탐색할 노드의 집합인 needVisit : D,D,I
=======
[
  'A', 'B', 'C', 'D',
  'G', 'H', 'I', 'E',
  'F', 'J'
]

3. 예제

사실 이번 TIL은 코드스테이츠의 코플릿에 있는 DFS/BFS 문제를 풀면서 작성하였다.

기존에는 DFS/BFS의 개념만 알고있었을 뿐, 이렇게 상세히 구현은 해본 적이 없다.

코플릿에서의 문제는 다음과 같다.

문제

let bfs = function (node) {
  // TODO: 여기에 코드를 작성합니다.
};
// 이 아래 코드는 변경하지 않아도 됩니다. 자유롭게 참고하세요.
let Node = function (value) {
  this.value = value;
  this.children = [];
};
// 위 Node 객체로 구성되는 트리는 매우 단순한 형태의 트리입니다.
// membership check(중복 확인)를 따로 하지 않습니다.
Node.prototype.addChild = function (child) {
  this.children.push(child);
  return child;
};

입출력 예시

let root = new Node(1);
let rootChild1 = root.addChild(new Node(2));
let rootChild2 = root.addChild(new Node(3));
let leaf1 = rootChild1.addChild(new Node(4));
let leaf2 = rootChild1.addChild(new Node(5));
let output = bfs(root);
console.log(output); // --> [1, 2, 3, 4, 5]
leaf1.addChild(new Node(6));
rootChild2.addChild(new Node(7));
output = bfs(root);
console.log(output); // --> [1, 2, 3, 4, 5, 7, 6]

BFS만 예로 들어보겠다. 위에 작성한 것처럼 TODO도 동일한 로직으로 작성하면 된다.

let bfs = function (node) {
    let visited = [];
  let needVisited = [];
  visited.push(node.value);
  needVisited = [...node.children];
  while(needVisited.length>0){
    const visitnode = needVisited.shift(); // 방문 배열의 맨 앞에서 하나 추출
    visited.push(visitnode.value);
    needVisited = [...needVisited,...visitnode.children];
  }

하지만, 컴포넌트 간 props로만 상태를 전달하고 관리하려니, props drilling 이 일어나게 되었다.

이럴 때 사용하는 것이 Redux 이다.

Redux 란?

Redux는 자바스크립트에서 상태를 관리하기 위한 도구다.

Redux는 단 하나의 store에서 전체 app의 상태를 관리하는 것이다.

store는 읽기 전용이며, action이라 불리는 객체를 통해 상태를 변경 할 수 있다.

Redux에서의 Reducer

Reducer는 현재 상태와 액션을 입력으로 받아서 새로운 상태를 반환하는 순수 함수다.

순수 함수이므로, 예측 가능한 결과를 도출한다.

const itemReducer = (state = initialState, action) => {
  // 초기값,action
  switch (action.type) {
    case ADD_TO_CART:
      //TODO..
    case REMOVE_FROM_CART:
      //TODO..
    case SET_QUANTITY:
        // TODO..
    default:
      return state;
  }
};

action에 따라 state를 업데이트 시킨다.

리듀서는 순수 함수이고 내부 case는 객체의 불변성을 지키므로 App 상태의 추론을 더욱 쉽게 만들어준다.

React-Redux

react-redux는 react 안에서 보다 redux를 편하게 사용할 수 있게 해주는 라이브러리다.

react-redux의 사용 방법은 다음과 같다. (Counter)

1. React-Redux 설치하기

npm install react-redux // npm install redux

2. 액션 생성자 만들기

export const incrementCounter = () => ({
  type: 'INCREMENT_COUNTER'
});
export const decrementCounter = () => ({
  type: 'DECREMENT_COUNTER'
});

3. 액션 생성자를 통한 리듀서 만들기.

const initialState = {
  count: 0
};
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT_COUNTER':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};
export default counterReducer;

4. Reducer를 기반으로 한 store 만들기

import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);

5. App의 최상위 컴포넌트를 Provider로 감싸주기

import { Provider } from 'react-redux';
import store from './store';
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

6.위에서 만든 것을 사용하는 Counter컴포넌트 만들기

import { useSelector, useDispatch } from 'react-redux';
import { incrementCounter, decrementCounter } from './actions';
function Counter() {
  const count = useSelector(state => state.count);// useSelector를 이용해 store에서 state를 가져온다. 
  //state는 store에서 count:0이 default임.
  const dispatch = useDispatch();
  const increment = () => {
    dispatch(incrementCounter());
  };
  const decrement = () => {
    dispatch(decrementCounter());
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

CMARKET에서의 데이터 흐름

각 컴포넌트들은 Reducer에서 state를 받아와 하위 컴포넌트에 전달해주고

컴포넌트에서 상태 변경이 필요할 경우 dispatch를 통해 Reducer로 넘겨준다.

Store

//store.js
import {legacy_createStore as createStore} from "redux"
import rootReducer from '../reducers/index"

const store = createStore(rootReducer);

store.js에서 store를 선언 해준다.

그 후, rootReducer를 import 해와서 Store에 넣어준다.

이러면, rootReducer에 있는 모든 reducer가 store에 저장이 된다.

Reducer

// reducers/index.js
import { combineReducers } from "redux";
import itemReducer from "./itemReducer";
import notificationReducer from "./notificationReducer";

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer,
});

export default rootReducer;

reducer가 선언되는 곳이다.

현재 CMARKET에는 두 개의 reducer가 사용되는데

여러 개의 reducer를 사용하려면 redux에 있는 combineReducers를 사용한다.

initialState

// reducers/initialState.js
export const initialState = {
  items: [
    {
      id: 1,
      name: "노른자 분리기",
      img: "../images/egg.png",
      price: 9900,
    },
    {
      id: 2,
      name: "2020년 달력",
      img: "../images/2020.jpg",
      price: 12000,
    },
    ......

    cartItems: [
    {
      itemId: 1,
      quantity: 1,
    },
    {
      itemId: 5,
      quantity: 7,
    },  
    {
      itemId: 2,
      quantity: 3,
    },
  ],

Reducer의 초기값을 담당하는 객체 배열이다.

상품 item과 카트에 담긴 상품의 배열이 담겨져있다.

itemReducers.js

// reducers/itemReducer.js

import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";//action의 type과 payload를 가져오는 함수
import { initialState } from "./initialState";//초기값

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      //TODO : cartItems에 아이템 추가
      // 객체의 불변성을 위해 ...state로 기존 배열을 복사한 후 추가한다.
      //state(initialState)의 cartItems를 변경시키는 것.
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
      };
    case REMOVE_FROM_CART:
      //TODO : cartItem에서 해당 상품 제거
      // action.payload << 여기에 itemId 들어가 있음.
      const removearr = state.cartItems.filter((it) => {
        return it.itemId !== action.payload.itemId;
      });
      return {
        ...state,
        cartItems: removearr,
      };
    case SET_QUANTITY:
      // TODO : 상품의 수량 변경
      let idx = state.cartItems.findIndex(
        (el) => el.itemId === action.payload.itemId
      ); // cartItem 배열에서 payload로 온 itemid랑 같은 인덱스
      let updatedcart = [...state.cartItems];
      // cartItems 배열 복사
      const sameItem = updatedcart[idx];
      // 복사한 배열에서 상품 추출

      let updated = {
        ...sameItem,
        quantity: action.payload.quantity,
      };
      updatedcart[idx] = updated;
      return {
        ...state,
        cartItems: updatedcart,
      };
    default:
      return state;
  }
};

export default itemReducer;

초기값을 state로 사용하는 itemReducer다.

각 action.type마다 실행하는 로직이 있으며, initialState의 상태를 변경시킨다.

action

//actions/index.js
export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const SET_QUANTITY = "SET_QUANTITY";


export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId,
    },
  };
};

export const removeFromCart = (itemId) => {
  return {
    type: REMOVE_FROM_CART,
    payload: {
      itemId,
    },
  };
};

export const setQuantity = (itemId, quantity) => {
  return {
    type: SET_QUANTITY,
    payload: {
      quantity,
      itemId,
    },
  };
};

각 함수마다 전달하는 action type,payload가 담겨져있다.

itemListContainer

//pages/ItemListContainer
import React from "react";
import { addToCart, notify } from "../actions/index";
import { useSelector, useDispatch } from "react-redux";
import Item from "../components/Item";

function ItemListContainer() {
  const state = useSelector((state) => state.itemReducer);
  // rootReducer에서 가져온 reducer 중 하나인 itemReudcer
  // 해당 reducer에서 useSelector를 통하여 state를 가져온다.
  const { items, cartItems } = state;
  // state(initialState)는 총 2개의 배열이 있으며 이것을 구조 분해 할당을 통해 변수로 선언해준다.
  const dispatch = useDispatch();
// action을 전달하기 위한 useDispatch 선언
  const handleClick = (item) => {
    if (!cartItems.map((el) => el.itemId).includes(item.id)) {
      dispatch(addToCart(item.id));
      dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`));
    } else {
      dispatch(notify("이미 추가된 상품입니다."));
    }
  };

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">쓸모없는 선물 모음</div>
        {items.map((item, idx) => (
          <Item
            item={item}
            key={idx}
            handleClick={() => {
              handleClick(item);
            }}
          />
        ))}
      </div>
    </div>
  );
}

export default ItemListContainer;

상품을 보여주는 메인 화면이다.

상품 추가를 해주는 함수 handleClick이 선언되어있다.

ShoppingCart

// pages/ShoppingCart.js

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { removeFromCart, setQuantity } from "../actions";
import CartItem from "../components/CartItem";
import OrderSummary from "../components/OrderSummary";

export default function ShoppingCart() {
  const state = useSelector((state) => state.itemReducer);
  const { cartItems, items } = state;
  const dispatch = useDispatch();
  const [checkedItems, setCheckedItems] = useState(
    cartItems.map((el) => el.itemId)
  );

  const handleCheckChange = (checked, id) => {
    if (checked) {
      setCheckedItems([...checkedItems, id]);
    } else {
      setCheckedItems(checkedItems.filter((el) => el !== id));
    }
  };

  const handleAllCheck = (checked) => {
    if (checked) {
      setCheckedItems(cartItems.map((el) => el.itemId));
    } else {
      setCheckedItems([]);
    }
  };

  // 수량 수정 함수
  const handleQuantityChange = (quantity, itemId) => {
    // 선택된 상품의 id와 수량을 넘겨준다.
    dispatch(setQuantity(itemId, quantity));
  };

  // 장바구니 상품 제거 함수
  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId));
    dispatch(removeFromCart(itemId));
  };

  const getTotal = () => {
    let cartIdArr = cartItems.map((el) => el.itemId);
    let total = {
      price: 0,
      quantity: 0,
    };
    for (let i = 0; i < cartIdArr.length; i++) {
      if (checkedItems.indexOf(cartIdArr[i]) > -1) {
        let quantity = cartItems[i].quantity;
        let price = items.filter((el) => el.id === cartItems[i].itemId)[0]
          .price;

        total.price = total.price + quantity * price;
        total.quantity = total.quantity + quantity;
      }
    }
    return total;
  };

  const renderItems = items.filter(
    (el) => cartItems.map((el) => el.itemId).indexOf(el.id) > -1
  );
  const total = getTotal();

  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">장바구니</div>
        <span id="shopping-cart-select-all">
          <input
            type="checkbox"
            checked={checkedItems.length === cartItems.length ? true : false}
            onChange={(e) => handleAllCheck(e.target.checked)}
          ></input>
          <label>전체선택</label>
        </span>
        <div id="shopping-cart-container">
          {!cartItems.length ? (
            <div id="item-list-text">장바구니에 아이템이 없습니다.</div>
          ) : (
            <div id="cart-item-list">
              {renderItems.map((item, idx) => {
                const quantity = cartItems.filter(
                  (el) => el.itemId === item.id
                )[0].quantity;
                return (
                  <CartItem
                    key={idx}
                    handleCheckChange={handleCheckChange}
                    handleQuantityChange={handleQuantityChange}
                    handleDelete={handleDelete}
                    item={item}
                    checkedItems={checkedItems}
                    quantity={quantity}
                  />
                );
              })}
            </div>
          )}
          <OrderSummary total={total.price} totalQty={total.quantity} />
        </div>
      </div>
    </div>
  );
}

장바구니를 보여주는 페이지다.

장바구니에서 상품 삭제 및 수량 변경이 가능하다.

그 외 컴포넌트들

1. item

import React from 'react'

export default function Item({ item, handleClick }) {

  return (
    <div key={item.id} className="item">
      <img className="item-img" src={item.img} alt={item.name}></img>
      <span className="item-name" data-testid={item.name}>{item.name}</span>
      <span className="item-price">{item.price}</span>
      <button className="item-button" onClick={(e) => handleClick(e, item.id)}>장바구니 담기</button>
    </div>
  )
}

ItemListContainer에 있는 컴포넌트로 장바구니 담기의 기능을 담당하는 함수에 params를 전달해준다.

2. cartItem

import React from 'react'

export default function CartItem({
  item,
  checkedItems,
  handleCheckChange,
  handleQuantityChange,
  handleDelete,
  quantity
}) {
  return (
    <li className="cart-item-body">
      <input
        type="checkbox"
        className="cart-item-checkbox"
        onChange={(e) => {
          handleCheckChange(e.target.checked, item.id)
        }}
        checked={checkedItems.includes(item.id) ? true : false} >
      </input>
      <div className="cart-item-thumbnail">
        <img src={item.img} alt={item.name} />
      </div>
      <div className="cart-item-info">
        <div className="cart-item-title" data-testid={`cart-${item.name}`}>{item.name}</div>
        <div className="cart-item-price">{item.price} 원</div>
      </div>
      <input
        type="number"
        min={1}
        className="cart-item-quantity"
        value={quantity.toString().replace(/(^0+)/, "")}
        // input에서 한 자리 숫자면 앞에 0이 붙는걸 제거해주는 표현식
        onChange={(e) => {
          handleQuantityChange(Number(e.target.value), item.id)
        }}>
      </input>
      <button className="cart-item-delete" onClick={() => { handleDelete(item.id) }}>삭제</button>
    </li >
  )
}

장바구니 페이지인 ShoppingCart에 있는 컴포넌트.

수량 변경 및 장바구니에서 상품 삭제를 담당하는 함수에 params를 넘겨준다.

우리가 사용하는 웹 페이지는 대부분 2티어 아키텍처로 이루어져 있다.

2티어 아키텍처란, 리소스가 존재하는 곳과 리소스를 사용하는 앱으로 분리시킨 구조를 말한다.

다른말로 클라이언트-서버 아키텍처 라고 부르기도 한다.

클라이언트 - 서버는 각각 서로에게 요청과 응답을 주고받는다.

여기서, 서버가 리소스를 다른 공간에서 가져오는 방식일 경우 3티어 아키텍처라고 부른다.

다른 공간의 대표적 예시는 데이터베이스 이다.

우리는 이 3티어 아키텍처를 크게 2개의 단으로 나눌수 있다.

1. 사용자가 눈으로 보고 사용하는 클라이언트 부분인 프론트엔드
2. 리소스를 전달 및 저장하는 서버-데이터베이스 부분인 백엔드

2. 클라이언트-서버 통신와 API

1) 프로토콜

클라이언트와 서버 간의 통신을 알아보려면, 프로토콜이라는 개념을 알아야 한다.

프로토콜은 통신 규약으로 클라이언트가 서버에게 요청을 할때 반드시 지켜야 할 규약이 있다.

웹 애플리케이션에서 클라이언트와 서버가 서로 HTTP 라는 프로토콜을 이용해서 요청과 응답을 주고받는다.

HTTP 를 이용해 주고받는 메시지를 HTTP 메시지 라고부른다.

HTTP 프로토콜 말고도 다른 종류의 프로토콜이 있다.

여러 종류의 프로토콜이 있는 만큼 각각 지켜야 할 규약이 있다.

2) API

클라이언트가 리소스를 요청했을때 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해주는데, 이것을 API 라고 한다.

서버가 API를 구축해놓아야 클라이언트가 이용할 수 있다.

3. URL & URI

1) URL

URL은 네트워크 상에서 웹 페이지,이미지,동영상 등의 파일이 위치한 정보를 나타낸다.

url은 다음과 같이 총 3개로 구분할 수 있다.

1. scheme : 통신 방식(프로토콜)을 정의함
2. hosts : 웹 서버의 이름이나 도메인을 사용하여 주소를 나타냄
3. url-path : 루트 디렉토리부터 웹 페이지 등이 위치한 경로와 파일명을 나타냄

URI는 url에 추가적으로 query 를 더한다.

• query : 웹 서버에 보내는 추가적인 질문

4. 도메인 & DNS

• 도메인 : 웹 브라우저를 통해 특정 사이트에 진입을 할 때 IP 주소를 대신해 사용하는 주소를 도메인이라고 한다. nslookup 도메인 을 통해 해당 도메인의 IP주소를 확인할 수 있다.

• DNS : 위 도메인과 IP주소를 매칭해주는 작업을 하는 서버를 뜻한다.