디벨롭per

Node.js로 구성된 환경에서 나는 영상을 가져오는 기능을 담당하는 api를 개발했다.정말 그냥 http://localhost/file/test.mp4하면 아래처럼 영상을 보여주는 api다.. 근데 정말 신기하게 모니터에선 잘 나오는데 꼭 모바일에서만 해당 같은 url을 열면 깨진 영상이 나왔다 (00:00~00:00)으로 아예 영상을 못불러왔다. 대체 왜그럴까? 왜 데스크톱에선 잘 불러오는데? 왜 모바일에서만???!!? 정말 이런 생각으로 약 2시간동안 서칭했다. 먼저 내가 계속 붙잡고 있던 api를 curl 날려본 결과 - Content-Type - Accept-Ranges- Content-Length 이렇게 되어있는데, 모바일(Chrome, Safari..등) 영상이 안나왔다. 그래서 다른 서버..

Cargo는 사용자가 코딩 없이도 웹 포트폴리오를 만들 수 있는 웹 빌더 프로그램이다.즉 비개발자도 다양한 디자인과 효과를 쉽게 적용할 수 있다.국내에서는 인지도가 낮은 편이지만 해외에서는 다양하게 사용되고 있다. 본인이 만든 웹을 원하는 도메인으로 호스팅하기 위해서 Cargo에서도 도메인을 구매할 수 있지만나는 AWS에서 관리하는 도메인으로 Cargo를 연결하고 싶었다. 1. Cargo 설정화면으로 이동한다. ( https://[본인 cargo projectName].cargo.site/admin/settings)상단에 있는 Connect an existing Domain Name에 본인이 가진 도메인을 기입 기입한 후 Pending 상태로 전환되며 밑에 경고창이 뜬다.If you have a doma..

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

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

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..

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..

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..