def solution(n,a,b):
    answer = 0

    while a != b:       
        a = (a + 1) // 2
        b = (b + 1) // 2
        answer += 1

    return answer

변수 타입의 이름을 생성한다. 새로운 변수타입을 생성하는 것이 아닌 지정할 수 있는 이름을 생성한다.

type Name = string;            // 선언
let student: Name = "Kim";    // 사용

제네릭, 교차 타입과 함께 사용하여 아래와 같은 LinkedList 형태를 만들 수 있다.

type LinkedList<T> = T & { next: LinkedList<T> };

interface Data {
    name: string;
}

let people: LinkedList<Data>;
let s = people.name;
let s = people.next.name;
let s = people.next.next.name;

Interface

변수 타입을 정의하는 데에 사용하는 구문. 프로젝트 내/외부에서 사용하는 코드의 룰을 정의하는데 유용하다.

• 선언

  interface LabeledValue {
    label: string;
    size: number;
  }

• 사용 변수 및 함수 선언 등 데이터 타입 지정이 필요한 경우 동일하게 사용할 수 있다.

  let label: LabeledValue;
  function printLabel(labelObj: LabeledValue){
   // ...
  }

선택적 프로퍼티(Optional Properties)

Interface에서 Key이름에 붙여 사용한다. 해당 프로퍼티의 할당이 선택적임을 말한다.

let obj: { name:string, age?:number } = { name:'A'}; // 성공

읽기 전용 프로퍼티(Readonly properties)

readonly 구문을 이용하여 생성한다. 객체가 처음 생성된 이후 수정할 수 없다.

interface Point {
    readonly x: number;
    readonly y: number;
}

let p: Point = {x: 1, y: 2};
p.x = 2; // Error

※ ReadOnlyArray<T> 타입을 통해 생성 후 변경이 불가한 배열을 생성할 수 있다. ReadOnlyArray<T>는 Array<T> 타입과 다른 타입으로 인식하므로 대입이 필요한 경우 타입 단언으로 오버라이드하여 사용한다.

초과 프로퍼티 검사(Excess Property Checks)

선택적 프로퍼티를 이용한 interface는 초과 프로퍼티가 검사된다. 이는 "대상 타입 (target type)"이 갖고 있지 않은 프로퍼티를 갖고 있을 경우 에러를 발생시킨다.

interface LabelValue {
  name?: string;
  size?: number;
}

let myLabel: LabelValue = { name: "Devlog" };
let myLabel: LabelValue = { name: "Devlog", width: 10}; // Error

함수 타입(Function Types)

함수 매개변수와 반환값의 타입을 지정할 수 있다.

• 선언

  interface SearchFunc {
     (source: string, subString: string): boolean;
  }

  (source: string, subString: string) : 매개변수 이름과 타입 : boolean : 반환값 타입

• 사용

  let func: SearchFunc;
  func = function(src, sub) {
  // ...
  return false;
  }

  매개변수는 같은 위치에 대응되는 값을 검사한다. 때문에 위와 같이 타입을 지정하지 않을 수 있다.

인덱서블 타입(Indexable Types)

Key와 Value로 이루어진 프로퍼티에서 Key의 데이터 타입에 따른 Value의 데이터 타입을 지정할 수 있다.

interface StudentValue {
  name: string;
  [index: number]: string;    // Indexable type
}

let student: StudentValue = {
  name: "Kim",
  1: "A"                    // Indexable type
};

타입 별칭(Type Aliases)과 Interface 비교

• 확장성 같은 이름의 Interface를 여러번 선언하면 자동으로 병합된다. 반면 타입 별칭은 재선언이 불가하다.
• 결합 가능성 Interface는 extends 구문을 통해 확장이 가능하다.
• 구현 가능성 interface는 클래스나 객체의 구현을 위한 목적으로 사용될 수 있다. 반면 타입 별칭은 보다 일반적인 타입 정의를 위해 사용된다.
• 유니온 타입과 인터섹션 타입 interface는 인터섹션 타입 &의 사용이 가능하다. 타입 별칭은 유니온 타입|과 인터섹션 타입& 모두 사용이 가능하다.

내용만 정리해 둔 메모장이라 프로젝트에서 실사용하며 수정될 가능성 있음.

📌 출처

• https://typescript-kr.github.io/
• https://youtu.be/OIMPLNICzoc
• https://blog.naver.com/secondpage_of/223067201224

• 자동배치 기존 배치 기능은 Promise 내부의 업데이트, setTimeout, 기본 이벤트 핸들러 또는 기타 이벤트에서는 처리되지 않았으나, 이번 업데이트의 자동배치 기능을 통해 지원하게 되었다. 자동 배치를 사용하기 위해서는 컴포넌트 트리를 기존의 ReactDOM.render 함수 대신 새로운 ReactDOM.createRoot 함수를 사용해야 한다.

• Transitions(전환) 전환은 긴급 업데이트와 긴급하지 않은 업데이트를 구분하기 위한 React의 새로운 개념이다. React 18 이전까지는 상태 업데이트를 긴급과 전환 업데이트로 명시하는 방법이 없이 모든 상태는 긴급 업데이트로 적용하기 때문에, setTimeout이나 throttle, debounce 등의 테크닉을 사용해 긴급 업데이트 방해를 우회하는 것이 최선이었다. 하지만, React 18부터는 startTransitionAPI를 제공함으로써 전환 업데이트를 명시적으로 구분하여 상태 업데이트를 진행할 수 있게 되었다.

• 서스펜스(Suspense)를 지원하는 새로운 서버 사이드 렌더링 아키텍처 React18에서는 새로운 서버 사이드 렌더링(이하 SSR) 아키텍처가 적용되었다. 새롭게 pipeToNodeWritable API가 추가 되었고, 이 API를 사용하면 SSR을 통해 를 사용할 수 있게 되었다.

Hooks

• useId 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅이다.

• useTransition, startTransition 일부 상태 업데이트를 긴급하지 않은 것(not urgent)로 표시할 수 있다. 이 것으로 표시되지 않은 상태 업데이트는 긴급 업데이트로 간주한다.

• useDeferredValue 급하지 않은 부분의 재렌더링을 지연할 수 있다. 이는 'debounce'와 비슷하지만, 몇 가지 더 장점이 있다. 고정된 지연 시간이 없으므로, 리액트는 첫 번째 렌더링이 반영되는 즉시 지연 렌더링을 시도한다. 이 지연된 렌더링은 인터럽트가 가능하며, 사용자 입력을 차단하지 않는다.

• useSyncExternalStore 스토어에 대한 업데이트를 강제로 동기화하여 외부 스토어가 concurrent read를 지원할 수 있도록하는 새로운 훅이다. 외부 데이터의 원본에 대한 subscript를 필요로 할 때 더 이상 'useEffet'를 사용하지 않고, 이는 리액트 외부 상태와 통합되는 모든 라이브러리에 권장된다.

• useInsertionEffect css-in-js 라이브러리가 렌더링 도중에 스타일을 삽입할 때 성능 문제를 해결할 수 있는 새로운 훅이다. 이 훅은 DOM이 한번 mutate된 이후에 실행되지만, layout effect가 일어나기 전에 새 레이아웃을 한 번 읽는다. 이는 React 18 이전의 문제를 해결할 수 있으며, React 18에서는 나아가 concurrent 렌더링 중에 브라우저에 리액트가 값을 반환하므로, 레이아웃을 한번 더 계산할 수 있는 기회가 생겨 매우 중요하다.

*📌 참조 *

• https://github.com/facebook/react/releases
• https://velog.io/@woodong/React-18-주요-변경점

📌 https://firebase.google.com/

Firebase는 모바일 및 웹 어플리케이션을 만들기 위한 여러 기능을 지원하는 서비스이다. 주요 기능으로는 noSql 기반의 database, 회원가입/로그인 기능을 위한 Authentication 등이 있다. Back-end 코드 없이 1인 포트폴리오를 만들기 위해 사용하였으나 일반적으로 실제 서비스에서는 사용되지 않는다.

install & initialize

1. Firebase 및 React 프로젝트를 생성한다.

2. Web, App, Flutter 등 프로젝트에 맞는 Firebase App을 생성한다.

3. React 내 Firebase를 설치한다. <script> 태그로 사용할 수 있으나 연습 때에는 yarn add firebase 로 설치

4. Firebase App 생성 시 아래 코드와 같은 정보를 제공한다. React 내 해당 js파일을 작성한다.

   // src/firebaseInstance.js
   import { initializeApp } from "firebase/app";
   
   const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
   };
   
   const firebaseInstance = initializeApp(firebaseConfig);
   
   export default firebaseInstance;

5. src/index.js 파일에 import 한다.

Auth Interface

Firebase Auth 서비스를 사용할 수 있게 하는 인터페이스. 현재 인증된 유저 정보 접근, 유저 정보 업데이트 등 인증과 관련된 작업이 가능하다.

- Firebase service setup

1. 생성된 Firebase App 내 'Authentication' 메뉴에서 해당 서비스의 사용 여부를 설정한다.
2. 'Sign-in-method' 메뉴에서 사용할 인증 방식을 선택한다.

- React에서 사용하기

instance와 method 📌 https://firebase.google.com/docs/reference/js/auth.auth

• Interface 생성 getAuth() 함수를 통해 Auth 인터페이스를 생성한다.

  // src/firebaseInstance.js
  import { getAuth } from "firebase/auth";
  // ...
  // firebase initialize
  // ...
  export const authService = getAuth(firebaseInstance);

- sign up, sign in

아래 예시의 method는 E-mail&Password 방식이다. Firebase에서 선택한 auth service 종류에 따라 method가 다르다. promise객체를 반환하는 비동기 method이다.

• createUserWithEmailAndPassword() sign up에 사용하는 method

  // firebaseInstance.js
  import { createUserWithEmailAndPassword } from "firebase/auth";
  
  export function createUser(email, password){
  return createUserWithEmailAndPassword(authService, email, password);
  }

• signInWithEmailAndPassword() sign in에 사용하는 method

  import { signInWithEmailAndPassword } from "firebase/auth";
  
  export function signInUser(email, password){
  return signInWithEmailAndPassword(authService, email, password);
  }

데이터 타입을 동적으로 할당하는 JavaScript와 다르게 TypeScript는 선언 시 데이터의 타입을 지정해야한다. 지원하는 데이터 타입은 Javascript와 거의 동일하다.

• Boolean

  let isDone: boolean = false;

• Number 부동 소수 값. 16진수, 10진수 리터럴에 더불어, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원한다.

  let decimal: number = 6;
  let hex: number = 0xf00d;
  let binary: number = 0b1010;
  let octal: number = 0o744; 

• String JavaScript의 템플릿 문자열도 지원한다.

  let name: string = 'kim';
  name = "kim";

• Array 아래 두가지 선언 방식 모두 사용할 수 있다.

  let arr1: number[] = [1, 2, 3];
  let arr2: Array<number> = [1, 2, 3];

• Tuple 요소의 타입과 개수가 고정된 배열을 표현할 때 사용한다.

  let tpl: [string, number, number];
  tpl = ["kim", 1, 2]; // 성공
  tpl = [1, 2, "kim"]; // 오류
  console.log(tpl[3]); // 오류

• Enum

  enum Stage {Start, Vote, End}
  let eStageStatus: Stage = Stage.Start;
  eStageStatus = Stage[1];    // Stage[1]의 이름인 'Vote'가 대입된다.

  각 요소는 숫자 0부터 순서대로 매치되나 아래와 같이 번호를 수동으로 매치할 수 있다.

  enum Stage {Start=1, Vote, End} // 1부터 순서대로 매치
  enum Color {Red=1, Blue=3, Green=6}

• Any 타입 검사를 생략하는 타입으로 타입이 명확하지 않을 때 사용한다.

  let notSure: any = 4;
  notSure = "maybe a string instead";
  notSure = false; // 성공

• Void 타입이 존재하지 않음을 나타낼 때 사용하며 null과 undefined만 할당할 수 있다. 일반적으로 Return이 없는 함수 선언에 사용된다.

  function func(): void {
    console.log("Hello World!");
  }

• Null and Undefined JavaScript에서의 사용과 같다. 기본적으로 모든 타입에도 대입될 수 있으나 --strictNullChecks를 사용한 경우 any와 각자의 타입(null, undefined)에서만 할당이 가능하다. ※예외, undefined는 void에도 할당이 가능하다.

• Never 절대 발생할 수 없는 타입을 나타낸다. 모든 타입에 할당이 가능한 하위 타입이다. 함수 표현식에서 항상 오류를 발생시키거나, 절대 반환하지 않는 반환타입으로 사용된다. (void와 유사하나 조금 더 강제성이 있다는 의미인 것 같다.)

• Object 원시타입을 제외한 나머지 타입을 말한다.

  function func(obj: object): void;
  func({ prop: 0 }); // 성공
  func(42); // 오류
  func("string"); // 오류
  func(false); // 오류
  func(undefined); // 오류

유니언 타입(Discriminating Unions)

| 연산자를 사용하여 여러 데이터 타입 중 하나를 갖는 데이터 타입을 표현한다.

let nickname: string|number;

타입 단언(Type assertions)

형변환과 유사한 기능이지만 특별히 검사를 하거나 데이터를 재구성하지 않는다.

• "angle-bracket" 문법

  let someValue: any = "this is a string";
  let strLength: number = (<string>someValue).length;

• as-문법

  let someValue: any = "this is a string";
  let strLength: number = (someValue as string).length;

  TypeScript를 JSX와 함께 사용할 때는, as-스타일의 단언만 허용된다.

📌 출처

• https://typescript-kr.github.io/

createRoot()

const reactDOMroot = createRoot(container[, options]);
reactDOMroot.render(<App />);

createRoot()함수는 주어진 container에 대해 React Root를 만들고 해당 Root를 반환한다. 반환된 Root의 render() 함수를 통해 React Element를 DOM으로 렌더링 할 수 있다.

options에는 2가지 매개변수를 사용할 수 있다.

• onRecoverableError: <FUNCTION> : 렌더링 중 오류가 발생한 경우 호출하는 함수를 설정한다.
• identifierPrefix: <STRING> : Default로 React.useId에 의해 생성된 ID를 사용하는데, 생성된 ID 앞에 설정된 <STRING>을 덧붙여준다. 동일 페이지에 여러 루트를 사용할 때 발생할 수 있는 충돌을 회피하는데 유용하다.

생성된 Root는 unmount()로 해제할 수 있다.

Fiber(work) 📌

React Rendering/Update의 가장 작은 단위. 효율적인 업데이트를 위해 아래와 같은 조건을 갖는다.

• 작업을 중지하고, 필요 시 다시 시작할 수 있어야 한다.
• 다양한 작업에 우선 순위를 부여할 수 있어야 한다.
• 이미 완료된 작업을 재사용 할 수 있어야 한다.
• 더 이상 필요 없게 된 작업을 중단할 수 있다.

차일드, 시블링(자매), 리턴(부모) (트리탐색방식 중 왼쪽부터 탐색하는 방식

render()

렌더 함수는 아래 두가지 phase로 이루어진다.

• Render phase 업데이트를 수행하여 화면을 변경하는 것
• Commit phase 변경된 화면을 실제 브라우저에 나타내는 것

*📌 참조 *

• https://ko.reactjs.org/
• 강병진 강사님 강의

• https://www.w3schools.com/python/

출력

print('Hello World')

변수 선언, 대입

a = 1
b = True    # Boolean형은 첫자를 대문자로 기재한다.

javascript와 같은 동적타입 언어로 선언 시 자료형을 명시하지 않는다.

연산

a**b     # a^b

사칙 연산과 나머지 연산은 생략한다.

String

name = 'kim'+'name'    # kimname
a = 2+'hello'        # TypeError

text = 'abcdefghijk'
len(text)            # 11        문자열 길이출력
text[:3]            # abc        index 3번까지 출력(3 미포함)
text[3:]            # defghijk    index 3번부터 출력
text[3:6]            # de         index 3번부터 6번까지 출력(6미포함)
text[:]                # 동일한 텍스트 복사

text.split('c')        # ['ab', 'defghijk ']

List

a_list = ['A', 'B', 'C']
a_list[0]                    # 'A'
a_list[1:2]                    # 'B' index 1번부터 2번까지 출력(2 미포함)
len(a_list)                    # List의 길이 출력
a_list.append('D')            # List의 가장 마지막에 'D'추가
a_list.sort()                # 정렬
a_list.sort(reverse=True)    # 정렬 역순
result = ('A' in a_list)    # 'A'가 a_list 내에 있는지를 Boolean값으로 반환

Dictionaty

a_dict = {'name':'bob', 'age':10}
a_dict['height'] = 170            # 값 추가
result = ('height' in a_dict)    # 'height'가 a_dict 내에 있는지를 Boolean으로 반환

조건문

if a < 1000:
    print('1,000보다 작음')
elif a < 2000:
    print('1,000보다 크고 2,000보다 작음')
else:
    print('2,000보다 큼')

대부분의 언어는 일반적으로 {}를 사용하여 실행 구문을 구분하나, Python은 들여쓰기로 구분한다.

반복문

a_list = ['A', 'B', 'C']

for a in a_list:
    print(a)

for i, a in enumerate(a_list):
    print(i, a)        # i에 index를 출력한다.
    if(i > 2):
        break;

함수

def hello(str='Stranger!'):    # 함수 선언 Default 값 설정
    print('Hello')
    print(str)
    return 'Bye '+str

result = hello('World!')    # Hello World!    함수 호출
print(result)                # Bye World!    리턴 값 출력

hello(str='World!')            # 매개변수 명을 지정하여 전달할 수 있다.

args, kwargs

def hello(*args)
    for e in args
        print(e)

# 매개변수를 갯수의 제한없는 list로 받을 때 사용한다.

def hello(*kwargs)
    print(kwargs)

hello(name='Bob', age=25, weight=70)
# 매개변수를 dictionary로 받을 때 사용한다.

Tuple

a_tuple = ('A', 'B', 'C')

a_tuple[0] = 'Z'        # TypeError

List와 동일한 형태이나 값을 변경할 수 없다.

Set

a_list = [1, 2, 3, 4, 5, 1, 2, 3]
b_list = [4, 4, 5, 6, 7]

a_set = set(a_list)        # 1, 2, 3, 4, 5
b_set = set(b_list)        # 4, 5, 6, 7
# List를 통해 생성되며 중복을 제거한 값을 반환한다.

a_set & b_set        # 교집합 4, 5
a_set | b_set        # 합집합 1, 2, 3, 4, 5, 6, 7
a_set - b_set        # 차집합 1, 2, 3
b_set - a_set        # 차집합 6, 7

f-string

name = 'Bob'
age = 18

print(f'{name}은 {age}세 이다.')    # Bob은 18세이다.

예외처리, try-except 문

try:
    # 실행할 내용
except:
    # 위 try구문에서 Error 발생 시 실행할 내용

파일 불러오기

# a_func.py
def say_hello():
    print('hello')

from a_func import *    # 함수명으로 import도 가능하다. from a_func import say_hello 

say_hello()

삼항연산자

'짝수' if num % 2 == 0 else '홀수'

True일 경우 값 if 조건문 else False일 경우 값

한 줄 반복문

a_list = [1, 2, 3, 4, 5]
b_list = [a*2 for a in a_list]    # [2, 4, 6, 8, 10]

map

list_people = [{'name', 'bob', 'age': 25}, ...]

def check_adult(person):
    return '성인' if person['age'] else '청소년'

result = map(check_adult, list_people)
print(list(result))    # ['성인', ...]

map(함수명, List명) 의 형태로 작성한다. list_people 내 각각의 요소를 check_adult의 매개변수 person에 대입한 값을 반환한다.

filter

list_people = [{'name', 'bob', 'age': 25}, ...]

def check_adult(person):
    return person['age'] > 20

result = filter(check_adult, list_people)
print(list(result))    # [{'name', 'bob', 'age': 25}, ...]

filter(함수명, List명) 의 형태로 작성한다. 함수의 return값이 True인 요소만 반환한다.

result = filter(lambda x: x['age'] > 20, list_people)

람다식을 사용할 때에는 관용적으로 매개변수 명을 x로 사용한다.

lambda

(lambda x, y: x + y)(10, 20)

함수 선언을 단순화 하는 형태의 구문. lambda 매개변수 : 표현식 형태로 선언한다.

list_people = [{'name', 'bob', 'age': 25}, ...]
result = map(lambda person: '성인' if person['age'] else '청소년', list_people)
# ['성인', ...]

위 map 예제를 위와 같이 작성할 수 있다.

Class

class Monster():    # 클래스 선언
    hp = 100

    def damage(self, attack):        # self, JavaScript의 this와 같은 역할
        self.hp = self.hp - attack

m = Monster()        # 인스턴스 생성
m2 = Monster()

m.damage(120)
m2.damage(90)

** 📌 출처 **

• Sparta coding club 강의

시간 복잡도 (Time Complexity)

알고리즘을 수행하는데 이루어진 연산의 횟수이며 여기에서 연산의 종류는 산술, 대입, 비교, 이동을 말한다.

연산의 횟수는 변수의 갯수에 의존하여 결정된다. 때문에 아래 빅오 표기법과 같이 변수의 갯수에 따른 증가 추세를 나타내 보다 간편하게 표현한다.

• 빅오 표기법 (big-oh notation)Permalink 시간 복잡도 함수에서 불필요한 연산을 제거하여 보다 간편하게 시간/공간 복잡도를 표기하는 방법이다. 빅오 표기법은 정확한 연산의 갯수가 아니라 알고리즘의 일반적인 증가 추세를 표현한다. 알고리즘이 n에 정비례하여 실행 시간을 가질 경우 시간 복잡도가 O(n)이라 표시하고 ‘big-oh of n’이라고 읽는다.

동일한 알고리즘이라도 입력되는 데이터에 따라 다른 실행시간을 보일 수 있다. 예를 들어 정렬 알고리즘의 경우 대부분 정렬되어있는 데이터와 그렇지 않은 데이터의 시간 복잡도가 크게 차이날 수 있다. 이 때 데이터의 집합에 따라 세가지 경우에 따라 나누어 평가한다.

• 최선의 경우(Best Case) : 실행 시간이 가장 적은 경우를 말한다.
• 평균적인 경우(Average Case) : 모든 입력을 고려하고 각 입력이 발생하는 확률을 고려한 평균 수행 시간을 말한다.
• 최악의 경우(Worst case) : 알고리즘의 수행 시간이 가장 오래 걸리는 경우를 말한다.

** 시간 복잡도를 계산할 때에는 최악의 경우를 주로 사용한다.**

공간 복잡도 (Space Complexity)

프로그램의 실행~완료까지 필요로하는 자원 공간의 양을 말한다.

총 공간은 고정 요구 공간과 가변 요구 공간*의 합으로 나타낼 수 있다.

*가변 요구 공간 : 해결하려는 문제의 인스턴스에 의존하는 크기를 가진 공간. 즉, 동적으로 필요한 공간을 말한다.

좋은 알고리즘은 시간도 적게 걸리고 자원의 사용도 적어야 한다. 다만 시간과 공간은 반비례적인 경향이 있어 선택의 문제가 되는 경우도 있을 수 있다. 이 때 알고리즘의 척도는 시간 복잡도를 위주로 판단하는 편이다.

** 📌 참조 **

• https://madplay.github.io/post/time-complexity-space-complexity

• NPM(Node Package Manager)은 Node.js의 기본 패키지 관리 툴
• yarn은 페이스북에서 개발한 패키지 관리 툴이다. npm에 비해 패키지 설치 속도가 빠르고 yarn.lock 파일을 통해 모든 디바이스에서 같은 패키지를 설치할 수 있도록 보장하므로 버전의 차이로 인해 발생하는 버그를 방지한다.

명령어

단축 플래그

** 📌 출처 **

• https://ui-tricks.netlify.app/posts/2020-03-10-npm-yarn/

설치 및 사용

설치

npm install -g typescript ※ node.js 최신버전 설치 필수

파일 생성 및 사용

• 확장자 .ts를 이용하여 생성한다.

• 브라우저는 TypeScript를 읽을 수 없으므로 브라우저로 읽히기 전 JavaScript로 컴파일 해야한다. 컴파일 명령어 : tsc -w

• .ts파일과 같은 폴더 내에 tsconfig.json이라는 파일이 꼭 있어야한다. 이는 ts를 js로 컴파일 할 때의 옵션을 명시해둔 파일이다.

  {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
      }
  }

  • target : ECMAScript 대상 버전 지정. 기본값은 "ES3"
  • module : 모듈 코드 생성 지정. None, CommonJS, AMD 등

  그 외 옵션은 아래 출처 참조.

** 📌 출처 **

• https://typescript-kr.github.io/

A lock file already exists in the repository, 
which blocks this operation from completing.

Github에서 checkout, commit, push 등의 명령이 동작하지 않고 위와 같은 오류메세지가 출력된다.

✅ Clear

GitHub 작업 중 충돌이 발생한 상태. 내 경우 GitHub desktop을 종료 후 재실행하니 정상화되었다. git bash를 사용중인 경우 충돌이 발생한 lock파일을 삭제하면 정상화된다고 한다.

** 📌 참조 **

• https://greenhelix.tistory.com/137

CSS전처리기를 통해 코드 베이스를 여러 파일로 분할하여 사용할 때 프로젝트에서 사용되는 다수의 스타일 파일을 7개의 폴더(abstracts, vendeors, base, layout, components, pages, themes)로 관리하고 이를 1개의 파일에 import하여 사용하는 방식이다.

각각의 폴더는 아래와 같은 내용을 담는다.

• abstracts 프로젝트 전체에서 사용하는 도구들을 담고 있다. _variables.scss, _mixins.scss, _functions.scss, _placeholders.scss 등

• vendors 외부 라이브러리 및 프레임워크의 CSS를 담는다. 외부 파일을 재정의해야하는 경우 vendors-extensions라는 폴더를 따로 생성하여 관리하는 것을 권장하고 있다. _bootstrap.scss, _jquery-ui.scss, _select2.scs

• base 프로젝트의 전반적으로 사용될 디폴트 스타일, 폰트 등 공용 스타일을 담는다. _base.scss, _reset.scss, _typography.scss, _animations.scss

• layout 사이트 구조/레이아웃을 담는다. _grid.scss, _header.scss, footer.scss, _sidebar.scss, _forms.scss

• components layout보다 작은 구성요소들을 담는다. _buttons.scss, _media.scss, _thumbnails.scss

• pages 각 페이지 고유의 스타일을 담는다. 일반적으로 파일명은 페이지 이름과 동일하게 설정한다. _home.scss, _contact.scss

• themes 테마를 설정할 수 있는 웹의 경우 테마와 관련된 스타일을 담는다. _theme.scss, _admin.scss

위와같이 분류한 스타일 시트들은 1개의 파일에 모아 사용한다. 일반적으로 main.scss의 파일명을 사용하는 편이나 변경해도 관계없다. 해당 파일은 아래 예시와 같이 단순히 import만을 담당하며, CSS는 순서에 의존하므로 아래와 같이 import의 순서를 통일하여 사용한다.

// main.scss

@import
  'abstracts/variables',
  'abstracts/functions',
  'abstracts/mixins',
  'abstracts/placeholders';

@import
  'vendors/bootstrap',
  'vendors/jquery-ui';

@import
  'base/reset',
  'base/typography';

@import
  'layout/navigation',
  'layout/grid',
  'layout/header',
  'layout/footer',
  'layout/sidebar',
  'layout/forms';

@import
  'components/buttons',
  'components/carousel',
  'components/cover',
  'components/dropdown';

@import
  'pages/home',
  'pages/contact';

@import
  'themes/theme',
  'themes/admin';

// main.scss

@import 'abstracts/*';
@import 'vendors/*';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';

** 📌 참조 **

• https://sass-guidelin.es/#the-7-1-pattern
• https://mine-it-record.tistory.com/594

💻 개요

• 개발 기간 : 2022.11.04~2022.12.16 ( 6주 )
• 사용 기술 : Javascript, React, Redux, SCSS, Axios, SockJS, Stomp, WebRTC, Open-vidu, AWS Amplify
• 발표 영상 : https://youtu.be/et2UZDITnOs

📚 경험

• 팀장으로써 전반적인 업무 리딩 및 회의 주도
• 시범 서비스를 통해 생성된 게임 방 669개, 회원 239명, 플레이된 게임 657판, 모든 유저 전체 플레이 약 30시간, 36건의 피드백 수집 및 반영/개선 경험
• 디자인 팀, 백엔드 팀과의 협업 경험
• Github Issue, Projects, Pull requests 등 Issue tracker를 이용한 협업 경험
• AWS Amplify를 이용한 자동배포
  • Git Actions를 이용한 자동배포도 경험하였으나 최종 사용되지않음
• 라이어 게임 웹으로 구현
  • SockJS와 Stomp를 이용한 소켓 통신으로 게임 룰 구현
  • WebRTC를 이용하여 화상 채팅 연결 및 게임 룰에 따른 Device 제어 구현
• Sentry를 이용하여 user side error log 실시간 수집 및 개선

💬 회고

좋았던 점

• 공부를 시작하며 만난 Javascript와 React의 코드들은 대부분 멘토님들께서 프로젝트에 알맞은 형태로 준비해주신 예제 코드들 이었는데 webRTC와 WebSocket을 알아가며 Google과 Github 등에서 만난 코드는 새롭고 당황스럽고 많은 부분이 내 프로젝트와는 달라 짜집어 고쳐가며 만들어야 했다. 덕분에 앞으로 새로운 기능이 주어지더라도 배우면 할 수 있겠다. 라는 무던한 마음이 생겼다.
• Game rule을 기대한만큼 구현하였다. 디테일에서 아쉬운 점이 많았지만 커다란 로직은 생각대로 작동해주어서 즐거웠다.
• Git issue, projects, PR을 조금은 잘 썼던 프로젝트였다.

아쉬운 점

• redux, redux-toolkit 등 배운 기능의 능숙한 사용을 보여 주지는 못한 기획이었다.
• scss의 이점을 살릴 수 있는 구조가 아니었던 것 같다. 차후에는 scss 7-1 pattern을 활용해보고 싶다.
• open-vidu에서 제공한 소스가 class component로 작성된 코드였는데 이를 100% 활용하지 못했다. 시간이 넉넉했다면 전체 코드를 function component로 만드는 작업을 더 시도해보았을 것 같다.
• 유저 사이드에서 발생한 모든 버그를 해결하지 못했다. 왜 문제가 발생했는지, 어떤 케이스에서 발생한 문제인지 자세히 알고 싶고, 어떤 예외처리를 추가했어야했는지는 아직도 고민이 된다.
• Typescript를 써보고 싶었다.

이번 포스트는 제가 작성한 방식을 간단하게 설명하는 내용이며 더 좋은 다른 방식이 있을 수 있습니다. 😃 Git : https://github.com/HangHae-TheFinalProject/FrontEnd

라이어 게임의 룰을 살펴보면 크게 몇 단계의 스테이지로 이루어져 있다는 걸 알 수 있다.

• 각 유저에게 할당된 라이어여부/키워드를 공개하는 스테이지
• 각 유저마다 키워드에 대해 발표하는 스테이지
• 라이어로 예상되는 유저를 투표하는 스테이지
• 라이어로 지목된 유저가 정답을 맞추는 스테이지
• 승/패를 출력하는 스테이지

이를 stageNumber라는 변수로 표현하여 게임 룰을 진행한다. (+) : enum 문을 사용했다면 더 좋았을 것 같다.

일반적인 web은 user interaction에 따른 제어가 대부분이나, 실시간 다대다 통신을 지원하는 웹게임은 websocket으로 전송받는 server 응답에 따라 모든 유저의 stageNumber를 동시에 변경해야한다.

때문에 user interation 또는 timer를 통해 상태가 변경되어야 하는 경우 아래 예시와 같이 서버로 그 내용을 전송하며 stageNumber를 변경하여 게임을 진행하지는 않는다.

// lier를 투표한 경우 그 nickname을 서버로 보내는 역할을 하는 함수.
const vote = (nickname) => {
  if (!client.current.connected) return;

  client.current.publish({
    destination: `/pub/lier/game/${id}/vote`,
    body: JSON.stringify({
      value: nickname,
    }),
  });
};

// 투표 화면 내 onClick 이벤트에 위 vote함수 연결
<figure onClick={() => {vote(member);}}>
  <figcaption>{member}</figcaption>
</figure>

stageNumber는 아래 예시와 같이 서버에서 약속한 값이 전송해주었을 때 변경한다. 아래 예시의 LIER 케이스는 모든 유저가 투표를 마친 후 투표 결과가 라이어를 맞춘 경우 전송되는 값이다.

const subscribe = () => {
  client.current.subscribe(`/sub/gameroom/${id}`, ({ body }) => {
    const data = JSON.parse(body);
    switch (data.type) {
        case 'LIER':
          setStageNumber(7);
        break;
    }
  });
};

위 내용 및 예시는 최대한 간단하게 작성된 내용이며 실제로는 게임에 사용되는 다양한 변수들의 제어가 필요하여 코드가 꽤 길고 복잡해질 수 밖에 없었다.

다양한 형태의 변수를 보다 용이하게 제어하는데에 enum문을 사용했다면 좋을 것 같다. 또한 게임 내 사용되는 다수의 컴포넌트 내에 stageNumber가 사용되므로 enum문을 사용한다면 해당 enum문의 형태를 공용으로 관리하는 파일을 따로 두는 편이 좋았을 것 같다.

목차

1. AWS 'Route 53' 호스팅 영역 생성 & Gabia DNS 변경
2. AWS S3 버킷 생성 및 권한/속성 변경
3. AWS 'IAM' 사용자 추가
4. Git Action

1. AWS 'Route 53' 호스팅 영역 생성 & Gabia DNS 변경

​ AWS에서 외부 Domain을 사용하기 위해서는 AWS의 DNS 서비스인 'Route 53'에 등록이 필요하며, Route 53의 DNS서버를 Gabia DNS 서버를 대체하여 사용합니다.

• AWS 'Route 53' > '호스팅 영역' > '호스팅 영역 생성'

​ domain_name.dev는 사용할 Domain으로 변경

• 생성된 호스팅 click > '레코드 생성'

• 호스팅 영역 세부 정보 내 'NS' 유형의 값/트래픽 라우팅 대상 컬럼의 값을 Gabia DNS 서버로 설정

2. AWS S3 버킷 생성 및 권한/속성 변경

• AWS 'S3' > '버킷 만들기' > 아래와 같이 설정 후 '버킷 만들기'

• AWS 'S3' > 생성한 버킷 click > '권한' > 버킷 정책 > 편집

  {
      "Version": "2012-10-17",
      "Id": "Policy1668671586744",
      "Statement": [
          {
              "Sid": "AddPerm",
              "Effect": "Allow",
              "Principal": "*",
              "Action": "s3:GetObject",
              "Resource": "arn:aws:s3:::domain_name.dev/*"
          }
      ]
  }

• AWS 'S3' > 생성한 버킷 click > '속성' > '정적 웹 사이트 호스팅 편집' > 활성화

3. IAM 사용자 추가

이미 같은 설정으로 생성된 사용자가 있다면 생략해도 됩니다.

• AWS 'IAM' > '사용자' > '사용자 추가'

  • AWS 자격 증명 유형 : '액세스 키 - 프로그래밍 방식 액세스' 체크
  • Permissions : 'AmazonS3FullAccess'

• 추가 시 받을 수 있는 '액세스 키', '비밀 액세스 키' 메모

4. 드디어 Git Action

• 원격 repo > Actions > 'set up a workflow yourself'

  name: Node.js Package
  
  on:
    push:
      branches: [main]
    pull_request:
      branches: [main]
  
  jobs:
    deploy:
      runs-on: ubuntu-latest
      env: 
        CI: false
      steps:
        - uses: actions/checkout@v3
  
        - name: Install dependencies
          run: yarn
  
        - name: Build
          run: yarn build
  
        - name: Configure AWS Credentials
          uses: aws-actions/configure-aws-credentials@v1
          with:
            aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}            # AWS 사용자 ACCESS KEY
            aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}    # AWS 사용자 SECRET ACCESS KEY
            aws-region: ap-southeast-2
  
        - name: Deploy static site to S3 bucket
          run: aws s3 sync ./build s3://${{ secrets.S3_BUCKET }} --delete    # AWS BUCKET NAME

  .yml 파일의 작성 방식 설명은 생략하겠습니다.

• 위 예제에서 사용된 action secret key 는 Git repo > Settings > Secrets 에서 등록할 수 있습니다!

** 📌 참조 **

• https://eundol1113.tistory.com/210
• https://medium.com/marlinelee2/react-amazon-s3%EB%A1%9C-%ED%98%B8%EC%8A%A4%ED%8C%85-417aa93cf469
• https://hannut91.github.io/blogs/route53/gabia
• https://grasinnong-developer.tistory.com/88
• https://velog.io/@cptkuk91/AWS-S3Route53-%ED%98%B8%EC%8A%A4%ED%8C%85-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0
• https://react-etc.vlpt.us/08.deploy-s3.html
• https://blog.naver.com/ipzzinn/222925361366
• https://satisfactoryplace.tistory.com/361
• https://doqtqu.tistory.com/331

ERROR in ./node_modules/hoist-non-react-statics/node_modules/react-is/index.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/h****e/Desktop/FrontEnd/node_modules/hoist-non-react-statics/node_modules/react-is/index.js'
ERROR in ./node_modules/mime/lite.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/h****e/Desktop/FrontEnd/node_modules/mime/lite.js'
ERROR in ./node_modules/uuid/dist/esm-browser/index.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/h****e/Desktop/FrontEnd/node_modules/uuid/dist/esm-browser/index.js'

Mac에서만 발생했던 오류로 file or directory를 찾을 수 없다는 메세지가 나타나는데 실제로 해당 file/directory는 존재하지않고 따로 import를 설정해 두지도 않았다.

✅ Clear

찾아보니 Mac에서는 종종 이상한 경로로 Auto import가 작동하는 일이 있다고한다. 출처에서는 다양한 해결 방법을 제시해주셨으나 우리 프로젝트에서는 터미널을 껐다 다시 켜는 것으로 해결되었다.

*📌 참조 *

• https://dotorimook.github.io/post/2021-10-14-auto-import-error/

• 객체 생성 및 이미지 경로 지정

  const image = new Image();    
  // image 객체 생성
  
  image.src = '../IMAGE_PATH'    
  // image 경로 설정

• property image.border : 테두리 값 image.complete : 이미지의 load가 완료되었는지 여부(boolean) image.width : 이미지 width(px) image.height : 이미지 height(px) image.src : 이미지 경로

• Event handler onAbort : 이미지 로딩이 중간에 멈춰진 경우 onError : 이미지 로딩 중 오류가 발생한 경우 onLoad : 이미지 로딩이 완료된 경우

** 📌 참조 **

• https://velog.io/@lllen/Image-%EA%B0%9D%EC%B2%B4

p{
    white-space: nowrap;    
    overflow: hidden;
    text-overflow: ellipsis;
}

• white-space: nowrap white-space는 문자열 내 공백과 개행 문자의 처리, 설정된 블록의 범위를 벗어난 Text의 개행 여부를 설정한다. nowrap은 2개 이상의 공백을 1개로 축소하고, 개행 문자를 무시하며, 범위를 벗어난 Text도 개행없이 출력한다.

• overflow: hidden overflow는 설정된 블록의 범위를 벗어난 컨텐츠의 처리를 설정한다. hidden은 범위를 벗어난 컨텐츠는 숨긴다.

• text-overflow: ellipsis text-overflow는 설정된 블록의 범위를 벗어난 문자열의 처리를 설정한다. ellipsis는 문자열의 뒷 부분을 '...'으로 말 줄임 처리를 한다. 단독으로는 말줄임 처리를 할 수 없으며 overflow: hidden과 함께 사용하여야 정상적으로 동작한다.

devTools: process.env.NODE_ENV !== 'production' 구문을 리듀서에 추가하여 설정할 수 있다. process.env.NODE_ENV : 빌드 시 'development' 또는 'production' 문자열로 대체된다.

// configStore.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: { },
  devTools: process.env.NODE_ENV !== 'production'
}, );

export default store;

** 📌 참조 **

• 갓재명님...🤩
• https://ui.toast.com/weekly-pick/ko_20191212

현재 유저가 보고있는 view의 위치와 document의 전체 길이를 비교해서 유저가 보고있는 view가 document의 제일 아래인지를 확인하고, 가장 아래일 때 isFetching은 true를 반환하며 useEffect(() => {}, [isFetching]) 함수를 통해 isFetching이 true일 경우 매개변수로 전달된 callback함수를 실행하는 custom hook이다.

// useInfiniteScroll.js

import { useState, useEffect } from "react"
// scroll event가 연속적으로 발생하지 않도록 throttle을 사용하여 최적화한다. lodash package 설치가 필요하다.
import { throttle } from "lodash";

const THROTTLE_WAIT = 300;

export default function useInfiniteScroll(fetchCallback){
    const [isFetching, setIsFetching] = useState(false);

    // 유저가 보고있는 view가 document의 제일 아래인지 체크하는 함수
    // window.innerHeight : 뷰포트 높이를 px단위로 나타낸다.
    // document.documentElement.scrollTop : 스크롤의 위치를 px단위로 나타낸다. 가장 위는 0 아래로 내려갈수록 값이 커진다.
    // document.documentElement.offsetHeight : border를 포함한 박스의 길이
    const handleScrollThrottle = throttle(() => {
        if(window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight){
            setIsFetching(true);
        }
    }, THROTTLE_WAIT);

    // Scroll Eventlistener를 등록하여 scroll event가 발생하면 handleScrollThrottle함수를 통해 유저의 view 위치를 계산한다. 
    useEffect(() => {
        window.addEventListener('scroll', handleScrollThrottle);
        return () => {
            window.removeEventListener('scroll', handleScrollThrottle);
        }
    }, []);

    // isFetching값이 true가되면 매개변수로 전달받은 콜백함수를 실행한다.
    useEffect(() => {
        if(!isFetching) {
            return;
        }
        fetchCallback();
    }, [isFetching])

    return [isFetching, setIsFetching]
}

위 코드는 React 학습 3주차 실습에 사용했고 repo 주소는 아래와 같다.

• https://github.com/roses16-dev/react-week-3

** 📌 출처 **

• https://ha-young.github.io/2021/frontend/infinite-scroll/