개발 공부 기록하기 108

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

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 빌드 를..

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

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 프로퍼티에 들고 있는 값. 어떤 타입이든 될 수 있다. 이 매개변수는 최초 ..

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

이번 시간에는 ‘코루틴’을 간단히 사용해 보면서 코루틴이 무엇인지~ 감을 잡아보도록 하자 도대체 코루틴이란 무엇일까? 코루틴을 영어로 살펴보면 co-routine 으로 여기서 접미어 co 는 ‘협력하는’ 이라는 의미가 있다. 뒤에 있는 routine 은 컴퓨터 공학에서 이야기하는 루틴으로 간단히 ‘함수’라고 생각해도 좋다. 그렇다면 co-routine 은 협력하는 루틴, 협력하는 함수라는 의미이다. 잠깐, 우리가 생각하는 그냥 루틴(함수)도 서로 호출과 반환을 주고받으며 협력을 한다. 그런데 협력하는 루틴이라니 도대체 그냥 루틴과 협력하는 루틴은 어떤 차이가 있길래 ‘협력하는’ 이라는 의미가 있을까? 다음 코드를 살펴보자. fun main() { println("START") newRoutine() pr..

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

지난 시간의 문제를 정리해 보면, 우리는 금붕어 Cage에서 금붕어를 꺼내 물고기 Cage에 옮길 수 없었다. 하지만 사실은, 그냥 금붕어를 물고기 Cage에 넣는 것은 아무 문제가 없다. val cage = Cage2() cage.put(GoldFish("금붕어")) 물고기 Cage에 금붕어가 들어가는 것은 문제가 아니라는 의미이다. 그렇다면 도대체 왜 이런 차이가 발생하는 것일까??! 근본적인 이유를 알기 위해 우리는 상속관계의 의미를 살펴보아야 한다. 여기 상속 관계인 두 클래스가 있다. Number와 Int라고 해보자. Number는 Int의 상위 타입이고 Int는 Number의 하위 타입이다. 이때 다음과 같은 코드는 정상 동작할 수 있다. fun doSomething(num: Number) {..

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

제네릭은 추상화를 하는데 있어 굉장히 필수적인 기능이고, 정말 잘 활용되는 언어적 특징이다. 제네릭을 이해하기 위해 Cage 클래스를 만들어 보자. Cage 에는 여러 동물을 넣거나 꺼낼 수 있다. 가장 간단한 Cage 클래스는 다음과 같다. class Cage { private val animals: MutableList = 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 클래스도 필요하니 간단하게 다음과 ..

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

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 : 넘치는 텍스트를 자른다. el..

R2DBC pooling yml로 설정하기

의존성 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: 'roo..

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

코틀린은 타입의 nullable 여부를 확실하게 지정해야 한다. 따라서 Long 타입과 Long? 타입은 java의 (primitive type) long 과 (reference type) Long 으로 컴파일 된다. 이런 이유로 스프링 ArgumentResolver에서 supportsParameter 를 구현할 때 다음과 같은 주의를 기울여야 한다. 다음 코드는 우리가 resolving 하려는 타입이 코틀린의 Long 인지 확인한다. ArgumentResolver를 활용할 때 흔히 작성하는 코드다. override fun supportsParameter(parameter: MethodParameter): Boolean { return parameter.getParameterAnnotation(커스텀어노..

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

useParam() 훅을 사용할 때 반환되는 값은 이다. 라이브러리 입장에서는 URI 경로에 있는 값을 가져올 때 존재하지 않을 수도 있으니, 당연히 undefined로 반환해야 하지만, 라이브러리를 사용하는 입장에서는 확실히 존재함을 보장할 수 있음에도 계속해서 undefined 아님 단언 (!)을 사용하는 것이 번거롭다. 이럴 때 다음과 같은 방법을 사용할 수 있다. const {key} = useParams() as { key: string }; 이렇게 하면, key가 가 아닌 string 임을 확실히 보장할 수 있다. 물런 매번 ! 를 사용할 것인지 아니면 as 라는 위험할 수 있는(?) 형 변환을 사용할 것인지의 trade-off가 있을 것 같다.

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

숫자 타입 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에서는 다음과 같이 하면 된다. (event.target as HTMLElement).blur()} /> 핵심은 onWheel 이벤..