개발일기

🐞 문제상황푸시 알람으로 페이지 진입한 후 댓글 작성 시 작성한 댓글이 반영되지 않음댓글 작성후에는 리액트 쿼리의 쿼리 무효화로 댓글 정보가 리패치 된다 const { mutate: postComment } = useMutation({ // .. onSuccess() { queryClient.invalidateQueries({ queryKey: [type, 'detail', idx, isLogin], }); queryClient.invalidateQueries({ queryKey: ['comment'] }); }, }) 💡 해결과정이것저것 시도해보다가1. 푸시 알람으로 페이지 진입 시 queryClient.getQueryData가 unde..

이전부터 리액트 네이티브 프로젝트에서 ios 시뮬레이터를 실행시키면 절대 한번에 실행되는 법이 없었다. 그래서 그때도 어떻게 에러를 해결했는지 기록해놨었는데, 그걸 참고해도 실행이 안되더라는😂 그래서 또 다시 작성한다. npm run ios로 스트레스 받지 않는 그날을 위해1. pod install깃에서 프로젝트를 받고 npm run ios를 하기 전 pod install(프로젝트에 필요한 라이브러리 설치)을 했다. 하지만 언제나 여기부터 막혔었다. 항상 다른 이유로..😇 이번에는 아래와 같은 에러가 떴다rbenv: pod: command not foundThe `pod' command exists in these Ruby versions:2.7.53.2.2 pod 명령어를 사용할 수 없다는 것은1...

React-hook-form에 대해서는 input 입력 시 렌더링을 최소화하는 라이브러리 정도로만 알고 있었다. 현 회사에 입사해서 계속 리액트 훅 폼을 사용하고 있는데, 기계적으로 붙여넣기(..)만 하다가 제대로 공부해야겠다는 생각이 들어 작성하는 리액트 훅 폼 정리 글이다. 1. 제어 컴포넌트 vs 비제어 컴포넌트제어/비제어 컴포넌트는 리액트가 실시간으로 state를 제어할 수 있는지 없는지에 따라 나눠진다. 제어 컴포넌트를 사용하게 되면 과도한 리렌더링이 발생하게 되는데 이러한 특성을 보완하기 위해 비제어 컴포넌트인 리액트 훅 폼 라이브러리를 사용하기 시작했다. 🔗 제어 컴포넌트기존 리액트에서 input창에 입력을 하면 onChange함수에 state 변경 함수를 연결하여 실시간으로 상태 변화가..

🐞 문제상황axios에서 interceptor를 사용해서 데이터를 바로 리턴해주도록 설정했다. 그런데 axios에서 리턴 받은 데이터 객체의 속성을 바로 사용하려고 하니 타입에러가 발생했다. 그리고 인터셉터를 적용하지 않은 것처럼 data.data.속성명을 작성했더니 타입에러가 뜨지 않았다. // utils/api.tsconst api = axios.create({ baseURL: 'http://baseurl', timeout: 1000 * 30,})api.interceptors.response.use( (response) => { return response.data // 응답으로 받은 response의 data를 리턴값으로 },) 배경지식 1. interceptor인터셉터란?axios..

🐞 문제상황리스트 정렬 변경 시 변경된 리스트가 바로 적용되는 것이 아니라 변경 탭을 한번 더 클릭하면(modalVisible 상태가 변경되면) 그때 리스트가 변경된다💡해결과정기존 코드 const [modalVisible, setModalVisible] = useState(false); // 모달보기 const [order, setOrder] = useState('time'); // 정렬방법 useEffect(() => { if (pickList) { let sortedList; if (order === 'time') { // 최신순 sortedList = pickList.sort( (a, b) => new Date(b.CREA..

1. sentry 란?Sentry provides end-to-end distributed tracing, enabling developers to identify and debug performance issues and errors across their systems and services. 센트리는 분산 추적을 제공하여 개발자들이 시스템과 서비스 전반에 걸쳐 성능 문제와 오류를 식별하고 디버깅할 수 있도록 도와준다. 쉽게 말해 에러 분석 및 모니터링 도구다.에러 발생 시 다양한 정보를 설정하여 기록할 수 있고, 사용자의 이벤트가 타임라인으로 기록되며, 발생한 에러들을 시각화 도구로 쉽게 분석할 수 있음 2. 도입계기어플 리뷰와 모니터링 시 종종 앱 크래시가 있음을 알고 에러를 해결하기 위해 도입..

상황 : 투표하기를 여러 번 클릭 시 아직 요청 결과 값을 받지 않았는데, 여러 번 api요청이 되므로 이미 선택했다는 팝업이 뜸해결 : 제일 첫번째 요청만 수행되도록 하는 throttle 처리 💫 debounce와 throttle에 대해 알아보자 debounce, throttle은 자바스크립트 기능이 아닌 프로그래밍 방식이다. 과도한 이벤트 처리 또는 api 요청을 방지하는 기능으로 일정 시간 이후 또는 일정 시간 동안 한번의 작업이 이루어진다.debounce는 사용자 입력이 모두 끝난 후 일정 시간 후에 요청이 일어난다.throttle은 일정 간격 동안 한번의 요청이 일어난다.이런 기능들은 보통 자동 완성이나 스크롤 이벤트 등에서 사용된다.자동 완성에서 debounce를 사용할 경우, 검색어를 쭉..

네이티브 모듈로 애디스쿱 sdk붙이는 연습을 해보았다참고로 java를 모르는 사람이기에 생성자를 만들어야하는 것도 코드 짜면서 알게 되어서 중간중간 내용이 뜬금없을 수 있다.. ^-^ android/app/src/main/java/com/…/패키지파일명여기서 모듈파일과 패키지 파일을 생성한다(java)모듈파일초기화미디어 id와 시크릿 key를 등록하고, 광고 실행 시키기 전 준비 작업AdiscopeSdk.initialize(Activity activity, AdiscopeInitializeListener listener)// activity와 listener라는 2개의 매개변수를 받음Activity현재 앱의 화면을 나타내는 객체 → sdk는 화면 전환이나 ui를 제어할 필요가 있으므로 현재 화면이 뭔지 ..

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 : 인쇄 친화적인 레이아웃조금..