Programming/React14 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에서 상태관리하기 (feat. Context API, Redux, React Query) 최근에 프론트엔드 상태관리에 대해 같이 일하는 인턴분들과 잠깐 이야기 할 일이 생겼다! 요즘 정말 많은 상태관리 도구들이 있는데, 이 중에서 무얼 어떻게 선택해야할 지 잘 모르겠다는 말에 정말 공감하기도 했고, 또 막연하게 알고있던 내용들이 말하면서 제대로 정리가 되지 않는다는 느낌을 받아서 한번 조금 정리해보면 좋을 것 같다는 생각에 글을 쓰게 되었다. 그리고 요즘 본딩 개발을 하면서 빠른 개발을 위해 내가 가장 잘 사용하는 Context API를 택해서 개발을 하고 있는데, 추후에 Recoil이나 Redux 등의 상태관리 툴을 도입해보려고 한다.(언제가 될지는 모름^^...) 뭐.. 그래도 미리 한 번 정리해 둘 겸 해서 오랜만에 글 남겨본당. 호홋 맨날 글써야지 써야지 하고 끄적끄적 제목만 적어두고.. 2022. 2. 27. .env를 사용하기 위한 webpack 설정 내가 까먹지 않기 위한 webpack 파일 설정 CRA 없이 Webpack 설정하다보면 process.env가 마음대로 안불러와지는데, dotenv, webpack에서 제공하는 defineplugin 사용하면 쉽게 해결된다. $ npm install -D dotenv // webpack.config.ts import dotenv from 'dotenv' // 안되면 const dotenv = require('dotenv') ... plugins: [ ... new DefinePlugin({ 'process.env': JSON.stringify(dotenv.config().parsed), }), ], ... 2022. 1. 14. [JS] Object.assign과 spread operator의 차이점 강의를 듣따가 궁금한 점이 생겼따. 1. Object.assign을 사용 handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat( Object.assign({}, data, { id: this.id++ ) }); }; 2. spread operator 사용 (...) handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat({ …data, id: this.id++ }) }); }; 두개가 똑같다고 하는데 분명 머가 다른점이 있을 것.. 2020. 7. 31. [1] LifeCycle API (생명주기) LifeCycle API (생명주기) 컴포넌트가 브라우저 상에서 나타날 때, 업데이트 될 때, 사라질 때 중간 과정에서 어떤 작업을 하고싶다 할 때에는 LifeCycle API를 사용하면 됨. 이 전체를 외우라는게 아니라 나중에 사용해야 할 때 적절히 사용하고, 사용하면서 외우면 됨. LifeCycle API의 종류는 매우 다양한데, 아래와 같은 개념들이 있다. Mounting (직역 : 설치) - 컴포넌트가 브라우저 상에 나타난다는 것 constructor : 생성자 함수 - 우리가 만든 컴포넌트가 처음 브라우저 상에 나타날 때 만들어지는 과정에서 가장 먼저 실행되는 함수. (저번에 잠깐 기록함) 컴포넌트가 가지고 있는 state를 초기 설정한다던지, 컴포넌트가 만들어지는 과정에서 미리 해야하는 작업이.. 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. [2] JSX 기본 문법 CSS Style과 Class를 사용하는 방법 const에 style을 정의해줄 수 있슴당. 1. 보통의 CSS에서는 '-' 를 사용해 띄워줬지만 js에서는 Camel Case를 사용해용 요런 식 입니다. background-color => backgroundColor font-size => fontSize import React, { Component, Fragment } from 'react'; class App extends Component { render() { const style = { backgroundColor: 'black', padding: '16px', color: 'white', fontSize: 15 + 10 + 'px' }; return ( 안녕하세용! ); } } export.. 2020. 7. 6. 이전 1 2 다음
