개발자 블로그 다른 곳보다 10원이라도 비싸면 100% 환불

클로저 관련 정리

surimi — Wed, 25 Dec 2024 22:14:56 +0900

Lexical Scope

변수의 유효 범위를 결정하는 규칙.
코드가 실행될 때가 아니라 작성될 때 결정됨.

Lexical = 문맥

스코프 예시

let globalVar = "global"; // 글로벌 스코프

function outerFunction() {
  let outerVar = "outer"; // outerFunction의 렉시컬 스코프

  function innerFunction() {
    let innerVar = "inner"; // innerFunction의 렉시컬 스코프
    console.log(globalVar); // "global"
    console.log(outerVar);  // "outer"
    console.log(innerVar);  // "inner"
  }

  innerFunction();
}

outerFunction();

렉시컬 스코프 예시

var x = 1;

function bar() {
    console.log(x);
}

function foo() {
    var x = 10;
    bar();
}

foo(); // 1 -> 함수가 선언된 위치가 전역이기 때문에
bar(); // 1

함수를 어디서 호출했는지에 따라 바뀌는걸 dynamic scope라고 하는데, 대부분의 언어는 lexical scope(=static scope)를 따른다.

함수 객체의 내부 슬롯 [[Environment]]에는 상위 스코프의 참조값이 저장된다.
전역에 선언된 함수에는 내부 슬롯 [[Environment]]에 전역 스코프의 참조값이 저장됨.
bar 함수의 내부 슬롯 [[Environment]]에는 전역 스코프의 참조가 저장되어 x는 1의 값을 가지고 있음.

Lexical Environment

실행 컨텍스트의 일부분으로, 변수를 저장하고 관리.
각 함수가 호출되거나 블록 진입시(=실행 컨텍스트가 생성될 때마다) 새로운 렉시컬 환경이 생성된다.

렉시컬 환경의 두 가지 주요 부분:

Environment Record: 현재 스코프의 모든 변수와 함수 저장.
Outer Lexical Environment Reference (외부 렉시컬 환경 참조): 상위 스코프 참조.

Execution Context

JS 코드가 실행되는 환경.

실행 컨텍스트를 생성하는 코드

Global
- 코드가 처음 실행될 떄 생성됨.
- 전역 객체와 this 포함.
- JS 프로세스가 종료될 때까지 유지.
Function
- 함수가 호출될 때마다 실행됨.
- 함수의 arguments, local variables, this를 포함.
- 함수 실행이 완료되면 컨텍스트 스택에서 제거됨.
Eval
- eval 함수가 실행될 때 생성됨.
Module
- 모듈 내부에 존재하는 코드.

this = 현재 실행 컨텍스트에서 참조하는 객체

실행된 순서대로 실행 컨텍스트 스택에 쌓인다.
맨 밑바닥에는 Global EC가 프로세스 종료될 때까지 깔려있다.

First-class Object (일급 객체) `(=First-class Citizen)`

변수에 할당할 수 있다.
다른 함수의 인자로 전달할 수 있다.
다른 함수의 반환값으로 사용할 수 있다.
동적으로 생성할 수 있다.

JS에서는 함수가 일급 객체이다.
함수가 변수에 할당될 수 있고, 다른 함수의 인자로 전달되거나 반환값으로 사용될 수 있음.

Closure

"A closure is the combination of a function and the lexical environment within which that function was declared."
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

여기서 말하는 렉시컬 환경은 함수가 정의된 스코프(=상위 스코프, 실행 컨텍스트의 렉시컬 환경)
모든 함수는 상위 스코프를 기억하므로, 어디서 호출되든 상위 스코프의 식별자(변수, 함수, 클래스 등)를 참조할 수 있다. (lexical scope)
중첩 함수(Inner 함수)이면서 상위 스코프의 식별자를 참조하지 않거나, 참조 하더라도 Outer 함수보다 먼저 소멸되면 클로저라고 하지 않는다.

function foo() {
		const x = 1;
		const y = 2;
	
		// 클로저
		// 중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
		function bar() {
			debugger;
			console.log(x);
		}
		return bar;
	}

	const bar = foo();
	bar();

Closure 활용

정보 은닉
소멸될 외부 함수에 변수를 선언하고 클로저 함수를 반환하게 해두면 반환된 클로저 함수로만 변수에 접근할 수있다.

예시

const inc = (function () {
  let counter = 0; // 외부에서 접근할 수 없음.

  // Closure
  return function () {
    return ++counter;
  };
})();

console.log(inc()); // 1
console.log(inc()); // 2
console.log(inc()); // 3

// 함수를 반환하는 고차 함수
// 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다.
const counter = (function() {
  // 카운트 상태를 유지하기 위한 자유 변수
  let counter = 0;
  // 함수를 인수로 전달받는 클로저를 반환
  return function(aux) {
    // 인수로 전달받은 보조 함수에 상태 변경을 위임한다.
    counter = aux(counter);
    return counter;
  };
}());

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// 보조 함수를 전달하여 호출
console.log(counter(increase)); // 1
console.log(counter(increase)); // 2
// 자유 변수를 공유한다.
console.log(counter(decrease)); // 1
console.log(counter(decrease)); // 0

외부에서 접근 불가능한 변수의 값을 변경할 함수를 넣어줄 수 있다.

직렬화 (Serialization)

surimi — Tue, 24 Dec 2024 03:02:40 +0900

직렬화

직렬화는 데이터를 저장하거나 전송할 수 있는 형식으로 변환하는 것. (주로 텍스트 또는 바이너리)

장점

데이터 전송 및 저장 용이: 직렬화된 데이터는 네트워크를 통해 쉽게 전송하거나 파일에 저장할 수 있다. 예를 들어, 서버와 클라이언트 간에 객체를 전송하거나 디스크에 데이터를 저장할 때 유용하다.
플랫폼 독립성: 직렬화된 데이터는 다양한 운영체제나 시스템에서 동일한 형식으로 읽고 쓸 수 있다. 예를 들어, JSON 형식은 다양한 언어에서 처리할 수 있어, 서로 다른 시스템 간 데이터 교환이 가능하다.
성능 최적화 (바이너리 형식): 바이너리 형식으로 직렬화하면 데이터 크기가 작아지고, 전송 속도가 빨라질 수 있다. 특히 대용량 데이터를 다룰 때 유리하다.

직렬화 단점

성능 저하 가능성: 객체의 복잡도가 높거나, 큰 데이터 구조를 직렬화할 경우 처리 시간이 늘어나 성능이 저하될 수 있다. 텍스트 기반 직렬화는 이진 형식보다 느릴 수 있다.

직렬화 방식

JSON: 객체를 JSON 형식으로 직렬화하여 텍스트 기반으로 저장하거나 전송할 수 있다. 다양한 언어에서 쉽게 사용할 수 있다. 주로 웹 애플리케이션에서 사용.
XML: 구문이 길다. 주로 데이터를 문서 형식으로 전송할 때 사용.
바이너리: 객체를 이진 데이터 형식으로 변환하여 저장하거나 전송한다. 성능이 중요한 시스템에서 사용된다. Java의 기본 직렬화가 여기에 속한다.

역직렬화 (Deserialization)

직렬화 된 데이터를 원래 객체로 복원하는 과정.

React Component가 리렌더링 되는 이유

surimi — Wed, 18 Dec 2024 21:16:48 +0900

웹 플젝 하던 중 Context, 모달, 소켓 등이 짬뽕되자 원하지 않는 부분에서 자꾸 렌더링이 되는 문제가 있어서 알아본 내용.

Component가 리렌더링 되는 경우들

State가 변경될 때: 컴포넌트의 state가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들이 리렌더링됩니다.
```
 this.setState({ value: newValue });
```
Props가 변경될 때: 부모 컴포넌트에서 전달되는 props가 변경되면 자식 컴포넌트가 리렌더링됩니다.
```
 <ChildComponent propValue={this.state.value} />
```
부모 컴포넌트가 리렌더링될 때: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링됩니다.
forceUpdate가 호출될 때: forceUpdate 메서드를 호출하면 강제로 컴포넌트가 리렌더링됩니다.
```
 this.forceUpdate();
```
Context가 변경될 때: React Context의 값이 변경되면 이를 구독하고 있는 모든 컴포넌트가 리렌더링됩니다.
```
 <MyContext.Provider value={newValue}>
```

훅의 의존성이 변경될 때: useEffect, useMemo, useCallback 등의 의존성 배열에 있는 값이 변경되면 컴포넌트가 리렌더링 될 수 있다.

리렌더링을 방지하는 방법

React.memo 사용: 함수형 컴포넌트를 메모이제이션하여, props가 변경되지 않으면 리렌더링을 방지할 수 있습니다.
```
  jsx
  Copy code
  import React from 'react';

  const MyComponent = React.memo(({ prop1, prop2 }) => {
    // 컴포넌트 로직
  });
```
useMemo 사용: 비용이 많이 드는 계산을 메모이제이션하여, 의존성 배열의 값이 변경되지 않으면 계산을 재사용할 수 있습니다.
```
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
useCallback 사용: 함수의 메모이제이션을 통해 불필요한 함수 재생성을 방지하고, 의존성 배열의 값이 변경되지 않으면 같은 함수를 재사용할 수 있습니다.
```
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
```
useRef 사용: 컴포넌트 내에서 유지해야 하는 값이 있지만, 그 값의 변경이 리렌더링을 유발하지 않아야 하는 경우 사용합니다.
```
  const countRef = useRef(0);
  countRef.current++;
```
useEffect의 Cleanup 함수 사용: 불필요한 리렌더링을 방지하기 위해, 컴포넌트가 언마운트될 때 또는 다음 이펙트 실행 전에 정리 작업을 수행합니다.
```
  jsx
  Copy code
  useEffect(() => {
    const handle = setSomeResource();

    return () => {
      clearSomeResource(handle);
    };
  }, [dependency]);
```

메모

state, props의 값 체크는 얕은 비교로 이루어 진다. ( 1단계 깊이만 비교 )

Bing AI Copilot 사용 중 스크롤시 Search 검색창으로 넘어지지 않게 하는 방법

surimi — Thu, 1 Feb 2024 03:11:45 +0900

https://chromewebstore.google.com/detail/copilot-prevent-scroll-do/cmdkmldlcddajdgcdbecjjkadmhgakhl

Copilot - Prevent scroll down to search page

This extension prevents users from accidentally scrolling down to the search page while using Bing AI Copilot.

chrome.google.com

이 크롬 확장 프로그램을 설치한뒤 새로고침하면 스크롤을 내려도 다른 화면으로 넘어가지지 않는다.

아이콘 클릭시 Copilot이 새 탭으로 켜진다.

[BOJ 10026] 적록색약 C++

surimi — Sun, 19 Mar 2023 15:13:11 +0900

난이도: Gold 5
번호: 10026
생성일: March 19, 2023 3:09 PM
알고리즘 분류: 그래프 이론, 그래프 탐색, 깊이 우선 탐색, 너비 우선 탐색
언어: C++

C++

// BOJ 10026 적록색약
#include <iostream>
#include <queue>
using namespace std;

int N;
char map[102][102];
bool visit[102][102];

const int dx[] = {0, 0, 1, -1};
const int dy[] = {1, -1, 0, 0};

bool _strchr(string s, char c)
{
    for (char _c : s)
        if (c == _c)
            return (1);
    return (0);
}

int BFS(int i, int j, string colors)
{
    queue<pair<int, int>> Q;
    Q.push({i, j});
    visit[i][j] = true;

    while (!Q.empty())
    {
        auto cur = Q.front();
        Q.pop();

        for (int k = 0; k < 4; k++)
        {
            int x = dx[k] + cur.first;
            int y = dy[k] + cur.second;

            if (visit[x][y])
                continue;

            if (!_strchr(colors, map[x][y]))
                continue;

            Q.push({x, y});
            visit[x][y] = true;
        }
    }
    return (1);
}

int main(void)
{
    cin.tie(0)->sync_with_stdio(0);
    cout.tie(0);

    // normal, color-weak
    int nm = 0, cw = 0;
    cin >> N;

    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= N; j++)
            cin >> map[i][j];

    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= N; j++)
        {
            if (visit[i][j])
                continue;
            if (map[i][j] == 'R')
                nm += BFS(i, j, "R");
            else if (map[i][j] == 'G')
                nm += BFS(i, j, "G");
            else if (map[i][j] == 'B')
                nm += BFS(i, j, "B");
        }

    // reset visit
    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= N; j++)
            visit[i][j] = false;

    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= N; j++)
        {
            if (visit[i][j])
                continue;
            if (map[i][j] == 'R' || map[i][j] == 'G')
                cw += BFS(i, j, "RG");
            else if (map[i][j] == 'B')
                cw += BFS(i, j, "B");
        }
    cout << nm << " " << cw;
}

[BOJ 1303] 전쟁 - 전투 C++

surimi — Sun, 19 Mar 2023 13:37:17 +0900

난이도: Silver 1
번호: 1303
생성일: March 19, 2023 12:31 AM
알고리즘 분류: 그래프 이론, 그래프 탐색, 깊이 우선 탐색, 너비 우선 탐색
언어: C++

1303번: 전쟁 - 전투

C++

#include <iostream>
#include <queue>
using namespace std;

int N, M;
char map[102][102];
bool visit[102][102];

const int dx[] = {0, 0, 1, -1};
const int dy[] = {1, -1, 0, 0};

int BFS(int i, int j, char c)
{
    queue<pair<int, int>> Q;
    int cnt = 1;
    Q.push({i, j});
    visit[i][j] = true;

    while (!Q.empty())
    {
        auto cur = Q.front();
        Q.pop();

        for (int k = 0; k < 4; k++)
        {
            int x = dx[k] + cur.first;
            int y = dy[k] + cur.second;

            if (visit[x][y] || map[x][y] != c)
                continue;

            Q.push({x, y});
            visit[x][y] = true;
            cnt++;
        }
    }
    return cnt;
}

int main(void)
{
    cin.tie(0)->sync_with_stdio(0);
    cout.tie(0);

    int B = 0, W = 0;
    // 세로 크기 M
    // 가로 크기 N
    cin >> M >> N;

    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= M; j++)
            cin >> map[i][j];

    for (int i = 1; i <= N; i++)
        for (int j = 1; j <= M; j++)
        {
            int tmp;
            if (visit[i][j])
                continue;
            if (map[i][j] == 'W')
            {
                tmp = BFS(i, j, 'W');
                W += tmp * tmp;
            }
            else if (map[i][j] == 'B')
            {
                tmp = BFS(i, j, 'B');
                B += tmp * tmp;
            }
        }
    cout << W << " " << B;
}

[BOJ 13549] 숨바꼭질 3 C++

surimi — Sun, 12 Mar 2023 21:35:23 +0900

난이도: Gold 5
번호: 13549
생성일: March 12, 2023 9:33 PM
알고리즘 분류: 0-1 너비 우선 탐색, 그래프 이론, 그래프 탐색, 너비 우선 탐색, 데이크스트라
언어: C++

13549번: 숨바꼭질 3

C++

#include <cstdio>
#include <deque>

using namespace std;

int N, K;
int visit[100001];

int BFS()
{
    deque<int> dq;
    dq.push_back(N);
    visit[N] = 1;

    while (!dq.empty())
    {
        int cur = dq.front();
        dq.pop_front();

        if (cur == K)
            return visit[cur] - 1;

        if (cur * 2 < 100001 && !visit[cur * 2])
        {
            dq.push_front(cur * 2);
            visit[cur * 2] = visit[cur];
        }
        if (cur > 0 && !visit[cur - 1])
        {
            dq.push_back(cur - 1);
            visit[cur - 1] = visit[cur] + 1;
        }
        if (cur + 1 < 100001 && !visit[cur + 1])
        {
            dq.push_back(cur + 1);
            visit[cur + 1] = visit[cur] + 1;
        }
    }
    return -1;
}

int main(void)
{
    scanf("%d %d", &N, &K);
    printf("%d", BFS());
    return (0);
}

[BOJ 14940] 쉬운 최단거리 C++

surimi — Fri, 10 Mar 2023 17:50:19 +0900

난이도: Silver 1
번호: 14940
생성일: March 10, 2023 5:48 PM
알고리즘 분류: 그래프 이론, 그래프 탐색, 너비 우선 탐색
언어: C++

14940번: 쉬운 최단거리

C++

#include <cstdio>
#include <queue>
#include <vector>

using namespace std;

int N, M;
struct Pos
{
    int x, y;
};
vector<vector<int>> map;
vector<vector<bool>> visit;
vector<vector<int>> distMap;

const int dX[] = {0, 0, -1, 1};
const int dY[] = {-1, 1, 0, 0};

void BFS(Pos dest)
{
    queue<Pos> Q;
    distMap[dest.x][dest.y] = 0;

    Q.push(dest);
    visit[dest.x][dest.y] = true;

    while (!Q.empty())
    {
        Pos cur = Q.front();
        Q.pop();

        for (int k = 0; k < 4; ++k)
        {
            int x = dX[k] + cur.x;
            int y = dY[k] + cur.y;

            if (x < 0 || y < 0 || x >= N || y >= M)
                continue;

            if (visit[x][y] || map[x][y] == 0)
                continue;

            distMap[x][y] = distMap[cur.x][cur.y] + 1;
            Q.push({x, y});
            visit[x][y] = true;
        }
    }
}

int main(void)
{
    Pos dest;

    scanf("%d %d", &N, &M);

    map.resize(N);
    visit.resize(N);
    distMap.resize(N);

    for (int i = 0; i < N; ++i)
    {
        map[i].resize(M);
        visit[i].resize(M);
        distMap[i].resize(M);
    }

    for (int i = 0; i < N; ++i)
        for (int j = 0; j < M; ++j)
        {
            scanf("%d", &map[i][j]);
            if (map[i][j] == 2)
            {
                dest.x = i;
                dest.y = j;
            }
        }
    BFS(dest);

    for (int i = 0; i < N; ++i)
    {
        for (int j = 0; j < M; ++j)
        {
            if (distMap[i][j] == 0 && map[i][j] == 1)
                printf("-1 ");
            else
                printf("%d ", distMap[i][j]);
        }
        printf("\n");
    }

    return (0);
}

[BOJ 18232] 텔레포트 정거장 C++

surimi — Fri, 10 Mar 2023 01:35:03 +0900

난이도: Silver 2
번호: 18232
생성일: March 10, 2023 1:33 AM
알고리즘 분류: 그래프 이론, 그래프 탐색, 너비 우선 탐색
언어: C++

18232번: 텔레포트 정거장

C++

#include <cstdio>
#include <queue>
#include <vector>

using namespace std;

int N, M, S, E;
vector<vector<int>> map;
vector<bool> visit;

int BFS()
{
    queue<int> Q;
    Q.push(S);
    visit[S] = true;
    int depth = 0;

    while (!Q.empty())
    {
        int size = Q.size() + 1;

        while (--size)
        {
            int cur = Q.front();
            Q.pop();

            if (cur == E)
                return depth;

            for (int i : map[cur])
            {
                if (visit[i])
                    continue;

                Q.push(i);
                visit[i] = true;
            }
            if (cur > 1 && !visit[cur - 1])
            {
                Q.push(cur - 1);
                visit[cur - 1] = true;
            }
            if (cur + 1 <= N && !visit[cur + 1])
            {
                Q.push(cur + 1);
                visit[cur + 1] = true;
            }
        }
        ++depth;
    }
    return depth;
}

int main(void)
{
    scanf("%d %d %d %d", &N, &M, &S, &E);

    map.resize(N + 1);
    visit.resize(N + 1);

    for (int i = 0; i < M; i++)
    {
        int a, b;
        scanf("%d %d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }

    printf("%d", BFS());

    return (0);
}

[BOJ 25516] 거리가 k이하인 트리 노드에서 사과 수확하기 C++

surimi — Thu, 9 Mar 2023 14:42:24 +0900

난이도: Silver 2
번호: 25516
생성일: March 9, 2023 2:39 PM
알고리즘 분류: 그래프 이론, 그래프 탐색, 깊이 우선 탐색, 너비 우선 탐색, 트리
언어: C++

25516번: 거리가 k이하인 트리 노드에서 사과 수확하기

C++

#include <cstdio>
#include <queue>
#include <vector>

using namespace std;

int N, K;
vector<vector<int>> map;
vector<int> apple;
vector<bool> visit;

int BFS()
{
    queue<int> Q;
    Q.push(0);
    visit[0] = true;
    int depth = 0;
    int cnt = apple[0];

    while (!Q.empty() && depth < K)
    {
        int size = Q.size();

        while (size--)
        {
            int cur = Q.front();
            Q.pop();

            for (int i : map[cur])
            {
                if (visit[i])
                    continue;

                Q.push(i);
                visit[i] = true;
                cnt += apple[i];
            }
        }
        depth++;
    }
    return cnt;
}

int main(void)
{
    scanf("%d %d", &N, &K);

    map.resize(N + 1);
    apple.resize(N + 1);
    visit.resize(N + 1);

    for (int i = 0; i < N - 1; i++)
    {
        int a, b;
        scanf("%d %d", &a, &b);
        map[a].push_back(b);
        map[b].push_back(a);
    }

    for (int i = 0; i < N; i++)
        scanf("%d", &apple[i]);

    printf("%d", BFS());

    return (0);
}