그럼 발표를 시작하겠습니다. 발표 순서는 다음과 같습니다. 먼저 제가 이번 년도에 달성하고 싶은 목표를 말씀드리고 그 다음 그 목표를 달성하기 위한 계획을 시간 순서대로 정리해서 말씀드리겠습니다.

저는 올해 목표를 다음 4가지로 분류해서 결정했습니다. 의도했던 바는 아니지만 이제 보니 제 인생에 있어서 중요한 순서대로 나열된 거 같네요 인턴 종료 후에 정직원으로의 계약, 실무를 진행함에 있어 업무 역량의 향상, 개인적인 성장을 위한 자격증 취득과 영어 능력 향상이 이번 2024년의 저의 목표 입니다. 목표의 세부적인 내용은 다음 계획 슬라이드에서 같이 말씀드리겠습니다.

평소에 신년 계획을 수립할 때엔 상반기와 하반기로 나누어서 계획했습니다. 그러다 보니 계획이 분명하지 못하고 나중에는 희미해지는 느낌이 들어서 올해에는 4분기로 나누고 상시에 수행할 것을 추가했습니다. 업무 관련해서는 올해 ¼분기에는 서버 시스템과 네트워크에 대한 이해를 중점적으로 하고, 2/4분기에는 스토리지의 시스템과 하드웨어에 대한 이해를, 하반기에는 HPC의 하드웨어와 클러스터 아키텍쳐, 그리고 성능 최적화에 대해서 공부하고 스킬업 하겠습니다. 자격증 취득 계획은 ¼분기에 리눅스 마스터, 2/4분기와 마지막 4/4분기에 정보 보안 기사 취득에 도전해볼 생각입니다. 그리고 시간이 허락하는 대로 영어 공부에도 시간을 들여서 850점 이상 받을 수 있도록 하겠습니다.

지난 2023년 모두 고생 많으셨고 함께 성장하고 많은 것을 이룰 수 있는 2024년 한 해가 되셨으면 좋겠습니다.

그리고 올해를 함께할 모든 분들께 감사하다고 말씀드리고 싶습니다. 이것으로 발표를 마치겠습니다. 감사합니다.

싱글페이지 어플리케이션의 특성상 번들된 자바스크립트 파일이 모두 불러져와야 웹앱을 브라우저에서 실행할 수 있다.

ux적인 측면에서 최초 렌더링 속도는 매우 중요한 요소이기에 서드파티 라이브러리가 점점 추가됨과 함께 전체적인 앱의 크기가 커짐에 따라 code splitting이 필요하다고 생각되었다.

계획

dynamic import와 react.lazy( ) 함수를 활용하여 라우팅 단위로 chuck들을 쪼갤 것이다. 이에 따라 페이지를 동적으로 불러올 동안 대체할 Suspense의 fallback 컴포넌트도 추가적으로 제작할 생각이다. <div> ...Loading <div>은 이제 그만

과정

결과

• 데이터를 빠르게 저장하고 가져오는 기법 중 하나
• 키에 특정 연산을 적용하여 테이블의 주소를 계산

  hash function

• O(1)의 시간복잡도
• 좋은 함수가 되려면, 키 값을 고르게 분포시키고, 해시 충돌이 최소화 되어야 함

  해시 테이블

• key, value 쌍을 저장
• 순서가 없다

class HashTable<K, V> {
  private buckets: Map<number, Array<[K, V]>>;
  private size: number;

  constructor(size: number = 1024) {
    this.buckets = new Map<number, Array<[K, V]>>();
    this.size = size;
    // buckets 사이즈 만큼 초기화
    for (let i = 0; i < size; i++) {
      this.buckets.set(i, []);
    }
  }

  // hash function    
  private hash(key: K): number {
    const hashString = key.toString();
    let hash = 0;
    for (let i = 0; i < hashString.length; i++) {
      hash = (hash << 5) + hash + hashString.charCodeAt(i);
      hash &= hash; // convert to 32-bit integer
    }
    return hash % this.size;
  }

  // 값 저장하기
  public set(key: K, value: V): void {
    const index = this.hash(key);
    const bucket = this.buckets.get(index);
    for (const pair of bucket) {
      if (pair[0] === key) {
        pair[1] = value;
        return;
      }
    }
    bucket.push([key, value]);
  }

  // 값 불러오기
  public get(key: K): V | undefined {
    const index = this.hash(key);
    const bucket = this.buckets.get(index);
    for (const pair of bucket) {
      if (pair[0] === key) {
        return pair[1];
      }
    }
    return undefined;
  }

  // 값 삭제하기    
  public delete(key: K): boolean {
    const index = this.hash(key);
    const bucket = this.buckets.get(index);
    for (let i = 0; i < bucket.length; i++) {
      if (bucket[i][0] === key) {
        bucket.splice(i, 1);
        return true;
      }
    }
    return false;
  }

  // 값이 있는지 여부 확인
  public has(key: K): boolean {
    const index = this.hash(key);
    const bucket = this.buckets.get(index);
    for (const pair of bucket) {
      if (pair[0] === key) {
        return true;
      }
    }
    return false;
  }
}

# list를 이용한 반복문
items = ['a', 'b', 'c']

for item in items:
    print(item)

# range를 이용한 반복문
for num in range(10):
    print(num)

인덱싱

word = 'superman'
word[3]  # 'e'
word[-2] # 'a'
word[5:] # 'man'
word[:5] # 'super'

메서드

startswith()

word = 'python'
word.startswith('py')  #True
word.startswith('sa')  #False

split()

intro = 'my name is beomjin'
intro.split()  # ['my', 'name', 'is', 'beomjin']

fruits = '사과,귤,배,바나나'
fruits.split(',') # ['사과', '귤', '배', '바나나']

append()

numbers = []

numbers.append(1)
print(numbers)  # [1]

numbers.appned(2)
print(numbers)  # [1, 2]

upper(), lower()

intro = 'my name is beomjin'
intro.upper()  # 'MY NAME IS BEOMJIN'
intro.lower()  # 'my name is beomjin'

replace

intro = 'my name is beomjin'
intro.replace('beomjin', 'kim')  # 'my name is kim'

list comprehension

words = ['life', 'love', 'faith']
first_letters = []

for word in words:
    first_letters.append(word[0])

first_letters = [word[0] for word in words]

for문과 list comprehension문은 동일한 결과를 가져온다.

numbers = [1, 3, 4, 5, 6, 7]
even = []

for n in numbers:
    if n % 2 == 0:
        even.append(n)

even = [n for in numbers if n % 2 == 0]

if문과 함께 사용하는 것도 가능하다.

sorted

numbers = [-1, 3, -4, 5, 6, 100]
sort_by_abs = sorted(number, key=abs)  # [-1, 3, -4, 5, 6, 100]

key에 정렬에 이용할 함수를 넣어준다. 내장 함수 뿐만 아니라 사용자 생성 함수도 이용가능하다.

set

set 생성

set1 = {1, 2, 3}
set2 = set([1, 2, 3])
set3 = {1, 1, 2, 3, 3}

원소 추가/삭제

num_set = {1, 3, 5, 7}
num_set.add(9)  # {1, 3, 5, 7, 9} 
num_set.update([3,15,4])  # {1, 3, 4, 5, 7, 9, 15} 
num_set.remove(7)  # {1, 3, 4, 5, 9, 15} 
num_set.discard(13)  # {1, 3, 4, 5, 9, 15}

discard는 remove와 달리 없는 원소에 대해서 삭제할 때 에러를 내지 않는다. (무시됨)

집합 연산

union = set1 | set2
intersection = set1 & set 2
diff = set1 - set2
xor = set1 ^ set2

lambda

def square(x):
    return x * x

square = lambda x: x * x

def get_title(row):
    split = row.split(',')
    return split[1]

get_title = lambda row: row.split(',)[1]

map

get_title = lambda row: row.split(',)[1]

titles = map(get_title, movies)

리스트와 유사하기는 하지만 리스트가 아닌 map이라는 타입을 가진다.

filter

def starts_with_r(word):
    return word.startswith('r')

r_word = filter(starts_with_r, words)

첫번째 인자로 들어오는 함수에서 True를 반환하는 요소만 반환

단일 그래프 그리기

import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 2, 3, 4, 5]

fig, ax = plt.subplots(x,y)
ax.set_title = ('first plot')
ax.set_xlabel('x')
ax.set_ylabel('y')
fig.set_dpi(300)
fig.savefig('first_plot.png')

다중 그래프 그리기

fig, axes = lit.subplot(2,1)
axes[0].plot(x, np.sin(x))
axes[1].plot(x, np.cos(x))

option

ax.plot(x,y, linestyle="", marker="", color="")
ax.set_xlim
ax.set_ylim
ax.legend( loc="", shadow=True, fancybox=True, borderpad=2)

scatter

fig, ax = plt.subplots()
ax.scatter(x,y, c=colors, s=sizes, alpha=0.3)

bar plot

fig, ax = plt.subplots(figsize=(12,4))
ax.bar(x, x*2)

x_ax = np.arange(3)
for i in x_ax:
    ax.bar(x_ax, data[i],
    bottom=np.sum(data[:i], axis=0)

histogram

fig, ax = plt.subplots()
data = np.random.rand(1000)
ax.hist(data, bins=50)

file = open('data.txt')
content = file.read()
file.close

파일을 열고 닫는 방식

with open('data.txt') as file:
    content = file.read()

: 내에서 파일을 사용, close는 필요없다

줄 단위로 읽기

contents = []
with open ('data.txt') as file:
    for line in file:
        contents.append(line)

파일의 모드

with open('data.txt', 'w') as file:
    file.write('hello')

default는 읽기 모드로 'w'값을 넘겨주면 쓰기 모드로 파일을 열 수 있다.

JSON

json과 dictionary는 서로의 포멧으로 변환이 가능하다.

import json

def create_dict(filename):
    with open(filename) as file:
        json_string = file.read()
        new_dict = json.loads(json_string)
        return new_dict 


def create_json(dictionary, filename):
    with open(filename, 'w') as file:
        json_string = json.dumps(dictionary)
        file.write(json_string)        

• loads() : json을 dictionary로
• dumps() : dictionary를 json으로

CSV

CSV : Comma Separated Value

• 컬럼 형태
• 콤마로 구분된 자료
• 다른 dilimter도 사용가능

import csv

with open('data.csv') as file:
    reader = csv.reader(file, delimiter=',')
    for row in reader:
        print(row[0])

Series

• numpy array가 보강된 형태
• data + index

import pandas as pd

# 기본형(0,1,2,...) 아닌 지정된 인덱스를 사용할 수도 있다.
# name 속성으로 title을 지정할 수도 있다.
data = pd.Series([1, 2, 3, 4], index=['a', 'b', 'c', 'd'] name='title1')

# 딕셔너리를 Series로 사용할 수 있다.
population_dict = {
'korea': 5180,
'japan': 12718,
'china': 141500,
'usa': 32676
}
population = pd.Series(population_dict)

연산

A = pd.Series([2, 4, 6], index=[0, 1, 2])
B = pd.Series([1, 3, 5], index=[1, 2, 3])
A + B
A.add(B, fill_value=0)

index에 맞춰서 연산된다.

DataFrame

• 여러개의 Series가 모여서 행과 열을 이룬 데이터

  population = pd.Series(population_dict)
  gdp = pd.Series(gdp_dict)
  

country = pd.DataFrame({ 'population': population, 'gdp': gdp

## Series 간의 연산
```py
gdp_per_capita = country['gdp'] / country['population’]
country['gdp per capita’] = gdp_per_capita

저장과 불러오기

# 저장
country.to_csv(“./country.csv”)
country.to_excel(“country.xlsx”)

# 불러오기
country = pd.read_csv(“./country.csv”)
country = pd.read_excel(“country.xlsx”)

인덱싱/슬라이싱

# 명시적 인덱스 참조
country.loc['china']  
country.loc['japan':'korea', :'population'] 

# 정수 인덱스 참조
country.iloc[0]
country.iloc[1:3, :2]

추가/수정

dataframe = pd.DataFrame(colums=['name', 'age', 'address']
dataframe.loc[0] = ['김범진', '27', '서울']
dataframe.loc[1] = ['name': '이혜영', 'age': '26', 'address': '제주']
dataframe.loc[1, '이름'] = '혜일'

#새로운 컬럼 추가
dataframe[‘contact'] = np.nan
dataframe.loc[0, ‘contact’] = ‘01012341234’

컬럼 선택

dataframe["name"]
dataframe[["name","address","age"]]

누락 데이터

dataframe.isnull()  # null인 값을 True로, null이 아닌 값을 False로 채워진 dataframe 반환

누락된 데이터가 있는 경우 해당 열을 삭제하거나, 빈곳을 default값으로 채우는 방식을 사용할 수 있다.

dataframe.dropna()
dataframe['contact'] = dataframe['contact'].fillna('no phone number')

연산

A = pd.DataFrame(np.random.randint(0, 10, (2, 2)), columns=list("AB"))
B = pd.DataFrame(np.random.randint(0, 10, (3, 3)), columns=list("BAC"))
A + B
A.add(B, fill_value=0)

index와 컬럼에 맞춰서 연산된다.

집계함수

data = {
'A': [ i+5 for i in range(3) ],
'B': [ i**2 for i in range(3) ]
}
df = pd.DataFrame(data)
df['A'].sum() # 18
df.sum()
df.mean()

정렬

df = pd.DataFrame({
'col1' : [2, 1, 9, 8, 7, 4],
'col2' : ['A', 'A', 'B', np.nan, 'D', 'C'],
'col3': [0, 1, 9, 4, 2, 3],
})
df.sort_values('col1', ascending=False) # 기본값은 오름차순 정렬
df.sort_values(['col2', 'col1'])  # col2에 대해서 정렬하고 동일한 값은 col1에 의해 정렬

조건 검색

masking 연산

df = pd.DataFrame(np.random.rand(5, 2), columns=["A", "B"])

df[“A”] < 0.5 # True, False값을 가지는 dataframe

df[(df["A"] < 0.5) & (df["B"] > 0.3)]
df.query("A < 0.5 and B > 0.3") # query를 이용해서도 조건 검색 가능

# 문자열 조건 검색
df["Animal"].str.contains("Cat")
df.Animal.str.match("Cat")

함수로 데이터 다루기

apply

apply를 통해서 함수로 데이터를 다룰 수 있다.

df = pd.DataFrame(np.arange(5), columns=["Num"])

df["Square"] = df.Num.apply(lambda x: x ** 2)

replace

df.Sex.replace({"Male": 0, "Female": 1}, inplace=True) 

그룹

groupby

df.groupby('key')
df.groupby('key').sum()
df.groupby(['key','data1']).sum()

그룹으로 묶은 다음 집계함수를 사용할 수도 있다.

aggregate

df.groupby('key').aggregate(['min', np.median, max])
df.groupby('key').aggregate({'data1': 'min', 'data2': np.sum})

aggregate를 사용하면 집계를 한번에 계산할 수 있다.

filter

def filter_by_mean(x):
return x['data2'].mean() > 3

df.groupby('key').filter(filter_by_mean)

그룹 속성을 기준으로 데이터 필터링을 사용할 수 있다.

apply

df.groupby('key').apply(lambda x: x.max() - x.min())

그룹을 통해 묶인 데이터에 함수를 적용할 수 있다.

get_group

df.groupby('시도').get_group('경기')

그룹으로 묶인 데이터에서 키값으로 데이터를 추출할 수 있다.

multiindex

df = pd.DataFrame(
np.random.randn(4, 2),
index=[['A', 'A', 'B', 'B'], [1, 2, 1, 2]], # 계층적 인덱스
columns=['data1', 'data2']
)

df = pd.DataFrame(
np.random.randn(4, 4),
columns=[["A", "A", "B", "B"], ["1", "2", "1", "2"]] # 계층적 열 인덱스
)

pivot_table

필요한 자료만 뽑아서 새롭게 요약

• index: 행 인덱스로 들어갈 key
• columns: 열 인덱스로 라벨링될 값
• value: 분석할 데이터

df.pivot_table(
index="월별", columns='내역', values=["수입", '지출'])

대규모 다차원 배열을 다룰 수 있게 도와주는 라이브러리

배열 생성

배열 내의 원소는 같은 dtype을 가진다.

np.array([1,2,3,4,5])
np.array([3, 1.4, 2, 3, 4])  # [3. ,1.4, 2. ,3. , 4.] 
np.array([1, 2], [3, 4]) # [[1, 2], [3, 4]]
np.array([1, 2, 3, 4], dtype='float')

다양한 배열

np.zeros(10, dtype=int)
np.ones((3, 5), dtype=float) # 3 x 5 배열
np.arrage(0, 20, 2)  # 0에서 20미만까지 2step을 가진 배열
np.linspace(0, 1, 5)  # 0에서 1이하까지 5등분된 요소를 가진 배열

난수 배열

np.random.random((2, 2)) # 0과 1사이 난수
np.random.normal(0, 1, (2,2))  # params(mean, standard deviation, size)
np.random.randint(0, 10, (2,2))  # parmas(low, high, size)

배열의 정보

x2 = np.random.randint(10, size=(3,4))

x2.ndim # 2
x2.shape # (3,4)
x2.size # 12
x2.dtype # dtype('int64')

배열 변형

reshape

x = np.arrage(8)
x.shape  # (8.)
x2 = x.reshape((2,4))
x2.shape # (2,4)

concatenate

matrix = np.arrage(4).reshape(2,2)
np.concatenate([matrix, matrix], axis=0)  # 세로방향
np.concatenate([matrix, matrix], axis=1)  # 가로방향

split

matrix = np.arrage(16).reshape(4,4)
upper, lower = np.split(matrix, [3], axis = 0)  # 세로방향
upper, lower = np.split(matrix, [3], axis = 1)  # 가로방향

배열 연산

기본 연산

x = np.arange(4)
x + 5
# array([5, 6, 7, 8])
x - 5
# array([-5, -4, -3, -2])
x * 5
# array([ 0, 5, 10, 15])
x / 5
# array([0. , 0.2, 0.4, 0.6])

배열간의 연산

x = np.arange(4).reshape((2, 2))
y = np.random.randint(10, size=(2, 2))
x + y
# array([[1, 7],
[6, 5]])
x - y
# array([[-1, -5],
[-2, 1]])

브로드 캐스팅

shape이 다른 array끼리 연산. 서로의 shape에 맞게 빈 곳을 반복을 통해 채워 넣고 연산한다고 생각하면 이해하기 쉽다.

집계함수

x = np.arange(8).reshape((2,4))
np.sum(x) # 28
np.min(x) # 0
np.max(x) # 7
np.mean(x) # 3.5

np.sum(x, axis=0) # [4, 6, 8, 10]
np.sum(x, axis=1) # [6, 22]

마스킹 연산

True, False array를 통해 True를 만족하는 값들만 필터링

x = np.arange(5)
x < 3  # [True, True, True, False, False]
x[x < 3]  # [0, 1, 2]

next.js는 자체적인 라우팅 기능을 제공한다. page 디렉토리 아래 nest된 구조를 기본적으로 라우팅으로 사용한다.

• pages/index.tsx : /
• pages/upload.tsx : /upload

다이나믹 라우팅또한 다음과 같이 구현할 수 있다.

• pages/post/[postId].tsx : /post/:postId

참고로 다음과 같이([...]) 작성하면 아래 모든 path와 매칭된다.

• pages/post/[...all].js : /post/*

• 여러 타입 중 하나가 올 것이라 가정할 때 사용한다.

  let one : string | number
  one = 1;
  one = 'abc';

• 동시에 여러 타입이 될 수 없다.

type Human = {
  think: () => void;
};

type Human = {
  think: () => void;
};

type Dog = {
  bark: () => void;
};

declare function getType(): Human | Dog;

const creature = getType() 
creature.think(); // Property 'think' does not exist on type 'Human | Dog'. 
                  // Property 'think' does not exist on type 'Dog'.

creature.bark();  // Property 'bark' does not exist on type 'Human | Dog'. 
                 // Property 'bark' does not exist on type 'Human'.

1.2 Intersection Type

• A타입 이면서 B타입이라는 의미
• &로 묶인 모든 타입을 만족해야 한다.
• 기존 타입을 수정하지 않으면서 기존 타입에 새로운 필드를 추가(확장)하고 싶을 때 사용한다.

  type Human = {
  think: () => void;
  };
  

type Developer = { work: () => void; };

const me: Human & Developer = { think() {}, work() {}, };

- 타입간에 겹치는 필드가 있는 경우 에러가 발생할 수 있다.
```ts
type A = {
  output: string;
  test: string | number
};
type B = {
  output: number;
  test: string
};

const obj: A & B = {
  output, // Type 'any' is not assignable to type 'never'.
  test  // only 'string' Type is assignable. 
};

2. Type Guard

데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러개라고 가정할 때, 구별할 수 있는 단서들을 활용하여 조건문을 통해 데이터의 타입을 좁혀나가는 것. 에러를 최소화하는 방어적인 코드 작성 가능.

type Human = {
  think: () => void;
};

type Dog = {
  tail: string;
  bark: () => void;
};

declare function getType(): Human | Dog;

const creature = getType();
if ("tail" in creature) {
  creature.bark();
} else {
  creature.think();
}

• 구별 단서 : instanceof 활용, typeof 활용, in 활용, literal type을 활용
  

3. Optional Chaining

• obj?.propery
• 접근하는 객체가 null 또는 undefined이면 undefined를 리턴. 그렇지 않은 경우는 데이터 값을 리턴한다.
• && 는 falsy한 값(alse, null, undefined, ‘’, 0, -0, NaN) 모두를 체킹한다.
• array와 함수에도 사용할 수 있다.
  ex) comments?.[0] add?.()
  # 4. Nullish Coalescing Operator
• null 병합 연산자 A ?? B
• 좌항이 null, undefined인 경우에만 B를 반환
• A || B 에서는 A가 falsy값인 경우 바로 B를 반환하는 것에 반해, A ?? B는 A가 undefined, null이 아니라면 falsy 값이라해도 A를 반환한다.
  

5. Functional Overloading

• 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것이다.
• 함수의 다형성을 지원한다.
• 제네릭과 달리 타입을 선언하는 시점에 타입이 추론된다.

선언시 주의할 점

• 함수의 이름이 같아야 한다.

• 매개변수의 순서가 같아야 한다.

• 반환타입이 같아야 한다.

• 타입 선언부는 런타임에서 제거된다.

  class User {
  constructor(private id: string) {}
  
  setId(id: string): string;  // 런타임에 제거됨
  setId(id: number, radix: number): string; // 런타임에 제거됨
  
  setId(id: string | number, radix?: number): string {
    return id.toString(radix);
  }
  }

  
  

6. type Assertion

• 타입스크립트가 추론하지 못하는 타입을 as로 명시해주는 것
• 타입 선언과 달리 개발자에 의존하는 타입 (실수할 수 있는 여지가 충분히 존재)
• 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔만 한다.

  let someValue:unknown = 'this is a string'
  

let strLength: number = (someValue as string).length

<br />

# 7. Index Signature
- 인덱스 시그니처에 대해서도 타입을 지정할 수 있다.
- 객체의 프로퍼티를 정확히 알 수 없을 때 사용한다. 
- 너무 많은 프로퍼티를 다 선언할 수 없을 때 사용한다.
```ts
type ArrStr = {
  [key1: string]: string;
  [key2: number]: string;
};

type ArrStrs = Record<string|number, string>

• 데이터를 일렬로 늘여뜨려 놓은 형태인 선형적 자료구조이다.
• 순서를 가진다.

1.1 리스트의 연산

• 삽입
• 삭제
• 탐색

1.2 종류

• ArrayList
• LikedList
  • Single linked list
  • Double linked list
    

2. ArrayList

• 배열 기반의 리스트
• 메모리 공간을 연속적으로 사용

2.1 연산

• 삽입 : 삽입할 인덱스와 그 다음에 있는 데이터들을 한칸씩 뒤로 밀고 삽입, O(n)
• 삭제 : 해당 인덱스 데이터 삭제 후 삭제할 인덱스 그 다음에 있는 데이터들을 한칸씩 앞으로 당김, O(n)
• 탐색 ; random access 방식으로 탐색, O(1)

class MyArrayList<T> {
  length: number;
  elements: T[];

  constructor() {
    this.length = 0;
    this.elements = new Array<T>(0);
  }

  // 요소 추가
  add(t: T): void {
    this.elements[this.length] = t;
    this.length += 1;
  }

  // 특정 인덱스에 요소 추가
  insert(index: number, t: T): void {
    for (let i = index; i < this.length; i++) {
      this.elements[i + 1] = this.elements[i];
    }
    this.elements[index] = t;
    this.length += 1;
  }

  // 특정 인덱스 요소 삭제
  deleteByIndex(index: number): boolean {
    if (index < 0 || index > this.length - 1) return false;
    for (let i = index; i < this.length - 1; i++) {
      this.elements[i] = this.elements[i + 1];
    }
    this.length -= 1;
    return false;
  }

  // 특정 요소 삭제
  delete(t: T): boolean {
    for (let i = 0; i < this.length; i++) {
      if (this.elements[i] === t) {
        for (let j = i; j < this.length - 1; j++) {
          this.elements[j] = this.elements[j + 1];
        }
        this.length--;
        return true;
      }
    }
    return false;
  }

  // 특정 인덱스 요소 취득
  get(index: number): T {
    if (index < 0 || index > this.length - 1) {
      throw new Error("IndexOutOfBoundsException");
    }
    return this.elements[index];
  }

  // 특정 요소 인덱스 취득
  indexOf(t: T): number {
    for (let i = 0; i < this.length; i++) {
      if (this.elements[i] === t) {
        return i;
      }
    }
    return -1;
  }

  // 특정 요소의 유무
  contains(t: T): boolean {
    for (let i = 0; i < this.length; i++) {
      if (this.elements[i] === t) {
        return true;
      }
    }
    return false;
  }

  // 리스트의 length 취득
  size(): number {
    return this.length;
  }

  // 빈 리스트인지 여부
  isEmpty(): boolean {
    return this.length === 0;
  }

  // length 0으로 초기화
  clear(): void {
    this.length = 0;
    this.elements = new Array<T>(0);
  }
}

3. Linked List

• linked list는 Node로 구성되어 있다.
• node는 데이터를 저장할 수 있는 필드와 다음 노드를 가리키는 next pointer를 가진 필드를 가지고 있다.
• 가장 앞에 있는 노드는 head, 가장 마지막 노드는 tail
• 배열의 복사나 재할당 없이 데이터를 추가 할 수 있다. (유연한 공간)
• 대신, random access가 불가능하기 때문에 데이터 접근시 시간 소요

3.1 연산

next pointer를 잘 조정해주어야 한다.

• 삽입 : O(n)
• 삭제 : O(1)
• 탐색 ; O(n)

컴퓨터 네트워크 상에서 리소스( 웹페이지, 이미지, 비디오 등 )가 어디에 위치하는지 알려주기 위한 규약, 흔히 웹 주소로 불린다.

VS URI

URL은 URI의 subset으로 URI는 식별자(identifier)의 역할을 하고 URL은 특정 위치를 가르킨다. URL은 URI와는 달리, #fragment를 포함하지 않으며, ?query까지만 포함한다.

구조

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

• scheme: 프로토콜 (http 또는 https)
• user, password: 데이터에 접근하기 위한 사용자의 이름과 비밀번호
• host, port: 접근할 서버의 host name (port number)
• path: 접근할 서버의 경로에 대한 상세 정보
• query: 접근할 대상에 전달하는 추가적인 정보
• fragment: 서브 리소스를 접근할 때 필요한 정보

Major.Minor.Patch (예시 : ^12.14.1)

• Major: 기존 버전과 호환되지 않는 새로운 버전
• Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전
• Patch: 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
• ^: Major 버전 안에서 가장 최신 버전으로 업데이트 가능

종단간연결의 추상적 설명

1. 계층을 타고 내려가면서 패킷(주소 정보)이 감싸진다.
2. 가장 아래 physical 계층까지 내려가고 연결을 위한 이동을 시작한다.
3. 네트워크를 타고 이동하기 위해 네트워크 계층까지는 타고 올라가서 확인하고 다시 내려오기를 반복하며 이동한다.
4. 목표 지점인 반대편 단말에 도착하여 계층을 타고 올라간다.

물리계층(physical layer)

• 물리적 매체를 통해서 비트 스트림 전송에 요구되는 기능을 담당 (기계적, 전기적, 전송매체)
• 물리적인 장치와 인터페이스가 전송을 위해 필요한 기능과 처리절차 규정
• 주요 기능
  • 인터페이스와 매체의 물리적인 특성: 장치와 전송메체 간의 인터페이스 특성을 규정
  • 비트의 표현 : 비트를 전송하기 위해 전기적 또는 광학적인 신호로 부호화
  • 데이터속도 : 신호가 유지되는 비트의 주기를 설정
  • 비트의 동기화 : 송신자와 수신자는 같은 클록을 사용
• 프로토콜
  • MAC (medium access control) 필요
    • 자유경쟁 (선착순) : Aloha, Slotted Aloha, CSMA, CSMA/CD (IEEE 802.3)
    • Token

• 종단 시스템(end system) : PC나 스마트폰처럼 네트워크 송수신 주체
• 프로토콜(Protocol): 두 이종 시스템을 연결하기 위한 규약 (ex. http)
• 유선 또는 무선
  

인터넷

• 소규모의 네트워크에서 전세계 네트워크와 연결된 상태
• 종단 시스템은 일반적으로 ISP (Internet service provider)에 의해 연결
  

OSI 7 계층

• 네트워크 구성요소를 7개의 계층으로 역할을 나눈 표준 모델
• 각 계층별 역할을 통해 protocol을 충족
• 일부 하위계층은 하드웨어에서 구현
• 상위 계층은 소프트웨어에서 구현
  

TCP/IP ( Transmission Control Protocol / Internet Protocol )

• OSI 7계층이 나오기전 사용되던 사실상 표준 역할
  

IP address

• 통신 자료를 최종적으로 전달하기 위해 필요한 송/수신 위치정보
• IPv4 (10진법), 주소 부족으로 인해 IPv6 개발됨
  

패킷 교환(Packet Switching)

• 종단간에 전송되는 데이터를 패킷이라는 단위로 전달함
• 패킷은 네트워크를 통해 일정한 순서없이 보내지며 어떤 경로를 통해 이동되는지는 네트워크의 상황에 따라 다르다.
  

통신을 통한 기본 동작

• 요청(Request) : 전송하는 종단 장치에서 상대방의 서비스를 요청한다.
• 인지(Indicate) : 수신하는 장치에서 작업 요청을 확인한다.
• 응답(Response) : 수신하는 장치에서 요청 받은 작업에 대해 적절히 응답한다.
• 확인(Confirm) : 전송 측에서 응답 데이터를 최종적으로 확인한다.
  

네트워크의 유형

• LAN (Local Area Network) : 일정 그룹의 지역 네트워크 (집, 사무실), 시설망등을 구축해 연결
• WAN (Wide Area Network) : 원거리 통신망 (국가, 대륙)
  

네트워크 토폴로지

• Ring Topology : 기기와 기기 간의 연결
• Bus Topology : 하나의 메인 회선을 설치하고 그 회선에 각 기기를 연결
• Star Topology : 허브가 존재하고 허브에 각 기기의 회선을 끌어와서 연결
• Mesh Topology: 각 기기가 여러 기기와 연결

특정 조직의 여러 사용자가 공유하여 사용할 수 있도록 통합해서 저장한 운영 데이터의 집합

• 실시간 접근 가능

• 계속적으로 변화

• 동시 공유가 가능

• 저장된 주소가 아닌 내용으로 참조 가능

  
  

데이터의 유형

• structured data (정형 데이터) : excel의 스프레드시트, 관계데이터베이스의 테이블, sql
• semi-structured data (반정형 데이터) : HTML, XML, JSON
• unstructured data( 비정형 데이터) ; 정해진 구조가 없이 저장된 데이터, text, 멀티미디어

DBMS 대신 file system을 사용했을 때의 문제점

• 데이터 중복으로 인한 리소스 낭비
• 업데이트 및 데이터 일관성 유지 어려움
• 데이터 무결성(data integrity constraints) 유지 어려움
• 응용프로그램이 파일 데이터에 종속됨, 파일구조가 바뀔 때마다 응용 프로그램 교체 필요
• 여러 사용자가 동시에 접근할 때 동시성 제공이 어려움
• 파일 변경 중에 시스템 장애가 발생했을 때 처리가 어려움
• 사용자 별 파일 안에 일부 데이터 읽기 권한 제어가 어려움

DBMS

• 파일시스템의 데이터중복과 데이터 종속 문제를 해결하기 위해 제시된 스포트웨어
• 데이터베이스의 생성과 관리를 담당
• 모든 응용프로그램은 데이터베이스 공유 가능, DBMS를 통해 삽입, 수정, 검색
• Oracle, MS SQL Server, Sap HANA, MySQL, PostergreSQL
  

DMBS의 주요기능

• 데이터베이스 구조를 정의하거나 수행
• 데이터를 삽입, 삭제, 수정, 검색하는 연산을 수행
• 데이터를 항상 정확하고, 안전하게 유지
  

DBMS의 장점

• file system에서 언급했던 문제점을 모두 해결할 수 있다.
  

DBMS의 단점

• 구매 비용
• 데이터에 직접적인 접근이 아닌 DBMS를 통해 접근하기 때문에 추가적인 오버헤드 발생
• DBMS의 동작원리와 표준 데이터 언어에 대한 지식 필요
• DBMS의 장애가 발생하면 모든 프로그램이 같이 장애 발생
  

Data Dictiionary

• DBMS는 database와 함께 metadata를 저장한다.
• 데이터 정의어(DDL)에 의해 생성된다.
  

Metadata

• 각 데이터에 접근할 수 있는 데이터의 이름 (테이블, 컬럼 이름)
• 스토리지에 데이터가 저장된 위치
• 보안을 위한 제약 (어던 사용자가 어떤 데이터에 접근할 수 있는지)
• 무결정을 위한 제약 (어떤 값이 데이터에 유효한지)
  

스키마(schema)

• 데이터베이스에 저장되는 데이터의 논리적구조와 제약조건을 정의한 것
  

인스턴스

• 정의된 스키마에 따라 데이터베이스에 실제로 저장된 값
  

데이터언어

• 사용자가 데이터베이스를 구축하고 이에 접근하기 위해 데이터베이스 관리 시스템과 통신하는 수단
• 데이터 정의어(DDL) : 스키마 구조와 제약조건 등을 정의, 삭제, 수정
• 데이터 조작어(DML) : 데이터의 삽입, 삭제, 수정, 검색
• 데이터 제어어(DCL) : 내부적으로 필요한 규칙 (보안, 무결성 체크) 등을 정의하는 데이터 언어
  

질의처리기

• DDL Interpreter: DDL로 작성된 스키마의 정의를 해석, 데이터 딕셔너리에 저장
• DML Compiler: DML로 작성된 데이터 처리 요구를 processing engine이 이해할 수 있는 코드로 해석하여 plan을 작성
• DML(Query) Processing Engine: 컴파일된 plan을 데이터베이스에 실제로 실행

• 자료를 담는 추상적인 틀
• 컴퓨터의 자원이 한정적이기 때문에 제약된 조건내에서 최선의 결과를 내야 한다.
• 데이터의 형태와 쓰임에 가장 적합한 자료구조를 써야한다.

알고리즘

• 어떤 문제가 주어졌을 때, 문제를 풀기위한 동작 절차

점근 표기법

• 빅오 표기법 : 상한 점근
• 세타 표기법 : 상한/하한 점근
• 오메가 표기법 : 하한 점근

빅오(Big-O) 표기법

• 가장 큰 영향력이 있는 항만 표시 : O(N^3 + N^2 + N) -> O(N^3)
• 계수는 무시 : O(2N + 1) -> O(N)
• O(1) < O(logN) < O(N) < O(NlogN) < O(N^2) < O(2^N)

공간 복잡도

• 데이터 관리에 필요한 공간
• 데이터 양의 변화에 따른 공간의 변화
• 예상 소요 공간 측정

시간 복잡도

• 데이터 처리에 소요되는 시간
• 데이터 양의 변화에 따른 소요 시간의 변화
• 지연장애가 발생했을 때의 근거를 찾을 수 있다.
• O(1) : 입력 데이터의 크기와 상관없이 항상 일정한 시간이 걸리는 알고리즘 ( 배열의 random aceess, Hash )
• O(N) : 입력 데이터의 크기에 비례해서 시간이 소요되는 알고리즘 ( for 문 )
• O(logN) : 이진탐색 (Binary search)
• O(N^2) : 입력 데이터의 제곱에 비례해서 시간이 소요되는 알고리즘 ( 2중 for 문)
• O(NlogN) : Merge sort

서버사이드 렌더링을 사용해야 하거나 또는 SEO가 필요할 때 많이 사용되는 프레임워크인 next.js를 사용해서 풀스택 프로젝트를 만들어 보고자 한다.

본 프로젝트의 목적은 첫째로 next.js에서 제공되는 다양한 기능을 써보며 사용 방법에 익숙해지는 것, 둘째는 앞으로 웹 개발을 함에 있어서 next.js를 도입할 수 있을지에 대해 판단해보는 것이다.

본 프로젝트에서 사용되는 기능이 반드시 필요하지 않는 기능도 많겠지만 최대한 많은 기능을 활용해 볼 것이다.

구상

기존에 React와 Express를 이용해 개발한 Rewind라는 프로젝트가 있었다. 기존 프로젝트에서 부족했던 부분을 보완하여 next.js로 migration 할 것이다. (현재 next.js 13 버전이 출시되었지만 12버전으로 개발)

최소한의 setup 이후에 배포부터 할 것이며 배포는 next.js를 개발한 vercel을 이용할 것이다.