본문 바로가기

FE17

리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기 회사에서 설문 제작 시 선택할 수 있는 새로운 문항 종류로 `서명 입력`을 받을 수 있는 모듈을 구현하게 됐다. 서명 입력 받는 라이브러리 중 가장 대표적으로 사용되고 있는 signature-pad를 리액트에서 좀 더 간편하게 사용할 수 있도록, React wrapper로 감싸주는 `react-signature-canvas`를 사용하기로 결정~ 해당 라이브러리를 사용하면서 고민했던 부분, 그리고 해결 방법에 대해서 글을 써보고자 한다. https://www.pocketsurvey.co.kr/survey1/ExBZRsY 여기서 완성된 기능을 사용해볼 수 있다. (포켓서베이 많이 사용해주세요😃) 오랜만에 링크 클릭해보니 서베이가 삭제된거 같다ㅠㅠ 404 뜨네ㅠㅠ react-signature-canvas를 사.. 2022. 1. 4.
React 렌더링 퍼포먼스 개선 리액트 렌더링 위한 고민, useMemo, useCallback, React.memo 리액트의 컴포넌트는 state가 변경되었을 때, 그리고 props가 변경되었을 때, 부모 컴포넌트가 렌더링 될 때 렌더링된다. 예를 들어, 부모 컴포넌트의 state가 바뀌면 부모 컴포넌트, 변경된 state를 받는 자식 컴포넌트는 물론, 심지어 변경된 state를 받지 않는 자식 컴포넌트까지 모두 렌더링된다. 쓸데없는 렌더링을 줄일 수 있는 방법이 없을까? 쓸데없는 렌더링을 줄이고 성능을 최적화하기 위한 유용한 훅을 몇가지 소개하고자 한다. useMemo useMemo를 사용해 복잡한 계산식의 계산한 값을 재사용할 수 있다. useMemo는 호출 시 메모라이즈된 값을 반환한다. 복잡한 계산식을 수행해야하는 값이라면, .. 2021. 12. 29.
Redux 불변성을 지키면서 상태 변화를 손쉽게 하는 방법, immer 불변성, 불변성! 리덕스를 사용하면서 귀에 딱지 앉게 들었을 불변성 🙉 상태는 절대 절대 직접 변경하면 안된다. 특히나 리덕스는 객체의 상태 변화를 얕은 수준에서만 인식할 수 있기 때문에 객체의 깊은 상태를 변경하면 리덕스가 상태 변화를 못 알아차릴 수도 있다. 예를 들어 아래와 같이 깊은 객체가 있다고 한다면, 우리는 이 객체를 변경하기 위해 state = { 병원: { 소아병동: { 207호: { 환자1: { 성별: 남, 퇴원예정일: 3일 후 // 이 정보를 오늘로 바꾸어 보자! }, ... }, ... } } } 아래처럼 새로운 객체를 생성하여 깊고 깊게 파고 들어가 변경을 해야한다. const { 병원 } = this.state; this.setState({ 병원: { ...병원, 소아병동: { .. 2021. 2. 15.
Redux 기초 개념 요약본 / 리덕스란? MVC 패턴의 한계를 보완하기 위해 나온 Flux 패턴. 단방향 데이터 흐름을 통해서 상태 변화가 일어났을 때 손쉽게 파악할 수 있다 😎 오늘 포스팅할 Redux는 이러한 Flux 패턴을 충실히 구현해냈되 보다 간결하고 단순하게 사용이 가능하다. Redux a single centralized place to contain the global state 리덕스는 상태 관리를 위한 패턴이고 라이브러리이다. 상태는 action을 통해 업데이트되고, 리덕스를 사용함으로써 상태는 예측가능하게 관리된다. 리덕스는 애플리케이션 내에서 언제, 어디서, 왜, 어떻게 상태가 업데이트되었고 상태 변화가 일어났을 때 로직이 어떻게 동작하는지 이해하는데 도움을 준다. 🌈 리덕스 규칙 단 하나의 스토어가 존재한다. 상태는 읽기.. 2021. 2. 15.
리덕스가 등장하기 전까지 이야기, MVC 패턴의 한계와 Flux의 등장 리덕스를 공부하다보니 Flux를 공부하게 되었고, Flux를 파다보니 MVC까지 타고 내려왔당. 중간 중간 만나게 되는 아하 포인트 덕분에 공부 너무 재밌당. 재밌는 공부의 세계~ 요즘 클하로 공부 자극 뿜뿜 받는데, 너무 너무 즐겁다 😃 이로써 리덕스가 나에게 조금 더 고해상도로 다가오지 않을까 기대해본다. 그렇다면 제일 먼저 MVC 패턴부터 이야기를 해보겠다. MVC 비즈니스 처리 로직과 사용자 인터페이스 요소를 분리시켜 서로 영향없이 개발하기 수월하게 한다. 아주 널리 널리 사용되고 있는 디자인 패턴이다. Model 비즈니스 처리 로직을 담당한다. 알고리즘이나 데이터와 같은 부분들. 무엇을 할 것인지 정의한다. View 사용자 인터페이스 요소이다. 최종 사용자에게 화면에 무엇인가를 보여주기 위한 역.. 2021. 2. 15.
[web] HTML 개념 공부 정리 바닐라코딩 사전 학습 가이드 따라 다시 차근차근 쌓아 올려보는 웹 공부. HTML HTML(hypertext markup language) 이란, 태그로 웹페이지의 내용이나 구조를 나타낸 마크업 언어 입니다. HTML 도큐먼트는 .html 확장자를 갖는 순수한 텍스트 파일로, 메모장, editor, IDE(통합개발환경)을 사용해서 편집이 가능합니다. IDE : 코딩, 디버깅, 컴파일, 배포가 하나의 프로그램에서 같이 처리할 수 있는 환경을 제공하는 소프트웨어 HTML의 가장 중요한 특징은 link이다. 텍스트 등의 정보가 동일 선상이 아니라, 다중으로 연결되어 있어, 사용자가 원하는대로 위치를 이동해가며 정보를 취득할 수 있다. 이를 하이퍼링크(hyper link) 라고 한다. 브라우저, 검색엔진, 개발.. 2020. 9. 23.
데이터 타입(primitive type & Reference type) / 형변환(String, Number, Boolean) 데이터 타입 동적 언어(dynamically typed) 변수에 데이터 타입을 지정해 저장하지 않는다. 변수에 저장되는 값은 언제든지 데이터 타입을 바꿔 저장할 수 있다. let apples = "sweet"; apples = 3 console.log(apples) // 3 Primitive Type 값을 그대로 할당 Number 정수(+2**53 < x < -2**53) 부동소수점 숫자 특수 숫자 값( Infinity, -Infinity, NaN) BigInt 정수 끝 + n String 백틱으로 감싼 ${...} 로 변수나 표현식을 문자열에 넣을 수 있다. Boolean null 비어 있는 값 undefined 변수는 선언되었으나 값이 할당되지 않은 상태 Symbol Reference Type 값이 .. 2020. 8. 27.

티스토리툴바