Just Do IT!

이번 프로젝트에서 리액트로 만든 프로젝트를 타입스크립트로 리팩토링하는 과정에서 타입 에러가 생겨서 어떤 식으로 해결해야 할 지 몰랐던 때가 있었다. 팀원들끼리 엄청 고민하다가 다른 분이 @ts-ignore 라는 걸 알려주셔서 덕분에 그 주석 처리로 인해 타입 에러를 넘어갈 수 있었다. 정확한 용도를 몰라서 구글링하고 공식문서를 보고 정리해본다. @ts-ignore 란? // @ts-ignore suppression comment (억제 주석) type checking 할 때 바로 다음 행의 타입 에러를 무시할 수 있다 다음 행에 오류가 없을 경우 아무것도 하지 않는다. 어떨 때 사용하는가? 더 큰 프로젝트를 갖고 있고 코드에서 발생한 새로운 오류의 명확한 책임자를 찾기 힘든 경우 TypeScript의 두..

React Icons란? 리액트로 웹페이지를 구현할 때 빠르게 아이콘을 사용하고 싶을 때 이 라이브러리를 사용하면 편하다. 사용방법 역시 간단하다. 공식 사이트 ↓ https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save..

TIL에도 언급했듯이 vercel로 프로젝트를 배포했더니, api가 받아와지 않고 아래와 같은 에러가 발생했다. Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS. 이 에러를 구글링해보니 원인과 해결 방법을 알 수 가 있었다. 원인 암호화된 HTTPS 페이지에 암호화되지 않은 HTTP를 통해 요청할 때 발생하는 에러 https 사이트에서 ajax를 사용해서 비동기로 http 사이트에 request를 요청해서 문제가 발생 이러한 원인 때문에 Mi..

React-slick 란? react에서 carousel를 구현하는 라이브러리로 우리가 자주 보는 슬라이드를 구현할 수 있다. 공식 홈페이지에 보다 많은 정보를 볼 수 있다. https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 설치하기 라이브러리 역시 터미널에서 npm 혹은 yarn을 통해 설치해줘야 한다. 만약 기본 라이브러리에서 css를 수정하고 싶으면 style 역시 설치해야 한다. // npm $ npm install --save react-slick // yarn $ yarn add react-slick // style $ npm install sli..

tsconfig.json 유데미 강의를 통해 tsconfig.json 파일에 있는 옵션들에 대해 공부해보았고 이를 정리해보았다. 아래 코드에 적힌 옵션들에 대한 설명이다. { "compilerOptions": { /* 기본 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "incremental": true, /* 증분 컴파일 활성화 */ "target": "es5", /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', ..

Typescript 란? JavaScript + Type 문법 큰 프로젝트에서 주로 쓰인다 자바스크립트는 dynamic typing이 가능하지만, 코드가 길어지고 프로젝트가 커지면 별로 좋지 않다 TypeScript는 타입을 엄격하게 지켜주고 에러 메세지가 더 정확하다 설치하기 1. node.js 가 우선 설치되어 있는지 확인한다 $ node -v // node version 확인 설치 되어 있지 않다면? https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 터미널에서 설치하기 $ npm install -g typescr..

React Query를 사용하는 이유? 원래 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 사용했었다. 클라이언트 쪽의 데이터들을 관리하기에 적합해도 서버 쪽의 데이터들을 관리하기에는 적합하지 않아서 불편한 점이 있엇다. (Redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다) 서버 데이터와 클라이언트 데이터 분리에 용이하다. React Query 라이브러리를 사용하면 편리하다. 서버 데이터와 클라이언트 데이터 서버 데이터 여러 사람들이 동시에 공유할 수 있는 데이터 서버라는 공간에서 계속 쓰이는 데이터를 뜻한다. 특정 시점에 클라이언트의 요청에 대해 데이터 베이스에서 유저 정보를 가져와 서버의 상태 값을 만들어낸다 데이터 베이..

useMutation이란? React-Query의 hook 중 하나로 DB에 추가/수정/삭제 발생시킬 때 사용하는 hook이다. database에 직접 접근해서 data를 변경시킬 수 있다. mutation key, mutation 함수, 옵션 객체를 인자로 받는다. 적용 방법 const { isLoading: isLoadingEditing, mutate: reviseReview } = useMutation( ["editReview", review.id], (body) => editReview(body), { onSuccess: () => { console.log("수정성공"); }, onError: (err) => { console.log("err in edit:", err); }, } ); 적용 예시..

무한 스크롤이란? 스크롤이 기존 렌더링된 리스트 마지막 부분 또는 그 근처에 도달했을 때 새로운 리스트를 추가로 더 불러오는 인터랙션 FlatList의 onEndReached props를 이용하여 스크롤이 리스트의 마지막 부분에 도달했을 때 trigger 되었을 때 추가로 fetch 처리한다 기존의 배열 리스트에 추가로 불러온 배열을 합쳐셔 리렌더링하는 방식으로 구현된다 React-Query의 useInfiniteQuery 를 사용하면 간편하게 무한스크롤 구현이 가능하다 React-Query의 useInfiniteQuery 적용 const { fetchNextPage, // 다음 페이지 fetch hasNextPage, // 다음 페이지가 존재하는지 true/false isFetchingNextPage,..

React-Query란? server state, 비동기 데이터를 관리하기 위한 라이브러리 useQuery hook 안에서 API get 요청을 담당하고, API 요청 결과 및 다양한 상태들을 바로 사용할 수 있다 Redux, thunk 사용하지 않아도 되서 훨씬 간결하다 한 번 API 요청 시 queryKey가 API 요청 결과를 cache에 저장하고, caching된 API 요청은 cache memory에서 빠르게 불러온다 key-value 구조로 되어 있다. 설치하기 $ npm i react-query --save $ yarn add react-query App.js 에서 최상위 컴포넌트 감싸주기 ... import { QueryClient, QueryClientProvider } from "rea..