IT

Next.js14를 기준으로 App router와 Pages router를 각각 CSR/SSR/SSG/ISR을 구현해 봤다.왜 굳이 둘 다 한 거죠...?라고 한다면 처음에는 App router로 구현하여 동작과정을 확인하려고 했다. 하지만 내 예상과 다르게 동작해 둘 다 구현했다.실제로 둘 다 구현해 보니... 차이점이 있었다!구현에 사용한 예시는 API에서 시간을 받아와 화면에 보여주는 페이지이다. CSR (Client Side Rendering)사용자가 페이지에 진입할 때, 서버로부터 빈 HTML을 받아오고 이후 브라우저에서 JS를 통해 필요한 데이터를 API로 받아와 화면을 그린다. 즉, 초기 로딩 시에는 빈 화면이 나타나고 JS가 실행되고 데이터가 로드된 후에 콘텐츠가 나타난다.예시 코드impo..

vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다. 이 말을 확인해 보기 위해 같은 Next.js 프로젝트를 EC2와 Vercel에 각각 배포해 봤다.이번 글에서는 각각의 차이에 대해서 알아보겠다. 같은 프로젝트를 Vercel과 EC2에 배포해서 비교 왼쪽은 Vercel에 오른쪽은 EC2에 배포했다.배포하고 나면 눈으로 봐도 큰 차이가 느껴질 줄 알았는데 아니었다. 비슷했다!DOMContentLoaded랑 Load 시간을 비교해 보면 되나? 했는데 이건 cold start랑 관련이 없다.DOMContentLoaded는 HTML 문서가 로드된 시간, Load는 페이지와 관련된 모든 리소스가 로드되었을 때 시간을 나타내기 때문이다. network탭의 timing에 있..

내가 만든 foliohub 서비스 프론트는 현재 vercel에 배포되어 있다.왜 vercel에 배포했는가?하면배포가 간단하고 무료 플랜정도면 충분히 내 서비스를 운영할 수 있었기 때문이다.Next.js의 SSR, 이미지 최적화 등 다양한 기능을 지원하고 있었기 때문에 vercel에 배포했다.  아래와 같은 말을 듣게 되어 의문이 들었다...vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다. 배포 방식만 다른 게 아니라 실행 방식도 달랐던 거야?!cold start 때문에 EC2에 비해 느리다고?! 이 의문을 해결하기 위해 같은 프로젝트를 vercel과 EC2에 각각 배포해서 비교해 보기로 했다.이번 글에서는 Next.js 프로젝트를 EC2에 배포하는 과정을 담았..

Toast 알림을 구현하면서 어디서든 간편하게 사용할 수 있도록 하기 위해 전역 상태관리가 필요했다.요즘 Zustand가 핫한 거 같아서 사용해 봤다! (+ 곰이 귀엽기도 하고 ㅎㅎ)추가로 나는 Next.js 14 App router를 사용 중이다. Zustand다른 상태관리 툴과 비교했을 때 장점은Context API와 달리 상태 변경 시 불필요한 리렌더링이 일어나지 않는다.동작을 이해하기 위해 알아야 하는 코드 양이 적다. 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서 상태를 정의하고 사용하는 방법이 단순하다.설치# npmnpm install zustand# yarnyarn add zustand 전역상태관리를 통해 Toast 알림 만들기store 생성toast 알림은 여러 개가 나타날 수 있..

React Query(Tanstack Query) React Query란? React 애플리케이션에서 서버 상태를 가져오고 캐싱하며 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다. 내가 React Query를 선택한 이유 Client 데이터와 Server 데이터 간의 분리가 된다. api 요청에 대한 로딩, 에러, 데이터(response) 관리가 쉽다. 네트워크 요청 관련 다양한 기능, 옵션들이 있다. (refetchOnWindowFocus, 브라우저에 포커스가 들어온 경우) 장점 중 하나로 캐싱도 있지만 나는 변경되는 데이터를 바로 받아야 했기 때문에 캐싱은 사용하지 않았다. 지저분한걸?! 그렇게 유용하게 잘 사용했으나.. 컴포넌트, 페이지 안에 api 관련 로직들이 같이 있다 보니 코드가 길어..

useStateconst [state, setState] = useState(initialState)useState는 배열을 반환하고 비구조화 할당을 통해 state, setState를 추출하여 사용한다. 그렇다면 useState는 어디서 오는 것일까? 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출된다. 그렇다면 어떻게 함수가 다시 호출되었을 때 이전의 상태값을 가져올 수 있는 것인가?바로! useState는 closure로 구현되어 있기 때문에 이전의 상태값을 유지할 수 있다!그렇다면 closure란 무엇인가? 이에 대해 먼저 확인해 보자! closure란?mdn에 따르면 함수와 그 주변 상태(lexical environment, 함수가 정의될 때 주변의 스코프와 변수에 대한 정보를 포함하..

recoil, typescript, react 환경에서 모달을 전역 상태에서 관리하는 방법을 알아보자! 문제점. 너무 많아진 모달 관련 상태관리값들많은 모달들이 사용되어모달을 열기 위한 상태관리값들(useState)과 그에 대한 함수들(열고 닫는 함수등)이 불필요하게 많아지고 있었다!마치 아래와 같은 느낌이었다!const App = () => { const [isOpen1, setOpen1] = useState(false) const [isOpen2, setOpen2] = useState(false) const [isOpen3, setOpen3] = useState(false) const [isOpen4, setOpen4] = useState(false) const handleToggle1 = ..

웹 프레임워크에서 주로 쓰이는 react와 vue를 비교해 보겠다그중에서도 데이터 바인딩과 데이터 흐름 방식에 대해 자세히 알아보자!UI 라이브러리와 프레임워크 각각 공식문서에 따르면 react는 라이브러리이고 vue는 프레임워크로 소개되고 있다.react는 라이브러리이기 때문에 리액트만으로 전역상태관리, 라우팅 등을 지원하지 않는다. 사용자가 별도의 라이브러리를 추가하여 사용해야 한다. vue는 프레임워크로 주어진 문법에 따라 사용해야 한다.  코드 형태react는 jsx를 사용하고 자바스크립트를 통해 UI로직과 DOM을 구현한다.vue는 에는 html, {{ childData }}   데이터 바인딩데이터 바인딩이란?화면상에 보이는 데이터와 브라우저 메모리에 있는 데이터를 서..

사용자가 회원가입이나 신청 프로세스 도중 페이지를 벗어나거나 새로고침할 경우 기존에 입력되는 모든 값이 초기화된다! 이를 의도한 사용자도 있겠지만, 실수로 눌려졌다면 좋은 사용자 경험을 줄 수 없을 것이다. beforeunload 사용자가 페이지를 떠나거나 닫을 때 발생하는 이벤트이다. 사용자가 페이지를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄 때 사용한다. 새로고침, 뒤로 가기, 브라우저 닫기 등의 경우에 아래와 같이 실행된다! window.addEventListener("beforeunload", (event) => { event.preventDefault(); }); 안내 메시지를 변경할 수 있나 했는데 일반적인 브라우저에서는 beforeunload 이벤트를 취소할 때 보이는 ..

입점사 프로젝트를 진행하며 페이지네이션과 함께 많이 쓰인 것은 필터일 것이다! 각 페이지에서 데이터를 조회하기 위해 필터와 페이지네이션이 사용되었다. 각각의 페이지마다 필터 컴포넌트로 만들면서 그에 대한 로직이 반복되어 이를 개선하고 뒤로가기 또는 새로고침 시 필터값을 유지하는 방법을 알아보겠다! 필터 컴포넌트와 필터 관련 hook 구현하기 필터 컴포넌트 초기 필터값들과 검색, 초기화 시 동작되는 함수를 전달 받는다. 사용자가 입력한 필터값을 내부적으로 관리한다. src/components/filter/deliveryTemplateFilter.tsx interface DeliveryTemplateFilterProps { initialFilterValues: FormState onSubmit: (filte..