Today, What I learned? 타입스크립트로 기존 프로젝트를 리팩토링하는 것이 아니라 새로운 프로젝트를 생성하는 과정을 글로 남겨보려고 한다. 프로젝트 생성 CRA를 통해 새로운 프로젝트를 시작한다. npx create-react-app 프로젝트명 --template typescript 이 때 --template을 꼭 넣어주어야 처음부터 타입스크립트로 파일들이 실행된다. --template없이 typescript만 넣을 경우에는 자바스크립트 파일로 CRA가 되어서 다시 프로젝트를 생성해야 할 수 있다. 정상적으로 명령어가 실행되었다면 이렇게 ts, tsx로 파일들이 만들어져 있고, tsconfig.json까지 기본적으로 포함되어 있을 것이다. react-app-env.d.ts ? 일반적인 리액..

Today, What I learned? 타입스크립트를 익히면서 생각보다 쉽지 않음을 많이 느끼는 중..! 특히 헷갈리는 몇몇 개념을 좀 정리해보려 한다. JS와 TS 자바스크립트는 동적타입. 프로그램이 실행될 때, 즉 런타임에 변수의 타입이 결정된다. 반대로 타입스크립트는 정적타입. 컴파일 타임에 변수의 타입이 결정된다. 이것은 즉 프로젝트가 실행되기 전에 미리 IDE에서 발생할 오류를 알 수 있다는 것! any 타입 any 타입은 모든 타입을 포함하는 타입이다. (자바스크립트의 모든 변수도 any 타입이라고 할 수 있다.) 자바스크립트 프로젝트를 타입스크립트로 리팩토링하는 경우 임시로 사용하며 점진적으로 타입을 차차 바꿔나갈 때 유용하다. 하지만 모든 타입을 포함한다고 해서 무분별하게 사용하면 타입스..

Today What I learned? 어제에 이어 리덕스 툴킷 투두리스트를 타입스크립트로 마이그레이션 하며 해결한 많은 오류들을 기록해 본다..!! 어찌어찌 모든 에러를 해결하고 정상 작동이 되고 있다.. 🥺 🚧 버튼 컴포넌트에서 발생한 오류 해결 Type '' is missing the following properites from type ~~ Type '' is missing the following properites from type ~~ 암만 봐도 버튼 컴포넌트에 다른 함수 props가 없다는 얘기 같다. 기존 코드는 저 함수들 중 하나만 넣어주어 버튼 컴포넌트를 공통으로 쓰고 있는 상태였기 때문에 꼭 모든 함수 props를 받을 필요가 없었다. 그렇다면 선택적으로 들어가야 하니 타입 속성에..

Today, What I learned? 일차적으로 투두리스트를 redux-toolkit으로 리팩토링 한 후에 본격적으로 타입스크립트로 마이그레이션에 들어가며 만나게 된 오류들을 기록해본다. 에러가 꼬리에 꼬리를 물고 발생해서 모든 에러가 완전 해결된 것은 아니고 현재 진행형이다.. 😇 내일쯤엔 다 완성하기 않을까!.. 🚧 useRef()의 focus 관련 에러 Property 'focus' does not exist on type 'string' Property 'focus' does not exist on type 'string' useRef()의 타입이 제대로 정해져있지 않아 발생한 에러.. 찾아보니 useRef를 DOM 조작 용도로 사용하려면 아래와 같이 HTML태그를 지정해줘야 한다고.. 지역변..

Today, What I learned? 기존 프로젝트에 타입스크립트 리팩토링을 시도하기 앞서, 혼자 했던 투두리스트 프로젝트를 타입스크립트로 리팩토링 해보기로 했다. 먼저 기존 프로젝트는 리덕스와 라우터를 이용해서 페이지 이동과 CRUD가 적용되어 있는 투두리스트였다. 기본 리덕스가 적용되어 있었기 때문에 먼저 redux-toolkit으로 리팩토링 해준 후 본격적인 타입스크립트 적용 시작!.. 패키지 설치하기 먼저 타입스크립트와 관련된 패키지들을 설치해 주었다. 타입스크립트 공식문서에서 보고 패키지를 설치한 후에, https://www.typescriptlang.org/download How to set up TypeScript Add TypeScript to your project, or instal..

Today, What I learned? 프로젝트를 진행하며 버튼을 클릭할 때마다 뮤지컬의 상세 설명 이미지가 접고 펼쳐지는 부분이 필요했다. collapsible view 같은 라이브러리도 있는 듯했지만, 간단하게 구현하고 싶어서 state를 이용했다. 이 과정에서 겪었던 시행착오를 정리해본다. 접힘, 펼침 버튼 접고 펼쳐지는 부분은 팀원분이 state로 잘 구현해 주셨다. const [isMoreButton, setMoreButton] = useState(false); isMoreButton에 따라서 이미지가 들어가는 영역이 보이고 감춰지도록 했다. {isMoreButton && ( )} 처음에 저 영역은 뮤지컬 정보 영역 컴포넌트 안에 있었는데, 이렇게 변경되었을 때 이미지가 다른 영역의 이미지까지..

Today, What I learned? 프로젝트를 진행하며 카테고리에 따라서 React Query의 useQuery를 통해 다른 데이터를 가져오는 부분을 진행하며 어떤 방식으로 결과물을 만들었는지 기록해 본다. 피그마 상으로 만들어야 했던 부분이다. 각 지역을 클릭하면 해당 지역의 데이터를 받아와야 하는 부분! 일단 버튼을 클릭할 때마다 각 지역의 코드를 API의 params 값으로 넘겨주어야 했다. 그래서 API 함수에서는 아래와 같은 방식으로 params를 받아오기로 했다. export const getLocalPopular = (params) => { const [_, category] = params.queryKey; return fetch( `${BASE_URL}/boxoffice?servic..

Today, What I learned? 프로젝트 중!.. api에서 가져오는 xml 데이터를 JSON 데이터로 변환하기 위해 라이브러리를 사용하는 과정을 정리해 본다. 먼저 사용한 라이브러리는 이것이다. https://github.com/connected-io/react-native-xml2js GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter. XML to JavaScript object converter. Contribute to connected-io/react-native-xml2js development by creating an account on GitHub. github.com 변환하기 const p..

Today, What I learned? 리액트 네이티브에서 중첩 라우터로 Stack을 만들어두고, 내비게이션을 지정했을 때 아래와 같은 에러를 만났다. 중첩 라우터에서는 네비게이션을 어떤 식으로 지정해주어야 하는지 정리해보려고 한다. 내비게이션 구조 우선 네비게이션 구조는 Root라는 스택에서 스택과 탭을 하나로 묶어주고 있는, 중첩된 구조다. 중첩된 네비게이션 위 에러 메시지에도 있는 navigation 관련 링크로 이동해서 보면 일반적인 내비게이션 지정은 아래와 같이 할 수 있다. navigation.navigate('페이지 컴포넌트명'); 중첩된 내비게이션에서는 먼저 상위 내비게이션을 지정해 주고 screen이라는 속성으로 페이지명을 지정한다. navigation.navigate('Root', {..

Today, What I learned? 리액트 쿼리를 이용해서 무한스크롤을 적용해 보았다. 무한스크롤로 데이터를 받아오는 것은 아직까지 시도해보지 못했던 기능이었는데 useInfiniteQuery 훅을 사용해서 생각보다 쉽게 적용할 수 있었다..! FlatList 먼저 FlatList에서 무한스크롤을 위해 필요한 두 가지 속성을 추가해야 한다. onEndReached 끝점에 도달했을 때 실행시킬 함수가 들어가는 속성 onEndReachedThreshold 스크린 높이에 도달하기 전에 얼마큼 먼저 fetch 함수를 빠르게 실행시킬 것인지에 대한 속성. 숫자로 들어간다. 1일 경우엔 끝에 도달했을 경우 실행된다. 로직의 구성 무한 스크롤이 어떤 방식으로 이루어지는지를 간략하게 정리하면 이렇다. 기존 배열 ..