mingg IT

참고로 나는 MUI를 함께 사용하고 있기 때문에 저런 에러가 나왔다. 아마 Cypress를 사용한 사람들이라면 한번은 떴을 에러이다. 내가 작성하고 싶던 코드는 1. 처음에 버튼이 비활성화 상태이다. 2. TextField에 값이 채워지면 버튼이 활성화 상태이다. 를 테스트 해보고 싶었다. it('Visit findId url', () => { const findIdBtn = cy.get('[data-cy="findIdBtn"]'); findIdBtn.should('be.disabled'); const findNameField = cy.get('[data-cy="findIdNameField"]').should('exist').type('김민지'); findIdBtn.should('be.disabled')..

현재 컴포넌트의 validate를 편하게 하기위해 react-formik을 사용하고 있고, API의 fetch 관련된 부분은 react-query를 사용하고 있었다. formik 라이브러리 이슈가 계속 발생해서 일단 상황을 프론트엔드 개발자 방에 공유했다.. // React Query 관련 코드이다. const userInfoQueryKey = ['address']; const useAddressQuery = () => { const queryClient = QueryClient.useQueryClient(); return QueryClient.useMutation( async (addressFormData: FormData) => { await postAddressAsync(addressFormData..

우선 React-Query가 뭐냐 ? ChatGPT 에게 물어보자 React Query는 React 애플리케이션에서 비동기 데이터를 관리하고 업데이트하기 위한 라이브러리입니다. React 구성 요소에서 데이터를 쉽게 가져오고, 캐시하고, 업데이트할 수 있도록 설계되어 사용자에게 원활한 데이터 가져오기 경험을 제공합니다. React Query의 주요 기능 중 일부는 다음과 같습니다. 데이터 캐싱: React Query는 가져온 데이터를 자동으로 캐싱하고 가능한 경우 재사용하여 네트워크 요청 수를 줄이고 애플리케이션 성능을 향상시킵니다. 백그라운드 새로 고침: React Query는 백그라운드에서 자동으로 데이터를 새로 고칠 수 있으므로 사용자가 페이지를 수동으로 새로 고칠 필요 없이 항상 최신 데이터를 볼..

ios, androd 내부에 react로 개발된 webview의 형태로 띄우려고 한다. (react native 말고..) 허나 ios 같은 경우에는 특히 기기별로 화면의 버튼이 보이지 않는 경우도 있기 때문에 safe-area 를 적용하려고 했다. 1차 삽질 npm 혹은 yarn에서 편한 라이브러리가 있는지 검색해보았다. 2023년 1월기준으로 두개밖에 나오지 않았다. ts를 지원하지 않았고 (index.d.ts 만들어서 사용하면 되지만..), 다운로드 수도 적고, 프로젝트를 함께 하고 있는 팀원분이 ts 지원하지 않는 라이브러리는 되도록이면 지양하자고 하셔서 다른 방법을 택해야 했다. 2차 삽질 React Native가 아닌 WKWebView 라는걸 사용해서 WKWebView 위에 우리가 만든 Rea..

가끔 오래된 코드나 API를 보면 부산 용호~ 식으로 html형식을 string 으로 보내주는 경우가 종종 있다. 두번정도 까먹어서 포스팅하려고 한다. React 화면에서 저 태그들의 정보를 유지한채로 화면에 보여주려면 어떤식으로 해야할까? export interface INoticeDetailProps {} export const NoticeDetail: React.FC = ({}) => { const noticeDetail = getNotice(); // API GET return ; }; 사실 생각보다 간단했다. dangerouslySetInnerHTML 속성을 사용해주면 string 형식의 html 코드를 그대로 렌더링할 수 있다.

정말 많은 글을 읽었고, 사람마다 여러 방법이 있었으나 내가 사용한 방법을 공유하고자 한다. 1. 우선 카카오톡 api 를 사용해야하기 때문에 계정을 만들고 내 어플리케이션에서 추가한다. https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com 2. 요약정보 > 앱 키를 보면 내가 api를 호출할때 사용할 키 이다. 3. 카카오 로그인 > 활성화 상태를 ON으로 만든다. 4. Redirect URI 를 입력한다. 난 개발중이기 때문에 임의로 localhost:4220~ 로 적었다. 5. index.html에 추가해준다. (안해주면 나중에 kakao.auth를 쓸때 에러난다.) 6. 이제 부터 시작. 아까 보았던 API 키와, 적어주었던 Redi..

결제 모듈을 붙이려고 나이스 페이를 이용하는 방법을 적으려고 한다. (나도 기억하기위해) 1. https://start.nicepay.co.kr/merchant/login/main.do 회원가입을 진행한다. 2. 로그인 이후 테스트 상점 개설하기를 클릭한다. 3. TestPay 라는 이름의 상점을 만들었다. (맴버 관리에 아마 내 정보가 보일 것임) 4. 개발 정보 > +발급 버튼을 클릭하면 어떤 방식으로 승인할 지 선택할 수 있다. 5. 발급하기 버튼을 클릭하면 클라이언트, 시크릿 키 값을 볼 수 있다. 6. React 프로젝트의 index.html에 해당 코드를 추가해준다. 7. MultiPassPage.tsx 파일에서 이제 사용한다. export interface IMultiPassPageProps..

두번째 똑같은 실수를 하고 있길래 포스팅을 하려고 한다. Mui에서 Tabs, TabPanel 을 사용하였으며, 첫번재 탭에서 내용물이 바깥으로 튀어나가고 있기 때문에 height를 100%로 주고싶다. import { Box, Grid, Paper, Stack, Tab, Tabs, Typography } from '@mui/material'; import React from 'react'; import { TabPanel } from '../VclubPage'; export interface IVipclubPageProps {} export const TestVipclubPage: React.FC = ({}) => { const [value, setValue] = React.useState(0); co..