react39 [TIL] 2023.06.27 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다 '{ img: StaticImageData; category: string; title: string; }' 형식은 'CardType' 형식에 할당할 수 없습니다. 'img' 속성의 형식이 호환되지 않습니다. 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322) import 한 jpg 파일의 타입을 지정하는 과정에서 상단의 error가 발생했다. type CardType = { img: string; category: string; title: string; }; type CardProps = { CardInfo: CardType; }; 전달받은 props의 `type` 구조는 다음과 같다. CardType의 `img: string`에서 error가 발생한 것.. 2023. 6. 27. [React] resize 이벤트로 브라우저 크기에 따라 javascript 적용하기 CSS와 관계없이 브라우저의 width에 따라 컴포넌트 내에서 javascript를 다르게 적용하기 위해 resize 이벤트를 사용했다. resize 이벤트 const [width, setWidth] = useState(window.innerWidth); const isMobile = width { setWidth(window.innerWidth); }, 200); useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); // cleanup }; }, []); resize 이벤트는 document view의 크기가 변경될 때.. 2023. 6. 7. [TIL] 2023.05.28 button 공통 컴포넌트 만들기 여러 페이지에서 공통적으로 사용하는 버튼이 있었는데 코드가 불필요하게 중복되는 느낌이라 컴포넌트 화해서 재사용하기 위해 GlobalButton 컴포넌트를 생성했다. const GlobalButton = ({ width, text, btnType }: StrProps) => { return ( {text} ); }; export default GlobalButton; GlobalButton 컴포넌트를 사용할 때 props로 3가지 요소를 받아야 했는데 버튼의 width와 type, 그리고 버튼 내부 텍스트였다. width를 props로 받아서 tailwind와 결합해야 했는데 이를 위해 className을 {}로 감싼 후 백틱(`)을 추가했다. 버튼 type의 경우 props로 받아 온 btnType을 t.. 2023. 5. 28. [React] HTML <dialog> 태그로 Modal 구현하기 유튜브에서 우연히 HTML dialog 태그 관련 영상을 보고 이번 프로젝트에 너무 적용해 보고 싶었다! 많은 시행착오가 있었지만 결국 dialog 태그를 이용해서 모달을 구현하는 데 성공했다. 구현 과정에서 React에 dialog 태그를 적용하는 자료를 많이 찾을 수 없었기 때문에 코드를 기록으로 남기려 한다. HTML dialog 태그를 사용했을 때의 장점 backdrop을 포함한 기본적인 모달의 UI가 제공된다. (CSS 커스텀도 가능) dialog에서 제공되는 showModal(), close() 등의 API를 이용하여 모달을 쉽게 구현할 수 있다. esc 버튼을 클릭하여 모달을 닫을 수 있다. 기본적인 모달 UI 제공 (CSS 수정 방법) backdrop과 함께 정가운데 모달이 생성된다. 만약.. 2023. 5. 28. [TIL] 2023.05.19 react-phone-input-2로 국가 번호 입력 dropdown 구현하기 해외 전화번호를 입력할 때 국가 코드를 dropdown 형태로 선택할 수 있게 구현하고 싶었다. 검색 결과 react-phone-input-2라는 리액트를 위한 라이브러리가 있어서 공식문서도 잘 정리되어 있고 UI도 프로젝트와 잘 어울려서 사용하기로 결정했다. import PhoneInput from 'react-phone-input-2'; import 'react-phone-input-2/lib/style.css'; npm 설치 후 PhoneInput 컴포넌트를 import 해서 사용하면 된다. 드롭다운에 특정 국가들만 상단에 고정해서 보여주는 기능도 preferredCountries라는 옵션을 이용해서 매우 간단하게 구현할 수 있어 마음에 들었다. enableSearch 옵션을 true로 설정하면 드.. 2023. 5. 19. [WIL] 내일배움캠프 열세 번째 주_React 아웃소싱 프로젝트 결과물 정리 프로젝트 소개 프로젝트명: 쟈-스민 프로젝트 목적: 지도 API를 이용해 독립 서점의 운영 정보를 제공한다. GITHUB https://github.com/heereal/Jasmine 노션 링크: https://react99.notion.site/B-9-a8a272d006344d5dbf5b0d44e8536bc2 배포 링크: https://jasminebook.vercel.app/ 쟈-스민 책의 향기를 따라... 쟈-스민 🌺 jasminebook.vercel.app 튜터님 피드백 프로젝트 피드백 - 작성자: 김기철 튜터 · Issue #36 · heereal/Jasmine usehook사용, 컴포넌트 분리 , 상태관리등을 아주 잘 하셨습니다. useSearch같은 경우 아래 이미지에 보이는 상태가 4개를 .. 2023. 2. 2. [TIL] 내일배움캠프 React 과정 2023.01.28 Today I Learned 사용자 편의성 생각하며 팀 프로젝트 개선하기 피드백 사항들 정리하기 소식지 구독 인풋, 체크박스 등 유효성 검사 (+자세히 보기 페이지 ) 메일 보낼 때 ‘oo님 소식지를 구독해주셔서 감사합니다’ 이름 넣는 거 어떤가요? 모바일에서 지도에 마커 클릭했을 때 최상단으로 이동하는 현상(라우터 변경 혹은 인풋에 포커스가 가는 것이 이유인 거 같음) 초기화 버튼의 위치가 검색 버튼 바로 옆이라 검색하려다가 잘못 누를 수 있고 x버튼이 초기화 버튼이라는 것을 유저들이 바로 인식하지 못하는 거 같음 초기화 버튼 눌렀을 때 현재 위치까지 초기화하는 거 어떤가요? 마커에 오버레이 있는 상태에서 클릭하면 오버레이가 닫히는 기능까지 있으면 더 좋을 거 같아요! 카테고리 항목에 '카테고리 전체'.. 2023. 1. 29. [TIL] 내일배움캠프 React 과정 2023.01.25 Today I Learned Recoil 공부하기 리스트 클릭 시 지도에서 해당 위치로 이동하도록 구현하기 Recoil 공부하기 const todoListState = atom({ key: 'todoListState', // unique ID default: [], // initial value }); const [todoList, setTodoList] = useRecoilState(todoListState); 코드 몇 줄로 전역 상태 관리 끝... 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ https://recoiljs.org/ko/docs/basic-tutorial/atoms https://recoiljs.org/ko/docs.. 2023. 1. 26. [TIL] 내일배움캠프 React 과정 2023.01.23 Today I Learned Typescript, Firebase, React Query로 댓글 CRUD 구현 radio input 선택 값에 boolean 넣기 일단 A, B 중에 어떤 input을 선택했는지 값을 가져오기 위해서는 e.target.value를 사용하면 된다. 그리고 input에 value는 string만 넣을 수 있는 거 같은데 나는 radio 선택에 따라 boolean 값을 출력하고 싶었다. // A, B 선택에 따라 boolean 출력 const selectAB = (e: any) => { if ( e.target.value === "true" ) { setIsA(true); } else { setIsA(false); } }; 그래서 if문으로 setState에 boolean 값을.. 2023. 1. 23. [TIL] 내일배움캠프 React 과정 2023.01.21 Today I Learned 팀 프로젝트 진행-카카오 지도 API 이용하기 React javascript로 카카오 지도 API 이용하기 공식 문서나 대부분의 검색 결과에서 제공하는 카카오 지도 API 이용하는 방법은 HTML 코드인데 나는 javascript 파일로 코드를 작성하고 싶었기 때문에 방법을 찾는데 시간이 좀 걸렸다. 검색할 때 '리액트'라는 키워드를 붙이고 난 이후에 javascript 관련 검색 결과를 많이 볼 수 있었다. 카카오 지도 API로 지도 생성하기 일단 index.html의 부분에 API를 불러오기 위한 코드를 한 줄 추가한다. 공식 문서 https://apis.map.kakao.com/web/guide/ declare global { interface Window { kakao.. 2023. 1. 22. 이전 1 2 3 4 다음
