개발 일지 (84) 썸네일형 리스트형 [Next.js] A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. 경고 Next.js 제목 경고 문제 title 지정 후 Next.js 에서 아래와 같이 경고하였다. A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client renderi.. 새로고침시 데이터에 undefined가 들어온다면 문제 react-query 를 사용해서 get 요청한 데이터를 map함수를 돌려서 목록을 보여주었다. console.log 를 찍어보면 이렇게 undefined 가 나온다.그러나 새로고침시 데이터가 undefined 로 나와서 에러가 발생했다. 원인 처음 undefined된 값을 받아서 맵함수를 돌리니 당연히 목록이 나오지 않는것이다. 해결 useEffect 를 활용한다. data 의 값이 바뀔때마다 useEffect 실행 → 처음에 undefined 를 받더라도 잠시후 값들이 들어오기 떄문에 데이터를 잘 활용할 수있다. Next.js 에선 <img> 보다는 <Image> 문제 태그 사용시 Eslint 가 를 쓰라고 제안함 왜 ? Next/image 에서 제공하는 에 들어가는 파일의 유형을 webp 로 리사이징(최적화) 하여 기능개선에 도움을 준다. 해결 실제로 두개의 태그를 모두 사용하여 최적화 결과를 비교해 보았다. 브라우저 비교 결과 참고자료 Next.js 공식문서 https://nextjs.org/docs/messages/no-img-element no-img-element | Next.js No img element Prevent usage of element to prevent layout shift and favor optimized images. An element was used to display an image. Use next/image to impr.. API 분석 - GET 요청 시 필요한 데이터만 필터링하기 문제 const getData = await axios .get( `${BASE_URL}/${METHOD}?page=1&perPage=1500&serviceKey=${SERVICE_KEY}`, ) .then((res) => res.data.data.filter( (list: any) => parseInt(list.RCEPT_ENDDE.split('-').join('')) >= today, ), ); 기존 구조: API를 이용해서 1500개에 달하는 전체 데이터를 불러온 이후에 필요한 데이터만 필터링하면 3개밖에 남지 않는다. 3개의 데이터를 위해 1500개의 데이터를 모두 불러와야 하는 비효율적 구조. 원인 이러한 문제는 API문서를 꼼꼼하게 읽어보지 않은 것에서 발생됐다. 차근차근히 위에서 부터 읽어내.. Custom hook 만들기 Custom hook 이란? 반복되는 로직을 재활용 하는 방법 중 하나 -> 커스텀 훅은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위한 함수 이다. --> 중복되는 코드 하나로 합쳐서 사용할 수 있음 Custom hook 사용 시 주의할 점 1. 함수명이 use로 시작해야 한다. 2. 최상위에서만 호출할 수 있다. 3. 리액트 함수 내에서만 호출할 수 있다. 4. 꼭 return 값을 주자. UseInput 이라는 커스텀 훅 만들어 보기 // src/hooks/useInput.js import React, { useState } from "react"; const useInput = () => { // 2. value는 useState로 관리하고, const [value, setValue] =.. git 환경변수 API 키값이나 공개적으로 노출되서는 안되는 것들은 환경변수에 담아 처리할 수 있다. Node.js 에서는 보통 process.env 를 통해서 환경변수에 접근한다. Node.js.에서는 기본적으로 내장된 전역객체여서 별도로 임포트 할 필요없이 프로그램 어디에서든지 사용이 가능하다. 1. 환경 변수 파일 제작 2. 환경 변수 파일에 값을 채워 넣는다. //.env REACT_APP_FIREBASE_API_KEY = TESTABCD1234 REACT_APP_FIREBASE_AUTH_DOMAIN = TESTpikaeapp.com REACT_APP_FIREBASE_PROJECT_ID = TESTpika2 REACT_APP_FIREBASE_STORAGE_BUCKET = TESTpika.com REACT_APP_.. React-query removeQueries 검색결과 페이지에서 헤더에 있는 지역 검색을 하면 제목은 바뀌는데 데이터가 늦게 들어와서 목록이 바뀌지 않는 문제가 발생됬다. (잘되다가 간혈적으로 안됨) 이러한 현상은 많은 데이터를 불러오는 지역에서 더 많이 발생됬는데 추측하기로는 너무 많은 데이터를 요청해서 문제가 있나 싶었다. 만약 내가 사용자라면 검색 버튼을 눌렀을때 검색 결과가 바뀌지 않는다면 이상하다고 생각했을 것이다. 그래서 우리 팀원분중 한분이 생각 한게 removeQueries() 를 사용 하자는 것이 였다. removeQueries() 이 뭐냐면 기존 캐시값을 지워버리고 새롭게 데이터를 받아 온다 이렇게 생각하면 쉬울것이다. 그래서 데이터 요청시 새로운 캐시값을 만들어야 하기 때무네 -> isLoading 이 활성화 됨 // Searc.. React select 연동 두개의 셀렉트 박스를 연동하려고 하는데 첫번째 셀렉트박스에서 시, 도 를 검색하면 두번째 셀렉트박스에서 상세 지역이 나오는 로직이다. 내가 해결해야할 문제 1. 각 셀렉트에 노출될 리스트들이 오브젝트로 되어 있다. 2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 3. 검색 버튼 클릭시 첫번째 셀렉트, 두번째 셀렉트 값을 다른 컴포넌트로 전송해 주어야 한다. 1. 각 셀렉트에 들어갈 값들이 오브젝트로 되어 있다. 이걸 써먹으려면 코드 키를 태그의 벨류로 넣고 키값을 셀렉트 박스에 보여줘야한다. 내가 선택한 방식은 const [z1List, setZ1List] = useState([]); useEffect(() => { const arr = []; for (const [key, va.. 이전 1 2 3 4 5 ··· 11 다음
