khakha's dev log

99클럽 코테 스터디 2일차 TIL - 백준 11561. 징검다리

khakhalog — Wed, 30 Oct 2024 00:38:41 +0900

백준 11561. 징검다리 / python / Silver 3 / 1h+

문제 및 코드

https://www.acmicpc.net/problem/11561

T = int(input())
tc = []

for _ in range(T):
    tc.append(int(input()))

for n in tc:
    start = 1
    end = n
    answer = 0

    while start <= end:
        mid = (start + end) // 2

        if (mid * (mid+1)//2) <= n:
            start = mid + 1
            answer = mid
        else:
            end = mid - 1

    print(answer)

접근 방식

징검다리가 n개 일 때, 처음 건넌 거리보다 다음번부터는 최소 1 이상 넘는 거리를 뛰어야 하므로

1 + 2 + 3 + ... + k 형태의 등차수열 합을 만족하는 건넌 횟수가 필요하다.

등차수열의 합 구하는 공식은 k(k+1)/2 이므로 이분탐색으로 n에 가장 가까운 k를 구해주면 된다.

후기

이분탐색인지 알고 풀면 어렵지 않은것 같은데 실제 코테 칠 때는 어떤 알고리즘인지 떠오르기가 쉽지 않을 것 같다.

99클럽 코테 스터디 1일차 TIL - 백준 1072. 게임

khakhalog — Mon, 28 Oct 2024 23:17:08 +0900

백준 1072. 게임 / node.js / Silver 3 / 51m

문제 및 코드

https://www.acmicpc.net/problem/1072

const filePath = process.platform === "linux" ? "./dev/stdin" : "input.txt";
let [x, y] = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split(" ")
  .map((num) => +num);

let z = Math.floor((y * 100) / x);

let left = 1;
let right = 1000000000;
let answer = Number.MAX_SAFE_INTEGER;

while (left <= right) {
  let mid = parseInt((left + right) / 2);
  let newZ = Math.floor(((y + mid) * 100) / (x + mid));

  if (z !== newZ) {
    answer = Math.min(answer, mid);
    right = mid - 1;
  } else {
    left = mid + 1;
  }
}

if (answer === Number.MAX_SAFE_INTEGER) console.log(-1);
else console.log(answer);

접근 방식

이분 탐색 알고리즘을 사용해서 풀이하였다.

입력 값 변수에 저장 후, 초기 z 값 계산해주기
1 <= x <= 1,000,000,000 이므로 left, right를 각 최소 최대값으로 초기화 해준다.
answer는 게임을 총 몇 번 더 진행할지 모르므로 가장 큰 정수값으로 초기화 해준다.
문제에서 z가 최초로 변경되는 시점을 구하라고 했으니 처음 승률 !== 현재 승률 인 경우 mid와 answer 중 최소값을 구해주고 right를 줄인다. 그렇지 않으면 left를 늘려서 게임을 더 진행한다.
while문을 빠져나왔는데 answer가 처음과 동일하다면 승률이 절대 변할수 없는 경우라고 간주하여 -1을 출력하고 answer를 구했다면 answer를 출력한다.

후기

알고리즘 오랜만에 푸려니 이분 탐색 알고리즘이 잘 기억이 나지 않아 구글링을 하면서 풀게 된 점이 아쉽다.

다음번에 풀 때는 검색 없이 풀 수 있기를..

이분 탐색

khakhalog — Mon, 28 Oct 2024 23:06:52 +0900

이분 탐색이란

이분탐색(Binary Search)은 정렬된 배열에서 원하는 값을 빠르게 찾기 위한 알고리즘입니다.

시간 복잡도가 O(log⁡n)이기 때문에, 탐색 속도가 매우 빠르고 효율적입니다.

이분탐색의 핵심 개념은 탐색 범위를 반씩 줄여가며 원하는 값을 찾아가는 데 있습니다.

이분 탐색의 작동 원리

초기 설정: 탐색 범위의 시작점 left와 끝점 right를 설정합니다. 처음에는 left는 배열의 첫 번째 인덱스, right는 마지막 인덱스로 설정합니다.
중간값 계산: left와 right의 중간 인덱스 mid를 계산합니다. mid = (left + right) // 2.
값 비교:
- 중간값 arr[mid]가 찾고자 하는 값 target과 일치하면, mid를 반환하여 탐색을 종료합니다.
- arr[mid]가 target보다 작으면, target은 중간값 오른쪽에 있을 가능성이 있으므로 left = mid + 1로 설정하여 탐색 범위를 오른쪽 절반으로 좁힙니다.
- arr[mid]가 target보다 크면, target은 중간값 왼쪽에 있을 가능성이 있으므로 right = mid - 1로 설정하여 탐색 범위를 왼쪽 절반으로 좁힙니다.
반복: 위 과정을 left가 right보다 작거나 같을 때까지 반복합니다. 탐색 범위가 더 이상 없을 경우 target은 배열에 없는 것으로 간주하고 실패를 반환합니다.

예시 코드

function binarySearch(arr, target) {
    let left = 0;
    let right = arr.length - 1;

    while (left <= right) {
        const mid = Math.floor((left + right) / 2);

        if (arr[mid] === target) {
            return mid; // 타겟 값이 배열의 중간 값에 있으면 인덱스를 반환
        } else if (arr[mid] < target) {
            left = mid + 1; // 타겟이 더 크면 왼쪽 포인터를 오른쪽으로 이동
        } else {
            right = mid - 1; // 타겟이 더 작으면 오른쪽 포인터를 왼쪽으로 이동
        }
    }

    return -1; // 찾지 못하면 -1 반환
}

// 예제 사용
const sortedArray = [1, 3, 5, 7, 9, 11];
const target = 7;
const result = binarySearch(sortedArray, target);

console.log(result); // 인덱스 3을 출력 (타겟 값이 위치한 인덱스)

while문 안의 로직은 요구사항에 맞게 변경해서 원하는 target 값을 찾아내도록 수정할 수 있습니다.

주의할 점

시간 복잡도가 O(log⁡n)으로 리스트 또는 데이터가 큰 경우 빠르게 탐색가능하지만, 데이터가 순차적 혹은 정렬된 상태여야 합니다.

[Next.js 14] Layouts

khakhalog — Wed, 16 Oct 2024 21:46:19 +0900

Next.js app 라우터 버전에서 layout 파일은 다음과 같은 역할을 한다.

여러 route 간에 공유되는 UI
페이지 이동시 state를 유지하고 interactive 요소를 유지하며 리렌더링이 일어나지 않는다.
레이아웃은 중첩해서 존재할 수 있다.

레이아웃은 기본적으로 layout.js 파일에서 React 컴포넌트를 정의하게 된다.
해당 컴포넌트는 렌더링 중에 자식 레이아웃(존재하는 경우)이나 페이지로 채워질 children prop을 허용해주어야 한다.

  app
├──   layout.tsx
│   └──   dashboard   
│       ├──   layout.tsx
│       ├──   page.tsx
│       └──   settings
└────────────└──  page.tsx

예를 들어 위와 같은 구조로 /dashboard 페이지와 /dashboard/settings 페이지 간에 레이아웃이 공유되도록 하려면 props로 children을 정의해줘야 한다.

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      <nav></nav>
      {children}
    </section>
  )
}

Root Layout (필수)

app 폴더의 최상위에 필수로 존재하는 Root Layout은 모든 라우트에 적용되는 레이아웃이다.
이 루트 레이아웃에는 html, body 태그를 포함한다.

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ko">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}

[참고]

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts

Routing: Pages and Layouts | Next.js

Create your first page and shared layout with the App Router.

nextjs.org

[Tanstack Query] invalidateQueries 무효화 범위

khakhalog — Fri, 12 Jan 2024 16:22:32 +0900

invalidateQueries는 POST, PATCH, DELETE, .. 등의 요청이 완료된 이후 새롭게 데이터를 페칭해야할 때 캐싱된 쿼리를 무효화하는 메서드입니다.

기본적으로 queryKey와 일치하는 모든 쿼리를 즉시 유효하지 않은 것으로 표시하고 active한 상태의 쿼리는 refetch합니다.

무효화시키고 싶은 queryKey를 매칭해주는 방식은 여러가지 존재합니다.

아래 방식으로 적절하게 키를 지정해줘야 정확하게 쿼리를 무효화할 수 있습니다.

키는 hierarchy 구조이기 때문에, 이를 활용해서 화면 영역을 분리하는 용도로도 키를 설정할 수 있습니다.

1. prefix

무효화하고 싶은 접두사로 시작하는 모든 쿼리를 무효화할 수 있습니다.

import { useQuery, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

queryClient.invalidateQueries({ queryKey: ['todos'] })

// 둘 다 'todos'로 시작하기 때문에 모두 무효화
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
  queryKey: ['todos', { page: 1 }],
  queryFn: fetchTodoList,
})

2. more specific query key

구체적인 특정한 쿼리키를 전달하여 그 변수가 포함된 쿼리를 무효화할 수 있습니다.

queryClient.invalidateQueries({
  queryKey: ['todos', { type: 'done' }],
})

// 무효화 O
const todoListQuery = useQuery({
  queryKey: ['todos', { type: 'done' }],
  queryFn: fetchTodoList,
})

// 무효화 X
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

3. any more variables or subkeys

exact 키워드가 의미하는 바처럼 더 이상의 변수나 하위 키가 없고, 특정 변수만 포함하는 쿼리를 무효화할 수 있습니다.

queryClient.invalidateQueries({
  queryKey: ['todos'],
  exact: true,
})

// 무효화 O
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

// 무효화 X
const todoListQuery = useQuery({
  queryKey: ['todos', { type: 'done' }],
  queryFn: fetchTodoList,
})

4. predicate function

세부적인 조건을 갖는 함수를 지정하여 true, false 값으로 무효화하고 싶은 쿼리키를 선택할 수 있습니다.

queryClient.invalidateQueries({
  predicate: (query) =>
    query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
})

// 무효화 O
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 20 }],
  queryFn: fetchTodoList,
})

// 무효화 O
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 10 }],
  queryFn: fetchTodoList,
})

// 무효화 X ( version이 10보다 작다)
const todoListQuery = useQuery({
  queryKey: ['todos', { version: 5 }],
  queryFn: fetchTodoList,
})

[Typescript] Generics으로 Axios 깔끔하게 사용해보기

khakhalog — Thu, 4 Jan 2024 14:40:31 +0900

사이드 프로젝트를 하면서 여느때와 같이 Axios 인스턴스를 만들어서 사용하고 있다.

칸반 리팩토링을 하면서 Generics을 사용해 서버에서 만들어주는 응답값 인터페이스를 만들고, 각 api 함수를 선언시 Generics에 들어갈 타입을 지정해주도록 수정해서 pr을 올렸었다.

// apis/kanban.ts

interface IResponse<T> {
  success: boolean;
  error: any;
  data: T;
}

export const fetchKanbanList = async (): Promise<IResponse<IKabanData[]>> => {
  const data: IResponse<IKabanData[]> = await goHigerApi.get('/v1/applications/kanban');
  return data;
};

첨엔 나름 괜찮은것같다고 생각했지만... 보다보니 깔끔하지 않았다.

또, pr 리뷰 중에 응답값 인터페이스를 axios 인스턴스 부분에서 공통적으로 적용하자는 의견이 있어서 검색해보았는데 비슷한 글들이 많았다.

여러 개 글을 참고해서 인스턴스를 클래스로 캡슐화하고, http 메서드별로 타입을 지정한 커스텀 메서드를 만들었다.

// apis/index.ts
import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';

interface ICommonResponse<T> {
  success: boolean;
  error: any;
  data: T;
}

class ApiService {
  private api;

  constructor() {
    this.api = axios.create({
      baseURL: process.env.REACT_APP_BASE_URL,
      withCredentials: true,
    });

    this.api.interceptors.request.use(
      ...
    );

    this.api.interceptors.response.use(
      async (response: AxiosResponse) => {
        if (!response.data.success) {
          throw new Error(response.data.error);
        }
        return response;
      },
      error => {
        return Promise.reject(error);
      },
    );
  }

  public async commonRequest<T>(
    method: 'get' | 'post' | 'put' | 'patch' | 'delete',
    url: string,
    data?: any,
    config?: InternalAxiosRequestConfig,
  ): Promise<ICommonResponse<T>> {
    const response = await this.api[method](url, data, config);
    return response.data;
  }

  public Get = async <T>(url: string, config?: InternalAxiosRequestConfig) =>
    this.commonRequest<T>('get', url, undefined, config);

  public Post = async <T>(url: string, data?: any, config?: InternalAxiosRequestConfig) =>
    this.commonRequest<T>('post', url, data, config);

  public Put = async <T>(url: string, data?: any, config?: InternalAxiosRequestConfig) =>
    this.commonRequest<T>('put', url, data, config);

  public Patch = async <T>(url: string, data?: any, config?: InternalAxiosRequestConfig) =>
    this.commonRequest<T>('patch', url, data, config);

  public Delete = async <T>(url: string, config?: InternalAxiosRequestConfig) =>
    this.commonRequest<T>('delete', url, undefined, config);
}

export default new ApiService();

// apis/kanban.ts
import ApiService from 'apis';

...

export const fetchKanbanList = async () => {
  const data = await ApiService.Get<IKabanData[]>('/v1/applications/kanban');
  return data;
};

commonRequest 함수의 반환값 지정 타입인 Promise<ICommonResponse<T>>은 AxiosResponse 타입의 data에 해당하게 된다.

아래는 AxiosResponse 타입의 내용이다.

// node_modules/axios/index.d.ts
export interface AxiosResponse<T = any, D = any> {
  data: T;
  status: number;
  statusText: string;
  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
  config: InternalAxiosRequestConfig<D>;
  request?: any;
}

그간 Typescript를 소극적으로 사용해왔었는데, 제네릭을 함수 파라미터처럼 사용한다는 것을 알게되었고, 앞으로 더 적절하게 사용하면 편리하지 않을까 생각이 들었다.

CH4. 액션에서 계산 빼내기

khakhalog — Thu, 21 Dec 2023 09:59:38 +0900

입력과 출력

모든 함수는 입력과 출력이 있습니다.

입력은 함수가 계산을 하기 위한 외부정보, 출력은 함수 밖으로 나오는 정보나 어떤 동작입니다.

함수를 호출하는 것은 어떠한 결과(출력)가 필요하기 때문이며 이를 얻으려면 입력이 필요합니다.

명시적 입/출력과 암묵적 입/출력

입력과 출력은 명시적이거나 암묵적일 수 있습니다.

var total = 0; // 전역변수
function add_to_total(amount) { // amount : 인자는 명시적 입력입니다.
    console.log("Old total: " + total); // total : 전역변수를 읽는 것은 암묵적 입력, 콘솔을 찍는 것은 암묵적 출력입니다.
    total += amount; // 전역변수를 수정하는 것은 암묵적 출력입니다.
    return total; // 리턴값은 명시적 출력입니다.
}

명시적 입력 : 인자
암묵적 입력 : 인자 외 다른 입력
명시적 출력 : 리턴값
암묵적 출력 : 리턴값 외 다른 출력

함수에 암묵적 입력과 출력이 있으면 부수효과입니다. (액션)

전역 변수와 같이 공유하는 변수는 일반적으로 암묵적 입력 또는 출력이 됩니다.

암묵적 입력은 함수의 인자로 바꾸고, 암묵적 출력은 리턴값으로 바꾸면 계산이 됩니다.

액션에서 계산 빼내기

add_item_to_cart : 장바구니에 아이템을 추가하고, 합계 금액을 계산하는 함수에서 계산을 빼내보겠습니다.

1. 코드를 선택하고 빼내기

코드를 추출해 새로운 함수를 만들어(함수 추출하기) 리팩토링합니다.
새 함수에 인자가 필요하다면 추가하고, 원래 코드에서 빼낸 부분에 새 함수를 부르도록 수정합니다.

원래코드

let shopping_cart = [];
let shopping_cart_total = 0;

function add_item_to_cart(name, price) {
  shopping_cart.push({ name: name, price: price });
  calc_cart_total();
}

바꾼 코드

// 전역변수 생략
function add_item_to_cart(name, price) {
  add_item(name, price);
  calc_cart_total();
}

function add_item(name, price) {
  shopping_cart.push({ name: name, price: price });
}

여전히 새로만든 함수 add_item은 전역변수(암묵적 입력)를 수정하고 있기 때문에 액션입니다.

2. 암묵적 입력과 출력을 찾기

함수를 호출하는 동안 결과에 영향을 줄 수 있는 것(암묵적 입력), 함수 호출의 결과로 영향을 받는 것(암묵적 출력)을 찾습니다.

전역 배열 shopping_cart는 암묵적 입력,

push() 함수로 전역 배열을 변경하는 부분은 암묵적 출력에 해당합니다.

이 부분을 명시적인 입력과 출력으로 바꿔보겠습니다.

3. 입력은 인자로 바꾸고 출력은 리턴값으로 바꾸기

입력은 인자로, 출력은 리턴값으로 바꿔줍니다.
새로운 리턴값이 생겼다면 호출하는 코드에서 함수의 결과를 변수에 할당해줍니다.
여기서 인자와 리턴값은 바뀌지 않는 불변값이라는 것이 중요합니다.

암묵적 입력, 암묵적 출력을 없앤 코드

function add_item_to_cart(name, price) {
  shopping_cart = add_item(shopping_cart, name, price);
  calc_cart_total();
}

function add_item(cart, name, price) {
  let new_cart = cart.slice();
  new_cart.push({ name: name, price: price });
  return new_cart;
}

암묵적 입력을 인자로 바꿔 명시적 입력이 되었습니다.

shopping_cart 배열의 복사본을 만들고(불변성) 복사본에 제품을 추가해 리턴하여 전역변수에 할당했습니다.

[JS] 모듈(Module)

khakhalog — Tue, 12 Dec 2023 10:54:29 +0900

게발하는 애플리케이션의 크기가 커지면서 파일을 여러 개로 분리하게 되는데 이때 분리된 파일 각각을 '모듈(module)'이라고 부릅니다.

모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티에서 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등을 통해 모듈 시스템을 개발하게 되었습니다.

AMD - 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발
CommonJS - node.js 서버를 위해 만들어진 모듈 시스템
UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐

위와 같은 모듈 시스템은 현재는 잘 쓰이지 않고, 이후로 관련 문법은 진화를 거듭해 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있다.

모듈이란

스크립트 파일 하나는 모듈 하나입니다.

모듈에 export, import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다. (모듈 내보내기)
import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있습니다. (모듈 가져오기)

모듈은 특수한 키워드나 기능과 함께 사용되므로 <script type="module"> 같은 속성을 설정하여 해당 스크립트가 모듈이란 걸 브라우저가 알게 해줍니다.

아래는 브라우저에서 모듈이 동작하는 방법입니다.

모듈은 로컬 파일에서 동작하지 않고, HTTP/HTTPS 프로토콜을 통해 동작하기 때문에 vscode liver server를 통해 예시를 확인해야하는 점 주의

say.js

export function sayHi(user) {
  return `Hello, ${user}!`;
}

index.html

<!DOCTYPE html>
<script type="module">
  import { sayHi } from "./say.js";

  document.body.innerHTML = sayHi("John");
</script>

브라우저가 모듈을 가져오고 이를 실행한 것을 확인할 수 있습니다.

모듈 핵심 기능

일반 스크립트와 모듈에는 약간의 차이가 있습니다. 모든 호스트 환경(자바스크립트가 돌아가는 환경)에 공통으로 적용되는 모듈의 핵심 기능입니다.

엄격모드

모듈은 항상 엄격 모드(use Strict)로 실행됩니다. 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다.

모듈 레벨 스코프

모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.

외부에 공개하려는 모듈은 export 해야 하고, 내보내진 모듈을 가져와 사용하려면 import 해줘야 합니다.

브라우저 환경에서 <script type="module">을 사용해 모듈을 만들면 독립적인 스코프를 가집니다.

단 한 번만 실행

동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출시 단 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내집니다.

정리하면, 모듈은 단 한 번만 실행되고 실행된 모듈은 필요한 곳에 공유되므로 어느 한 모듈에서 특정 코드를 수정하면 다른 모듈에서도 그 변경사항을 확인할 수 있습니다.

이를 이용하면, 최상위 레벨 모듈을 불러와서 초기화나 내부에서 쓰이는 데이터 구조를 만들고 이를 내보내 재사용 하는 등의 모듈 설정을 쉽게 할 수 있습니다.

브라우저에서 모듈(type="module")의 특정 기능

지연 실행

모듈 스크립트는 항상 지연 실행됩니다. 마치 defer 속성을 붙인 것처럼 동작합니다.

외부 모듈 스크립트 <script type="module" src="...">를 다운로드할 때 브라우저의 HTML 처리가 멈추지 않습니다. 브라우저는 외부 모듈 스크립트와 기타 리소스를 병렬적으로 불러옵니다.
모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML 문서가 완전히 만들어진 이후에 실행됩니다.
스크립트의 상대적 순서가 유지됩니다. 문서상 위쪽의 스크립트부터 차례로 실행됩니다.

위의 특징 때문에 모듈 스크립트는 항상 완전한 HTML 문서를 보고 문서 내 DOM 요소 등에도 접근할 수 있습니다.

index.html

<!DOCTYPE html>
<script type="module"> // 모듈 스크립트는 지연 실행되기 때문에 페이지가 모두 로드되고 난 다음에 실행됩니다.
  alert(typeof button); // Object
</script>

<script> // 일반 스크립트는 페이지가 완전히 구성되기 전이여도 바로 실행됩니다.
  alert(typeof button); // undefined
</script>
<button id="button">Button</button>

위의 html을 실행하면 1) undefined 알럿 창 2) Object 알럿 창 + button 이 표시됩니다.

모듈 스크립트 지연 실행

페이지 내 특정 기능이 모듈 스크립트에 의존적인 경우, 모듈이 완전히 로딩되기 전에 페이지가 먼저 사용자에게 노출되면 혼란을 느낄 수 있습니다.

투명 오버레이나 로딩 인디케이터를 보여주어 혼란을 예방할 수 있습니다.

인라인 스크립트의 비동기 처리

모듈 스크립트에서 async 속성을 적용하면, 필요한 모듈의 로드가 끝난 후 문서나 다른 script가 로드되길 기다리지 않고 바로 실행됩니다.

이러한 특징은 어디에도 종속되지 않는 기능을 구현할 때 유용하게 사용할 수 있습니다.

<!-- 필요한 모듈(analytics.js)의 로드가 끝나면 -->
<!-- 문서나 다른 <script>가 로드되길 기다리지 않고 바로 실행됩니다.-->
<script async type="module">
  import {counter} from './analytics.js';

  counter.count();
</script>

외부 스크립트

type="module" src="..." 가 붙은 외부 모듈 스크립트엔 두 가지 특징이 있습니다.

src 속성값이 동일한 외부 스크립트는 한 번만 실행됩니다.

<!-- my.js는 한 번만 로드 및 실행됩니다. -->
<script type="module" src="my.js"></script>
<script type="module" src="my.js"></script>

외부 사이트같이 다른 오리진에서 모듈 스크립트를 불러오려면 해당 모듈이 저장된 원격 서버가
Access-Control-Allow-Origin : * 헤더를 제공해야만 외부 모듈을 불러올 수 있습니다.

<!-- another-site.com이 Access-Control-Allow-Origin을 지원해야만 외부 모듈을 불러올 수 있습니다.-->
<!-- 그렇지 않으면 스크립트는 실행되지 않습니다.-->
<script type="module" src="http://another-site.com/their.js"></script>

경로가 없는 모듈은 금지

브라우저 환경에서 import는 반드시 상대 혹은 절대 URL 앞에 와야합니다.

Node.js나 번들링 툴은 경로가 없어도 해당 모듈을 찾을 수 있기 때문에 경로가 없는 모듈을 사용할 수 있습니다.

(e.g. import react from 'react')

빌드 툴

브라우저 환경에서 모듈을 단독으로 사용하는 경우는 거의 없습니다.
대게 Webpack 같은 빌드 툴을 사용해 모듈을 번들링하여 서버에 올리는 방식을 사용합니다.

HTML의 <script type="module"> 에 넣을 '주요' 모듈(진입접 역할을 하는 모듈)을 선택합니다.
'주요' 모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간의 의존관계를 파악합니다.
모듈 전체를 모아 하나의 큰 파일을 만듭니다.(설정에 따라 여러 파일 만드는 것도 가능) 이 과정에서 import문이 번들러 내 함수로 대체되므로 기존 기능은 그대로 유지됩니다.
이 과정 중에 변형이나 최적화도 함께 수행됩니다.
- 도달 가능하지 않은 코드는 삭제
- 내보내진 모듈 중 사용하지 않는 모듈 삭제
- console, debugger 같은 개발 관련 코드 삭제
- 최신 자바스크립트 문법이 사용된 경우 바벨(Babel)을 사용해 버전 변환
- 공백 제거, 변수 이름 줄이기 등으로 산출물의 크기 최적화

번들링 툴을 사용해 하나 혹은 여러 개의 파일로 번들링되면 이전에 import, export문은 특별한 번들러 함수로 대체됩니다.

기존 스크립트에서 import, export가 사라지기 때문에 type="module"이 필요 없어지므로, 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급할 수 있습니다.

<!-- 웹팩과 같은 툴로 번들링 과정을 거친 스크립트인 bundle.js -->
<script src="bundle.js"></script>

CH3. 액션과 계산, 데이터의 차이를 알기

khakhalog — Wed, 6 Dec 2023 17:08:25 +0900

함수형 프로그래머는 액션과 계산, 데이터를 구분하여 개발과정에서 적용할 수 있습니다.

데이터

이벤트에 대한 사실. 일어난 일의 결과를 기록한 것입니다.
e.g. 구입하려는 음식 목록, 이름, 전화 번호, 음식 조리법
데이터는 데이터 자체로 할 수 있는 것이 없기 때문에 데이터 그대로 이해할 수 있는 것이 장점입니다.
해석하지 않아도 실행할 수 있는 계산에 비해 해석이 반드시 필요하다는 점은 단점입니다.
데이터를 언제나 쉽게 해석할 수 있도록 표현하는 것이 함수형 프로그래밍에서 중요한 기술입니다.

계산

입력값으로 출력값을 만드는 것. 순수 함수, 수학 함수라고 부르기도 합니다.
e.g. 최댓값 찾기, 이메일 주소가 올바른지 확인하기
실행 시점과 횟수에 관계없이 항상 같은 입력값에 대해 같은 출력값을 돌려줍니다.
함수형 프로그래머는 가능하면 액션보다 계산을 사용하려고 합니다.
액션보다 좋은점
- 테스트가 용이합니다. 언제 어디서나 원하는만큼 테스트를 실행할 수 있습니다.
- 조합하기 쉽습니다. 계산을 조합해 더 큰 계산을 만들 수 있습니다.
계산과 액션은 입력값으로 실행하기 전에는 어떤 결과가 나오는지 알 수 없다는 단점이 있습니다.
계산은 일반적으로 함수형 프로그래밍 외부에 있는 액션을 통해 수행됩니다.

액션

외부 세계에 영향을 주거나 받는 것을 말합니다. 부수 효과라고 부르기도 합니다.
e.g. 이메일 보내기, 계좌에서 인출하기, ajax 요청 보내기
실행 시점과 횟수에 의존합니다.
액션은 다루기 힘들며 우리가 소프트웨어를 실행하려는 가장 중요한 이유입니다.
함수형 프로그래머가 액션을 잘 사용하기 위한 방법입니다.
- 가능한 액션을 적게 사용합니다. 액션 대신 계산을 사용할 수 있는지 생각해봐야 합니다.
- 가능한 작게 만듭니다. 액션에서 액션과 관련 없는 코드는 모두 제거합니다. (계산으로 빼낼 수 있다면 빼냄.)
- 외부세계와 상호작용하는 것을 제한할 수 있습니다. 내부에 계산과 데이터만 있고 가장 바깥쪽에 액션이 있는 구조가 이상적입니다.
- 호출 시점에 의존하는 것을 제한합니다.

Warning: Cannot update a component (`Kanban`) while rendering a different component (`Kanban`). To locate the bad setState() call inside `Kanban`

khakhalog — Mon, 4 Dec 2023 13:18:36 +0900

컴포넌트 렌더링 중에 상태를 업데이트하려고 시도했기 때문에 발생한 경고이다.

워닝 문구 마지막에 Github issue에서처럼 에러가 발생한 부분을 확인하라고 알려주고 있다.

Kanban.tsx

const { data, isLoading, isSuccess } = useQuery('fetchKanbanList', fetchKanbanList);

if (!isLoading && isSuccess) {
  const kanbanList = data.data;
  dispatch(setApplications(kanbanList));
}

useQuery훅이 렌더링중에 호출되고, 데이터가 잘 받아와지면 dispatch를 호출하여 스토어 상태를 업데이트하도록하였다.

이는 렌더링 중에 상태를 업데이트하는 것인데, 잘못된 패턴이다.

useEffect로 감싸주어 isLoading, isSuccess의 변경을 감지하고, effect 내에서 상태를 업데이트하도록 변경하는 것이 React의 규칙을 따르는 패턴이다.

const { data, isLoading, isSuccess } = useQuery('fetchKanbanList', fetchKanbanList);

useEffect(() => {
  if (!isLoading && isSuccess) {
    const kanbanList = data.data;
    dispatch(setApplications(kanbanList));
  }
}, [isLoading, isSuccess, data, dispatch]);