개발블로그

1.리액트 쿼리를 사용한다고 해서 프로젝트의 모든 api요청에 다 리액트 쿼리를 사용할 필요는 없다.리액트 쿼리는 쿼리키를 사용해서 데이터 관리가 간편하다는 큰 장점이 있는데,  이처럼 꼭 데이터 관리가 필요하지 않은 요청은 리액트 쿼리를 굳이 사용할 필요가 없다! (ex. 로그인 post요청)  2.React.FC는 React.FunctionComponent의 약자로, 리액트 함수형 컴포넌트 타입으로 리액트 함수형 컴포넌트를 안전하게 정의하기 위함이다. props가 있을 경우 이렇게 props 타입과 함께 사용할 수 있다.interface TableDataType { name: string[]; height: number[];}const DataTable: React.FC = ({ name, hei..

기존에는 테이블(그리드: )에서 page size(row 갯수)를 변경할때마다 스크롤이 제일 아래로 계속 붙어서 기존 위치에 그대로 있도록 하고싶었다. 처음에는 어디를 수정해야 이 부분이 변경될지 몰라서 헤메었는데 domLayout을 autoHeight에서 print로 바꿨더니 그리드의 내용을 화면에 전체적으로 다 보여주고, 그리드 내에는 스크롤이 생기지 않고 화면에 스크롤이 생기면서 사이즈를 변경해도 스크롤이 아래로 이동하지 않았다. 그래서 알아본 domLayout 속성! domLayout 속성의 옵션으로는 세가지가 있다.Normal (기본) : 스타일이 주어지면 그 크기에 맞게 레이아웃 된다autoHeight : 화면의 높이가 테이블의 크기에 따라 자동조절 된다Print : 인쇄 친화적인 레이아웃조금..

1. ios에서는 에서 border radius가 적용되지 않는데 이를 해결하기 위해서는 overflow: “hidden”을 추가로 적용해주면 된다https://eloquence-developers.tistory.com/147 [React Native] iOS borderRadius 적용되지 않는 이슈오늘 ios 작업을 하던 도중 ios에서 borderRadius 속성이 먹지 않는 이슈가 있었습니다. 해당 사항이 안드로이드에서는 잘 적용이 되었는데 ios에서는 적용이 되지 않더군요 구글링을 해보니 아래 문eloquence-developers.tistory.com  2. react-native-swiper 라이브러리를 사용하는데 다른 페이지를 갔다가 해당 라이브러리를 사용하는 페이지로 돌아올 경우 슬라이드..

useCheckboxGroup체크박스 그룹의 상태를 관리하기 위한 훅반환값은 value, onChange, setValue, getCheckboxProx 를 사용했다.* value : 선택된 체크박스 묶음의 값이며 배열형태* setValue : value를 설정하는 함수* getCheckboxProps: 체크박스 그룹과 체크된 상태를 위한 onchange 핸들러와 체크박스 props를 와 함께 반환. getCheckboxProps가 설정된 체크박스를 클릭하면(onChange) 그 값이 value 배열에 들어가고 나가고가 자동으로 된다(setValue). 즉 onChange와 setValue를 합친 기능이라고 보면될 것 같다.// 보통 이렇게 value를 넣어 값을 설정하는데// 그럼 이 체크박스 클릭 시..

api 요청으로 받은 데이터를 다운로드 하기 위해서는 arraybuffer를 blob으로 변환시키고, 다운로드 링크의 클릭이벤트를 자동으로 실행하여 구현한다. const { mutate } = useMutation( () => request({ url: "/download", method: "post", data: { row, column }, responseType: "arraybuffer", }), { onSuccess: (data) => { // 1. 받은 데이터 ArrayBuffer를 Blob으로 변환 const blob = new Blob([data], { type: "application/vnd.openxmlformats..

1. 리액트 네이티브 빌드 에러Failed to install the app. Command failed with EACCES: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 접근권한의 문제이기 때문에 아래처럼 권한 설정을 해주면 정상 작동한다.  $ chmod 755 android/gradlew * 참고 React Native - Error: spawn ./gradlew EACCESReact Native - Error: spawn ./gradlew EACCESreact-native run-android 실행시 아래와 같은 에러가 종종 발생된다. error Failed to install the app. Make sure you have the ..

1. 날짜 변경 : end 라는 날짜의 월을 +3으로 변경end.setMonth(end.getMonth() + 4); 2. String(rows?.TARGET_SEX || 2) 이 코드에서 rows?.TARGET_SEX이 0인 경우 false로 받아들여져서 계속 2가 출력됐다. 그래서 rows?.TARGET_SEX를 문자열로 먼저 바꾸는 작업을 한 뒤 값이 있는지 없는지를 확인했다.String(rows?.TARGET_SEX) || "2" 이렇게 하니까 가져온 데이터 값이 0일 경우에 그대로 0으로 출력된다. 그런데 rows?.TARGET_SEX 데이터가 없을 경우 그러니까 undefined일 경우 2가 나오는게 아니라 “undefined”로 되지 않나? 왜 데이터가 없을 때는 정상적으로 "2"로 나올까?..

1. expo 설치 - 리액트 네이티브를 사용하기 위해서는 java, Xcode, 안드로이드 스튜디오 등의 설치가 필요한데 이것들을 각각 설치하려면 굉장히 번거롭다. - 그래서 expo라는 플랫폼(빌드도구)을 이용하면 자바스크립트와 스타일 코드만 작성하여 실행 시킬 수 있다. - 기존 리액트 웹사이트는 자바스크립트로 작성되고 브라우저가 이 자바스크립트 코드를 실행시킨다. 하지만 리액트 네이티브는 운영체제와 연결하는 역할을 하며, 운영체제 코드로 번역을 한다. - expo는 컴파일해서 앱을 만드는 것이 아니다. 리액트 네이티브 코드를 폰으로 전송시켜주고, 그 코드를 바로 실행시켜 미리보기 할 수 있다. - expo를 설치하기 위해서는 node가 설치되어 있어야 한다. // 1. expo 설치 // 윈도우는..

기존 프로젝트에서 자바스크립트로 만든 슬라이드가 있었으나 프로젝트 구조 변경 시 뭐가 좀 꼬여서 영화 카드가 제대로 보이지 않는 문제가 생겼다. 슬라이드 라이브러리를 사용해보고 싶기도 했어서 검색을 해보니 react-slick 이라는 라이브러리가 있었다. 공식문서 Neostack The last react carousel you will ever need react-slick.neostack.com 설치 설치는 공식문서 보고 설치해주면 된다. //react-slick 설치 npm install react-slick --save //css도 같이 설치해줘야 한다 npm install slick-carousel --save //슬라이더를 사용할 파일에 css import해오기 import "slick-car..

1. Batching 리액트에서는 상태변화함수가 연달아 여러번 실행될 때, 렌더링은 마지막 한번만 일어나는 batching이라는 기능이 있다. 이 batching은 여러번 렌더링 하던것을 한번만 하게되므로 성능을 향상시키는 것인데, 기존 리액트 17에는 setTimeout이나 비동기작업에서는 이 부분이 적용되지 않았지만, 리액트 18버전부터는 위와같은 작업에서도 batching이 적용되었다. 2. useTransition 처리가 오래걸리는 작업에서 우선순위를 지정해 늦게 처리해도 되는 부분을 나중에 처리하도록 지정하는 훅이다. function App() { const [name, setName] = useState(''); const [ispending, startTransition] = useTrans..