뉴히의 개발 로그

useEffect는 컴포넌트가mount, update, unmount 될때 실행된다. useEffect에 전달하는 콜백함수도 return을 가질 수 있는데 이return에 함수를 전달 할 수 있고 이를 클린업 함수라고 한다. 클린업 함수는 컴포넌트가 unmount될때 실행된다. 클린업 함수가 실행된 후 update되면서 mount를 실행한다. 즉, 컴포넌트는 리렌더링 될 때, 재평가 → 언마운트 → 업데이트 순으로 진행된다. 의존성 배열을 비워둘 경우 unmount는 실행되지 않는다. 매우 정리가 잘된글이 있어 링크남긴다 https://choyeon-dev.tistory.com/entry/React-useEffect-%EC%8B%A4%ED%96%89-%EC%8B%9C%EC%A0%90-%EC%A7%9A%E..

'string | null' 형식은 'string | undefined' 형식에 할당할 수 없습니다. 'null' 형식은 'string | undefined' 형식에 할당할 수 없습니다.ts(2322)index.d.ts(2276, 9): 필요한 형식은 여기에서 'DetailedHTMLProps' 형식에 선언된 'src' 속성에서 가져옵니다. (property) React.ImgHTMLAttributes.src?: string | undefined 문제 보기 (+F8)빠른 수정을 사용할 수 없음 import한 이미지가 아닌 이미지 주소를 넣으려니 타입 오류가 발생했다. 유형 할당(type assignment) 에러이다. 이미지 속성의 타입 정보들을 보니 interface ImgHTMLAttributes e..

드디어 ! 벌써 ! 어느새 !! 최종 프로젝트가 시작되었다 이번 프로젝트는 디자이너님도 함께 하시고 원래는 1주 정도 진행하던 프로젝트와는 다르게 5주간 진행되는 프로젝트이다. 다른 팀들도 기획회의부터 다른때와는 다르게 아주 오랜시간 공들여 진행하는 듯 하다. 생각보다 기획이 상당히 어렵찌만 ~ 팀원들과 디자이너님과 소통을 잘하고 계획을 꼼꼼히 하고 그대로 잘 진행한다면 좋은 결과가 있겠찌!!! 프로젝트 외에도 CS, 기술면접 대비 등등 할게 많다! 화이팅 !!

Error Access to XMLHttpRequest at 'https://special-imported-homburg.glitch.me/likes?likedUserEmail=heejung2@naver.com' from origin 'https://dulleo-bomi.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. like 컴포넌트에서 usequery로 요청을 하는데 like 컴포넌트를 map함수안에 사용해서생긴 오류였다. {filteredCourseList.map((item) => { return ( goToDetail(item...

Learned | 이번주 배운 것 심화주차 팀프로젝트는 산책로 정보 api를 이용해 사용자에게 정보를 제공해주는 어플리케이션을 리액트 타입스크립트로 프로젝트를 진행을 했다. 제공되는 api 데이터를 간단히 불러와서 뿌려주기만 하는것 같았지만 그중 제공되는 api 값을 가공해서 가져와 지도위에 뿌려줘야하는 부분이 있었는데 그부분이 어려웠지만 node서버 만들어서 가져오는 것도 슬쩍 배워봤고 데이터 요청값 테스트하는것도 배웠다. 썬더클라이언트 그리고 여태까지는 데이터를 가져온 후에 필터링 돌리는걸 많이했는데 쿼리스트링을 통해서 필요한 데이터만 요청해서 받아오는것도. 많은 라이브러리도 써봤는데(비록 사용 실패햇지만) 공식문서 잘보고 내 프로젝트 타입에 잘맞는지도 확인하고 업데이트가 주기적으로 잘되는지 확인해보..

맨날 바디가 없데 ㅡㅡ 다행히 이건 코드 오류가 아니라 api 요청시에 사용량 초과로 데이터를 못불러오는 문제였다 하지만 진짜 진짜 진짜 최종 문제는 데이터 타입!!ㅎㅎㅎㅎㅎ 인풋, 아웃풋 타입을 다 지정해줘도 자꾸 오류가 뜸 예로 데이터를 받아오면, 그데이터가 undefined 일 수 있다는!! 최초에.. 또는 삭제가 가능한경우 데이터가 0개 일 수 있다. 그럴때가 있을 수 있다고 타입스크립트가 알려줌 그럼몇몇가지 방법으로 수정해 줄 수 있다. if 문 데이터가 있을때만 실행한다. 데이터가 없을때 나타낼 페이지를 만들어둠 if (isError || !data || data.length === 0) { return 데이터를 불러오는 중에 오류가 발생했습니다.; } && const OBJ_GPX = dat..

미니 팀프로젝트! 지역별 산책로 코스를 소개해주는 앱니다. open API를 이용해서 산책로 정보등 보여주고, 지도에 산책로 코스를 띄워줘야한다. 제공해주는 api에 경로 path를 따와서 산책로를 지도에 그려줘야하는데 XML파일로 제공되었다. gpxparser @kazukinagata/react-xml-parser gpx-parser-ts 등등 XML을 읽어주는 파서라이브러리들을 써봤는데 어떤건 오래되서.. 어떤건 사용법이 제대로 나와있지 않아서 등드등 사용할만한 라이브러리 찾기가 힘들었음 겨우 찾은 라이브러리로 파싱이 성공하나 싶었는데 서버에서 서버로 요청은 파싱을 잘 해서 데이터를 가져왔는데 브라우저에서 CORS 에러가 떳다 ㅠㅠ OPEN API에서 제대로 불러오지못하는 ㅠㅠ 이러면 서버쪽에서 뭔가..

typescript 에서 계속 되는 오류!if문을 넣어주거나 했는데오늘 수업에서 꿀팁!! 또는 as String 이런식으로 넣어줘도 됨!또는  todo || [] 이런식도 가능!!! map 함수 돌릴때 오류가 많이 나는데배열의 타입을 제대로 명시하지 않았거나 잘못되었을때 발생한다.const a number[] | string[] = []a.map((item) => console.log(item))const a = (string | number)[] = []a.map((item)=>console.log(item)) 이렇게 명시해주면된다. a는 Array다~~~~(a as Array).map((item)=> console.log(item))오늘 선발대 수업은 아주 알찼다 ㅎㅎㅎㅎ superbase 수업이었는..