개발/리액트 30 [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 이번 시리즈 "프로젝트에 웹팩을 적용해보자"는 webpack5를 통해 타입스크립트, 리액트로 만들어진 프로젝트를 빌드하고 개발환경에서 사용할 수 있도록 세팅하는 방법에 대한 시리즈이다. 때는 2020년 6월, 내 업무는 기존 레거시코드를 리액트, 타입스크립트로 전환하는 것이었다. 전환과 동시에 개발환경의 셋팅도 기본적인 것만 되어있어서 주업무가 아님에도 설정환경을 건드려 작업하고 또 공부를 해야만 했었다. 그때 Webpack에 대해 기본적인 공부와 수정을 했었기에 개인 프로젝트에 Webpack를 도입하는건 아주 간단한 일이라고 생각해왔다. 그리고 이제 1년이 지나 사이드 프로젝트를 Webpack으로 빌드할 시기가 되었고 기존의 방식으로 설정을 하고 빌드했더니만 아래와 같은 에러를 내뱉으면 동작을 안한다... 2021. 7. 6. [리액트] HOC 컴포넌트를 만들어보자 #2 (feat.타입스크립트) 2021.06.14 - [개발/리액트] - [리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트) [리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트) 다음과 같은 컴포넌트가 있습니다. SELECT 버튼을 클릭하면 포트폴리오 적용중...이라는 텍스트와 함께 원형 로딩바가 돌고 일정 시간 후에 랜더링 되는 컴포넌트입니다. 저는 이 컴포넌트를 이런 all-dev-kang.tistory.com 이전글에서 HOC의 경우 하나의 인자만을 받는 것이 규칙이라고 언급하며 리펙토링이 필요함을 말씀드렸습니다. 이번 포스트에서는 말씀드린대로 규칙에 맡게 리펙토링해보도록 하겠습니다. 리펙토링 방법은 아주 간단합니다. 커링함수의 기본 개념을 통해 한번더 감싸주면 되는 것입니다. //기존 커링함수.. 2021. 6. 14. [리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트) 다음과 같은 컴포넌트가 있습니다. SELECT 버튼을 클릭하면 포트폴리오 적용중...이라는 텍스트와 함께 원형 로딩바가 돌고 일정 시간 후에 랜더링 되는 컴포넌트입니다. 저는 이 컴포넌트를 이런식으로 구성했습니다. const [loading, setLoading] = React.useState(false); const handleSelectedPF = (portfolio: RRSW) => { setLoading(true); onChangeSelectedPF(portfolio); timer.current = window.setTimeout(() => { setLoading(false); }, 500); }; return ( {!loading ? ( ) : ( )} ) 코드는 필요한 부분만 가져와 간략화하였.. 2021. 6. 14. [리액트] 특정 문자열만 색상을 바꿔서 랜더링해보자(feat.검색창) 이번 포스트에서는 검색 컴포넌트에서 매칭되는 문자열만 색상을 칠하는 방법에 대해 한번 알아보겠습니다. 이 기능은 보시다시피 검색창에 있어선 나름 필수적인 기능이라고 생각합니다. 저는 안드로이드 개발할때 같은 기능을 만들어 본 경험을 있으니 이번에도 같은 방식으로 구현해보도록 하겠습니다. [안드로이드]recycleview item의 특정 텍스트 색상 변경 개선 요청 사항 : 검색창의 결과를 좀 더 직관적으로 보고싶다. 매칭되는 검색어에 해당하는 텍스트의 색상을 바꿔달라. 보시다시피 recycleview의 item holder에서는 그냥 item의 정보를 가져와 all-dev-kang.tistory.com [ 결과 ] [구현 시작] 아이디어는 크게 2가지 방법을 생각해봤습니다. 특정 검색어(이하 쿼리)가 발.. 2021. 5. 14. 이전 1 ··· 3 4 5 6 7 8 다음
