react 5

코틀린 + 스프링 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가 있을 것 같다.

리액트 리덕스 정리

리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리, 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있고, 글로벌 상태 관리도 손쉽게 할 수 있다. Context API와 useReducer 훅을 사용해 개발하는 흐름과 리덕스를 사용하는 방식이 매우 유사하다. Context API와 리덕스 차이 미들웨어 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 특정 조건에 따라 액션 무시 액션을 콘솔에 출력 혹은 서버쪽에 로깅 액션이 디스패치 되었을 때 이를 수정해서 리듀서에게 전달 특정 액션이 발생했을 때 이에 기반하여 다른 액션 발생 특정 액션이 발생했을 때 특정 JS 함수 실행 유용한 함수와 Hooks reac..

React Styled Component 정리

올해 10월 초부터 생각했던 사이드 프로젝트를 본격적으로 만들어 보려고 한다 (이번엔 제발 런칭까지....) 리액트를 거의 3년만에 보게 되었는데 뭐 아주 그냥 새롭다. 이야 훅은 또 뭐야? 라떼는 클래스만 있었는데 이번 포스트에서는 리액트에서 스타일 지정하는 방법을 공부해 보았다. (react modern stack에 빠삭한 지인과의 카톡) REF : https://react.vlpt.us/styling/03-styled-components.html CSS in Js : JS 안에 CSS를 작성하는 것 리액트 진영에서 가장 인기 있는 CSS in JS 라이브러리가 바로 styled-components 이다. 설치 yarn add styled-components 사용 styled.태그이름 을 사용해서 바..

리액트 훅(React Hook) 정리

와 내가 react 배울때만 해도 hook이라는게 하나도 없었는데 (생각해보면 거의 2.5~3년 전이긴 하네...) 이제는 자료를 찾아봐도 hook 사용이 default가 된 것 같다... 사이드 프로젝트를 해볼까 하여 훅을 간단히 정리해 보았다. 훅 정리 리액트 버전 16.8에 추가되었으며, 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 새로 시작하는 프로젝트라면 클래스형 컴포넌트는 지양하고 훅을 사용하는 것이 좋다. useState : state 관리 function App() { // useState(초기값)으로 [state이름, setter]를 가져온다 // state에 객체가 들어갈 수도 있음 const [number, setNumber] = useState(0)..