react8 React에서 Modal을 만드는 다양한 방법(feat. Promise) 서비스를 만들다보면 다양한 상황에서 모달(Modal/Dialog)을 활용하게 된다. 단순한 UI이지만, 구현 방법은 꽤나 다양하다. 나는 원래 provider를 이용해 open/close만을 담당하는 모달을 많이 만들고 사용해왔다. (사실 대부분의 경우, 이런 단순한 모달이 가장 많이 사용되는 것 같다. 아마두?!) 그런데 최근, 모달이 열릴 때 작업을 잠시 stop했다가 모달이 닫히면 이후의 작업을 이어서 진행해야 하는 flow가 생겼다. (우리 서비스의 경우는 아니지만 모달에서 Form을 사용해서 API를 통해 검증하고, 검증이 안되면 모달이 닫히지 않도록 해야하는 등의 작업이 예시가 될 수 있을 것 같다!) 물론 다른 방법으로도 이런 flow를 구현할 수 있기는 했지만, 어차피 모달이 열리면 사용.. 2022. 8. 16. [ReactJS] Google Translate 서비스 사용 불가 오류 해결하기 이번에 실리콘밸리에서 우리 서비스를 이야기 할 수 있는 자리가 생겼따. 너무나도 갑작스럽게 생긴 자리여서 영어 버전을 개발해서 대응하기는 어려웠고, 따라서 (구리긴하지만) Chrome에 내재된 Google Translate를 사용해서 서비스를 소개하기로 했다. (흑흑) 그런데 잘 동작할 것만 같던 이 Google Translate가 제대로 동작하지 않았다. 🥲 이상하게 저 번역 버튼을 누르고 나면 몇 초 뒤 혹은 다른 페이지로 이동했을 때 DOM Exception이 뜨면서 페이지가 마비됐다. 콘솔에 찍힌 오류는 아래와 같았다. (2번은 다른 사람들이 요 오류도 많이 난다길래 ^^.. 가져와봤읍니다.. 저는 1번 오류만 났어요..) // 1. removeChild() 문제 DOMException: Fa.. 2022. 7. 25. Monaco Editor를 활용해서 React 기반 프로젝트에 코드 에디터 적용하기! 최근 개발하면서 웹상에 SQL 쿼리를 작성하는 에디터를 넣어야하는 일이 생겼다! 빠르게 만들어야하는 MVP개발이었기때문에, 에디터를 직접 만들기보다는 이미 잘 만들어져있는 에디터들을 골라 그 중 하나를 사용하기로 했다.(뭔가 아쉽.. 호호) 그래서 아래의 내용을 포함한 에디터를 찾아 비교해보고, 가장 나은 에디터가 아니라 내 입맛에 맞추어 쉽고 빠르게 개발할 수 있는 에디터를 찾아 사용하기로 했다! 하핬핬! 1. 라이선스가 무료 2. 키워드 하이라이터 기능 3. 들여쓰기 지원 4. 라인넘버 지원 5. SQL 언어 지원 (+ 자동완성 기능 등) 다양한 에디터들을 찾을 수 있었는데, 아무래도 많은 사람들이 사용하고 있어 활발하게 커뮤니티가 유지되면서, 쉽고 빠르게 개발할 수 있는 라이브러리들에 우선순위를 두.. 2022. 3. 18. React에서의 setState React에서 Functional Component를 사용하면 useState hook을 정~말 많이 사용하게 된다. 그 중, 프로젝트를 하면서 setState를 사용하면서 들었던 두 가지 의문점과, 이를 해결해나가는 과정 그리고 그에 관한 생각들을 기술해보려고 한다. 🌱 첫 번째 의문 - setState는 어떻게 동작할까? 사실 지금까지 이미 만들어져있는 hook들을 사용하면서, 이 hook들의 세부 동작에 대해서는 크게 고민하지 않고 사용했다. 몇 번 궁금해서 찾아보기는 했으나, 항상 적당한 수준의 이해만 하고 넘어가기를 반복해서 잘 이해했다고 보기는 어려웠다. setState는 비동기로 동작한다. 왜냐하면 React에서 state가 변경될 때마다 매번 바로바로 DOM을 리렌더링하게되면 퍼포먼스 효율.. 2021. 8. 26. [2] Props, State State 란? 앞에서 Props를 배웠다. Props는 자식 입장에서 읽기 전용이라고 했당. State는 그것보다 자기주도적이당. Props에서는 부모가 자식한테 너의 name은 이거야! 라고 전해줬다면 State는 자식 컴포넌트가 자체적으로 처음부터 name을 가지고 있는다. 그리고 값을 변경하고 싶을 때에는 컴포넌트의 내장함수인 setState를 사용해 변경해준다. 값이 바뀔 때는 다시 렌더링됨! 실습해 볼까yo - Counter 만들기 import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 }; // state는 객체{}여야 합니다! 문자열이나 숫자면 안돼용 handleIncreas.. 2020. 7. 8. [1] Props, State Props와 State는 리액트에서 데이터를 다룰 때 사용되는 내용이다. Props란? 주로 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용되는 내용 하지만 자식 입장에서는 읽기전용 이기 때문에 값을 바꾸지 몬해용 나중에 컴포넌트를 만들게되면, 아래와 같이 그걸 불러와서 사용을 할 수가 있음. 그리고 만약 우리가 어떤 값을 컴포넌트를 렌더링 할 때 전달해주고 싶다, 하면 value="value1"처럼 값을 넘겨줄 수 있음. 여기에서 value가 바로 props 인 것! 되게 중요합니당! ⋌༼ •̀ ⌂ •́ ༽⋋ 실습! - 자식 컴포넌트에 값을 넘겨주기 // MyName.js // App.js에서 사용할 MyName이라는 컴포넌트를 하나 만들었다. import React, { Component, Fra.. 2020. 7. 8. [1] JSX 기본 문법 JSX JSX는 HTML이랑 비슷하지만, 지켜야 할 규칙이 몇가지 있음 React 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 React.createElement를 사용하는 자바스크립트의 형태로 변환해줌. 1. 태그는 꼭 닫혀있어야 함 #한 번 열은 태그를 그 자리에서 바로 닫는다. 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 함. 안뇽1 안뇽2 근데 구찮게 이렇게 div로 꼭 감싸주어야하나?! 뭔가 불필요해 보인다. => 이런 문제를 해결하려면 Fragment로 감싸주면 된당! import React, { Component, Fragment } from 'react'; class App extends Component { render() { return ( 안녕.. 2020. 7. 6. [React] Webpack, Babel이란? Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어냄 파일을 하나 하나 만든 것들을 HTML에서 매번 불러오는게 아니라, js에서 import한 것들을 bundling작업을 하게될 때 특정 확장자마다 어떠한 처리 작업을 하도록 준비를 해줌. 이미지들을 압축하고, 그 결과물로는 특정 경로에 특정 이름으로 저장하게끔 만들 수 있음. js파일을 여러 개 만들었을 때, 나중에 합쳐서 하나의 파일로 만들어줌. (나중에 원하면 규칙에 따라 분리시켜줄 수도 있음) 추가 : 우리가 나중에 ES6를 사용할건데, 구형 브라우저에서 지원이 안되는 경우가 있음. 그래서 새로운 문법을 사용할 수 있게끔 나중에 Babel을 사용함. js파일이 여러 종류의 브라우저에서 사용될 수 있게!.. 2020. 7. 6. 이전 1 다음
