Sweet But Psycho

내가 컴포넌트 정의를 이런 식으로 해서 리액트는 Details 라는 이름의 파일을 가진 컴포넌트를 찾고 있었던 것이다. export const Details = () => { return } 근데 나는 Next.js 의 useRouter() 함수를 통해 이전 페이지의 라우터 id 값을 받아오기 위해서 파일명을 [id].tsx 로 바꾸었기 때문에 리액트 입장에서는 엥 Details 라는 컴포넌트가 없는데? 라고 해서 나온 에러이다. export default 방식으로 컴포넌트를 정의해야 한다. function Details() { const router = useRouter() const { id } = router.query console.log('router.query', router.query) re..

1. env 관리를 꼼꼼하게 하자 env 키에 대한 주석을 써놓고 local, development, statging, production 구분 확실하게 하자. 2. 객체 stringify 와 process.env 로 꺼낸 문자열 타입, 값 비교 3. axios CORS 에러 날 때 리액트, 리액트 네이티브, 백엔드 각각에서headers 처리하는 방식 구분 4.axios 로 REST API 통신 안쓰고 graphql 로 다른 서버 요청하는 방법 알아놓기 5. Next Auth url 에서 http://localhost:4000 과 프로젝트의 url 설정하는 기준 구분하기 6. 리액트 렌더링 타이밍 진짜 어렵다. 7. serverside props 8. props 와 children 9. 인풋 박스에서 입..

컴포넌트 밖에서 hook function 을 쓸 때 나는 에러이다. useQuery, useNavigation 등은 컴포넌트 안에서만 사용하고 서버 통신하는 함수를 담은 모듈에서는 useHook 을 사용할 시 다음과 같은 에러가 발생한다.

프론트엔드에서 fetch 나 axios 를 사용하여 데이터를 다음과 같이 리턴받았을 때 비동기처리가 정상적으로 이루어지지 않아 데이터를 제대로 불러오지 못했을 때 다음과 같은 콘솔이 뜨게 된다. {"_U": 0, "_V": 0, "_W": null, "_X": null}

useEffect 첫번째 파라미터 => 함수 두번째 파라미터 => 의존성 배열 (deps) 일단 마운트, 언마운트가 뭔데?! 내가 이거를 확실하게 모르는 이유는 클래스형 컴포넌트의 라이프사이클에 대해서 모르기 때문이다. useEffect는 클래스형 컴포넌트의 라이프 사이클을 함수형 컴포넌트에도 사용하기 위해 등장한 훅 함수이다. 컴포넌트에 진입하여 처음 렌더링을 하고 나면 값이 바뀌더라도 컴포넌트가 렌더링되지 않는다. 하지만 사용자에 의해 입력 받는 값이나 리렌더링이 필요한 경우가 있다. 이때 조건에 따라 렌더링을 할 수 있도록 만들어진 훅 함수이다. 의존성 배열이 빈 배열이라면: 컴포넌트가 처음 렌더링될 때만 함수 호출 useEffect에서 함수를 반환할 수 있는데 이것을 cleanup 함수라고 한다...

내가 현재 있는 해당 메인 탭인 홈 스크린에서 navigation을 통해 다른 스크린으로 이동할 때 일일이 navigation을 props로 받지 않고 리액트 네이티브의 useNavigation을 사용하여 이동할 수 있다. 1. 메인 탭은 어떤 것들이 있는지 2. 탭 안에서 다른 스크린들로 이동할 수 있는 스택은 어떤 것들이 있는지 리스트와 타입을 지정해주어야 한다. 만약 메인 탭이 홈 스크린에서 피드를 볼 수 있는 스크린으로 이동할 경우 최신순으로 정렬하겠다는 파라미터를 같이 넘겨주고 싶을 때, 다음과 같이 작성할 수 있다. navigation.navigate('Home', { screen: 'Feed', params: { sort: 'latest' }, }) 여기서 타입 지정을 해주려면 Navigat..

원인: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 언마운트된 컴포넌트는 상태 업데이트를 할 수 없다. 해당 작업은 수행하지 않지만 메모리 누수 발생 참고한 블로그의 상황과 같이 나도 리스트를 선택하고 그에 대한 데이터를 비동기 작업으로 가져오는데 그에 대한 상태를 loading (true -> false)으로 변경하고 있었다. 내가 처음에 생각한 에러 원인 네..

useQuery로 DB에 있는 데이터 불러서 쓰려고 하는데 커스텀 훅으로 만들어서 외부 컴포넌트에서 값을 불러서 useEffect로 업데이트를 하려고 했더니 *잘못 짠 코드 //커스텀 훅 함수 내부 export const useGetData = { const {loading, error, data} = useQuery(GET_QUERY) return data.findManyData[0].data } //상위 컴포넌트 const Component = () => { useEffect(() => { const data = useGetData() }, [data]) return {data} } 위와 같이 리액트 훅 규칙에 따르면 callback 함수 즉 useEffect 안에서 실행되는 함수로 내가 만든 훅 함..

에뮬레이터에서 접근할 때는 const uri = Platform.OS === 'ios' ? 'http://localhost:4000' : 'http://10.0.2.2:4000' 디바이스에서 접근할 때는 그 디바이스와 PC가 같은 와이파이 즉, 같은 네트워크를 사용하고 있어야 한다. 맥북에서 사용하고 있는 네트워크의 IP 주소를 다음과 같이 uri 주소에 입력한다. const uri = Platform.OS === 'ios' ? 'http://localhost:4000' : 'http://192.168.0.4:4000' 참고문서링크 https://naruu098.tistory.com/77 안드로이드에서 로컬 서버 접속하기 `http:localhost:8888`은 안드로이드 디바이스의 localhost를 ..

앱을 빌드하는데 메모리가 부족해서 발생하는 문제이다. 안드로이드 설정 파일인 gradle.properties 에서 메모리 사이즈를 바꿔주는 코드를 추가해준다. # Default value: -Xmx10248m -XX:MaxPermSize=256m # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=4096m -XX:+HeapDumpOnOutOfMemoryError 참고문서링크 https://codechacha.com/ko/how-to-solve-outofmemory-error-while-b..