👋 왜 전역상태관리를 해야할까? React의 사용목적 상 component로 만들어 기능을 구현하고 page를 라우트 처리해서 사용하는 경우가 정말 많다. 그러다보면 데이터를 부모->자식에게 전달하게 된다. ex. 게시글의 id값, 쇼핑몰 구매 수량 등 그런데 상태관리(= 데이터를 전달/변경하는 과정) 시 여러가지 문제에 부딪히는데 몇 가지를 소개하자면 상태관리 시 문제점 1.부모-> 자식에게만 데이터를 전달할 수 있다.(일반적으로) 2.Props drilling으로 인해 코드가 복잡해진다. (아래의 Children이 100개라면...? 한개의 상태를 100번 건네줘야함) 3.상태가 변경되면 체인된 모든 컴포넌트가 재랜더링된다.(Children3의 상태가 변경되면 Ch2,Ch1,Parent 도 재랜더링 ..
👋 1...2...3... 안녕... 구글 조사에 따르면 3초 이상 웹사이트가 지연되면 53%가 떠나간다는 통계가 있다. 따라서 최적화는 정말 중요하다. 웹사이트의 최적화를 위해 코드스플리팅이 사용되는데 어떤 기술인지 알아보자! How mobile latency impacts publisher revenue - Think with Google As people’s expectations for mobile experiences have grown, simply loading on a mobile device is no longer enough; mobile sites must be fast and relevant. Learn why. www.thinkwithgoogle.com 🌈 코드스플리팅(CodeSp..
들어가며... 기본 html의 img태그와 달리 Next.js에서는 Image 태그가 별도로 존재하는데 lazy loading, 사이즈 최적화 , layout shift 등 다양한 기능을 제공한다. lmg 태그와 image 태그를 사용했을 때의 차이를 비교해보려고 한다. 사용방법 1) Image 를 import 해서 가져온다. 2) src에 절대경로/상대경로를 넣어준다. 3)width, height, alt 속성을 넣어준다(필수!) import Image from "next/image"; export default function Home() { return ( ); } Next의 Image태그의 성능! Image 태그 사용 시 이미지의 포맷을 wbep로 바꿔 주는데 이로 인해 이미지 크기가 줄어들어 불..
🌈 들어가며... 나는 프로젝트를 주로 react + node.js 로 구성해서 진행했다. 터미널에서 두개를 열어서 각각 셋팅을 해줬는데 번거롭기도 하고 충돌도 자주 나더라... 그런데 Next를 사용하면 한 프레임워크 안에서 다 해결할 수 있다고 한다! 그래서 사용해볼 겸 셋팅과 Next의 장점을 알아볼까한다. ☀️ Next.js 란? Next.js는 Vercel이 개발한 오픈소스 react 프레임워크이다. 풀스택 웹 애플리케이션을 구축하기 위해서 사용된다. 웹사이트 개발 시 프레임워크 없이 React 라이브러리로만 사용할 수 있지만 코드 분할, 라우팅, 데이터 처리 등과 같은 추가적인 처리가 필요하다.(최적화를 위해서 더더욱) Next를 사용하면 간편하게 사용가능. 출처 : https://nextjs..
🌈 JS에서 new Date( ) 객체 JavaScript에서는 Date 객체를 생성하므로 현재 시간 등을 표시할 수 있다. 아래처럼 new Date()를 통해 날짜 표시할 수 있는데 문제는 format이 정돈되지 않았다는 점! export default function App() { const date = new Date(); return {date.toString()}; } ☀️ Day.js를 사용해서 format 변경하기 naver News API에서 날짜를 가져와서 표시할 경우 아래처럼 기본 포맷으로 표시가 됐다. 이걸 custom 해보자! 1) Day.js 라이브러리를 설치한다. npm install dayjs --save 2) dayjs 라이브러리를 import 해준다. import dayjs..
☀️ 일반적인 path 경로설정 특정 컴포나 파일을 import 할 때 경로를 설정한다. 이때 파일의 위치에 따라 경로가 상대적이기 때문에 지저분한 경우가 많다. 초기 디렉토리를 구성 할 때 컴포의 성격에 따라 파일을 구분지어 분류하기 때문에 경로는 동일한 경우가 대부분이다. 따라서 경로를 깔끔하게 설정해봤다. //경로 관리 전 import Navbar from '././././layouts/Navbar' import Header from '././././layouts/Header' import Button from '././././components/Button' import Banner from '././././components/Banner' //경로 관리 후 import Navbar from '@..
