본문 바로가기

전체 글

 (90)
[Next.js] styled-component 적용하기 문제 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 발생 Header 부분 표시하려고 스타일 컴포넌트 적용하니 오류 발생 원인 자바스크립트 코드가 적용이 되지 않은 페이지가 미리 렌더링되기 때문에 CSS-in-JS 로 스타일링을 하면 스타일이 적용되지 않은 html 코드가 먼저 렌더링 되는 문제가 발생하게 된다. Next.js는 첫 페이지 로드가 SSR로 동작 ⇒ 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라진다. 해결 html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소들을 주입시켜서 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제를 해결할 수 있다. Next.js에서 styled-components를 사용할 때 ⇒ **_d..
[Next.Js] Next.Script를 활용한 지도 개선 토이프로젝트 중간발표후 지도 개선이 필요하단 생각이 들었다 그러한 이유는 .. 문제상황 기존 로직은 지도를 움직일때 마다 지도를 다시 렌더링함 , 이로인해 좋지못한 ux 제공 및 성능저하를 야기했음 해결방안 로직자체를 바꾸기로 함 Next.Script 의 onReady 속성을 활용하여 Next.Script 가 있는 컴포넌트가 mount 될때마다 실행하게 로직을 바꿨다. 그 결과 멋진 성능 개선을 보여줬다!
[NextJs] react-query(prefetching)로 SSR 구현 성능 개선의 필요성 인식 진행하고 있는 프로젝트의 상세페이지는 SSR로 구현 되어있다. 프로젝트 MVP 주간에는 페이지가 렌더링 되면 클라이언트 사이드에서 데이터를 요청하는 방식이였으나 SSR의 장점을 활용하지 못한다고 판단하였고 react query의 prefetching 을 활용하는 방향으로 성능 개선을 진행하였다. react-query 의 prefetching 활용 우리 서비스를 이용하는 사용자는 대부분 상세페이지를 클릭할 것이다. 이럴 경우 사용자가 상세페이지에 필요한 데이터를 기다릴 필요가 없도록 미리 데이터를 가져오면 보다 좋은 사용자 경험을 제공할 것이다. 이때 사용 할 수 있는것이 react query의 prefetching 이다. 상세페이지는 prefetching 을 사용함에 있어 적합한..
[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] =..

티스토리툴바