분류 전체보기 (61) 썸네일형 리스트형 React 상태 초기화 vs 원복, 뭐가 다른 걸까? React를 쓰다 보면 상태 초기화, 상태 원복(되돌리기)을 다루게 되는 경우가 꽤 많다.예를 들어…사용자가 어떤 폼을 열었을 때 기본값으로 초기화하고 싶을 때사용자가 입력하던 중 “취소” 버튼을 눌러서 원래 값으로 되돌리고 싶을 때겉보기엔 비슷해 보이지만, 이 두 개는 의도와 동작이 엄연히 다르다.이번 글에서는 "초기화"와 "원복"을 구분하는 이유,그리고 실무에서 이걸 헷갈려 생긴 문제와 해결 방법을 정리해본다. ---초기화 vs 원복, 뭐가 다를까?구분 초기화 (Reset) 원복 (Restore) 초기화원복목적상태를 기본값으로 되돌림특정 시점의 데이터를 다시 불러옴시점폼을 새로 열거나 처음 접근했을 때수정 중 취소하거나 롤백할 때기준값"기본값" 상수나 최초 정의된 값실제 API에서 받아온 값 (.. 모바일에서만 영상이 안 나와? 내 삽질기 (ft. Range 헤더) Node.js로 구성된 환경에서 나는 영상을 가져오는 기능을 담당하는 api를 개발했다.정말 그냥 http://localhost/file/test.mp4하면 아래처럼 영상을 보여주는 api다.. PC에선 잘 보이는 영상이, 모바일에선 깨져서 나오거나 재생이 안 되는 경우가 있다.영상 스트리밍에 필요한 HTTP Range 요청과 206 Partial Content 응답을 서버가 제대로 지원하지 않으면 모바일 브라우저에서 재생 실패한다.이 글은 내가 직접 겪은 삽질 과정을 정리한 글이다. 혹시 같은 문제로 고생 중이라면 도움이 되기를,,.(과연?) Node.js 기반의 API에서 아래처럼 단순히 동영상을 반환하는 기능을 만들었다.GET http://localhost:8080/file/test.mp4.. [TS] TypeScript Concept and Basic Knowledge 더보기타입스크립트 공부를 시작하게 된 계기: 그냥 JS만 사용하여 주구장창 개발만 하였는데, 코드가 더 딥해질수록 변수의 정체성을 잃는 것은 물론... 타입에서 자유로운 영혼이 되버리니 버그를 종잡을 수 가 없게됐다. 그러던 도중 타입스크립트를 사용하게 되면 더 Typesafe적인 코드를 개발할 수 있다는 점을 알게되었다. ListTypeScript and JavaScriptDuck Typing - TypeScript and JavaScript 자바스크립트는 웹페이지에 생명력을 불어넣어주는 언어라 볼 수 있다. 예로 들면, 버튼을 클릭하거나, 페이지를 스크롤하며 일어나느 동작들이 자바스크립트 덕분에 가능해진다. 자바스크립트는 자유롭고 유연한 언어라 볼 수 있다. 하지만, 때때로 그 유연함이 오류를 발생할.. Cargo 웹사이트에 AWS Route53 도메인 연결하기 Cargo는 코딩 없이도 웹 포트폴리오를 만들 수 있는 웹 빌더다.비개발자도 다양한 디자인과 효과를 쉽게 적용할 수 있어 해외에서는 많이 사용되고 있다.하지만 국내에서는 아직 인지도가 낮은 편이라, AWS Route 53 도메인과 연결하는 방법에 대한 정보가 부족하다.이 글은 Cargo와 AWS Route 53을 사용해 나만의 도메인으로 웹사이트를 연결하는 과정을 담고 있다. 1. Cargo에서 도메인 연결 설정아래 경로로 이동한다:https://[본인 ProjectName].cargo.site/admin/settings상단의 Connect an existing Domain Name 입력란에 보유한 도메인 주소를 입력한다.입력 후 상태가 Pending으로 바뀌고, 다음과 같은 경고 문구가 뜬다:If yo.. BFF(Backend For Frontend)? 요즘 프론트엔드와 백엔드가 분리된 구조가 당연해지고, 서비스가 커지면 자연스럽게 MSA(마이크로서비스 아키텍처)로 넘어가는 경우가 많아졌다.이런 흐름 속에서 등장한 개념 중 하나가 바로 **BFF(Backend For Frontend)**다.처음엔 이게 뭔가 싶었는데, 알고 보면 꽤나 실용적인 패턴이었다.한 마디로 말하면, 프론트엔드가 더 편하게 일할 수 있도록 도와주는 백엔드라고 보면 된다.BFF가 뭐지?기존의 백엔드는 하나의 공통된 API 서버를 통해 프론트의 요청을 처리했다. 웹이든, 모바일이든, 똑같은 API를 사용해야 했고, 거기에 맞춰 데이터를 가공해서 써야 했다.근데 이제는 웹, 모바일, 태블릿 등 사용자 환경이 다양해지다 보니 모두에게 딱 맞는 API 하나를 만드는 게 점점 어려워지고 있다.. #4 [REACT.JS] 에디터 구현하기-1 간간히 진행해오던 Nerator 프로젝트에서, 사용자 명함 디자인을 조금 더 자유롭게 조작할 수 있도록 하기 위해 에디터 기능을 직접 개발해보기로 했다.단순히 텍스트를 입력받아 출력하는 기능에서 벗어나, 사용자가 직접 디자인 요소들을 배치하고 커스터마이징할 수 있도록 하는 것이 이번 구현의 핵심 목표였다. 주요 기능 정의앞면 / 뒷면 구분앞/뒤 면에 따라 속성의 좌표(x, y)를 따로 관리해야 한다.UI 상에서도 손쉽게 전환되며 편집할 수 있어야 한다.명함 사이즈 설정 가능사용자가 원하는 사이즈를 직접 입력 가능해야 함디자인 이미지 업로드명함 앞면, 뒷면에 각각 다른 이미지를 업로드하여 미리보기에 반영Drag & Drop으로 속성 배치좌표 직접 입력이 아닌, 시각적으로 끌어다 놓는 방식 제공실시간 미리보.. Zustand란? Zustand는 리액트에서 사용할 수 있는 가벼운 상태 관리 라이브러리다. 단순한 API 기반으로 작동하며, create 함수 하나만으로도 커스텀 훅을 생성할 수 있어 사용법이 간결하다.Redux와 비교했을 때 불필요한 설정이 없고, 모듈화도 편해서 최근 프로젝트에 종종 사용하게 된다.Redux와의 차이Redux는 상태 관리를 위해 createStore, combineReducers, Reducer 등을 설정해야 한다.import { combineReducers } from "redux";import nameTag from "./nameTag";import location from "./location";import excel from "./excelData";const rootReducer = comb.. [chat gpt] 구글 시트에서 GPT for Sheets 사용해보기 GPT for Sheets reference • Gptforwork.comGPT 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 regptforwork.com구글 스프레드시트에 ChatGPT 붙여봤다… 자동화 맛집이었다요즘 ChatGPT 안 써본 사람 드물다.근데 이걸 구글 스프레드시트에 붙여서 함수처럼 쓸 수 .. 이전 1 2 3 4 ··· 8 다음
