개발/리액트 29 [리액트] 특정 엘리먼트에 focus 주는 방법에 대하여(feat.타입스크립트) 들어가며 특정 버튼을 눌렀을때 입력창이 뜨고 텍스트를 입력합니다. 근데 텍스트 입력이 안됩니다. 귀찮게 마우스로 입력창을 누르고 다시 키보드로 옮기는 과정이 필요합니다. 매우 귀찮죠. 그럴때 필요한 기능이 바로 리액트 컴포턴트에 focus를 주는 것입니다. 이번 글에서는 바로 이 기능에 대한 간단한 구현과 예시를 살펴보겠습니다. 자바스크립트에서의 Focus 일단 리액트의 focus를 들어가기 전에 HTML의 focus에 대해 간단히 살펴보겠습니다. 기본 사용법 HTMLElement.focus() - Web APIs | MDN The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused.. 2021. 5. 10. [리액트] JavaScript heap out of memory, 스크립트로 해결하기 회사에서 기존의 레거시를 모두 버리고 새롭게 타입 스크립트 + 리액트로 옮겨가는 중이다. 그래서 기분 좋게 필요한 라이브러리를 모조리 설치하고 실행을 해보았는데, FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory ???? 뭐야 이거..에러 로그를 보아하니 heap size 때문에 문제가 발생했음을 알게 되었다. 기존까진 잘됬는데 내가 새로이 설치한 라이브러리들이 문제가 됐나 싶어 하나씩 설치-테스트를 반복하다가 plotly.js를 가져오는 순간 저 에러가 뜬다는 것을 알았다. 그리고 깨달았다. "아 이건 라이브러리 자체 문제이긴 보다는 다른 문제구나." "라이브러리가 .. 2021. 2. 3. [리액트] 두번 렌더링 되는 이슈에 대하여(Feat.StrictMode) 들어가며 요새 교학성장이라는 말을 실천해보기로 했습니다. 교학상장(敎學相長) [가르칠 교, 배울 학, 서로 상, 길 장] ‘가르치고 배우면서 서로 성장한다’는 뜻. 스승은 제자를 가르치는 과정에서 아직도 막히는 부분이 있음을 느껴 더욱 정진케 되고, 제자는 배울수록 자신의 부족함을 알게 돼 학업에 힘쓰니 가르침과 배움이 서로를 성장케 한다는 뜻이다. 속담에 ‘세살먹은 아이한테도 배운다’고 했다. 배움의 길에 모든걸 가르쳐주는 절대스승은 없다. 가르치고 배우며 부족함을 채울 뿐이다. 하지만 가르칠 곳이 마땅치 않는 저에겐 그나마 오픈채팅방에서 답변해주는 게 그나마 지식을 나누는 방식이라 생각해서 알만한 질문이 나오면 최대한 답변을 하려고 노력하고 있습니다. 이번 글 또한 비슷한 맥락에서 작성하는 글이기도 .. 2021. 2. 2. [리액트] typescript, mobx 에서 private state를 처리하는 방법에 대하여 mobx 상에 store를 만들어 사용할 때 일반적으로 observable를 통해 만들게 됩니다. 간단한 예를 들어 설명하겠습니다. 일반적으로 클래스형 store에서는 간단하게 makeObservable()를 통해 간단히 만들곤 합니다. import { action, makeObservable, observable } from 'mobx' class Count { number: number = 0 constructor() { makeObservable(this, { number: observable, increase: action, decrease: action, }) } increase = () => { this.number++; } decrease = () => { this.number--; } } .. 2021. 1. 19. 이전 1 ··· 4 5 6 7 8 다음
