개발일기

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 라이브러리를 사용하는데 다른 페이지를 갔다가 해당 라이브러리를 사용하는 페이지로 돌아올 경우 슬라이드..

1. react-native-seoul/naver-login 라이브러리 설치  GitHub - crossplatformkorea/react-native-naver-login: 리엑트 네이티브 네이버 로그인 라이브러리리엑트 네이티브 네이버 로그인 라이브러리. Contribute to crossplatformkorea/react-native-naver-login development by creating an account on GitHub.github.comnpm install @react-native-seoul/naver-login --save  2. ios와 안드로이드 각각 설정을 해줘야한다.ios1) Launch Services Queries Schemes 추가 : 네이버 간편 로그인을 하면 네이버 ..

1. 먼저 npm run ios를 했다 Failed to install the app on the device because we couldn't execute the "ios-deploy" command. Please install it by running "brew install ios-deploy" and try again. 👉 ios를 실행시키는 ios-deploy가 설치되어 있지 않다고 함 brew install ios-deploy   2. 새로운 에러Failed to build iOS project. 'xcodebuild' exited with error code '65'. To debug build logs further, consider building your app with Xcode..

이번단원은 일단 분량도 짧은 편이고 화살표함수나 매개변수 기본값 등 알고있는 개념을 말하는거라 호로록 읽을 거라고 생각했지만... 중간중간 또 동태가 되어버렸다 암튼 요약을 하자면 이전 ES5에서 사용하던 일반함수와 ES6에서 추가된 함수 종류들의 차이점과 사용법을 설명하는 내용이다. ES5에서는 일반함수와 생성자함수를 정의하는 것에 구분이 없었다. 그래서 함수를 정의해놓고 일반함수로 호출sum(); 하면 일반함수인거고, new를 붙여 생성자함수로 호출하면new sum(); 생성자함수인 것. 그리고 메서드도 냅다 걍 일반함수로 돌리고 있었음 유연하다는 장점이 있으나 일반함수나 메서드로 사용할 때는 사용하지않는 constructor나 prototype이 생성되어 굳이 사용도 안하는데 얘네를 생성할 필요가...

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. useState를 사용해서 상태관리를 할 때, 객체나 배열의 상태가 업데이트 되는 경우 새로운 변수를 만들고 그 변수에 업데이트 되는 값을 넣은 뒤 그 변수를 상태변화함수에 넣어주도록 한다.숫자나 문자열은 따로 새로운 변수를 만들지 않고, 바뀌는 값을 그대로 넣어도 되는데 왜 객체나 배열은 이렇게 새로운 변수를 만들어 줘야할까? → 리액트는 상태가 변경될 때 컴포넌트의 리렌더링이 결정된다. 상태 객체를 직접 변경하면 리액트가 이전 상태와 새로운 상태를 비교할 때 차이점을 감지하지 못할 수 있다. 왜냐하면 리액트의 상태 비교 알고리즘이 얕은 비교를 수행하기 때문이다. 즉, 객체의 참조가 변경되었는지만 확인한다. 객체의 내부 속성이 변경되어도 참조가 같다면 리액트는 상태가 변경되지 않았다고 판단하고 재..