한 걸음/React
문제상황 - 드롭다운과 콘텐츠 영역이 있음 (드롭다운 안의 option들은 api reponse로 받아온 data) - 드롭다운을 바꿀 때, 진짜 바꿀 거냐고 한 번 물어봐주는 confirm창이 뜸 - confirm에서 확인을 누르면 콘텐츠 영역이 해당 내용으로 교체 / 취소누르면 기존 콘텐츠 영역에 그대로 남아있어야 함 - 하지만 드롭다운에서 '세번째 것'을 선택하면 컨펌창이 뜨고, 콘텐츠영역에는 기존 데이터인 '두번째 것'이 남아있지만... select 영역의 텍스트가 새로 선택한 '세번째 것'으로 곧바로 바뀌어버렸다. 드롭다운의 options를 구성하는 부분 const { data: siteData } = useGetSiteList(); const siteOption = useMemo(() => {..
// 테이블 { field: 'staffName', headerName: t('담당자명'), minWidth: 100, valueGetter: (params: ValueGetterParams): string => { const value = getValueFromGetterParams(params); return value; }, }, // custom function const getValueFromGetterParams = (params: ValueGetterParams) => { const columnField = (params.colDef.field as ColDef['field']) ?? ''; if (columnField.includes('.')) { const columnFieldArray ..
useEffect(() => { const imgData = siteImg?.data.data; if (sealData) { const reader = new FileReader(); reader.onload = ({ target }) => { const result = target?.result; if (result) { setImageData(result.toString()); } }; reader.readAsDataURL(imgData); } }, [siteImg]);
// id값이 들어올 수도, 아닐 수도 있다 const useGetData = (id?: number) => { return useQuery( [KEY], () => { if (id) { return getData(id); } return null; }, { enabled: !!id && !!(id > 0) }, ); }; '예약시간'처럼 선택적으로 보내는 변수같은 경우, 값이 존재할 때만 payload에 담아 보낼 수도 있다. const payload = { content: replaceTemplateContent(content, undefined, 'send'), ...(reservationDateTime && { reservationDateTime }), // 이렇게~ };
니즈 - 해당 화면을 모바일 화면크기로 보고있는지 앱 전체에서 알 필요X.. 일부 컴포넌트에서만(=부분적으로) 필요했음 - 무슨 디바이스로 접속했는지 등의 자세한 정보는 필요하지 않았음 - '모바일' 또는 '모바일아님' 이렇게 두 가지 상태로만 나뉘는 간단한 반응형 웹이었음 뭐 대단한 걸 요구하는 게 아니었기 때문에.. react-responsive와 같은 외부 모듈을 가져다 쓰는 것 보다는 간단한 custom hook을 만들어 쓰기로 했다. 커스텀 훅 만들기 // useMobile.ts import { useState, useEffect } from 'react' import { mobileSize } from 'src/styles/theme' const useMobile = () => { const ..
App/Index.tsx 파일 등이 themeProvider로 감싸져있는 상태에서 시작 // App.index import { theme } from 'src/styles/theme'; ... 자주쓰는 컬러 팔레트 만들기 1) theme.ts 파일에 원하는 색상값 설정 // theme.ts const myColor = { main: '#546de5', light: '#778beb', deep: '#3146ad', }; export const theme = { myColor, }; export type Theme = typeof theme; 2) styled.d.ts 파일에 인터페이스 설정 (타입스크립트 사용을 위함! styled.d.ts 파일 위치는 자신이 편한 곳에다 만들기) import { Theme..
CSR(Client Side Rednering) 과정 👉 유저가 앱에 접속한다 👉 앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서를 전달 👉 브라우저가 javascript 파일을 다운로드하고, 유저는 그동안 빈 화면을 봄 👉 다운로드가 끝나면 브라우저는 리액트 코드가 들어있는 js 파일을 실행 (=document.createElement과 같이 JS에서 HTML 태그를 생성하기 때문에, JS 파일이 실행되기 전까지는 빈화면인 것이다) 장점 새로고침이 발생하지 않아 자연스러운 UX 서버 부담이 적다 단점 첫페이지 로딩이 SSR에 비해서 느리다 SEO에 취약하다 SSR(Server Side Rendering) 과정 👉 유저가 앱에 접속한다 👉 서버에서 리액트를 실행하고, 리액트는 UI..
삽질을 오랫동안 했다... vite로 구축한 사이트를 vercel로 배포했는데, index페이지가 아닌 다른 라우팅에서 새로고침할 때 404 에러가 뜨는 문제가 있었다. 여러 문서들을 찾아보니, 아래와 같은 코드를 vercel.json 파일에 넣으라는 말들이 있었는데 해결이 되지 않았었다... { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] } 문제는 vercel.json 파일의 위치!! 였다... 최상단(package.json파일과 같은 위치) 디렉토리에 vercel.json 파일을 만들고 저 내용을 넣어줘야 했었는데, 엄한 src 폴더 안에서 저러고 있었던 것... + 최상단 폴더에서 json 파일을 만드니까 아래와 같은 에러가 떴었는데...