FE

총 14개의 글

[Next.js] 프로젝트에 head 설정하기 (next/Head, _document.js, /app.head.js)

목표 Next.js에서 head를 작성하는 방법 next/Head next/Head는 현재 next.js에서 가장 대중적인 방법입니다. Next.js에서 기본적으로 제공되는 기능이기에 import만으로도 간편하게 사용할 수 있다는 장점이 있습니다. 또한 Head 컴포넌트는 _app.jsx에서 사용하여 전역적으로 설정 할 수 있으며, 각 page마다 따로 설정하여 페이지마다 다른 태그를 지니도록 할 수도 있습니다. next/Head을 사용하는 코드는 아래와 같습니다. // Head 컴포넌트를 import import Head from "next/head"; function Component({}) { return ( // Head 컴포넌트 내부에 html 태그를 작성하여 head 작성 ); } 중복된 He..

FE 2022.12.08

[Next.js] 이미지 로딩 속도 개선하기

목표 Next/Image의 로딩 속도가 느린 이유를 알고 속도 개선 방법 학습하기 예상 소요시간 10분 Next.js의 이미지 로딩 속도는 꽤 늦은 것으로 악명 높습니다. 실제로 저 또한 Next.js를 사용해서 프로젝트를 진행하던 도중, img 태그에선 딜레이 없이 바로 로딩되던 이미지가 Image 컴포넌트로 로딩할 땐 2초 이상 걸리는 상황을 겪은 적 있습니다. 어떻게 하면 이미지 로딩 속도를 개선할 수 있을지 방법을 알아보기 전에, 왜 Next.js의 Image 컴포넌트는 로딩 속도가 느린지 알아볼까요? 🤔 Next/Image 로딩속도가 느린 이유 Next/Image의 로딩속도가 느린 이유는, Image 컴포넌트는 기본적으로 lazy loading 방식으로 이미지를 로드하기 때문입니다. Next/I..

FE 2022.12.07

[ERROR] illegal base64 data at input byte 4

에러 코드 "illegal base64 data at input byte 4" 에러 원인 백엔드 (GO)에서 지정한 규칙 (타입, 형식 등)을 벗어난 값을 프론트에서 보내서 생기는 에러입니다. 저 같은 경우에는 base64 형식에 맞는 값을 보내야 했으나, base64형식에 맞지 않은 값을 보내고 있어서 발생한 에러였습니다. 백엔드에서 요구하는 값 예시 ) "iVBORw0KGgoAAAANSUhEUgAAAFoAAABXCAYAAACENlLc.....==" 실제로 제가 보내고 있던 값 ) "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoA.....==" 헤헤... 좀 부끄럽네요 😅 FileReader의 result를 split하지 않고 통째로 가져다 써서 생긴 문제였습..

FE/Trouble Shooting 2022.12.05

[REACT] 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 아시나요?

예상 소요시간 10분 이 글을 다 읽고 나서는... 🤔 React에서의 함수형 / 클래스형 컴포넌트의 차이의 대해 확실히 알고, 목적에 따라 알맞은 컴포넌트 형식을 사용할 수 있는 능력을 갖추게 돼요! 목차 들어가기 앞서 클래스형 컴포넌트와 함수형 컴포넌트 컴포넌트? 클래스형 컴포넌트 함수형 컴포넌트의 반격 : Hook 클래스형 컴포넌트와 함수형 컴포넌트 간의 비교 결론 들어가기 앞서 💡 왜 React에서 컴포넌트를 생성하는 방법은 두 가지 일까? 안타깝게도 저는 위의 질문에 답을 하지 못했었습니다. (여러분은 어떠셨나요? 👀) React를 알고 본격적으로 사용한지 5개월이 넘었는데도, 한 번도 깊게 해 본 적 없던 고민이었죠. 클래스형 컴포넌트가 있다는 것은 알고 있었지만, 주위 아무도 클래스형 컴포넌..

FE 2022.11.19
< [1] [2] >

티스토리툴바