전체 글 61

[React.js] BFF 패턴

BFF = Backend For Frontend 프론트엔드를 위한 백엔드? BFF는 마이크로서비스 구조의 패턴 중 하나다. 기존 모놀리식 구조에서 MSA 방식으로 전환되면서 큼지막한 서비스들은 각 기능마다 분리되었고, API와 UI도 서비스별로 나뉘게 됐다. BFF 개념 기존 우리가 생각하는 백엔드의 역할은 프론트가 정보를 요청하고, 값을 제공해주는 역할이라고 생각할 수 있다. 하지만 BFF는 프론트엔드를 위한 백엔드라는 개념이 더 강하기 때문에 주체가 프론트에 맞춰져 있다. AWS에서는 BFF 패턴을 이렇게 정의하고 있다. "BFF 패턴은 하나의 일반적인 목적을 가진 API-백엔드와는 달리 하 나의 사용자 경험에 맞춘 하나의 백엔드가 요구 되고 있다. 이 패턴이 사용되는 용도 중 하나를 예시로 들어본다..

REACT 2024.02.14

#4 [REACT.JS] 에디터 구현하기-1

간간히 해오던 Nerator 프로젝트에서 명함에 배치할 속성을 좀 더 자유롭게 편집 하고 싶어 에디터를 구현하기로 했다. 핵심 기능 LIST UP! - 명함은 앞면과 뒷면이 있다 - 앞/뒤에 따라 다르게 속성 x/y 위치를 구분해야한다. (기능적 측면) - 사용자는 쉽게 앞/뒷면을 넘나들며 편집하기 쉬워야 한다. (사용자 측면) - 명함 크기를 설정할 수 있다. - 명함 뒷면과 앞면의 디자인의 이미지를 넣을 수 있다. - 속성을 drag/drop 하여 쉽게 배치할 수 있도록 해야한다. - 미리보기 화면으로 사용자에게 예시를 줘야한다. - 마지막 결과물을 pdf저장 혹은 프린트 기능 까지 (2차개발) 현재 대략적으로 잡은 UI는 왼쪽엔 수정할 수 있는 편집 화면, 오른쪽 사이드 바에는 설정할 수 있는 옵션..

프로젝트 2024.02.14

[React] Zustand 적용하기 #1

Zustand란? Zustand는 상태관리 라이브러리로 간단한 API 기반 훅스의 구조를 가지고 있다. 또한 Zustand는 오픈 소스로 안정화를 위해 많은 개발자들이 현재 힘쓰고 있다. 우리가 흔히 들어본 Redux와 사용법이 다르다. Zustand는 간단하다는 장점이 있다. Redux는 store.js를 사용하기 위해 따로 설정해줘야 하는 코드가 많다. - createStore - combineReducer - Reducer... import { combineReducers } from "redux"; import nameTag from "./nameTag"; import location from "./location"; import excel from "./excelData"; const rootR..

REACT 2024.02.05

[chat gpt] 구글 시트에서 GPT for Sheets 사용해보기

GPT for Sheets reference • Gptforwork.com GPT for Sheets reference17/1/2023Author name: Stanislas MarionThis is a reference of all available functions in GPT for Sheets. If you are looking for usage examples, click here.GPT functionThe simplest function to start using GPT in Sheets. Outputs the re gptforwork.com 구글 스프레드 시트에서 gpt를 사용해보자! Chat GPT가 떠오르고 있는데 이를 구글 스프레드 시트에 적용하여 사용할 수 가 있다. 사용 방법 (1..

프로젝트 2023.02.19

[Vue.js] Vue.js LifeCycle 정리

Vue.js에는 LifeCycle이 존재한다. * LifeCycle이란 컴포넌트가 생성되고 소멸되기까지의 단계를 뜻한다. 1) beforeCreate 인스턴스가 초기화가 되고, 즉시 실행되는 것이 beforeCreate 단계다. data()나 computed와 같은 옵션들을 처리하기 전에 실행된다. 이 단계에서 props에서 전달 받은 값을 사용하고 싶을 경우, Vue2는 created부터 props를 사용할 수 있고 Vue3에서는 beforeCreate에서 props 값을 사용할 수 있다. *Vue3에서 제공해주는 컴포지션api의 훅인 setup()은 beforeCreate() 이전에 호출된다. 2) created 해당 단계는 인스턴스가 처리되고, state와 관련된 옵션들인 computed나 meth..

Vue.js 2023.02.16

[Vue.js] 컴포지션API란?

Composition API 는 Vue3에서 기본적으로 제공해주는 API다. Vue2에서 사용할려면, npm을 통해 설치하면 된다. CompositionApi를 사용하기 전과 후를 비교하자면 , 코드의 간결성, 직관성이다. 기존 코드는 data 기준이 아니라 computed와 methods에 따라 분류되므로 만약 프로젝트의 규모가 커질수록 관리해야하는 data state값들이 많아진다면, 유지보수 및 한눈에 코드를 파악하기가 어렵다는 단점이 있다. 이를 보완한 것이 Composition API인데 해당 API는 data 기준으로 코드가 분류되어 코드가 명확해진다는 장점을 가지고 있다.

Vue.js 2023.02.03
728x90
반응형