전체 글143 React 개발을 위한 Flux 패턴이란? 리액트는 2011년 페이스북(현 meta)에서 선보인 SPA 라이브러리이다. 각종 사용자 인터렉션을 실시간으로 처리해야하는 페이스북과 같은 소셜 웹에서 UX를 개선하고 실시간성을 보장하기 위해 페이스북에서는 React 라이브러리를 개발하기 시작하였다. React를 통한 개발을 할 때 기존 MVC 패턴을 통한 개발은 어려움을 주었고 이때 등장한 패턴이 Flux 패턴이다. 기존 MVC 패턴과 비교하며 Flux 패턴의 이점에 대하여 알아보겠다. MVC 패턴 MVC 패턴은 Model-View-Controller의 줄임말로 Model, View, Contoller 각각의 개념을 역할로 나누어 작업을 처리하는 개발 디자인 패턴이다. 각각의 역할은 다음과 같다 Model 어플리케이션에서 보여줄 모든 데이터, 정보를 .. 2024. 3. 14. 개인 포트폴리오 제작 회고 프로젝트 명: 개인 포트폴리오 기간: 2023.12 ~ 지속 사용기술: TypeScript, Next.js, recoil, react-query, tailwind, supabase, swiper, framer site: https://www.kimmyungsub-portfolio.com/ FE 김명섭 포트폴리오 어서오세요. 웹 프론트엔드 개발자 김명섭입니다. www.kimmyungsub-portfolio.com github: https://github.com/kms99/portfolio GitHub - kms99/portfolio Contribute to kms99/portfolio development by creating an account on GitHub. github.com 내일배움캠프를 진행하.. 2024. 3. 13. JavaScript - 원시 값과 참조 값, 참조 값의 복사 자바스크립트는 비교적 메모리에 대한 부담이 없던 시기에 만들어졌기 때문에 이전에 만들어진 C/C++ 과는 다른 데이터 구조를 가지고 있다. 예를들어 숫자도 long, int 등으로 나누어 메모리 크기를 달리한 C/C++과 달리 JavaScript에서는 number라는 타입 하나로 통일하였다. 또한 가변적인 크기를 가진 문자열의 크기도 제한하지 않았다. 위와 같은 구조를 가진 자바스크립트에서는 다음과 같이 메모리를 관리한다. 1. 변수가 선언 될 시, 변수에 바로 값을 저장하지 않고 값의 참조 주소를 저장한다. 데이터가 바로 입력될 시, 데이터의 크기만큼의 메모리를 소모하게되며, 반복되는 데이터 중복되기 때문에 역시 효율적으로 관리할 수 없다. 따라서 데이터를 저장하는 메모리 영역을 따로 관리하여, 해당 .. 2024. 2. 21. 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. 이전 1 2 3 4 5 ··· 24 다음
