• iterator를 생성해주는 함수
• yield 키워드를 사용
• next(제너레이터함수]) :
• 예시

  def generator():
    yield 1 
    yield 2
    yield 3
  

for g in generator(): print(g)

```

🔑 hasRole() vs hasAuthority()

• antMathchers("URL패턴").hasRole(role:String)

  • 자동으로 ROLE_ 접두어를 붙인 이름으로 사용자의 권한을 검색한다.
  • 따라서 권한 이름을 "ROLE_ADMIN"과 같이 저장해야 한다.

• hasAuthority(role:String)

  • 파라미터 그대로의 이름으로 사용자의 권한을 검색한다.

• n진수 -> 10진수

  # int(string, base)
  print(int('101',2))
  print(int('202',3))
  

> 5
> 20

*  10진수 -> 2,6,8 진수(str)

```python

# bin(10진수) : 10=>2
print(bin(13))
# oct(10진수) : 10=>8
print(oct(13))
# hex(10진수) : 10=>16
print(hex(13))

0b1101 0o15 0xd

• 영단어와 숫자로 구성된 문자열을 모두 숫자로 바꾸는 문제
• ex) "1foureight5seven" -> 14857

  🎇 나의 solution

numStr=['zero', 'one','two','three','four','five',
        'six','seven','eight','nine']

def str2numStr(s):
    result=0
    for i in range(len(numStr)):
        if s == numStr[i]:
            result=i
            break
    return str(result)


def is_str_digit(str):
    if str in numStr:
        return True
    else:
        return False


def solution(str):
    answer = []
    temp = []
    for i  in range(len(str)):
        if str[i].isdigit():
            if i>0 and temp:
                target = ''.join(temp)
                answer.append(str2numStr(target))
                temp=[]
            answer.append(str[i])

        else :
            target = ''.join(temp)
            if is_str_digit(target):
                temp = []
                temp.append(str[i])
                answer.append(str2numStr(target))
            else:
                temp.append(str[i])

    if temp :
        target = str2numStr(''.join(temp))
        answer.append(target)
    return int(''.join(answer))

• 문자 하나하나가 숫자를 나타내는지 확인해서 맞으면 숫자로 변환함

• 문자와 숫자 쌍을 나타낸 딕셔너리를 기준으로 문자열을 치환하는 것이 핵심인데, 핵심을 놓친 것 같다..

  🔑 모범 답안
  def solution(str):
    answer =''
   dic = {"zero":0, "one":1, "two":2, "three":3, "four":4,
             "five":5, "six":6, "seven":7, "eight":8, "nine":9}
   for key, value in dic:
       answer = answer.replace(key,value)
   return answer

  🔑 str.replace(old_word, new_word, count)

• 문자열 내에 old_word와 일치하는 문자열를 new_word로 바꾼다.
• 앞에서부터 count 만큼 (default 일치하는 단어 전부)
• 단, 원본 문자열은 그대로, 새로운 문자열을 반환

🔑 'str' object is not callable

• str이라는 변수를 정의한 후 str() 함수를 사용하려고 한 경우에 발생하는 에러
• 예시

def xxx(str): # 매개변수도 str temp = str(1) # string 형변환 함수도 str ... ```

주어진 문자열을 규칙에 맞게 변환하시오

1. 대문자 -> 소문자
2. 소문자, 숫자, '_', '.', '-' 제외한 문자는 제거
3. ..->.
4. 처음, 끝에 위치한 .는 제거
5. 빈문자열 = 'a'
6. 최대 길이 15자
   • 16자 이상인 경우 첫 15문자 제외한 나머지 문자를 제거
   • 제거 후 끝에 위치한 . 제거
7. 길이 2이하인 경우, 마지막 문자를 길이 3이 될 때까지 덧붙이기

🎇 나의 solution

def solution(new_id):
    answer = ''
    # 1. 대문자 -> 소문자
    new_id = new_id.lower()
    # 2. 소문자, 숫자, _, ., - 제외한 문자 제거
    for char in new_id : 
        if char.isalnum() or char in '_.-':
            answer += char
    # 3. .. -> .
    while '..' in answer : # 🔑'..'이 존재하지 않을 때까지 제거  
        answer = answer.replace('..','.')
    # 4. 처음, 끝에 위치한 . 제거
    answer= answer.strip('.')
    # 5. 빈문자열 = 'a'
    answer = 'a' if answer == '' else answer
    # 6. 최대 길이 15자, 끝에 위치한 . 제거
    if len(answer) > 15:
        answer = answer[:15]
        answer = answer.rstrip('.')
    # 7. 길이 2 이하인 경우 3이 될때까지 맨 마지막 글자 추가
    answer += answer[-1]*(3-len(answer))

    return answer

🔑 문자열에서 특정 문자를 제거하는 방법

1. replace(대상 문자열, 바뀔 문자열) # 원본 문자열이 바뀌는 것 x

   text = 'aaa'
   text = text.replace('a','') 
   print(text) # 'aaa' -> ''

2. strip(대상 문자열) # 처음, 끝에서 일치하는 문자열 제거
3. 해당 문자를 제외한 나머지 문자들을 차례로 새로운 변수에 저장 🔑

   # .과 &을 제외한 특수문자들을 지워야할 때
   text = '=ab.,d&='
   answer =''
   for char in text :
    if char.isalnum() or word in '.&':
        answer += char
   print(answer) # ='ab.,d&=' -> 'ab.d&'

🔑 문자열 관련 함수

• 문자열.strip() : 처음, 끝에서 매개변수로 주어진 문자열과 일치하는 문자열 제거
• 문자.isalnum() : 해당 문자가 숫자 혹은 알파벳인 경우 True 반환
• 문자열.lower() : 소문자로 치환

const App = ()=>{
    return (
        <Hello>
              <div>Hello</div>
          </Hello>
    )
}

const Hello = ({children})=>{
    return (
          <div>
              {children}
          </div>
    )
}

비구조화 할당

함수형 업데이트

• useState의 setter함수에 함수를 인자로 주는 것
• 컴포넌트 최적회에 사용

input이 여러 개일 때

• 각 input에 useState를 정의하면 비효율적!
• 비구조화 할당을 이용해 하나의 변수로 취급(?)

  const [inputs, setInputs] = useState({
    firstName : '',
      lastName  : '',
  })
  

/* React에서 객체를 수정할 때, 객체를 그대로 수정하면 안됨. 새로운 객체를 할당하고 */ const onReset = ()=>{ setInputs({ firstName : '', lastName : '', }) }

/* {value, name} == e.target value : 값 name : input 태그의 name */ const onChange = ({value, name})=>{ setInputs({ ...inputs, [name] : value, }) }

```

useRef

• 특정 DOM을 사용해야 할 때 쓰는 hook
• 컴포넌트 내에서 사용하는 변수를 정의할 때 (단 ref변수 수정 시에는 reload되지 않음)
• 클래스형 컴포넌트에서는 React.createRef를 사용한다.
• 태그에 ref 속성 정의
• ref 변수에 든 값을 조회할 때는 ref변수.current

배열.map(원소 => 새로운 컴포넌트)

• map으로 배열을 렌더링할 때 key값이 필요한 이유
• key값이 존재하지 않으면 원소 업데이트 비효율적으로 동작함 (덮어쓰기 방식)

1. 생성자, 수정자 패턴
2. 정적 메소드 패턴
3. 빌더 패턴(lombok 이용)

builder pattern

• 기존 )

  • 필요한 매개변수 종류별로 생성자 만들어야 했음
  • 생성자 사용 시 파라미터 순서 지켜야 함
  • setter로 인해 객체 불변성이 깨진다 -> 변경 가능성 존재

• 빌더패턴 이용 시)

  • 불필요한 생성자 제거할 수 있음
  • 데이터의 입력 순서 지킬 필요 없음
  • 롬복(lombok)을 이용하면 생성자클래스를 따로 정의하지 않아도 됨
  • 가독성이 높아짐

• 예시

  // lombok을 이용하지 않는 경우
  

public class User{ private Long id; private String name; private String address;

getter/setter/생성자 정의

}

public class UserBuilder{

private Long id;
private String name;
private String address;

UserBuilder setId(Long id){
    this.id=id;
    return this;
}
UserBuilder setId(String name){
    this.name=name;
    return this;
}
UserBuilder setAddress(Address address){
    this.address=address;
    return this;
}
User build(){
    return new User(id,name,address);
}

}

public static void main(String[] args){ UserBuilder userBuilder = new UserBuilder(); User userInfo = userBuilder.build() .setId(1) .setName("name1") .setAddress("address1") }

```java
// lombok을 이용하는 경우
import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class User{
    private Long id;
    private String name;
    private String address;
}

public static void main(String[] args){
    User user = User.builder()
                    .id(1)
                    .name("name1")
                    .address("address1")
}

• Stable 정렬 알고리즘 : 중복된 값에 대해 순서대로 정렬하는 알고리즘
• Not Stable 정렬 알고리즘 (stable의 반대)

1. 버블 정렬

• 배열에서 이웃한 두 원소를 비교한다.
• 두 원소 중 더 큰 값이 뒤에 오도록 한다.
• 맨 뒤쪽부터 정렬된다.
• stable 정렬 : 앞 원소가 큰 경우에만 swap을 진행하기 때문이다.
• O(N^2)

  def swap(arr, i, j):
    temp = arr[i]
    arr[i] = arr[j]
    arr[j] = temp
  
  

def bubble_sort(list) : for i in range(list(len)): for j in range(len(list)-i-1): if list[j] > list[j+1]: swap(list,j,j+1) #뒤에 오는 원소가 더 크도록 위치 교환

---
### 2. 선택정렬
- 구현 방법
  1. 정렬대상 배열에서의 최소값을 결과 배열에 옮기는 과정을 반복한다.
      -> 추가의 메모리(배열)가 필요하다.
  2. 정렬되지 않은 부분에서 최솟값을 찾고,
정렬되지 않은 부분의 맨 앞 원소와 위치를 바꾼다.(1 개선)
- 맨 앞쪽부터 정렬된다.
- stable : 앞쪽부터 최소 원소를 찾고, 앞쪽부터 정렬되기 때문이다.
- __O(n^2)__
```python
# 개선된 선택정렬
def select_sort(list) :
    for i in range(len(list)):
        min_idx = i
        for j in range(i+1,len(list)):
            if list[j] < list[min_idx]:
                min_idx = j
        swap(list,i,min_idx) # 버블정렬에서 사용된 swap 사용

3. 삽입정렬

• 정렬되지 않은 부분의 첫번째 원소를 정렬된 부분의 적절한 위치에 삽입한다.
• 정렬된 부분의 원소가 더 큰 경우 뒤로 한 칸씩 밀어내, 정렬대상 원소의 자리를 마련한다.(정렬대상 원소보다 작은 원소를 만날 때까지 반복)
• stable : 정렬된 부분의 원소가 같은 경우 밀어내기를 진행하지 않기 때문이다.
• O(N^2)

  def insert_sort(list):
    for i in range(1,len(list)):
        target = list[i] # 삽입할 원소
        for j in range(i-1,-1,-1):
            if list[j] > target :
                list[j+1]=list[j]
            else :
                list[j+1] = target

4. 힙정렬

• 힙 자료구조를 이용한다.
• 정렬 수행 순서 (오름차순 기준, 1번 인덱스가 최소값) 1) 최소힙 구성 2) 최소값을 배열의 맨 마지막에 놓는다. 3) 마지막 노드를 루트(인덱스 1)에 두고 1,2 수행(heap[:-i]에 대해)
• not stable : 형제 노드가 동일한 경우 오른쪽 노드와 부모 노드를 교환하기 때문(아래 구현의 경우)

def heapify(heap, index, heap_size):
    largest = index
    left_child_index = index*2
    right_child_index = index*2+1

    if (left_child_index < heap_size) and (heap[largest] > heap[left_child_index]) : #왼쪽 자식 노드가 존재하고, 부모 노드보다 작은 경우
        largest = left_child_index
     if (right_child_index < heap_size) and (heap[largest] > heap[right_child_index]) : #오른쪽 자식 노드가 존재하고, 부모 노드보다 작은 경우
        largest = right_child_index

      if index != largest : 
          heap[largest],heap[index] = heap[index],heap[largest] # 자식노드와 부모 노드를 교환한다.
          heapify(heap, largest, heap_size) # 자식노드를 루트노드로 하는 힙에 대해서 heapify를 수행한다.

def heap_sort(list):
    n = len(list)
    # 1. 최소힙 구성
    # 자식 노드를 갖는 마지막 노드부터 상향으로 heapify 진행한다.
    # 마지막 노드부터 수행하지 않아도 된다.
    for i in range(n//2-1,-1.-1):
        heapify(list, i, n) 


    for i in range(n-1,0,-1):    
        list[i], list[1] = list[1], list[i] # 2. 루트 노드와 마지막 노드의 값을 교환한다.
        heapify(list, 0, i) # 3. 나머지 배열에 대해 heapify 수행

❓ 힙

• 완전 이진트리의 일종으로, 우선순위 큐를 위해 만들어진 자료구조
• 최댓값 or 최솟값을 빠르게 찾아내기 위한 자료구조
• 일종의 반정렬(느슨한 정렬 상태)를 유지한다.
  • 부모 노드는 자식 노드보다 우선순위가 높다.
  • 형제 노드 간 우선순위는 정렬되어있지 않다.
• 부모노드와 자식 노드의관계
  • 왼쪽 자식 노드의 인덱스 = (부모 노드의 인덱스)*2
  • 오른쪽 자식 노드의 인덱스 = (부모 노드의 인덱스)*2+1
• 힙의 삽입, 삭제
  • 삽입 1) 완전 이진트리의 끝에 새로운 노드를 삽입한다. 2) 부모 노드와 비교해 우선순위가 높으면 부모 노드와 교환한다. 3) 2의 과정을 루트노드에 도달하거나 더 높은 우선순위 노드를 만날 때까지 반복한다.
  • 삭제(루트노드 삭제) 1) 루트 노드를 삭제한다. 2) 마지막 노드를 루트 노드 위치로 옮긴다. 3) 우선순위가 높은 자식 노드와 비교하여 해당 노드가 우선순위가 낮으면 자식 노드와 교환한다. 4) 자식 노드가 없거나(리프 노드 도달) 우선순위가 높은 자식 노드를 발견하지 못할 때까지 3의 과정을 반복한다.
• 참고 https://gmlwjd9405.github.io/2018/05/10/data-structure-heap.html

5. 병합정렬

• devide - conqure(분할 정복), 재귀

• 원소가 1개가 남을 때까지 분할하고, 분할된 두 배열을 합친다.

• not stable : 아래 구현의 경우 그러하다

• O(NlogN)

  def merge_two_array(list, left, mid, right):
    temp_list=[]
  
    current_index = left
    left_index = left
    right_index = mid +1
  
    while (left_index <= mid) and (right_index <= right) :
        if list[left_index] < list[right_index] :
            temp_list[current_index] = list[left_index]
            left_index += 1
        else :
  
        """
        not stable인 이유 :
        두 배열의 비교 대상이 동일한 원소인 경우,
        뒤쪽 배열에 위치한 원소를 먼저 옮기기 때문이다.
        """
            temp_list[current_index] = list[right_index]
            right_index += 1
        current_index += 1
  
    #왼쪽 원소 완전히 옮기기
    while (left_index <= mid) : 
        temp_list[current_index] = list[left_index]
        left += 1
        current_index += 1
  
    #오른쪽 원소 완전히 옮기기    
    while (mid+1 <= righ) : 
        temp_list[current_index] = list[right]
        right += 1
        current_index += 1
  
    #결과 배열로 원소 옮기기
    for i in range(len(list)):
        list[i] = temp_list[i]
  

def merge_sort(list, left, right): if left < right : # 정렬 대상 분할하기 mid = (left+right)//2 merge_sort(list,left,mid) merge_sort(list,mid+1,right)

    # 정렬 대상 합치면서 정렬하기
    merge_two_array(list,left,mid,right)

### 6. 퀵정렬
* __devide - conqure__(분할 정복), __재귀__
* 피벗(임의 위치의 기준값)을 기준으로 보다 작은 부분과 보다 큰 부분을 나눈다.
* 위 과정을 재귀적으로 수행해 정렬한다.
* 피벗의 값 or 정렬여부에 따라 시간복잡도가 달라진다.
* 프로그래밍 언어에서 기본으로 제공하는 정렬 함수의 경우 퀵정렬을 사용하는 경우가 많다.
* not stable : 'low < high'인 경우 먼저 나온 원소(low)가 high와 교환되어 뒤쪽으로 갈 수 있기 때문. 
* __O(NlogN)__ : 최악의 경우 N^2가 될 수도 있음
```python
""" 
 윤성우의 열혈 자료구조 ver 
- 분할하는 부분과 정렬하는 부분을 두 함수로 구분
"""
def partition(list,left,right):
    low  = left+1
    high = right

    while low <= high :
        while (low <= right) and (list[low] <= list[left]) :
            low += 1
        while (left <= high) and (list[high] >= list[left]) :
            high -= 1
        if low < high :
            swap(list,low,high)

    swap(list, left, high)
    return high

def quick_sort(list, left, right):
    if left < right :
        pivot = partition(list, left, right)
        quick_sort(list,left, pivot-1)
        quick_sort(list,pivot+1,right)

"""
일반적으로 많이 쓰이는 ver
- 하나의 함수 안에서 분할, 정렬을 모두 수행
- 피벗을 기준으로 세 배열로 나눈 후 이를 합치는 방법으로 정렬을 수행
"""
def quick_sort(list) :
    if len(list) <= 1:
        return list
    pivot = list[0] # 배열의 중간값을 사용해도 됨

    # 각각 피벗보다 크기가 작은, 같은, 큰, 원소를 저장하는 리스트를 의미함
    less_list =[]
    equal_list=[]
    greater_list = [] 

    for i in list : 
        if i > pivot :
            greater_list.append(i)
        elif i == pivot :
            equal_list.append(i)
        else:
            less_list.append(i)

    return quick_sort(less_list) + equal_list + quick_sort(greater_list) 

7. 기수정렬

(모든 정렬은 오름차순 기준으로 설명함.)

• 특정 수 미만인 소수를 구하는 알고리즘
• 알고리즘
  • 크기가 n+1인 배열을 생성한다.
  • 특정 인덱스의 배수에 해당하는 수를 지운다.(자기자신 제외)
    • ex) idx : 2 -> 2,4,8,...을 삭제
  • 인덱스를 1씩 증가시키며 2번 과정을 반복한다.(2~n)
  • 남은 수를 출력한다.

예제

1. 백준 1929

• 소수 구하기
• [M,N] 범위의 소수를 모두 출력하는 프로그램을 작성하시오

  min, max = map(int, input().split())
  

인덱스가 [min, max]인 부분만 사용

prime_numbers = [0]*(max+1)

prime_numbers[1]=1

해당 인덱스의 값이 0 : 소수 / 1 : 소수x

for i in range(2,max+1) : if prime_numbers[i] == 1 : continue for j in range(i+i, max+1, i) : prime_numbers[j] = 1

for i in range(min,max+1): if prime_numbers[i] == 0 : print(i)

<br>

2. 백준 4948 
* 베르트랑 공준
* 임의의 자연수 n에 대하여 (n,2n] 범위의 소수의 개수를 출력하시오

```python
min = 1
while True :
  min = int (input())
  if min == 0 : break
  max = min * 2

  # 인덱스가 [min, max]인 부분만 사용
  prime_numbers = [0]*(max+1)

  # 0과 1은 소수가 아님
  prime_numbers[0]=1
  prime_numbers[1]=1

  # 해당 인덱스의 값이 0 (소수) / 1 (소수x)
  for i in range(2,max+1) :
    if prime_numbers[i] == 1 :
      continue
    for j in range(i+i, max+1, i) :
      prime_numbers[j] = 1

  count = 0
  for i in range(min+1, max+1) :
    if prime_numbers[i] == 0 :
      count += 1
  """
  sum으로 개수를 구할 수도 있음

  count = sum(prime_numbers[min+1 : max+1])

  """
  print(count)

• 현재의 입력값들만 이용하여 출력값을 결정하는 회로
• 입력 신호들을 받는 즉시 그들을 조합하여 최종 출력을 발생시킨다.
• 부울함수 게이트들만 이용하여 구현(기억소자 X)

조합회로의 분석방법

• 부울함수를 이용한 분석
• 진리표를 이용한 분석
• 입출력 신호 파형을 이용한 분석
  
  

조합회로 설계 절차

1) 구현할 기능 표현 2) 입력 및 출력 변수 결정 3) 입출력 관계 분석해 진리표 작성 4) 카르노맵을 이용해 간략화된 부울함수 유도 5) 회로 구성

조합회로 종류

1. 가산기

• 1) 반가산기(HA) : 2bit(a,b) => 2bit(Carry, Sum) 2) 전가산기(FA) : 3bit(a,b,c) => 2bit(Carry, Sum) 3) 병렬가산기(PA) : 여러 비트들로 이루어진 2진수들 간의 덧셈을 수행(n개의 FA로 구성됨)

2. 인코더 :

• 2^n bit => 입력 값에 대응되는 2진 코드
• __ 우선순위 인코더__ : 우선순위를 판단하는 기능을 가진 인코더 두 개 이상의 입력들이 동시에 1로 세트된 경우, 그 중 우선순위가 높은 입력에 대한 BCD 값을 출력하는 조합회로

3. 디코더(해독기) :

• n bit => 2^n bit 입력값에 따라 2^n 개의 출력들 중 하나를 지정
• __ enable 신호가 있는 디코더__
  • En=0 ) 활성화 상태
  • En=1 ) 비활성화 상태 (어떤 출력도 선택되지 않음)

4. 그레이코드 변환기 : n bit => n bit

• 2진코드 => 그레이코드
  • 그레이코드의 MSB = 2진코드의 MSB
  • Gn = Bn+1 (XOR) Bn
• 그레이코드 => 2진코드
  • 2진코드의 MSB = 그레이코드의 MSB
  • Bn = Gn (XOR) Gn+1

5. 비교기 1) 단순 비교기 :

• 입력 값들의 동일성 비교
• 입력의 각 비트에 대해 XNOR => AND 2) 크기 비교기 :
• 입력 값들의 크기 비교

5. 멀티플렉서(MUX) :

• 여러 입력 신호들 중 하나만 출력 신호로 내보냄(데이터 선택기)
• 입력(n bit) + 선택신호(Log2n bit)

6. 디멀티플렉서(DEMUX)

• 한 개의 입력 신호를 여러 출력 선들 중 하나로 출력(데이터 분배기)

7. 가감산기

• 덧셈과 뺄셈을 모두 수행할 수 있는 산술회로
• 제어신호(M : M=0덧셈 | M=1뺄셈)

8. BCD 가산기

• BCD코드(0000~1001)로 표현된 10진수들간의 덧셈을 수행
• 합이 9보다 큰 경우 6을 더해 올림수를 발생시킨다.
• 올림수가 발생하면 6을 더한다.

9. 패리티 발생기

• 1) 짝수 패리티 발생기 : 모든 데이터 비트들 간에 XOR 연산 수행
• 2) 홀수 패리티 발생기 : 모든 데이터 비트들 간에 XOR 연산 수행 후 결과값을 반전시킴

• project
  • client (create-react-app로 생성)
    • public
      • index.html
        • src
      • app.js
      • index.js
    • package.json
  • server
    • app.js
    • package.json
  • package.json
  • node_modules
    
    

😁 server

1. nodemon : 서버의 변경사항 자동 적용

   npm install nodemon --save -include=dev

2. concurrently : express 서버와 react를 한 명령어로 실행하도록 도와줌

   npm install concurrently

3. express

   npm install express

4. package.json ~ script.dev 추가

   "server": "node ./app.js", "client": "cd ../client && npm start", "dev": "concurrently "npm run server" "npm run client""

😀 client

1. package.json에 proxy 속성 추가

   "proxy": "http://localhost:[express에서 사용하는 포트 번호]"

xcode-select --install

2. Homebrew 설치 : macOS의 패키지 관리자

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. brew cask 설치

brew install cask

4. nodejs 설치

brew install node

5. vscode 설치

1) brew cask install visual-studio-code 2) brew install --cask visual-studio-code

※ 설치한 app의 디렉토리 확인하는 법 ※

brew info app_name

6. oh-my-zsh 설치 (터미널 꾸미는 도구)

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

const express =require("express");
const app = express();

//정적 파일 라우팅-> /public에 정적파일을 위치시키면 자동 라우팅
app.use(express.static('public');

app.get('/',(req,res)=>{
  //실행할 문장
});

//웹서버 시작 : 해당 포트를 열고 대기
app.listen(3000,()=>{
    //실행할 문장
});

1. 안정성에 따른 분류 1) Stable sort -정렬 순서가 동일한 원소에 대해 초기 순서를 유지하는 정렬
   • bubble
   • insertion
   • merge
   • radix
   • counting 2) Unstable sort
   • selection
   • quick
   • heap
   • shell
     
2. 비교 여부에 따른 분류 1) 비교 정렬 2) 비비교 정렬 -ex) counting, radix sort

정렬의 종류

1. bubble

: 이웃한 두 원소 중 큰 것을 뒤로 보내 정렬하는 방법

void bubbleSort(int [] arr){
    for (int i = 1 ; i < arr.length ; i++){
            for (int j = 0 ; j < arr.length - i ; j++){
                if(arr[j]>arr[j+1])
                        swap(arr, j, j+1);
            }        
        }
}

• O(n^2)
  ### 2. selection : 정렬되지 않은 원소 중 최솟값을 찾아 정렬된 부분 뒤에 위치시켜 정렬하는 방법 ```java void selectionSort(int [] arr) { for ( int i=0 ; i < arr.length ; i++){ int min = arr[i]; int minIdx; for ( int j = i+1 ; j < arr.length ; j++){ if(arr[j] < min){ min = arr[j]; minIdx = j; } } swap( arr, i, minIdx); } } ```
• O(n^2)
  ### 3. insertion : 정렬된 부분에서 정렬되지 않은 첫 번째 원소가 들어갈 위치를 찾아 삽입하는 정렬 방법 ```java void insertionSort(int [] arr){ for( int i = 1 ; i < arr.length ; i ++){ int insertedData = arr[i]; for(int j = i-1 ; j >= 0 ; j--){ if(arr[j] > insertedData){ arr[j+1] = arr[j]; } else { break; } } arr[i] = insertedData; } } ```
• O(n^2)
  

  4. quick

  : 피벗을 중심으로 좌측은 피벗보다 작은 원소, 우측은 피벗보다 큰 원소로 분류함으로써 정렬하는 방법

  void quickSort(int [] arr, int left, int right){
    if(left >= right ) return;
    int pivot = left;
    int i = left + 1 ;
    int j = right ;
    do { 
        while(i < right && arr[i] < arr[pivot]) i++;
        while(j > left && arr[j] > arr[pivot]) j--;
        if(i < j)
            swap(arr, i, j);
    }while(i<j);
    swap(arr, j, pivot);
    quickSort(arr, left, j-1);
    quickSort(arr, j+1, right);
  }

• O(nlogn)
  

  5. heap

  : 힙 자료구조를 이용한 정렬 방법( all insertion -> all delete )

• O(nLogn)
  

  6. merge

  :

• O(nLogn)
  

  7. radix

  : 기수를 기준으로 정렬하는 방법

• O(n)
  

  8. counting

  : 크기를 기준으로 계수하여 정렬하는 방법

• O(n)
  

  7. shell

  :

• O(n)
  

사용자가 원하는 컴포넌트를 url에 맞게 화면에 출력할 수 있도록 돕는 기능

###

1. react-router-dom 다운로드

   npx install react-router-dom

2. BrowseRouter,Route 임포트

• 컴포넌트별 url 지정
• 1) 컴포넌트 사용처에서 해당 컴포넌트를 로 감싼다. 2) 최상위 컴포넌트를 로 감싼다.

import {ReactRouter,Router} from react-router-dom
...
      function Home(){
          return(
             <div>
              <h3>Home</h3>
              Home
              </div>
          );
      }
      function Topics(){
          return(
             <div>
              <h3>Topics</h3>
              Topics
              </div>
          );
      }
      function Contact(){
          return(
             <div>
              <h3>Contact</h3>
              Contact
              </div>
          );
      }
    function App () {
          return (
              <div>
              <h1>React Router DOM Application</h1>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/">Topics</Link></li>
                <li><Link to="/">Contact</Link></li>
              </ul>
              <Route exact url="/"><Home/></Route>
              <Route url="/topics"><Topics/></Route>
              <Route url="/contact"><Contact/></Route>
              </div>
          );
      }
  ReactDom.render(<BrowseRouter><App/></BrowseRouter>,document.getElementById('root'));

※ <Link> 컴포넌트

• 화면 변경 후 페이지가 리로딩되지 않도록 하는 방법
• <a href="path"> 대신 <Link to="path">를 사용한다.
• <Route>와 같이 exact 속성 추가 가능
• NavLink를 사용하면 활성화된 NavLink에 자동적으로 active 클래스가 추가된다. (활성화된 link를 직관적으로 알고 조작할 수 있다.)

※ 여러 path에 해당하는 컴포넌트를 특정 path에만 걸리도록 하는 방법

1. <Route>에 exact 속성 추가(해당 url와 정확히 일치하는 경우에만 화면에 표시)
2. <Route>들을 <Switch> 컴포넌트로 감싸기

페이스북에서 제공한 ui 라이브러리

• 장점
  • 컴포넌트 단위로 코드를 모듈화
  • 뛰어난 GC, 메모리 관리, 성능
  • 서버 & 클라이언트 렌더링 모두 지원 => 초기 구동 딜레이 & SEO
  • ui 재사용성
  • 커뮤니티 활발
• 단점
  • IE8 이하 지원 ❌

JSX

• JavaScript Extension
• 마크업 언어(XML, HTML)를 Native JS로 변환해줌 ( by babel- jsxloader )
• ES6의 문법은 아님
• 속성은 camelCase로 표현해야

컴포넌트

Props

• 클래스 컴포넌트 내부의 immutable data => {this.props.prop_name}
• 함수형 컴포넌트에서는 인자로 전달해야 함 => {props.prop_name}
• default props : children

  //1. functional Component
  function Greeting (props){
    return (<div>Hello {props.name}</div>);
  }  
  

//2. class Component class Greeting extends React.Component{ render () { return (

//컴포넌트 사용하기 class App extends React.Component { render () { return (); } }

//기본값 설정(클래스 컴포넌트 선언 후) Greeting.defaultProps = { key : value };

//Type 검증 Greeting.propTypes ={ prop_name : PropTypes.자료형 //[.isrequired] }

### state 
***
* 컴포넌트의 유동적인 데이터
* 초기값 설정이 필수 (constructor()에서 초기화)
* this.setState()를 이용해 값 변경 가능 -> 렌더링 된 후 직접 접근하여 값을 변경하면 안된다. (전체 업데이트로 인해 성능 저하)
```js
class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count : 0
        };
        this.plus=this.plus.bind(this);
        this.minus = this. minus.bind(this);
    }
      render (){
        return (
            <div>
                  <h2>{this.state.count}</h2>
                  <button onClick={this.plus}>+</button>
                  <button onClick={this.minus}>-</button>
              </div>
        );
    }
    plus () {
        this.setState({
            count : this.state.count + 1
        });
    }
    minus () {
        this.setState({
            count : this.state.count -1
        });
    }

}

let과 var

• let은 재선언 불가
• let의 스코프는 블록 범위 내에서만 가능

• TTI = TTV -> app.js의 경량화
• index.html 요청 -> 기타 파일(js, fw) 요청(too Big) -> rendering
• △ 첫 loading 시간이 길다
• △ 페이지 케싱 비효율적
• △ SEO 비효율적 => PrerenderIO를 이용해 해결 가능

SSR (Server Side Rendering)

• 정적 파일 + 자바스크립트 파일
• TTI > TTV
• SEO 효율적
• 페이지 로딩이 빠름
• △ Blinking Issue
• △ Server Overhead
• △ js 파일이 다운로드 되기 전에는 동적으로 작동하지 않음

SSG (Static Site Generation)

• Gatsby
• NextJS

• 사용자 인터페이스
• 브라우저 엔진 : ui와 렌더링 엔진 사이의 동작을 제어
• 렌더링 엔진 : 요청한 자원을 파싱하여 표시
  ( ex: Firefox-Gecko, Chrome-Blink, Safari-Webkit )
• 통신 : http
• 자바스크립트 엔진
• ui 백엔드 :
• 자료 저장소 : 쿠키 등을 저장

렌더링 엔진의 동작 과정(Chrome 기준)

: Critical Rendering Path

1. DOM 트리 구축을 위한 HTML 파싱 => DOM, CSSOM 트리 생성
   • 어휘 분석
     • 토큰화 [tokenize]
     • 각 토큰을 노드 객체로 변환
   • 파싱트리 생성 : 구문 규칙에 따라 문서 구조 분석, 파싱 트리 생성
     • DOM 트리
     • CSSOM 트리 : DOM이 화면에 표시되는 방법 표시
2. 렌더 트리 구축
   • 렌더트리 = DOM 트리 + CSSOM 트리
   • 화면에 표시되어야 할 모든 노드에 대한 정보(컨텐츠, 스타일 등)를 포함한 트리
     • DOM의 최상위 노드부터 순회하면서 CSSOM으로부터 관련된 요소를 트리에 포함시킨다.
3. 렌더 트리 배치(Layout)
   • 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정
   • 레이어 구성
4. 렌더 트리 그리기(Paint)

   [웹킷의 렌더링 과정]

UI 업데이트 과정

Javascript >> Style >> Layout >> Paint >> Composite

자바스크립트 엔진

자바 스크립트 엔진은 js 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터

• 종류
  • v8 : 구글에서 c++로 개발, 크롬과 nodejs에서 주로 사용
  • spiderMonkey, Rhino, JavaScriptCore, Chakra, Nashorn, JerryScript 등
    
    
• js의 메모리 구조
  • Memory Heap : 참조 타입의 데이터가 저장됨
  • Call Stack : 원시타입, 실행 컨텍스트가 저장됨
    

※DOM(Document Object Model) : HTML을 객체로 표현한 것

※ 렌더트리

• DOM 트리 + CSSDOM 트리 = 렌더 트리
• 화면에 표시되지 않을 토큰은 제거하여 트리를 생성함 (ex: display:none)
• 표시되는 각 요소의 레이아웃을 계산하는 데 사용됨
• 페인트 프로세스에 대한 입력값으로 사용됨

※

렉시컬 환경

: 컴푸팅 환경을 소프트웨어로 구현한 것으로, os나 응용프로그램을 설치 및 실행할 수 있다.

• 시스템 vm : os를 지원하는 vm
• 프로세스 vm : 단일 프로그램을 지원하는 vm

chrome v8 엔진으로 빌드된 자바스크립트 런타임

• 이벤트 기반
• 논블로킹 i/o
• 가볍고 효율적
• npm(node package manager) (※ 런타임 : 프로그래밍 언어가 구동되는 환경)
  
  

  📕 url의 구조

  {protocol}://{host|domain}:{port}/{path}?{query String}
• query string은 key=value 의 구조를 갖는다.
  
  

  📒 node의 내장 객체 및 모듈

1. 내장 객체

• global : setTimeout(), setInterval(), setImmediate() 등을 포함
• __filename : 현재 파일 위치
• __dirname : 현재 경로
• process : 환경설정 정보,

2. 모듈 -> require()을 통해 사용할 수 있다.

• os
• url
• fs : 파일시스템 관련 모듈
• path