공부하는 개발자

자바는 여전히 공짜다 (Java is Still Free, Oct 2021)

lannstark — Wed, 1 Nov 2023 13:46:43 +0900

https://medium.com/@javachampions/java-is-still-free-3-0-0-ocrt-2021-bca75c88d23b

Java Is Still Free 3.0.0 (Ocrt 2021)

With the changes to Oracle JDK distribution and support, there has been considerable uncertainty over the rights to use Oracle JDK vs…

medium.com

에 나오는 "요약글"만을 번역한 내용입니다. 원활한 전달을 위해 일부 의역이 있을 수 있습니다.

Oracle JDK 배포와 지원 정책이 변화되며

Oracle JDK
Oracle Open JDK 빌드
다양한 벤더사의 Open JDK 빌드

를 사용하는 권리에 관한 상당한 불확실성이 있었다. 우리는 다양한 벤더사가 제공하는 무료 업데이트 모델 (보안 포함) 및 유료 지원 모델 (신규 및 기존) 을 이용할 수 있다. 이 문서에서 요약글 / 긴 글로 각각 나누어 살펴보자.

요약글

우리는 Oracle을 포함하여 다양한 벤더사가 제공하는 OpenJDK 빌드를 여전히 사용할 수 있고, 이는 GPLv2+CE 라이센스이기에 완전한 자유를 갖는다. 어떤 측면에서는 Oracle JDK가 여전히 무료로 비춰질 수 있는 것이다. 이 의미를 제대로 확인하기 위해서는 이 글의 다른 내용을 참고하길 바란다.

Java SE / OpenJDK / Oracle OpenJDK Builds / Oracle JDK

OpenJDK 커뮤니티는 Java SE 명세의 Reference Implementation (RI) 를 오픈소스 (GPLv2 + CE)로 만들고 유지한다. 이 Java SE 명세는 Java Community Process (JCP) 에 의해 관리되고, 각 배포 버전에 따른 포괄적인 Java Specification Request (JSR) 를 통해 정의된다.

그리고 세상에는 Java SE를 구현한 다양한 구현체들이 존재한다. (대부분은 Open JDK를 기반으로 하고 있다) Alibaba, Amazon, Azu, BellSoft, Eclipse Adoptium (AdoptOpenJDK의 후속 버전), IBM, MicroSoft, Red Hat, Oracle, SAP, 등등의 다양한 업체들이 이런 구현체들을 만들고 있다.

과거 Oracle JDK 8는 공개 업데이트 종료를 발표 했고, 따라서 2019년 4월부터 프로덕션 사용을 위해 업데이트를 하려면 지원 계약을 맺어야 했다. 위에서 언급했듯이, Oracle이 아닌 다른 업체가 만든 완전 무료 라이센스의 OpenJDK 8, 11, 17 버전은 여전히 존재한다. Oracle은 Oracle JDK 17의 zero-cost 바이너리 역시 제공하고 있다.

JDK를 얻기 위해선 다양한 선택지가 있다. 이 문서에서는 Java SE 8, 11, 17에 집중해서 다룬다.

Java SE 8에 머무르기

몇몇 사람들은 다양한 이유로 Java SE 8을 계속 사용하고 싶어한다.

2019년 4월 업데이트 이후, Oracle JDK 8은 상업 사용 제한에 들어갔다. Java SE 8 binary 를 업데이트 하기 위해서, 사용자들은 Oracle JDK 8을 위한 플랜을 구입하거나, 다른 벤더사의 Java SE 8 / OpenJDK 8 바이너리를 사용해야 한다.
Oracle JDK 8을 사용하고 있지 않다면, 현재 Java SE 8 / OpenJDK 8 벤더사들은 업데이트를 제공하거나 유료 지원 플랜을 제공할 것이다.

무료 Java SE 8 - 무엇을 선택해야 하는가

Java SE 8의 보안을 포함한 무료 업데이트를 원한다면, TCK를 통과한 OpenJDK 배포판을 사용해라. (Amazon, Azu, BellSoft, Eclipse Adoptium, IBM, Microsoft, Red Hat, SAP 등)

Java SE 11 사용하기

몇몇 선택지가 있다. Oracle JDK가 Java SE 11을 어떻게 관리하고 업데이트하는지에 초점을 맞춰 주의깊게 읽어주길 바란다.

Java SE 11에 관해, Oracle은 OpenJDK 기반의 Oracle JDK를 제공한다.
1. Oracle OpenJDK 11 builds - GPLv2 + CE 라이센스
2. Oracle JDK - 기본적으로 유료 라이센스 (개별 사용, 배포, 테스트, 프로토타이핑, 몇몇 특정 애플리케이션 유형에 대해서는 무료) 이고, GPLv2_CE를 사용하고 싶지 않거나, Oracle 제품 혹은 서비스와 함께 Oracle JDK를 사용하고 싶은 사람을 위한 것이다.

Oracle은 Oracle OpenJDK 빌드에 대해 두 분기에 걸쳐 업데이트를 제공하고, 6개월마다 다음 버전을 제공한다. (LTS를 포함하여)

꼭 Oracle에서 나온 제품이 아니더라도, 다양한 벤더사가 제공하는 Java SE / OpenJDK 바이너리 배포판을 사용할 수 있다. 이 벤더사들은 보안을 포함한 업데이트를 제공하며, LTS 버전에 대해서는 조금 더 긴 시간동안 지원한다.

무료 Java SE 11 - 무엇을 선택해야 하는가

Java SE 11의 보안을 포함한 무료 업데이트를 원한다면, TCK를 통과한 OpenJDK 배포판을 사용해라. (Amazon, Azu, BellSoft, Eclipse Adoptium, IBM, Microsoft, Red Hat, SAP 등)

Java SE 17 (LTS) 사용하기

몇몇 선택지가 있다. Oracle JDK가 Java SE 17을 어떻게 관리하고 업데이트하는지에 초점을 맞춰 주의깊게 읽어주길 바란다.

Java SE 17에 관해, Oracle은 OpenJDK 기반의 Oracle JDK를 제공한다.
1. Oracle OpenJDK builds - GPLv2 + CE 라이센스
2. Oracle JDK - 3년 간은 NFTC 라이센스이고, 그 이후는 일반적인 상업 라이센스이다.

Oracle은 Oracle OpenJDK 빌드에 대해 두 분기에 걸쳐 업데이트를 제공하고, 6개월마다 다음 버전을 제공한다. (LTS를 포함하여)

무료 Java SE 17 - 무엇을 선택해야 하는가

Java SE 11의 보안을 포함한 무료 업데이트를 원한다면, TCK를 통과한 OpenJDK 배포판을 사용해라. (Amazon, Azu, BellSoft, Eclipse Adoptium, IBM, Microsoft, Red Hat, SAP 등)

[리액트 공식 문서 번역] useRef

lannstark — Fri, 27 Oct 2023 00:47:05 +0900

https://react.dev/reference/react/useRef

useRef – React

The library for web and native user interfaces

react.dev

useRef는 렌더링을 위해 필요하지 않은 값을 참조할 수 있게 해주는 React Hook이다.

const ref = useRef(initialValue)

컴포넌트의 top level에서 useRef 를 호출하면, ref 를 선언한다. ref 란, 컴포넌트가 어떤 정보를 “기억”하고 싶은데 해당 정보가 리렌더링을 일으키지 않고 싶을 때 사용하는 객체를 말한다.
initialValue : ref 객체가 초기화 될 때, current 프로퍼티에 들고 있는 값. 어떤 타입이든 될 수 있다. 이 매개변수는 최초 렌더링 이후 무시된다.

예를 들어,

const ref = useRef(0)

이라는 코드를 사용하면, ref는 아래와 같은 객체가 된다. 즉, useRef 는 아래와 같은 객체를 반환한다.

{
  current: 0
}

current : 최초 전달된 initialValue로 정해진다. 추후 다른 값으로 변경할 수 있다.

다음에 렌더링이 일어날 때 useRef 는 동일한 객체를 반환할 것이다.

주요 메커니즘

ref.current 값을 변경할 수 있다. ref는 state와 다르게 mutable 하다. 하지만, ref 가 렌더링에 사용되는 객체를 들고 있다면, 이 객체를 변경할 수는 없다.
ref.current 값을 바꿀 때 리액트는 컴포넌트를 리렌더링하지 않는다. ref 는 단순한 JS object이기 때문에 리액트는 ref.current 값이 변경되었는지도 모른다.
초기화 과정을 제외하고는, 렌더링 과정에서 ref.current 값을 읽거나 쓰지 않기를 바란다. 만약 그렇지 않다면 컴포넌트의 동작이 예측불가능해진다.
Strict Mode에서 리액트는 혹시 모를 오류를 찾기 위해 컴포넌트를 두 번 호출 한다. 이런 동작은 개발환경에서만 존재하고, 운영환경에는 영향을 미치지 않는다. useRef 로 인해 생긴 ref 오브젝트 역시 두 번 생기지만, 그 중 하나는 버려진다. 만약 컴포넌트가 pure 하다면, 행동에 영향을 미치지 않을 것이다.

사용 사례

ref를 이용한 값 참조.

useRef 를 컴포넌트 최상단에서 호출하면, 하나 혹은 그 이상의 ref 를 얻을 수 있다.

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);
}

useRef 는 current 프로퍼티 하나만 갖고 있는 ref 객체를 주어진 초기값으로 초기화하여 설정한다. 그리고 그 다음 렌더링이 일어날 때 useRef 는 동일한 객체를 반환한다. 정보를 저장하거나 추후 정보를 꺼내기 위해 current 프로퍼티를 바꿀 수 있다. 이는 state 와 비슷하게 느껴지지만, 중요한 차이가 존재한다. ref 를 바꾸는 것은 리렌더링을 일으키지 않는다. 즉, ref 는 컴포넌트의 시각적 결과물에 영향을 주지 않고 정보를 저장하는 최적의 방법이다. 예를 들어, interval ID를 저장하고 나중에 해당 값을 사용해야 한다면, ref 에 집어 넣을 수 있다. ref 안에 있는 값을 변경하기 위해 current 프로퍼티를 수동으로 바꿀 수 있다.

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

나중에, interval ID를 ref로부터 읽어와 interval를 처리할 수 있다.

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

ref 를 사용하기 위해서 다음을 명심해야 한다.

리렌더링 사이에 정보를 저장할 수 있다. (일반적인 변수들은 리렌더링 될 때마다 reset 된다)
ref 의 값을 바꾼다고 해서, 리렌더링을 발동시키지 않는다. (state 는 변경되면 리렌더링 시키게 된다)
ref 는 컴포넌트의 인스턴스마다 지역적으로 존재한다. (컴포넌트 바깥에 있는 변수는 공유된다)

ref 는 리렌더링을 발동시키지 않기 때문에, 화면에 보이는 정보를 저장하는 목적으로는 부적절하다. 이 경우는 state를 사용해야 한다. https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state 를 읽어보라.

Example 1, Click counter

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

이 컴포넌트는 버튼이 얼마나 클릭되었는지 추적하기 위해 ref 를 사용한다. 클릭 횟수는 화면에 보이지 않고, event handler에서만 읽고 쓰이기 때문에 ref 를 사용해도 괜찮다. 만약 JSX 안에서 {ref.current}를 보여주려고 하면, 클릭을 하더라도 숫자가 업데이트 되지는 않을 것이다. 그 이유는 ref.current 의 값을 바꾼다고 해서 리렌더링이 일어나지 않기 때문이다. 리렌더링을 위한 정보 저장은 state에 되어야 한다.

Example 2, A stopwatch

import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>
        Start
      </button>
      <button onClick={handleStop}>
        Stop
      </button>
    </>
  );
}

이 예시는 state와 ref의 조합이다. startTime 과 now 는 리렌더링에 사용되기 때문에 state 이고, 버튼이 눌렸을 때 반복되는 interval를 멈추기 위한 interval id는 ref 이다. interval id는 리렌더링에 사용되지 않기 때문에 ref에 저장하는 것이 적합하고, 수동으로 업데이트할 수 있다.

주의

ref.current 를 렌더링 과정에 읽거나 쓰지 않아야 한다.

React는 컴포넌트의 body가 순수 함수 (pure function) 처럼 동작하기를 바란다.

만약 Input (props, state, context)이 같다면, 항상 동일한 JSX를 반환해야 한다.
순서를 다르게 호출하거나 다른 매개변수를 준다고 해서, 또 다든 호출의 결과에 영향을 줘서는 안된다.

렌더링 정에서 ref 를 읽거나 쓰면 예외를 던질 것이다.

function MyComponent() {
  // ...
  //   리렌더링 과정에서 ref를 쓰지 마라.
  myRef.current = 123;
  // ...
  //   리렌더링 과정에서 ref를 읽지 마라.
  return <h1>{myOtherRef.current}</h1>;
}

이벤트 핸들러나 effect 에서는 읽고 쓸 수 있다.

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ ref를 effect에서 읽거나 쓸 수 있다.
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ ref를 이벤트 핸들러에서 읽거나 쓸 수 있다.
    doSomething(myOtherRef.current);
  }
  // ...
}

렌더링 과정에서 어떤 값을 읽고 써야 한다면, state 를 대신 사용해라.

이러한 규칙을 지키지 않는다면, component가 동작은 하겠지만, React에 추가되는 새로운 기능들은 이런 규칙 위해서 동작하기 때문에 잘 호환되지 않을 수 있다. https://react.dev/learn/keeping-components-pure#where-you-_can_-cause-side-effects 도 읽어봐라.

Ref로 DOM 조작하기

DOM을 조작하기 위해 ref 를 사용하는 것은 특히 흔한 일이다. 리액트는 이런 경우를 위한 지원 기능이 있다.

먼저, ref 객체를 null 값으로 초기화 해라.

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  // ...

그 후 ref 객체를 조작하고 싶은 DOM node의 JSX ref 속성에 넣어라.

// ...
return <input ref={inputRef} />

리액트가 DOM node를 만들고 화면에 띄운 후, React는 ref 오브젝트의 current 프로퍼티를 설정된 DOM node에 연결할 것이다. 이제 <input> 의 DOM node에 접근해 focus() 와 같은 메소드를 호출할 수 있다.

function handleClick() {
  inputRef.current.focus();
}

React는 해당 node가 화면으로부터 제거되었을 때 current 프로퍼티에 null을 집어 넣는다. https://react.dev/learn/manipulating-the-dom-with-refs 도 읽어보라.

Example 1, Focusing a text input

버튼을 클릭하면, input에 foucs 되도록 만들어보자.

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

Example 2, Scrolling an image into view

버튼을 클릭하면, 해당 이미지가 있는 곳으로 스크롤을 해보자. 이 때 ref가 DOM node를 갖고 있고, DOM의 querySelectorAll API를 이용해 원하는 이미지를 찾을 수 있다.

import { useRef } from 'react';

export default function CatFriends() {
  const listRef = useRef(null);

  function scrollToIndex(index) {
    const listNode = listRef.current;
    // This line assumes a particular DOM structure:
    const imgNode = listNode.querySelectorAll('li > img')[index];
    imgNode.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
    });
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToIndex(0)}>
          Tom
        </button>
        <button onClick={() => scrollToIndex(1)}>
          Maru
        </button>
        <button onClick={() => scrollToIndex(2)}>
          Jellylorum
        </button>
      </nav>
      <div>
        <ul ref={listRef}>
          <li>
            <img
              src="https://placekitten.com/g/200/200"
              alt="Tom"
            />
          </li>
          <li>
            <img
              src="https://placekitten.com/g/300/200"
              alt="Maru"
            />
          </li>
          <li>
            <img
              src="https://placekitten.com/g/250/200"
              alt="Jellylorum"
            />
          </li>
        </ul>
      </div>
    </>
  );
}

Example 3, Playing and pausing a video

ref 를 이용해 <video> DOM node를 play() 하거나 pause() 해보자.

import { useState, useRef } from 'react';

export default function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const ref = useRef(null);

  function handleClick() {
    const nextIsPlaying = !isPlaying;
    setIsPlaying(nextIsPlaying);

    if (nextIsPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  }

  return (
    <>
      <button onClick={handleClick}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <video
        width="250"
        ref={ref}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
      >
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        />
      </video>
    </>
  );
}

Example 4, Exposing a ref to your own component

때때로, 당신이 만든 컴포넌트 내부의 DOM을 부모 컴포넌트가 제어해야 하는 경우가 있을 수 있다. 예를 들어, MyInput 컴포넌트를 만든 후, 부모 컴포넌트가 내부의 input에 focus를 할 수 있게 만들어야 한다고 하자. 이런 경우, useRef 가 input을 갖고 있게 만들고, forwardRef 를 이용해 부모 컴포넌트에 노출할 수 있다.

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

`ref` 컨텐츠가 다시 만들어지는 경우를 피하기

리액트는 ref 값을 최초로 한 번 저장한 이후, 다음 렌더링 때는 이를 무시한다.

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

예를 들면, new VideoPlayer() 의 결과는 최초 렌더링 때만 사용되고 그 후에는 무시되지만, VideoPlayer 의 인스턴스는 렌더링을 할 때마다 생기게 된다. 만약 비싼 객체를 만들어야 한다면 리소스가 낭비되는 셈이다.

이를 해결하기 위해 ref 초기화를 다음과 같이 할 수 있다.

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

일반적으로 ref.current 를 렌더링 과정에서 읽거나 쓸 수 없다. 하지만, 이 경우는 함수형 컴포넌트의 실행 결과가 항상 같기 때문에 괜찮다.

type checker가 ref에 null이 들어있을 수 있다고 판단하는 것을 피하기 위해 다음과 같은 패턴을 사용할 수도 있다.

function Video() {
  const playerRef = useRef(null);

  function getPlayer() {
    if (playerRef.current !== null) {
      return playerRef.current;
    }
    const player = new VideoPlayer();
    playerRef.current = player;
    return player;
  }

  // ...

문제 해결

직접 만든 컴포넌트에 ref를 사용할 수 없어요.

다음과 같이 직접 만든 컴포넌트에 ref 를 넣으려고 하면,

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

다음과 같은 에러를 만나게 될 것이다.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

기본적으로 컴포넌트는 내부에 있는 DOM node에 대한 ref를 노출하지 않는다. 이를 해결하기 위해서는, ref 를 쓰고 싶은 컴포넌트를 forwardRef 로 감싸야 한다.

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

그럼, 부모 컴포넌트가 ref를 사용할 수 있게 된다.

코루틴이란 무엇인가? (루틴과 코루틴)

lannstark — Wed, 30 Aug 2023 15:55:31 +0900

이번 시간에는 ‘코루틴’을 간단히 사용해 보면서 코루틴이 무엇인지~ 감을 잡아보도록 하자

도대체 코루틴이란 무엇일까? 코루틴을 영어로 살펴보면 co-routine 으로 여기서 접미어 co 는 ‘협력하는’ 이라는 의미가 있다. 뒤에 있는 routine 은 컴퓨터 공학에서 이야기하는 루틴으로 간단히 ‘함수’라고 생각해도 좋다.

그렇다면 co-routine 은 협력하는 루틴, 협력하는 함수라는 의미이다.

잠깐, 우리가 생각하는 그냥 루틴(함수)도 서로 호출과 반환을 주고받으며 협력을 한다.

그런데 협력하는 루틴이라니 도대체 그냥 루틴과 협력하는 루틴은 어떤 차이가 있길래 ‘협력하는’ 이라는 의미가 있을까?

다음 코드를 살펴보자.

fun main() {
  println("START")
  newRoutine()
  println("END")
}

fun newRoutine() {
  val num1 = 1
  val num2 = 2
  println("${num1 + num2}")
}

굉장히 직관적인 이 코드는 2개의 루틴이 있다. main 루틴과 new 루틴이다. 또한 이 코드를 실행하면 쉽게 예상할 수 있는 것처럼 다음과 같은 결과물이 나온다.

START
3
END

이런 결과물이 나오는 과정은 이렇다.

main 루틴이 START를 출력한 이후 new 루틴을 호출한다.
new 루틴은 1과 2를 계산해 3을 출력한다
그 이후, new 루틴은 종료되고 main 루틴으로 돌아온다.
main 루틴은 END 를 출력하고 종료된다.

이 과정을 그림으로 나타내면 다음과 같다.

또한 이때, new 루틴이 종료된 이후에는 new 루틴에서 사용했던 num1 과 num2 에는 다시 접근할 수 없게 되고, 따라서 메모리에서도 정보가 사라질 것이다.

여기까지 정리해 보면

루틴은 진입하는 곳이 한 곳이고
루틴이 종료되면 그 루틴에서 사용했던 정보가 초기화

된다고 생각할 수 있다.

자 이제 루틴을 사용하는 코드를 살펴보았으니, 이번에는 협력하는 루틴, 코루틴을 살펴보자. 코루틴을 사용하려면 의존성을 한 가지 추가해 주어야 한다.

dependencies {
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.2")
}

처음 보는 코드도 많을 텐데 우선 타이핑 해보고 각 함수의 의미를 살펴보자.

fun main(): Unit = runBlocking {
  println("START")
  launch {
    newRoutine()
  }
  yield()  
  println("END")
}

suspend fun newRoutine() {
  val num1 = 1
  val num2 = 2
  yield()
  println("${num1 + num2}")
}

가장 먼저 처음 보는 함수는 runBlocking 이다. runBlocking 함수는 일반 루틴 세계와 코루틴 세계를 연결하는 함수이다. 이 함수 자체로 새로운 코루틴을 만들게 되고, runBlocking 에 넣어준 람다가 새로운 코루틴 안에 들어가게 된다.

다음으로 launch 라는 함수도 보인다. launch 라는 함수 역시 새로운 코루틴을 만드는 함수이다. 주로 반환 값이 없는 코루틴을 만드는데 사용된다.

즉, 우리는 runBlocking { } 과 launch { } 를 사용해 2개의 코루틴을 만든 것이다.

다음으로 yield() 라는 함수가 보인다. yield 라는 단어는 양보하다라는 의미가 있는데, 이 의미에 걸맞게 **yield() 라는 함수는 지금 코루틴의 실행을 잠시 멈추고 다른 코루틴이 실행되도록 양보**한다.

마지막으로 suspend fun 이라는 키워드가 보인다. 코틀린에서 일반적인 함수는 fun 으로 만드는 것과 다르게 suspend 라는 키워드가 붙었는데 **suspend 라는 키워드가 붙으면 다른 suspend fun 을 호출하는 특수 능력을 갖게 된다.** 우리가 사용한 yield()가 바로 suspend fun 이기 때문에 함수 newRoutine 에 suspend 를 붙여 주었다.

자 이렇게 새로운 기능들의 의미를 모두 살펴보았다. 이제 두 개의 코루틴을 사용하는 코드를 실행시켜보자. 실행 결과는 다음과 같다.

START
END
3

앗..! 일반-루틴을 코-루틴으로 변경했을 뿐인데 실행 결과가 달라졌다! 3 출력이 END 뒤에 나온 것이다! 혹시 양보하는 기능인 yield() 때문에 그럴까?! 2개의 yield() 를 지우더라도 여전히 동일하게 위의 출력이 나온다.

출력이 나오는 과정을 살펴보자.

main 코루틴이 runBlocking 에 의해 시작되고 START가 출력된다.
launch 에 의해 새로운 코루틴이 생긴다. 하지만, newRoutine의 실행은 바로 일어나지 않는다.
main 코루틴 안에 있는 yield()가 되면 main 코루틴은 new 코루틴에게 실행을 양보한다. 따라서 launch 가 만든 새로운 코루틴이 실행되고, newRoutine 함수가 실행된다.
newRoutine 함수는 다시 yield()를 호출하고 main 코루틴으로 되돌아온다.
main 루틴은 END 를 출력하고 종료된다.
아직 newRoutine 함수가 끝나지 않았으니 newRoutine 함수로 되돌아가 3 이 출력되고 프로그램이 종료된다.

일반 루틴 세계에 비해 복잡하고 직관적이지 않다.. 이 과정을 그림으로 나타내면 다음과 같다.

그렇다! 루틴과 코루틴의 가장 큰 차이는 중단과 재개이다. 루틴은 한 번 시작되면 종료될 때까지 멈추지 않지만, 코루틴은 상황에 따라 잠시 중단이 되었다가 다시 시작되기도 한다. 때문에 완전히 종료되기 전까지는 newRoutine 함수 안에 있는 num1 num2 변수가 메모리에서 제거되지도 않는다.

추가적으로 만약 출력이 일어날 때 어떤 스레드에서 출력이 실행되는지 확인하려면, 다음과 같은 유틸성 함수를 만들 수도 있다.

fun printWithThread(str: Any) {
  println("[${Thread.currentThread().name}] $str")
}

또한, IntelliJ IDE에서 vm option으로 -Dkotlinx.coroutines.debug 를 주게 되면 어떤 코루틴에서 출력이 일어났는지 확인할 수도 있다.

이 두 옵션을 사용하면, 출력 결과가 다음과 같이 변경된다.

[main @coroutine#1] START
[main @coroutine#1] END
[main @coroutine#2] 3

매우 좋다~! 이번 시간에는 루틴과 코루틴의 차이에 대해 살펴보았다. 우리가 항상 직관적으로 사용했던 루틴과 다르게, 코루틴은 코드가 중간에서 멈추었다가 다시 시작할 수 있다는 특징이 핵심이다. 그런데 아직 코루틴을 완벽하게 파악한 것은 아니다.

또 코루틴과 자주 비교되는 존재가 있는데 바로 ‘스레드’이다. 다음 시간에는 코루틴과 스레드가 어떤 차이를 갖는지 살펴보도록 하자.

코루틴에 대해 더 알아보고 싶다면 아래 내용을 참고해주세요!

내용 출처 : https://inf.run/dLNp

2시간으로 끝내는 코루틴 - 인프런 | 강의

비동기 프로그래밍의 필수 라이브러리 코루틴! 코루틴의 개념, 사용법, 그리고 내부 원리까지 한 번에 얻어가세요!, 코틀린 비동기 프로그래밍 필수템! 코루틴, 2시간에 개념부터 실습까지 ⏰ [

www.inflearn.com

코틀린 제네릭 - 배열과 리스트, 제네릭과 무공변

lannstark — Wed, 30 Aug 2023 15:52:35 +0900

지난 시간의 문제를 정리해 보면, 우리는 금붕어 Cage에서 금붕어를 꺼내 물고기 Cage에 옮길 수 없었다. 하지만 사실은, 그냥 금붕어를 물고기 Cage에 넣는 것은 아무 문제가 없다.

val cage = Cage2<Fish>()
cage.put(GoldFish("금붕어"))

물고기 Cage에 금붕어가 들어가는 것은 문제가 아니라는 의미이다. 그렇다면 도대체 왜 이런 차이가 발생하는 것일까??! 근본적인 이유를 알기 위해 우리는 상속관계의 의미를 살펴보아야 한다.

여기 상속 관계인 두 클래스가 있다. Number와 Int라고 해보자. Number는 Int의 상위 타입이고 Int는 Number의 하위 타입이다. 이때 다음과 같은 코드는 정상 동작할 수 있다.

fun doSomething(num: Number) {
  // ...
}

val a: Int = 3
doSomething(a) // Number 타입에 Int 타입이 들어갔다!

Number를 파라미터로 받는 함수에 Int가 들어간 것이다! 즉, 두 클래스가 상속관계에 있을 때 하위 클래스는 상위 클래스 대신 함수 파라미터에 들어갈 수 있다.

또 다른 예시도 있다.

val intNum: Int = 5
val num: Number = intNum // Number 타입 변수에 Int 타입 변수가 들어갔다!

이번에도 마찬가지로 Number 타입 변수에 Int 타입 변수가 들어갔는데, Number가 상위 타입이고 Int가 하위 타입이기에 가능하다. 즉 상속관계는 다음과 같은 의미를 갖는다.

상위 타입이 들어가는 자리에 하위 타입이 대신 위치할 수 있다.

이제 다시 Cage2 코드를 찬찬히 뜯어보자.

fun main() {
  val goldFishCage = Cage2<GoldFish>()
  goldFishCage.put(GoldFish("금붕어"))

  val cage = Cage2<Fish>()
  cage.moveFrom(goldFishCage) // Error: Type Mismatch
}

cage의 타입 파라미터는 Fish 이므로 cage.moveFrom(otherCage: Cage2<Fish>) 가 된다.

그리고 이 함수에 넣으려는 goldFishCage는 Cage2<GoldFish> 타입을 가지고 있고, Type Mismatch 에러가 발생하고 있다.

따라서 우리는 Fish 와 GoldFish 는 상속관계이지만, Cage2<Fish> 와 Cage2<GoldFish> 는 아무 관계가 아니라는 것을 추측할 수 있다.

Cage2<Fish> 와 Cage2<GoldFish> 가 아무 관계가 아니어서, Type Mismatch가 발생한 것이다.

이를 어려운 말로 가리켜 “Cage2는 무공변 (in-variant, 불공변)하다”고 한다.

그렇다면 왜 Fish와 GoldFish간의 상속관계가 제네릭 클래스에 유지되지 않는 것일까? 즉, 왜 제네릭 클래스는 타입 파라미터 간의 상속관계가 있더라도, 무공변할까? 그 근본적인 이유를 알기 위해서는 잠시 Cage를 잊고, Java 코드를 살펴보아야 한다. Java의 배열과 리스트를 비교해 보자. 먼저 Java의 배열이다.

Java의 배열은 제네릭과 다르다. Java의 배열에서는 A 객체가 B 객체의 하위 타입일 때, A 배열이 B 배열의 하위 타입으로 간주된다. 즉, String 은 Object 의 하위 타입이므로 String[] 도 Object[] 의 하위 타입으로 여겨진다. 이를 어려운 말로 “배열은 공변 (co-variant) 하다”라고 한다.

배열은 공변하기 때문에 아래와 같은 코드가 가능하다.

public static void main(String[] args) throws IOException {
  String[] strs = new String[]{"A", "B", "C"};
  // Object가 String의 상위 타입이므로 Object[]가 String[]의 상위 타입으로 간주된다.
  // 따라서 objs에 strs를 대입할 수 있다.
  Object[] objs = strs; 
  objs[0] = 1; // java.lang.ArrayStoreException: java.lang.Integer
}

Object[] 는 사실 String[] 인데 숫자를 넣을 수 있는 것이다! 이러한 동작은 런타임 때 예외를 낼 수 있기 때문에 굉장히 위험하다!

반면 List는 다르다. List는 제네릭을 사용하고 있고, 불공변 하기 때문에 컴파일 때 오류를 바로 확인할 수 있다.

public static void main(String[] args) throws IOException {
  List<String> strs = List.of("A", "B", "C");
  List<Object> objs = strs; // Type Mismatch
}

만약 제네릭도 배열과 같은 원리로 동작했다면, List 역시 배열과 같은 결함을 가지게 되고 타입-안전하지 않은 코딩을 해야 했을 것이다. 제네릭은 이런 결함 자체를 막기 위해 무공변하도록 만들어졌다. 또한 이러한 차이가 바로, 배열보다 리스트를 사용하라는 격언의 배경이기도 하다. (Effective Java #3 Item28)

매우 좋다~! 우리는 왜 금붕어 Cage에서 물고기 Cage로 금붕어를 옮기지 못하는지 이해했다.

하지만 여전히 문제가 해결된 것은 아니다. 분명 물고기 Cage에 금붕어를 넣을 수 있는데도 금붕어 Cage에서 물고기 Cage로 금붕어를 옮기지 못하는 것은 이상하다.

어떻게 하면 이 문제를 해결할 수 있을까?! 바로 moveFrom 함수를 호출할 때 Fish 와 GoldFish 의 상속관계를 Cage2<Fish> 와 Cage2<GoldFish> 에도 이어주는 것이다!

이를 어려운 말로, “공변(co-variant)하도록 만든다” 라고 한다.

공변에 대해 더 궁금하시다면 아래 링크를 확인해보세요~!!

내용 출처 : https://inf.run/F9gX

코틀린 고급편 - 인프런 | 강의

코틀린의 모든 언어적 특성을 이해할 수 있습니다. 강의를 들으신 후 제네릭, 위임과 지연, DSL과 리플렉션 등 코틀린 고급 기술을 활용해 마음껏 프로그래밍하실 수 있습니다., 남들보다 깊은 코

www.inflearn.com

코틀린 제네릭 - 제네릭과 타입 파라미터

lannstark — Wed, 30 Aug 2023 15:50:30 +0900

제네릭은 추상화를 하는데 있어 굉장히 필수적인 기능이고, 정말 잘 활용되는 언어적 특징이다. 제네릭을 이해하기 위해 Cage 클래스를 만들어 보자. Cage 에는 여러 동물을 넣거나 꺼낼 수 있다. 가장 간단한 Cage 클래스는 다음과 같다.

class Cage {
  private val animals: MutableList<Animal> = mutableListOf()

  fun getFirst(): Animal {
    return animals.first()
  }

  fun put(animal: Animal) {
    this.animals.add(animal)
  }

  fun moveFrom(cage: Cage) {
    this.animals.addAll(cage.animals)
  }
}

당연히 Animal 클래스도 필요하니 간단하게 다음과 같이 금붕어, 잉어를 만들어 주자.

abstract class Animal(
  val name: String,
)

abstract class Fish(name: String) : Animal(name)

// 금붕어
class GoldFish(name: String) : Fish(name)

// 잉어
class Carp(name: String) : Fish(name)

여기까지 그림으로 나타내면 다음과 같다.

이제 Cage 에 잉어를 넣었다 잉어를 빼보자.

fun main() {
  val cage = Cage()
  cage.put(Carp("잉어"))
  val carp: Carp = cage.getFirst() // Error: Type Mismatch
}

앗! Error: Type Mismatch 가 발생한다. 생각해 보면 당연하다. 우리는 Cage를 만들어 잉어를 넣었다가 바로 가져오려 했는데, Cage 클래스의 getFirst() 함수 반환 타입은 Animal 이기 때문에 바로 Carp 타입을 가져올 수 없는 것이다.

이 에러를 해결하기 위해서는 어떻게 해야 할까?! 가장 간단한 방법은 타입 캐스팅(type casting)을 하는 것이다. Kotlin에서는 as 키워드를 이용해 타입 캐스팅을 할 수 있다.

fun main() {
  val cage = Cage()
  cage.put(Carp("잉어"))
  val carp: Carp = cage.getFirst() as Carp
}

이렇게 하면 바로 잉어 타입을 가져올 수 있게 된다.

자, 그런데 사실 위 코드는 매우 위험한 코드이다. 지금 당장은 잉어로 타입 캐스팅을 해도 문제가 없어 보이지만, 누군가 Cage에 GoldFish 를 넣을 수도 있기 때문이다.

fun main() {
  val cage = Cage()
  cage.put(GoldFish("사실은 금붕어"))
  val carp: Carp = cage.getFirst() as Carp // 에러가 나지 않는다!!
}

실제로 두 번째 줄을 cage.put(GoldFish("금붕어")) 라고 바꾸었을 때 실제 오류는 런타임이 돼서야 발견하게 된다. 지금은 한 함수 내에서 금붕어를 넣고 잉어를 빼니 금방 발견할 수 있지만, 실제로는 복잡한 코드 내에서 이런 버그를 찾기란 쉽지 않다.

그렇다면 어떻게 타입 안전하게 잉어를 가져올 수 있을까??! 한 가지 방법은 Kotlin의 안전한 타입 캐스팅(safe type casting)과 엘비스 연산자(elivs operator)를 활용하는 것이다.

fun main() {
  val cage = Cage()
  cage.put(Carp("잉어"))
  val carp: Carp = cage.getFirst() as? Carp
    ?: throw IllegalArgumentException()
}

하지만 이 방법 역시 as 를 사용했을 때와 마찬가지로 여전히 실수할 여지가 있고, 실수로 금붕어가 Cage에 들어가면 에러가 발생한다. 우리는 아예 에러가 발생하지 않았으면 좋겠다.

그렇다면, 동일한 Cage 클래스이지만 잉어만 넣을 수 있는 Cage, 금붕어만 넣을 수 있는 Cage를 구분하는 방법은 어떨까? 이 방법을 사용하면 타입 안전하게 잉어를 Cage에 넣었다가 잉어 타입으로 가져올 수 있다.

이럴 때 바로 제네릭을 사용할 수 있다. Cage 클래스를 다시 한 번 만들어 보자. 이때 특정 타입만 Cage가 받을 수 있도록 처리하기 위해 타입 파라미터를 사용할 것이다. 타입 파라미터를 클래스에 적용하는 방법은 간단하다. 클래스 뒤에 < > 를 이용해 대문자를 적어주면 된다.

class Cage2<T> {

  private val animals: MutableList<T> = mutableListOf()

  fun getFirst(): T {
    return animals.first()
  }

  fun put(animal: T) {
    this.animals.add(animal)
  }

  fun moveFrom(cage: Cage2<T>) {
    this.animals.addAll(cage.animals)
  }

}

이렇게 Cage2 처럼 타입 파라미터가 적용된 클래스를 제네릭 클래스라 부르고, < > 에 들어간 T 를 타입 파라미터라고 부른다.

Cage2 를 제네릭 클래스로 만들며, getFirst(), put(), moveFrom() 함수에도 모두 T 가 들어가게 되었다. 이렇게 되면, Cage2 클래스를 인스턴스화 할 때 타입 정보를 넣어주어야 하고 그때 넣어준 타입 정보가 모두 T를 대체한다는 의미이다.

아까 살펴보았던 예제에 제네릭 클래스인 Cage2를 바로 적용해 보자.

fun main() {
  val cage = Cage2<Carp>()
  cage.put(Carp("잉어"))
  // 이제 as Carp 없이도 getFirst 메소드를 호출하면 바로 Carp가 나온다!!!
  val carp: Carp = cage.getFirst()
}

제네릭을 활용한 덕분에 타입 안전하게 잉어를 가져올 수 있게 되었다!

실제로 이런 제네릭 클래스는 List나 Collection 같은 자바 표준 라이브러리, 코틀린 표준 라이브러리에서 활발하게 사용되고 있다.

자 이제 다음 요구사항을 생각해 보자.

금붕어 Cage에 금붕어 한 마리를 넣고, 물고기 Cage에 moveFrom 메소드를 사용해 금붕어를 옮기자!

이 요구사항을 코드로 표현하면 다음과 같다.

fun main() {
  val goldFishCage = Cage2<GoldFish>()
  goldFishCage.put(GoldFish("금붕어"))

  val cage = Cage2<Fish>()
  cage.moveFrom(goldFishCage) // Error: Type Mismatch
}

자 그런데! 분명, 금붕어는 물고기 Cage에 들어갈 수 있을 것 같음에도 cage.moveFrom(goldFishCage) 는 Type Mismatch 에러가 발생한다!

다음 시간에 왜 이런 에러가 발생하는지, 어떻게 해결할 수 있는지 알아보자.

내용 출처: https://inf.run/F9gX

코틀린 고급편 - 인프런 | 강의

www.inflearn.com

[css] 넘쳐 흐르는 텍스트 처리 주요 속성 정리

lannstark — Wed, 30 Aug 2023 15:10:50 +0900

overflow

자식이 부모의 범위를 벗어날 경우 어떻게 할 것인지 제어하는 css

overlfow: visible | hidden | scroll | auto

visible : 그냥 그대로 둔다. 넘치면 넘치는 대로 존재한다.
hidden : 넘친 부분은 보이지 않는다.
scroll : 스크롤이 생긴다. (가로 / 세로 모두 생긴다.)
auto : 넘친 경우, 자동으로 스크롤이 생긴다.

text-overflow

넘치는 텍스트 표기를 제어하는 css

text-overflow: clip | ellipsis;

text-overflow 속성은 overflow 속성이 hidden / scroll / auto 이면서 white-space: nowrap일 경우만 적용된다.

clip : 넘치는 텍스트를 자른다.
ellipsis : 말 줄임표로 잘린 텍스트가 있다고 표시한다.

white-space

white-space: normal | nowrap

기본값은 normal 이다. normal 로 설정되면, 연속한 띄어쓰기, 들여쓰기, 그리고 줄바꿈 문자가 모두 무시된다. 또한, 텍스트가 길어 부모 요소의 가로 폭을 넘어가면 자동으로 줄바꿈을 해준다. 따라서 수동으로 줄바꿈을 할 수 있는 방법이 없다. (  같은 HTML 엔티티 편법을 사용해야 함)

nowrap : 가로폭을 넘어가도 줄바꿈이 일어나지 않는다. 다만, 그 외에는 모두 normal 과 동일하다. 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자를 모두 무시한다.

pre : 텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈과 같은 공백 문자들을 HTML 안에 그대로 보여지게 하는 옵션.

pre-wrap : pre 와 동일하지만, 긴 행이 있다면 자동으로 줄바꿈을 해준다.

pre-line : 줄바꿈만 유지하면서 연속된 띄어쓰기와 들여쓰기를 무시하고 싶을 때 사용

자주 사용되는 조합

텍스트가 빠져나가는 경우 말줄임 기호 보여주기

white-space: nowrap;
overflow: hidden;
text-overflow: elipsis;

가로 스크롤바를 사용할 수 있게 해주기

white-space: nowrap;
overflow: auto;

R2DBC pooling yml로 설정하기

lannstark — Mon, 28 Aug 2023 23:26:47 +0900

의존성

implementation("io.asyncer:r2dbc-mysql:1.0.2") // R2DBC MySQL Driver
implementation("io.r2dbc:r2dbc-h2:1.0.0.RELEASE")

꽤 tricky 하게 yml로 설정한 auto configuration을 이용할 수 있음.

url 부분에 "pool"이 들어가지 않는 것이 핵심!

r2dbc pooling 공식문서에서 얘기하는 "r2dbc:pool:mysql"을 사용하는 방법은 Configuration을 (yml을 사용하지 않고) 직접 해줄 때 사용하는 방법이다.

spring:
    r2dbc:
    url: 'r2dbc:mysql://localhost:3306/database?option1=value1'
    username: 'root'
    password: ''
    pool:
      enabled: true
      initial-size: 10
      max-acquire-time: 5s
      max-create-connection-time: 5s
      max-idle-time: 60m # max-wait-time 이랑 같이 챙겨 줘야 함.
      max-life-time: 60m
      max-size: 10

logging:
  level:
    io.r2dbc.pool: DEBUG
    reactor.pool: DEBUG

io.r2dbc.pool.ConenctionPool은 ConnectionFactory 를 구현했고 내부적으로 다른 ConnectionFactory 를 갖고 있음. 일종의 Decorator pattern
그리고 내부적으로 reactor.pool.InstrumentedPool를 갖고 있는데 (구현체는 같은 패키지의 SimpleDequePool) 실제 connection 취득은 다른 factory를 / pooling은 이 InstrumentedPool을 사용하고 있다.
SQL show status like 'Threads_connected'; 을 통해 정상적으로 10개의 connection pooling이 되는 것을 확인할 수 있음.

코틀린 + 스프링 ArgumentResolver 주의할 점

lannstark — Sat, 26 Aug 2023 08:05:42 +0900

코틀린은 타입의 nullable 여부를 확실하게 지정해야 한다.

따라서 Long 타입과 Long? 타입은 java의 (primitive type) long 과 (reference type) Long 으로 컴파일 된다. 이런 이유로 스프링 ArgumentResolver에서 supportsParameter 를 구현할 때 다음과 같은 주의를 기울여야 한다.

다음 코드는 우리가 resolving 하려는 타입이 코틀린의 Long 인지 확인한다. ArgumentResolver를 활용할 때 흔히 작성하는 코드다.

override fun supportsParameter(parameter: MethodParameter): Boolean { 
  return parameter.getParameterAnnotation(커스텀어노테이션::class.java) != null &&
    Long::class.java.isAssignableFrom(parameter.parameterType)
}

그러나 이 코드는 다음 경우에만 동작한다.

fun controllerMethod(@커스텀어노테이션 value: Long) {
  println(value) // 값이 정상적으로 들어 있다.
}

만약 value의 타입이 Long 이 아닌 Long? 으로 된다면, 동작하지 않는다.

fun controllerMethod(@커스텀어노테이션 value: Long?) {
  println(value) // 값이 정상적으로 들어 있지 않다!
}

그 이유는, Long::class.java.isAssignableFrom(parameter.parameterType) 코드에서 parameter.parameterType 이 Long 인지 Long?인지에 따라 다르게 true / false를 반환하기 때문이다.

Long? 타입에서도 ArgumentResolver를 활용하고 싶다면 코틀린의 Long (Long::class.java) 대신 자바의 Long을 사용하도록 변경하면 된다.

override fun supportsParameter(parameter: MethodParameter): Boolean { 
  return parameter.getParameterAnnotation(커스텀어노테이션::class.java) != null &&
    Class.forName("java.lang.Long").isAssignableFrom(parameter.parameterType)
}

그럼, Long? 타입에도 값이 정상적으로 들어온다.

fun controllerMethod(@커스텀어노테이션 value: Long?) {
  println(value) // 값이 잘 들어온다~~!  
}

1줄 요약 : Kotlin + Spring에서 ArgumentResolver는 argument의 nullable 여부에 따라 적절한 파라미터 타입 비교가 필요하다.

[React-Router-Dom v6] useParam undefined 번거로움 해결

lannstark — Thu, 24 Aug 2023 18:25:03 +0900

useParam() 훅을 사용할 때 반환되는 값은 <string | undefined> 이다.

라이브러리 입장에서는 URI 경로에 있는 값을 가져올 때 존재하지 않을 수도 있으니, 당연히 undefined로 반환해야 하지만, 라이브러리를 사용하는 입장에서는 확실히 존재함을 보장할 수 있음에도 계속해서 undefined 아님 단언 (!)을 사용하는 것이 번거롭다.

이럴 때 다음과 같은 방법을 사용할 수 있다.

const {key} = useParams() as { key: string };

이렇게 하면, key가 <string | undefined>가 아닌 string 임을 확실히 보장할 수 있다.

물런 매번 ! 를 사용할 것인지 아니면 as 라는 위험할 수 있는(?) 형 변환을 사용할 것인지의 trade-off가 있을 것 같다.

[HTML] 숫자 타입 input 스크롤 이슈 해결

lannstark — Wed, 23 Aug 2023 16:06:28 +0900

숫자 타입 input에 자동으로 생기는 화살표를 제거하고 싶다면. 아래 css를 추가하면 된다.

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] 부분은 적절히 다른 select로 변경할 수 있다.

number type을 클릭하고 커서를 올린 채 wheel 이벤트를 발생시키면 숫자가 오르락 내리락 하는데, 이를 막고 싶다면 TypeScript + React에서는 다음과 같이 하면 된다.

<NumberInput
  style={{marginTop: "16px"}}
  type={"number"}
  value={state}
  onChange={onChanged}
  onWheel={event => (event.target as HTMLElement).blur()}
/>

핵심은 onWheel 이벤트가 발생하는 경우, blur 시키는 것.

공부하는 개발자

자바는 여전히 공짜다 (Java is Still Free, Oct 2021)

요약글

Java SE / OpenJDK / Oracle OpenJDK Builds / Oracle JDK

Java SE 8에 머무르기

Java SE 11 사용하기

Java SE 17 (LTS) 사용하기

[리액트 공식 문서 번역] useRef

사용 사례

ref를 이용한 값 참조.

Example 1, Click counter

Example 2, A stopwatch

주의

Ref로 DOM 조작하기

Example 1, Focusing a text input

Example 2, Scrolling an image into view

Example 3, Playing and pausing a video

Example 4, Exposing a ref to your own component

ref 컨텐츠가 다시 만들어지는 경우를 피하기

문제 해결

직접 만든 컴포넌트에 ref를 사용할 수 없어요.

코루틴이란 무엇인가? (루틴과 코루틴)

코틀린 제네릭 - 배열과 리스트, 제네릭과 무공변

코틀린 제네릭 - 제네릭과 타입 파라미터

[css] 넘쳐 흐르는 텍스트 처리 주요 속성 정리

overflow

text-overflow

white-space

자주 사용되는 조합

R2DBC pooling yml로 설정하기

코틀린 + 스프링 ArgumentResolver 주의할 점

[React-Router-Dom v6] useParam undefined 번거로움 해결

[HTML] 숫자 타입 input 스크롤 이슈 해결

`ref` 컨텐츠가 다시 만들어지는 경우를 피하기