여행가는개발자

개발하다 종종 '...' 표현을 사용하여 개발한 경험이 있는데 대략적으로 배열이나 객체여 펼쳐서 복사하여 사용하는 정도로만 알고 사용했었다 문뜩 이 표현에 대한 정확한 용어와 의미를 알기 위해 정리 하려고 한다. Spread 연산자 (...): 객체나 배열의 속성 혹은 요소를 "펼쳐서" 복사합니다. 주로 배열이나 객체를 복제하거나 속성을 합칠 때 사용됩니다.: const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; // obj2는 { a: 1, b: 2, c: 3 } const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4]; // arr2는 [1, 2, 3, 4] React 컴포넌트에서 props를 다른 컴포넌트로 전달..

어드민 프로젝트를 제작하면서 에디터를 사용하게 되었는 데 그부분을 한번 정리해보려고한다. 프로젝트에 에디터를 도입하게 되면서 여러 에디터 라이브러리를 사용해봤다.그 중 tinymce-react(https://www.tiny.cloud/docs/integrations/react/) 라이브러리를 도입하게되었다.여러 에디터 라이브러리를 봤지만 이 라이브러리를 고르게 된 이유는사용이 무료docs 가 잘 정리 되어있음기본 에디터에 충실하고 기능이 명확히 있음이러한 점으로 개발하게 됬다. 간단한 사용법은 $ npm install --save @tinymce/tinymce-react  import React, { useRef } from 'react'; import { Editor } from '@tinymce/ti..

기존에 코드를 작성할때 컴포넌트마다 팝업을 만들거나 index.tsx에 팝업을 만들어 props로 보내는 작업을 종종했었는데 상태관리를 적용해놓고 왜 공통화를 못했을까라는 생각이 들어서 이번 기회에 공통화 작업을 하면서 문서로 정리해보기로 한다. 예시로 만드는 팝업은 4개로 간주한다. 먼저 전역에 GlobalMoal를 만든다. GlobalModal.tsx export const MODAL_TYPES = { CouponModal: 'CouponModal', OptionModal: 'OptionModal', OrderDelConfirm: 'OrderDelConfirm', OrderModal: 'OrderModal', } as const const MODAL_COMPONENTS: any = { [MODAL_T..

Recoil은 페이스북이 2020년 5월에 소개한 React 전용으로 나온 상태 관리 라이브러리다. Recoil 공식 홈페이지 https://recoiljs.org/ko/docs/introduction/getting-started/ Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org Recoil을 통해 전역 상태를 관리하면 코드가 굉장히 간결해진다. context API는 전역 상태를 전달할 때 객체 형태의 value를 사용한다. 따라서 객체 안의 값이 하나라도 변경되면 provider로 감싼 모든 하위 컴포넌트들이 리렌더링한다는 단점이 있다. Recoil의 경우 각각의 전역 상태에 대한 atom이 생성되고 해당 상태를 구독하는 구성 요소만 리렌더링 된다. 따라서..

프론트 엔드로 임시 서버를 열어 서버 협업을 하기 위해 json-server를 추가하여 작업 하는 일이 있습니다. 명령어는 json-server --watch db.json --port 3001 으로 하여 localhost:3001로 실행할 수 있습니다. 프로젝트 안에 db.json를 만든 후 { "books": [ { "id": "1", "sort": 1, "title": "제목1", "img": "title1.svg" }, { "id": "2", "sort": 2, "title": "제목2", "img": "title2.svg" }, { "id": "3", "sort": 3, "title": "제목3", "img": "title3.svg" }, { "id": "4", "sort": 4, "title"..

지금까지 자바스크립트로 개발을 하다가 이번 프로젝트에서는 타입스크립트로 개발을 진행하게되었다. 타입스크립트로 개발하면서 두가지의 언어를 정리해보려고 한다. Javascript 웹 개발에 가장 많이 사용되는 프로그래밍 언어 메모리 측면에서 가볍고, 크로스 플랫폼 개발을 지원하는 객체 기반 스크립팅 언어 웹 사이트의 클라이언트 쪽 동적 페이지를 만드는데 적합 HTML 페이지에서 사용되고, 페이지가 로드될 때 자동으로 실행 일반 텍스트로 제공 및 실행 실행을 위한 별도의 준비나 컴파일이 필요하지 않음 특징 1. 서버 커뮤니케이션 페이지를 서버에 전송하기 전, 사용자 입력의 유효성을 검사하는 옵션 제공 상호 작용 마우스 hover 시 나타나는 인터페이스 등 낮은 reloading 속도 코드를 즉시 참조하므로 개..

Yup Yup은 Form validation을 위한 라이브러리이다. Yup schema object는 객체를 유효성 검증하는 데에 책임이 있는 이뮤터블 객체이다. 각 validator에 상응하는 고유의 메서드를 갖고 있으므로, 위에서 보듯이 여러개를 조합하여 원하는 data validation이 가능하다. string, integer, date, boolean, array, object 와 같은 기본적인 타입과 더불어서 required(also notRequired), email, positive와 같은 것들도 제공한다. const checkoutAddressSchema = yup.object().shape({ email_address: yup .string() .email() .required(), f..

Material UI이란? Material UI(https://material-ui.com/)는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다. 하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에게 좀 더 나은 나은 경험을 제공하고 있는 것 같습니다. Material-UI의 큰 장점은 공식 홈페이..