Work abroad

💡 Issue : 태그를 사용할 때 화면이 이동 하기 전, 조건에 따라 화면 이동을 제어 하고 싶다면? 🌟 Middleware 를 사용하자! Middleware : request를 완료하기 전에 코드를 실행할 수 있게 해주는 역할. 들어오는 request에 따라, request 또는 응답 헤더를 재작성, redirecting, 수정하거나 직접 응답하여 response를 수정할 수 있습니다. Middleware는 캐시된 content와 경로가 일치해지기 전에 실행됩니다. 사용자를 다른 페이지로 이동 시키기 위한 목적이 있거나 인증이 필요할 때, Middleware를 사용하는 것이 일반적이다. 👉🏼 컴포넌트가 미들웨어를 통해 미리 제대로 fetching 하게 하려면, Next.js에게 화면에 보여줄 url과..

Next.js 2022 Conference를 바탕으로 정리한 내용입니다. Index. - Next.js가 무엇인지 - Next.js가 개발된 이유 - Being dynamic의 한계 - Next.js 혁신의 3가지 주요 카테고리 What is Next.js? Next.js 공식 홈페이지 첫 화면에 "The React Framework for the Web"이라고 소개하고 있습니다. 그리고 Next.js 2022 컨퍼런스에서는 "Next.js had its origins as a React Framework for dynamic server under sites"라고 소개합니다. 이를 종합해보면 Next.js는 사이트 아래 동적인 서버를 위해 시작된 풀스택 웹 어플리케이션을 제작하기 위한 리액트 프레임워크..

최근 회사에서 React를 통해 프로젝트를 진행하면서, "한 컴포넌트 내에서 useState를 많이 사용해도 괜찮을까?" 에 대한 고민을 하게 되었습니다. 그리고 이 고민과 더불어 useState를 적게 사용하기 위해서 component를 더 작은 단위로 나눠야 하는 것일까? useState가 아닌 일반 정규 변수(let, const)를 통해 event가 발생했을 때 update하는 식으로 useState를 대체할 수 있지 않을까? 와 같은 어떤 방식이 렌더링 최적화를 이끌어낼 수 있을까에 대해 알고 싶어졌습니다. 이런 고민들을 하다 보니 제가 useState를 React에서 왜 사용하는지를 제대로 이해하지 않고 사용해서 생겨나는 문제라는 생각이 들었고, 이 글을 작성하게 되었습니다. 글의 구성은 아래와..

앞서 zustand 개념에 대해 공식 문서를 통해 살펴 보았다. → 2023.01.16 - [Front-end] - 🐻zustand 이해하기 그렇다면, 스터디에서 공부한 오픈소스 쇼핑몰 분석 프로젝트에서 사용한 예시를 통해 zustand를 자세히 알아보자! Create a store /store/products/long-sleeve.ts import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; interface IProducts { products: PhotoType[]; setProducts: (value: PhotoType[], title: string) => void; reset: () => void; ..

What is zustand? zustand란 단순화한 flux원칙을 사용하는 작고, 빠르고 확장 가능한 아주 기본적인 상태 관리 solution이다. Why zustand over other state management? Redux를 넘어서는 이유. 단순하고, 편향적이지 않다. Simple and un-opinionated 'un-opinioned'의 뜻은 개발자들은 지속가능한 clean code의 quallity를 보장하는 일종의 패턴을 따르고 있는지 확실하게 해야한다는 의미를 담고 있습니다. hook을 통해 상태 소비에 주요 수단으로 사용한다. context provider로 app을 감싸지 않는다. component에게 렌더링을 발생시키지 않고 상태를 전달할 수 있다. context를 넘어서는 ..