분류 전체보기66 [TypeScript] error 2322: React Prop 전달 시 IntrinsicAttributes 타입 에러 에러 메세지 BoardMain 라는 부모 컴포넌트에서 PostList라는 자식 컴포넌트에 filterProp을 넘기고 싶은 상황입니다. PostList에서는 다음처럼 filterProp인수를 받아 사용하고 있습니다. (설명에 필요하지 않은 코드는 생략하였습니다.) // PostList.tsx export default function PostList(filterProp: IFilter) { const { data, isLoading } = useInfiniteQuery( ['articles', filterProp.filterProp], ({ pageParam = 1 }) => getArticles(filterProp.filterProp, { pageParam })); return } 에러 원인 문제는 위.. 2023. 4. 27. [React] github action 리액트 .env file 추가하기 이전 글 [React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) 문제상황 : .env 파일이 github action으로 S3에 올라가지 않는다 이전 글에서 github action을 통한 클라이언트 배포자동화 과정에 대한 글을 다뤘습니다. 배포 이후 프로덕트에 들어가보니, 요청 URL에 undefined가 들어오는 것을 확인했습니다. 제가 만든 프로젝트에 server url은 .env파일에 넣어 환경변수로 사용하고 있었는데, 이 .env 파일은 보안상의 이유로 대개 gitignore로 관리됩니다. github에 푸시되지 않았으니 .env 파일 없이 빌드되어 이 같은 문제가 발생한 것입니다. github action으로 .env 파일 생성하기 .. 2023. 4. 25. [React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) 해당 글은 aws S3 + cloudfront로 이미 배포된 프로젝트를 github action으로 배포 자동화를 하는 과정을 담은 글로, S3 + cloudfront로 배포하는 전과정을 담고있지는 않습니다. 계기 사실 나는 devops와는 거리가 먼 프론트엔드 개발자라 그냥 github action으로 cicd하면 된다더라!!! 정도만 풍문으로 들었다ㅋㅋ 지난 프로젝트 때는 그냥 포트폴리오용 플젝이었고, 최종 완성된 프로젝트를 한번만 배포하고 유기....했기때문에 배포자동화가 필요없었다. 그러나 이번 Froggy 프로젝트는 향후 실제 유저 유치를 목표로 지속적인으로 기능이 추가될 예정이기 때문에 배포할 일이 잦을 예정이다. 매번 빌드하고 S3에 올리는 것이 귀찮으니 이참에 배포 자동화라는 것을 해보자!.. 2023. 4. 24. [git] git 파일명 대소문자 구분 error 문제 상황 수정된 파일이 있는데 그게 내 컴퓨터에는 없는 파일이고, add도 안되다보니 commit도 안되고, discard해도 삭제되지도 않고... 변경사항이 있다고 +4 가 떠서 안지워지고.... 한 이틀 끙끙거리다가 다른 작업들이 밀려 흐린눈하고 못본척 해온게 벌써 2주 전...; 그러다가 백엔드 개발자분이 프론트 한번 확인해보신다고 해서 받으셨는데 같은 오류가 나는것이다. 나는 로컬 깃쪽에 문제가 생겼나했었는데 백엔드개발자 분한테까지 문제가 생겼다니 모른척할 수도 없고 거의 2주만에 다시 이 문제를 마주 보게 되었다... discard를 하면 좌에서 우로 바뀌는 기묘한 현상....처음엔 뭐가 바뀌는지도 모르고 그냥 삭제가 안된다고 생각했는데, 그게아니라 Board->board로 svg파일이름이 바.. 2023. 4. 14. [기타] SQLD 비전공자 4일 독학 합격 후기 시험 응시 계기 및 배경지식 저는 대학에서 경제학을 전공하였고, DB관련 수업은 수강한 적이 없는 비전공자 입니다. 졸업 후 진로를 변경하여 개발 공부를 지속해왔지만, 프론트엔드다보니 사실 DB를 접할 기회는 전혀 없었습니다. 다만 3월 초에 정보처리기사 필기시험을 합격한 상태였으므로 접하는 일부 용어들이 낯설지는 않았습니다. 그래서 이론부분인 1과목부분은 덕분에 수월했던 것 같고 활용부분인 2과목에는 별도움 안됐던 것 같습니다. 프론트엔드 취업에 SQLD가 의미없을 것 같긴 했지만 4월에 있을 정보처리기사 실기 시험에도 도움이 될 것 같았고, 비전공자라서 부족한 CS쪽 지식도 채워볼겸 겸사겸사 응시하게 되었습니다. 공부기간 및 공부 방법 1. 공부 기간 : 약 4일 정도입니다. 시험은 이해를 바탕으로하.. 2023. 4. 11. [React-query] useInfiniteQuery의 select로 반환값 변환하기 임의로 qeury의 반환값을 useState로 수정하고 사용하여 생긴 문제 useInfiniteQuery로 받아온 데이터들만 화면에 바로 렌더링되지않고, 꼭 refetch가 일어나야만 그림이 그려지는 문제가 생겼다. 처음엔 useInfiniteQuery 훅의 문제인가했는데 react-query devtool을 확인해보면 분명 정상적으로 캐싱이되고 있었다. 생각해보니 useInfiniteQuery의 data구조가 조금 복잡해서 postList라는 state를 만들어서 fetch성공시 데이터를 평탄화시키도록 해놨는데, 그 부분이 문제였다. const [postList, setPostList] = useState([]); const { isLoading, fetchNextPage, hasNextPage } =.. 2023. 3. 31. 이전 1 2 3 4 5 6 7 ··· 11 다음
