choi95의 TIL📝

문제 타입스크립트를 사용한 프로젝트 내에서 svg 파일을 컴포넌트로서 사용하기 위해 다음과 같이 코드를 작성하였다. import { ReactComponent as ProfileIcon } from '/images/icon-profile.svg'; 하지만 해당 코드에서 다음과 같은 에러가 발생하였다. "*.svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 문제 해결 스택오버플로우에서 나와 같은 문제를 발견하였고 해당 문제를 해결할 수 있었다.https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent TypeScript - Module '"*.svg"..

Issue 프로젝트 중, 로컬 PC에서 가져 온 이미지를 preview로 보여주며 저장하는 기능 구현이 필요했다. 처음에는 간단한 기능 구현일 줄 알았지만 생각보다 많은 시행착오를 겪었기에 해당 내용을 포스팅하고자 한다. Code 1) Input 스타일 커스터마이징 우선, Input 태그 내에 'type=file' 속성을 지정해주면 로컬 PC에서 이미지 소스를 가져올 수 있지만 기본 지정 스타일이 원하던 방향이 아니기에 다음과 같이 JSX를 작성하였다. 내 PC에서 불러오기 실제 로컬 PC에서 이미지를 가져오는 기능은 FetchLocalPC 컴포넌트이지만 스타일을 커스터마이징하기 위해서 FileLabel 컴포넌트를 따로 만들어 두 컴포넌트에 다음과 같이 스타일을 지정해주었다. export const Fi..

Issue 프로젝트 도중 typescript 기반의 react-redux 전역 상태를 세팅해야 되는 상황이 있었다. redux 내 action, 액션 생성 함수, 리듀서에 대한 적절한 타입을 지정해주기 까다로운 상황 속에서 typesafe-actions 라는 라이브러리를 알게 되었다. https://github.com/piotrwitek/typesafe-actions GitHub - piotrwitek/typesafe-actions: Typesafe utilities for "action-creators" in Redux / Flux Architecture Typesafe utilities for "action-creators" in Redux / Flux Architecture - GitHub - pi..

문제 화면에 랜더링 된 각 리스트를 누르면 해당 리스트의 상세 페이지로 이동하는 기능을 구현하기 위해 다음과 같이 각 리스트에 고유 아이디 값을 dataset에 할당해주었고 해당 id값을 path query parameter에 할당해주었다. const LinkPage: FC = ({ itemInfoList }: LinkPageProps) => { const navigate = useNavigate(); const moveToDetailPage = ( e: React.MouseEvent ) => { const id = (e.target as HTMLParagraphElement).dataset.id; navigate(`/detail?id=${id}`); }; ( ... ) return ( {itemInfo..

문제 async/await 비동기 처리 함수 내에서 특정 정보들이 담긴 아이템 리스트를 서버로부터 전달 받아 반환하도록 다음과 같이 코드를 작성하였다. export interface ItemType { created_at: number; key: string; expires_at: number; download_count: number; count: number; size: number; summary: string; thumbnailUrl: string; files: File[]; sent?: Sent; } export const getItemData = async (): ItemType[] => { const { data } = await axios.get('https://romantic-hopper..

문제 상위 컴포넌트 내에서 하위 컴포넌트로 props를 전달하는 과정에서 type 에러가 발생하였다. export interface InfoType { [key: string]: any; id: number; title: string; client: string; due: string; count: number; amount: number; method: string[]; material: string[]; status: string; } const InfoListForm: FC = ({ method, material, status }) => { ( ... ) return ( {isEmpty ? ( 조건에 맞는 견적 요청이 없습니다. ) : ( currentInfoList.map((info: InfoTy..

문제 유저가 선택한 아이템의 정보를 담고 있는 리스트를 순회하여 해당 아이템이 존재하는지의 여부를 확인하기 위해서 다음과 같이 문자열로 객체의 프로퍼티에 접근하는 코드를 작성하였다. infoList.forEach((info: InfoType) => { let isSorted = false; for (let i = 0; i < currentSelectedSortNum; i++) { if (info[currentSortName].includes(currentSort[i])) { isSorted = true; break; } } ( ... ) }); 하지만 제대로 기능이 동작되지 않았고 오류를 확인하기 위해 콘솔를 보니, 다음과 같은 메세지가 떠 있었다. Element implicitly has an 'any..