내일배움캠프 TIL93 2024-01-29 본 캠프 82일차 / 101일차 TIL (custom confirm) 2024-01-29 본 캠프 82일차 / 101일차 TIL (custom confirm) custom confirm 구현 프로젝트의 UI를 고려하였을 때 기본 confirm을 사용하는 것 보단 원하는 디자인과 버튼 text를 구현할 수 있는 confirm을 만들 필요성이 있었다. confirm을 만들기 위해서 고려해야할 사항이 몇가지 있었다. 1. 모든 페이지에서 사용이 가능해야한다. 2. 원하는 title이나 button text를 사용해야한다. 위와 같이 고려하였을 때 전역상태관리와 custom hook 화 하는 방안을 고려하였다. 1. 전역상태를 위한 confirmStore 구성 import { create } from "zustand"; export interface ConfirmTextState.. 2024. 1. 31. 2024-01-25 본 캠프 80일차 / 99일차 TIL (리다이렉트 메시지 로직개선, params->cookies) 2024-01-25 본 캠프 80일차 / 99일차 TIL (리다이렉트 메시지 로직개선, params->cookies) 미들웨어를 통해 페이지 redirect가 발생하였을 때, 사용자에게 알려주는 것이 필요했다. 기존에 리다이렉트에 대한 정보를 알려주기 위해서 다음과 같이 주소에 params를 추가해서 리다이렉트 시켰다. // 로그인 세션에 따른 조건부 처리 if ( !session && (pathname.startsWith("/dashboard") || pathname.startsWith("/metaverse")) ) { const url = new URL("/signin", request.url); url.searchParams.set("message", "login first"); return Nex.. 2024. 1. 26. 2024-01-19 본 캠프 76일차 / 95일차 TIL (middleware 처리) 2024-01-19 본 캠프 76일차 / 95일차 TIL (middleware 처리) 주요진행사항 - middleware 처리 middleware 처리 Next.js에서는 미들웨어라는 개념이 있다. 사용자의 요청(페이지 이동 및 정적 assets을 가져오는 요청)이 Next.js 서버에 도달하기 전에 실행되는 코드로 미들웨어를 통해서 사용자 요청 전 로그인 세션을 확인하거나 다른 페이지로 리다이렉트를 시키는 작업이 가능하다. Next.js 12버전 이후에는 Edge Middleware 개념이 등장하였다. Edge Middleware: Vercel의 EdgeNetwork에서 실행되어 더 빠른 응답시간을 제공한다. Vercel의 EdgeNetwork란? 전세계에 분산된 서버 네트워크로, 분산되어있기 때문에 .. 2024. 1. 22. 2024-01-18 본 캠프 75일차 / 94일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(3) 2024-01-18 본 캠프 75일차 / 94일차 TIL (react-zoom-pan-pinch 활용 영상공유 레이아웃 만들기(3) 주요 진행사항 - react-zoom-pan-pinch 활용 레이아웃 만들기 (이전) react-dnd 활용 영상공유 레이아웃 만들기 (2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기(2) - grid 변경 (이전) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react- audtjqxx.tistory.com 영상의 .. 2024. 1. 18. 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기(2) - grid 변경 (이전) 2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(1) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기 react-dnd 활용 영상공유 레이아웃만들기 유저가 직접 영상공유 audtjqxx.tistory.com r.. 2024. 1. 18. 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기) 주요 진행사항 - react-dnd 활용 영상공유 레이아웃만들기 react-dnd 활용 영상공유 레이아웃만들기 유저가 직접 영상공유 레이아웃을 커스텀하기 위해 다음과 같은 기술이 필요했다. 드래그하여 일정한 위치에 가이드 라인이 나오고 해당 위치로 레이아웃이 생성되는 것이다. 이런 기능을 구현하기 위해서 라이브러리를 사용하였으며, react-dnd와 react-beautiful-dnd 두개의 라이브러리를 고민하였다. 레이아웃을 설정하고 그리드의 위치를 조절해야하기 때문에 좀더 복잡한 구현이 가능하고 유연한 react-dnd를 선택하였다. react-dnd 설치 명령어 yarn add react-d.. 2024. 1. 17. 이전 1 2 3 4 ··· 16 다음
