늘 겸손하게

CS - 디자인 패턴

besforyou999 — Sat, 11 Nov 2023 15:47:20 +0900

디자인 패턴

디자인 패턴은 프로그램을 설계할 때 발생했던 문제점을 효율적으로 해결 할 수 있는 코딩 아이디어, 방법론을 말합니다.

대표적인 디자인 패턴으로는 '싱글톤 패턴', '옵저버 패턴', '팩토리 패턴' 등이 있습니다.

싱글톤 패턴

하나의 클래스가 하나의 인스턴스만을 가지고 계속 재활용해 메모리를 아끼고, 데이터 공유를 수월하게 하는 디자인 패턴.

보통 데이터베이스 연결 모듈에 많이 사용합니다.

메모리 사용량을 줄일 수 있는 장점이 존재하나 모듈간의 결합이 강해져 유지보수성이 떨어지고, TDD를 어렵게 하는 단점이 존재합니다.

Java

class Singleton {
    private static class singleInstanceHolder {
        private static final Singleton INSTANCE = new Singleton();
    }
    public static Singleton getInstance() {
        return singleInstanceHolder.INSTANCE;
    }
}

public class Hello {
    public static void main(String [] args) {
        Singleton a = Singleton.getInstance();
        Singleton b = Singleton.getInstance();
        
        if (a == b) {
            System.out.println(true); // true 출력됨.
        }
    }
}

JavaScript

class Singleton {
    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this
        }
        return Singleton.instance
    }
    
    getInstance() {
        return this.instance
    }
}

const a = new Singleton();
const b = new Singleton();
console.log(a === b); // true

싱글톤 패턴의 장점

같은 인스턴스를 재활용해 메모리 사용을 아낀다.
메모리 공유하기 유용하다.

싱글톤 패턴의 단점

모듈간 결합이 강해져 유지보수성이 떨어진다.
TDD를 어렵게 한다. TDD가 잘 이루어지려면 각각의 테스트는 독립적이어야 하나 싱글톤 패턴은 데이터를 공유하기 때문에 독립적인 테스트를 어렵게 한다.

싱글톤 패턴을 활용하기 좋은 경우

전역 상태 관리 : 싱글톤은 전역 객체로서 중앙에서 상태를 관리하는데 도움을 줌
리소스 공유
Lazy Loading : 인스턴스를 처음 사용할 때까지 생성하지 않는 '지연 로딩(Lazy Loading)'을 구현할 수 있습니다.

옵저버 패턴

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 일어나면 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴입니다.

주체는 객체의 상태 변화를 관찰하는 관찰자이며, 상태 변화가 일어나면 옵저버들에게 변화를 알려줍니다.

옵저버 패턴을 활용한 서비스로 '트위터'가 있습니다. 트윗을 날리면 옵저버(팔로워)들에게 트윗이 올라왔다는 신호가 감.

옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC(Model-View-Controller) 패턴에도 사용됩니다.

Java

import java.util.ArrayList;
import java.util.List;

interface Subject {
    public void register(Observer obj);
    public void unregister(Observer obj);
    public void notifyObservers();
    public Object getUpdate(Observer obj);
}

interface Observer {
    public void update(); 
}

class Topic implements Subject {
    private List<Observer> observers;
    private String message; 

    public Topic() {
        this.observers = new ArrayList<>();
        this.message = "";
    }

    @Override
    public void register(Observer obj) {
        if (!observers.contains(obj)) observers.add(obj); 
    }

    @Override
    public void unregister(Observer obj) {
        observers.remove(obj); 
    }

    @Override
    public void notifyObservers() {   
        this.observers.forEach(Observer::update); 
    }

    @Override
    public Object getUpdate(Observer obj) {
        return this.message;
    } 
    
    public void postMessage(String msg) {
        System.out.println("Message sended to Topic: " + msg);
        this.message = msg; 
        notifyObservers();
    }
}

class TopicSubscriber implements Observer {
    private String name;
    private Subject topic;

    public TopicSubscriber(String name, Subject topic) {
        this.name = name;
        this.topic = topic;
    }

    @Override
    public void update() {
        String msg = (String) topic.getUpdate(this); 
        System.out.println(name + ":: got message >> " + msg); 
    } 
}

public class HelloWorld { 
    public static void main(String[] args) {
        Topic topic = new Topic(); 
        Observer a = new TopicSubscriber("a", topic);
        Observer b = new TopicSubscriber("b", topic);
        Observer c = new TopicSubscriber("c", topic);
        topic.register(a);
        topic.register(b);
        topic.register(c); 
   
        topic.postMessage("amumu is op champion!!"); 
    }
}
/*
Message sended to Topic: amumu is op champion!!
a:: got message >> amumu is op champion!!
b:: got message >> amumu is op champion!!
c:: got message >> amumu is op champion!!
*/

옵저버 패턴의 장점

느슨한 결합 : 주체와 옵저버 간 결합이 느슨하게 되어 있어 주체는 옵저버의 존재를 알지만, 구체적인 옵저버에 대해서는 알지 못합니다. 이는 코드의 유연성을 높여주고 유지보수를 쉽게 만듭니다.
이벤트 기반 프로그래밍 : 옵저버 패턴은 이벤트 기반 프로그래밍에 적합합니다. 이벤트가 발생할 때마다 필요한 동작을 수행할 수 있어 비동기적인 이벤트 처리를 용이하게 합니다.
모듈화와 재사용성 : 각 옵저버는 독립적으로 작성되어 모듈화가 잘 이루어집니다. 이는 새로운 옵저버를 추가하거나 기존의 옵저버를 변경해 재사용성을 높여줍니다.

옵저버 패턴의 단점

오버헤드와 성능 문제 : 옵저버 수가 많을 경우, 옵저버에게 알림을 보내는데 오버헤드가 커 성능에 영향을 미칠 수 있습니다.
복잡성 : 다수의 주체와 옵저버, 복잡한 이벤트 처리 로직이 있는 경우 코드를 이해하고 유지보수하기 어려울 수 있습니다.

옵저버 패턴을 활용하기 좋은 경우

MVC 아키텍처 : 옵저버 패턴은 MVC 아키텍처에서 모델과 뷰 간의 통신에 사용됩니다. 모델의 상태가 변경될 때 뷰에게 알리고, 뷰는 갱신된 상태를 반영해 사용자에게 보여줍니다.
분산 시스템에서 이벤트 처리 : 분산 시스템에서 여러 컴포넌트 간에 이벤트를 효과적으로 처리하는 데 사용할 수 있습니다. 여러 서비스나 모듈 간의 통신을 위해 옵저버 패턴을 활용 가능합니다.

팩토리 패턴

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴.

상위 클래스는 인스턴스 생성 방식에 대해 알 필요가 없기 때문에 더 많은 유연성을 갖게 됩니다.

class Latte {
    constructor() {
        this.name = "latte"
    }
}

class Espresso {
    constructor() {
        this.name = "Espresso"
    }
}

class LatteFactory {
    static createCoffee() {
        return new Latte()
    }
}

class EspressoFactory {
    static createCoffee() {
        return new Espresso()
    }
}

const factoryList = { LatteFactory, EspressoFactory }

class CoffeeFactory {
    static createCoffee(type) {
        const factory = factoryList[type]
        return factory.createCoffee()
    }
}

const main = () => {
    const coffee = CoffeeFactory.createCoffee("LatteFactory")
    
    console.log(coffee.name) // Latte
}

main()

팩토리 패턴의 장점

유연성과 확장성 : 새로운 객체가 추가되거나 기존 객체의 변경이 있을 때, 해당 객체를 생성하는 팩토리 클래스만 수정하면 됩니다. 이는 코드 변경을 최소화하고 시스템의 유연성과 확장성을 높입니다.
의존성 주입 : 팩토리 패턴은 의존성 주입을 통해 객체 생성에 필요한 의존성을 외부에서 주입할 수 있도록 합니다. 이는 테스트 용이성과 코드의 재사용성을 증가시킵니다.

팩토리 패턴의 단점

코드의 증가 : 클래스 당 하나의 팩토리 클래스를 만들어야 하므로 클래스 수에 비례해 코드의 양이 증가할 수 있습니다.
클래스와 팩토리 간의 결합도 : 팩토리 클래스와 생성되는 객체 간의 결합도 증가. 팩토리의 변경이 생성되는 객체에 영향을 줄 수 있다.

팩토리 패턴을 활용하기 좋은 경우

객체 생성이 복잡하거나 변경이 빈번한 경우 : 객체 생성 로직을 팩토리 클래스에 캡슐화해 간편한 유지보수와 변경을 가능하게 합니다.
객체 생성 로직을 중앙화하고 표준화하고자 할때 : 여러 곳에서 동일한 타입의 객체를 생성하는데 객체 생성 로직을 중앙에서 표준화하고자 할 때 팩토리 패턴을 사용해 일관성 있는 객체 생성을 유지하는데 도움을 줍니다.

TypeScript - 타입 가드

besforyou999 — Thu, 2 Nov 2023 15:38:55 +0900

단언의 문제점

단언으로 모든 오류를 해결할 순 없다.

function printText(el: Element) {
  console.log(el.textContent)
}

const h1 = document.querySelector('h1')
printText(h1);

타입스크립트는 마지막 줄에서 오류를 출력한다.

여기서 단언을 통해 타입스크립트 에러 출력은 막을 수 있지만 실제 코드를 실행해보면 오류가 발생합니다.

function printText(el: Element) {
  console.log(el.textContent)
}

const h1 = document.querySelector('h1') as HTMLHeadingElement
printText(h1);

위와 같은 문제 해결은 타입 가드를 통해 가능합니다.

타입 가드

방법 1

간단히 if 조건을 추가해 문제를 해결할 수 있습니다.

function printText(el: Element) {
  console.log(el.textContent)
}

const h1 = document.querySelector('h1')
if (h1) {
  printText(h1);
}

방법 2

instanceof를 활용합니다.

function printText(el: Element) {
  console.log(el.textContent)
}

const h1 = document.querySelector('h1')
if (h1 instanceof HTMLHeadingElement) {
  printText(h1);
}

방법 3

typeof 를 사용합니다.

// 타입 가드 (Guards)
function concatToStr(a: (number | string), b: (number | string)) {
  let result = 'Result : '
  if (typeof a === 'number') {
    result += a.toString()
  } else {
    result += a.toUpperCase()
  }

  result += ' '

  if (typeof b === 'number') {
    result += b.toString()
  } else {
    result += b.toUpperCase()
  }

  console.log(result)
}

concatToStr(100, "200");

TypeScript - 타입 및 할당 단언

besforyou999 — Wed, 1 Nov 2023 21:07:09 +0900

단언?

단언은 '주저하지 않고 딱 잘라 말한다'는 의미이다.

데이터 타입을 개발자가 딱 잘라서 정하는 것을 '단언'이라 한다.

변수에 할당 가능한 데이터 타입이 여러가지일 경우 타입스크립트는 어떤 타입의 데이터가 할당될지 알 수 없는 경우가 있다.

이때 개발자는 단언을 통해 할당되는 데이터 타입을 결정한다.

const el = document.querySelector('body')
el.textContent = 'Hello world?!'

식별자 el에는 HTMLBodyElement 혹은 null 타입의 데이터가 할당될 수 있다. ('body' 요소가 없을 수 있으니)

타입스크립트는 el에 할당될 데이터 타입이 어떤 타입인지 알 길이 없다.

이러한 경우 개발자가 el 에 할당될 데이터의 타입은 '단언'하여야 한다.

단언 키워드 - as

예시 1

const el = document.querySelector('body')
el.textContent = 'Hello world?!'

식별자 el에는 HTMLBodyElement 혹은 null 타입의 데이터가 할당될 수 있다. ('body' 요소가 없을 수 있으니)

타입스크립트는 el에 할당될 데이터 타입이 어떤 타입인지 알 길이 없다.

이러한 경우 개발자가 el 에 할당될 데이터의 타입은 '단언'하여야 한다.

const el = document.querySelector('body') as HTMLBodyElement
el.textContent = 'Hello world?!'

예시 2

function getNumber(x: number | null | undefined) {
  return Number(x.toFixed(2))
}

x에 null, undefined 타입 데이터 또한 할당되면 to.Fixed() 호출이 불가능하므로 타입스크립트는 오류를 출력한다.

여기서 as를 통해 '단언'을 하여 오류를 해결한다.

function getNumber(x: number | null | undefined) {
  return Number((x as number).toFixed(2))
}

예시 3

// 3)
function getValue(x: string | number, isNumber: boolean) {
  if (isNumber) {
    return x.toFixed(2);
  }
  return x.toUpperCase();
}

getValue('hello world', false); // 'HELLO WORLD'
getValue(3.1415926535, true); // 3.14

타입스크립트는 x.toFixed(2) 와 x.toUpperCase() 부분에서 오류를 출력한다.

string에는 toFixed가 없고 number에는 toUpperCase 메서드가 없기 때문.

이를 아래와 같이 고친다.

function getValue(x: string | number, isNumber: boolean) {
  if (isNumber) {
    return Number((x as number).toFixed(2))
  }
  return (x as string).toUpperCase();
}

getValue('hello world', false); // 'HELLO WORLD'
getValue(3.1415926535, true); // 3.14

Non-null 단언 연산자 '!'

할당되는 데이터 타입은 절대 null이나 undefined가 아니다 라는 의미.

// Non-null 단언 연산자 : !
// 할당되는 데이터 타입은 절대 null이 아니다 라는 의미
const el = document.querySelector('body')
el!.textContent = 'Hello world?!'

function getNumber(x: number | null | undefined) {
  return Number(x!.toFixed(2))
}

하지만 첫 번째 예시에서 'body' 태그가 아닌 '.title' 클래스의 요소를 찾는데 html에 .title 클래스의 요소가 없다면?

타입스크립트 오류는 보이지 않아도 코드가 제대로 동작하지 않을 것.

위와 같은 문제 해결을 위해 if문을 사용하는 방법이 있다.

const el = document.querySelector('body')
if (el) {
  el.textContent = 'Hello world?!'
}

위와 같은 코드는 찾아낸 요소가 없으면 el에 null이 할당되고 3줄은 절대 실행되지 않을 것이다.

위와 같은 방식을 타입 가드(Guards)라 부른다.

할당 단언

let num: number
console.log(num)

TypeScript는 위 처럼 코드를 작성하면 아래와 같은 에러를 출력한다.

말 그대로 변수를 할당되기 전에 사용해서 엄격한 규칙을 지닌 타입스크립트는 오류를 출력합니다.

만약 개발자가 예시와 같은 코드를 의도적으로 작성하려면 할당 단언을 사용할 수 있습니다.

let num!: number
console.log(num)

TypeScript - 타입 추론 (Inference)

besforyou999 — Tue, 31 Oct 2023 15:03:14 +0900

타입 추론

타입 추론은 말 그대로 변수의 데이터 타입을 추측하는 것을 말한다.

데이터 타입의 추측 근거는 아래와 같습니다.

1. 초기화된 변수

2. 기본값이 설정된 매개변수

3. 함수의 반환값

판단 근거 1 - 초기화된 변수

let num = 12 
let country = 'Korea'
let isTrue = true

판단 근거 2 - 기본값이 설정된 매개변수

매개변수에 기본값이 정해져 있다면 기본값의 데이터 타입으로 식별자 데이터 타입 추론

function multi2(a = 2) {
  return a * a;
}

// 이렇게 쓰지 않아도 됨
function multi2(a: number = 2) {
    return a * a;
}

타입스크립트는 a의 데이터 타입을 number로 추론한다.

판단 근거 3 - 반환 값이 있는 함수

반환값의 데이터 타입을 추론할 수 있다면 함수 반환값의 데이터 타입 또한 추론 가능하다.

function add(a: number, b: number) {
  return a + b
}

// 이렇게 안 써도 된다.
function add2(a: number, b: number): number {
  return a + b
}

TypeScript - 타입 종류

besforyou999 — Mon, 30 Oct 2023 17:04:11 +0900

TypeScript의 타입들

타입스크립트에서 변수에 값이 할당될 때 : (콜론) 기호로 변수에 할당될 값을 고정시킬 수 있다.

let age: number = 30
let name: string = 'Mike'

string

// string 

let str: string   // 지금은 undefined가 할당되어도 나중에는 string 타입이 와야한다는 의미
let red: string = "Red"
let blue: string = "Blue"
let templateStr: string = `I have color ${red} and ${blue}`
let attachStr: string = red + " and " + blue

number

// number

let num: number // 지금은 undefined가 할당되어도 나중에는 number가 온다.
let integer: number = 6   // 변수명만 integer일뿐 정수가 아닌 number도 할당 가능
let float: number = 3.14  // 변수명만 float일뿐 실수가 아닌 number도 할당 가능
let infinity: number = Infinity
let nan: number = NaN

boolean

// boolean

let isBoolean: boolean
let isTrue: boolean = true
let isFalse: boolean = false

Null / Undefined

// Null / Undefined

let isNull: null
let isUndefined: undefined
console.log(isNull) // isNull이 할당되기 전에 사용되었다고 오류가 발생함
console.log(isUndefined)

배열

// 배열

const fruits: string[] = ['Apple', 'Pear', 'Strawberry']
const numbers: number[] = [1, 2, 3, 4, 5, 6, 7]
const union: (string|number)[] = ['Apple', 1, 'Pear', 2, 3]
const array: [] = [1, 2, 3] // 오류 발생. 빈 배열만 가능. 데이터를 넣고 싶으면 반드시 데이터 타입을 선언해주자

객체

// 객체

const obj: object = {}
const arr: object = []
const func: object = function() {}

const userA: {
  name: string
  age: number
  isAmerican: boolean
} = {
  name: 'Mike',
  age: 20,
  isAmerican: true
}

const userB: {
  name: string
  age: number
  isAmerican: boolean
} = {
  name: 'Neo',
  age: 25,
  isAmerican: true
}

// 위 예시처럼 user 객체 속성의 데이터 타입은 동일하다.
// 이를 interface로 통일시킬 수 있다.
interface User { // 일반적으로 인터페이스는 다른 변수와 구분하기 위해 대문자로 시작한다.
  name: string
  age: number
  isAmerican: boolean
}

const userC: User = {
  name: 'Amy',
  age: 15,
  isAmerican: false
}

const userD: User = {
  name: 'Cate',
  age: 20,
  isAmerican: true
}

함수

// 함수
// 함수의 매개변수 타입과 반환값의 타입을 정할 수 있다.
// add 함수는 number 타입의 값 두개를 x, y 매개변수로 전달받고 number 타입의 값을 반환하는 함수
const add: (x: number, y: number) => number = function(x, y) {
  return x + y
}

// 다른 버전. 위 함수와 동일한 형식
const add2 = function (x: number, y: number): number {
  return x + y
}

const a: number = add(1, 2)

// '() => void ' 부분이 타입스크립트
const hello: () => void = function () {
  console.log("Hello world~")
}

// 다른 버전
const hello2 = function(): void {
  console.log("Hello world~")
}

const h: void = hello()

Any

변수에 어떠한 데이터 타입의 값도 할당 가능하다는 뜻.

하지만 변수에 어떠한 데이터 타입도 할당 가능하면 TypeScript를 사용하는 의미가 없어지므로 가능하면 사용하지 않는것이 좋다.

// Any
let hello: any = 'Hello world'
hello = 123
hello = false
hello = null
hello = {}
hello = []
hello = function() {}

Unknown

변수에 어떤 데이터 타입을 적용할지 모르겠다라는 의미.

any 타입의 변수에는 unknown 타입의 값을 할당 가능하나 다른 타입 (boolean, number, string 등등)의 변수에는 unknown 타입의 값을 할당할 수 없다.

// Unknown
// 아직은 어떤 데이터 타입이 할당될지 모르겠다는 의미
const u: unknown = 123

// 모두 오류 난다.
const boo: boolean = u
const num: number = u
const arr: string[] = u
const obj: {x: string, y: number} = u

데이터 타입을 모르겠다면 Any타입 대신 Unknown을 사용할 것.

Tuple

배열 데이터에서 원소에 순서가 있는 경우 사용 가능

// Tuple
const tuple: [string, number, boolean] = ['a', 1, false]
const users: [number, string, boolean][]
  = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]]

Void

함수가 반환하는 값이 없는 경우 반드시 void 타입을 정해주어야만 한다.

// void
function hello(msg: string): void {
  console.log(`Hello ${msg}`)
}

Never

배열에 타입이 지정되지 않아 어떤 데이터도 넣을 수 없다는 의미

const nev: [] = []
nev.push(3) // 오류 발생

Union

하나 이상의 타입을 할당할 수 있게 된다.

// Union
let union: string | number
union = 'Hello type!'
union = 123
union = false // 오류 발생

Intersection

두 개 이상의 인터페이스를 합칠 수 있다.

// Intersection
interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const inter: User & Validation = {
  name: 'Mike',
  age: 25,
  isValid: false
}

MySQL - case, when

besforyou999 — Mon, 30 Oct 2023 12:42:50 +0900

CASE 문

MySQL 구문으로 프로그래밍 언어의 if, else 문과 똑같은 역할을 한다.

Syntax - 구문

CASE
    WHEN 조건1 THEN 결과1
    WHEN 조건2 THEN 결과2
    ..
    ..
    WHEN 조건N THEN 결과N
    ELSE 결과
END;

다른 프로그래밍 언어와 같이 위에서 아래로 조건을 탐색하다가 맞는 조건의 결과를 반환하고 탐색이 중단된다.

만약 어떤 조건도 맞추지 못한다면 ELSE 문의 결과를 반환한다.

ELSE 문도 없다면 NULL을 반환한다.

예시

car	price
소나타	3,000
람보르기니	30,000

위와 같은 테이블이 있다고 가정할때

select car,
	case
		when price > 10000 then 'expensive'
		when price < 10000 then 'cheap'
	end as '가격'
from cars

위와 같은 sql을 실행하면

car	가격
소나타	cheap
람보르기니	expensive

위와 같은 테이블이 출력될 것입니다.

React - useEffect 두 번 렌더링되는 문제 해결 (의존성 배열 활용)

besforyou999 — Sat, 28 Oct 2023 14:48:35 +0900

문제 상황

useEffect 메서드의 첫 번째 인자로 컴포넌트가 렌더링 된 이후에 실행할 코드를 넘겨주었습니다.

api를 통해 데이터를 가져오는 코드였는데 데이터를 성공적으로 가져오면 dataRead state를 true로 변경하여 loading 화면에서 실제 앱 화면으로 변환되도록 구현했습니다.

하지만 불필요하게 api 호출을 두 번하는 문제가 발생했습니다.

useEffect(() => {
    async function fetch_data() {
      console.log("fetch_data")
      console.log("dataRead : ", dataRead)
      const api_key = process.env.REACT_APP_APIKEY;
      const url = `https://api.odcloud.kr/api/15085727/v1/uddi:d57791f7-1e1e-46c9-bbfd-911fa64ee8a4?page=1&perPage=200&serviceKey=${api_key}&dataType=JSON`;
      try {
        const result = await fetch(url)
        fetch_success(result)
      } catch (err) {
        console.log(err);
        console.log("데이터 불러오기 실패. csv 데이터 파일 파싱 실행")
        fetch_fail()
      }
    }
    fetch_data()
 })

문제 원인

useEffect 내부 코드가 실행되어 데이터를 제대로 읽어오면 dataRead state를 변경합니다.

컴포넌트는 state가 변경되면 리렌더링 되기 때문에 useEffect -> 코드 실행, api 호출 -> state 변경 -> 컴포넌트 리렌더링 -> useEffect -> 코드 실행, api 호출하는 루프가 생겨 발생한 문제였습니다.

해결책 - dependencies 배열 (의존성 배열)

useEffect의 두 번째 인자로 dependencies 배열을 줄 수 있습니다. 이 배열에는 useEffect 첫 인자로 준 코드에서 의존하고 있는 데이터 (props, state, 변수들)를 담는것이 원칙입니다. 이 dependencies 배열(의존성 배열)의 역할은 무엇일까요?

useEffect(setup, dependencies?)

useEffect는 컴포넌트가 렌더링 되었을때 처음 한 번 렌더링 되고, 의존성 배열에 담긴 값들이 변경되면 변경된 데이터를 가지고 useEffect setup 코드, 즉 첫 인자로 전달한 코드를 다시 실행합니다.

즉, setup 함수 내부의 데이터값을 동기화시키기 위해 setup 함수가 의존하고 있는 props, state, 변수를 dependencies 배열에 담아 두 번째 인자로 전달하는 것입니다.

이 의존성 배열로 setup 코드가 두 번 실행되는 것을 막을 수 있습니다. 의존성 배열로 배열에 아무것도 담지 않은 빈 배열을 전달한다면 setup 코드는 컴포넌트가 렌더링되고 단 한번 실행됩니다. 지금 문제를 해결하기 위한 알맞은 선택지인 거죠.

그래서 위에 있는 코드에서 두 번째 인자로 빈 배열을 전달하면

useEffect(() => {
    async function fetch_data() {
      console.log("fetch_data")
      console.log("dataRead : ", dataRead)
      const api_key = process.env.REACT_APP_APIKEY;
      const url = `https://api.odcloud.kr/api/15085727/v1/uddi:d57791f7-1e1e-46c9-bbfd-911fa64ee8a4?page=1&perPage=200&serviceKey=${api_key}&dataType=JSON`;
      try {
        const result = await fetch(url)
        fetch_success(result)
      } catch (err) {
        console.log(err);
        console.log("데이터 불러오기 실패. csv 데이터 파일 파싱 실행")
        fetch_fail()
      }
    }
    fetch_data()
 }, [])

setup 코드는 단 한번 실행됩니다.

dependencies 배열 특징에 따른 결과

useEffect에 두 번째 인자를 어떻게 전달하는지에 따라 실행방식이 달라집니다. 크게 세 가지 경우로 나눌 수 있습니다.

1. 의존성 배열 전달 안 함

useEffect(() => {
	// ...
});

의존성 배열을 주지 않으면 컴포넌트가 리렌더링 될 때마다 useEffect가 실행됩니다.

이전과 같은 작업을 반복하게 될 가능성이 존재합니다.

2. 의존성 배열에 의존하는 데이터(props, state, 변수 등) 전달

useEffect(() => {
	// ...
}, [a, b]);

setup 코드가 의존하고 있는 데이터가 변경될 경우 useEffect가 다시 실행되어 setup 코드의 데이터가 동기화됩니다.

setup 코드가 api를 통해 데이터를 호출하는 경우, 호출할 페이지 번호, 데이터 이름, url를 의존성 배열에 넣어 전달하면 url 혹은 호출할 페이지 번호가 변하면 useEffect가 다시 실행되게끔 구현할 수 있습니다.

3. 의존성 배열에 빈 배열 전달

useEffect(() => {
	// ...
}, []);

컴포넌트 내부 데이터(props, state, 변수 등)에 어떤 변화가 생기더라도 useEffect는 단 한번 호출됩니다.

setup 코드가 반복할 필요 없이 단 한번 수행하면 되는 작업인 경우 사용하기 적합합니다.

css - 마우스 포인터 hover 구현

besforyou999 — Fri, 27 Oct 2023 17:40:46 +0900

hover

특정 버튼 위에 마우스 포인터를 올리면 확대되는 이펙트를 본 적이 있을 겁니다. 이를 css로 구현 가능합니다.

코드

해당 요소에 대해 hover 되기 이전과 hover 된 상태의 css 스타일이 각각 한 개씩 필요합니다.

위 gif에서 화살표 버튼의 id는 'scroll-to-top'입니다.

그러므로 마우스가 요소 위로 올라왔을때올라왔을 때 요소 크기를 키우기 위해서는 ':hover' 가상 선택자를 붙여주고 transform: scale() 속성을 사용합니다. 아래와 같은 css를 적용하면 마우스가 요소 위로 올라왔을 때 요소 크기는 1.2배로 커집니다.

#scroll-to-top:hover {
  transform: scale(1.2);
}

여기에 자연스러운 전환을 적용하고 싶으면 hover 되기 이전 스타일 규칙에 transition 속성을 적용합니다.

#scroll-to-top {
  // 다른 스타일들

  transition: 0.1s;
}

위와 같은 코드는 요소가 전환될때 총 0.1s 정도의 시간 동안 천천히 변환시킵니다.

결과

vscode csv 파일 데이터 깨짐

besforyou999 — Wed, 25 Oct 2023 16:03:52 +0900

문제명

프로젝트에 추가한 csv 파일이 깨지는 문제가 발생

해결책

인코딩 방식을 UTF-8에서 Korean(EUC-KR)로 변경한다.

vscode 오른쪽 하단에 UTF-8을 클릭 > 인코딩하여 다시 열기 에서 'Korean(EUC-KR)'을 클릭하여 변경한다.

해결

CS - Web Worker

besforyou999 — Wed, 25 Oct 2023 14:50:23 +0900

Web Worker

HTML 페이지에서 스크립트를 실행하면 페이지는 스크립트가 완료할 때까지 기다리게 됩니다. 이는 사용자 입장에서 화면이 정지된 듯이 보여 불편함을 줄 수 있습니다. 이를 위해 웹 워커(Web Worker)를 사용합니다.

웹 워커는 웹 브라우저에서 멀티스레딩 및 백그라운드 스레드 작업을 수행하기 위한 기술입니다. 웹 애플리케이션에서 CPU 집중적인 작업 또는 긴 처리 시간이 필요한 작업을 수행할 때 웹 워커를 사용하면 메인 스레드의 브라우저 성능에 영향을 미치지 않고 작업을 백그라운드에서 병렬로 처리할 수 있습니다.

자바스크립트는 싱글 스레드 언어입니다. 하지만 실제로는 멀티 스레드처럼 사용되는데 그 이유는 바로 Web Worker 덕분입니다.

Web Worker 특징

1. 독립된 스레드

웹 워커는 메인 스레드와 별도로 동작하며, 작업을 병렬로 처리할 수 있습니다.

이로 힌해 메인 스레드의 렌더링 및 사용자 상호작용에 영향을 미치지 않습니다.

2. 자바스크립트 파일

웹 워크는 자바스크립트 파일로 구현됩니다. 메인 스레드에서 웹 워커를 생성하고 제어할 수 있으며, 웹 워커 내에서는 자바스크립트 코드를 실행할 수 있습니다.

3. 통신

웹 워커와 메인 스레드 간에는 메시지를 통한 통신이 이루어집니다. 메인 스레드에서 웹 워커로 데이터를 보내고, 웹 워커에서 메인 스레드로 데이터를 반환할 수 있습니다.

4. DOM, 브라우저 객체 접근 제한

웹 워커는 메인 스레드와는 다르게 DOM 접근이나 브라우저 객체 접근이 제한됩니다. 따라서 웹 워커는 주로 순순한 계산 작업에 사용됩니다.

늘 겸손하게

CS - 디자인 패턴

목차

디자인 패턴

싱글톤 패턴

Java

JavaScript

싱글톤 패턴의 장점

싱글톤 패턴의 단점

싱글톤 패턴을 활용하기 좋은 경우

옵저버 패턴

Java

옵저버 패턴의 장점

옵저버 패턴의 단점

옵저버 패턴을 활용하기 좋은 경우

팩토리 패턴

팩토리 패턴의 장점

팩토리 패턴의 단점

팩토리 패턴을 활용하기 좋은 경우

TypeScript - 타입 가드

목차

단언의 문제점

타입 가드

TypeScript - 타입 및 할당 단언

목차

단언?

단언 키워드 - as

Non-null 단언 연산자 '!'

할당 단언

TypeScript - 타입 추론 (Inference)

목차

타입 추론

판단 근거 1 - 초기화된 변수

판단 근거 2 - 기본값이 설정된 매개변수

판단 근거 3 - 반환 값이 있는 함수

TypeScript - 타입 종류

목차

TypeScript의 타입들

string

number

boolean

Null / Undefined

배열

객체

함수

Any

Unknown

Tuple

Void

Never

Union

Intersection

MySQL - case, when

목차

CASE 문

Syntax - 구문

예시

React - useEffect 두 번 렌더링되는 문제 해결 (의존성 배열 활용)

목차

문제 상황

문제 원인

해결책 - dependencies 배열 (의존성 배열)

dependencies 배열 특징에 따른 결과

css - 마우스 포인터 hover 구현

목차

hover

코드

결과

vscode csv 파일 데이터 깨짐

목차

문제명

해결책

해결

CS - Web Worker

목차

Web Worker

Web Worker 특징