본문 바로가기

프로그래밍

 (191)
react class 와 react hooks 를 활용한 함수형 방식 구현 비교 react 를 class 방식으로 구현하는 방법이 있고, hooks 을 사용하는 함수형 방식으로 구현이 가능하다.hooks 로 구현하면 useState(기본값) 을 통해 상태값을 조절 가능하다.class 보다 hooks 를 활용한 함수형 코딩이 더 간결하면서 가독성이 강하다. import React, { useState } from "react";import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { const [item, setItem ] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item ..
vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용 vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용한다.이벤트 버스의 객체를 만들어 사용하면 되며, vue 인스턴스를 만들어 사용하면 된다. 데이터를 저장할 필요 있으면 데이터 옵션 추가 가능하다.이벤트를 수신하는 컴포넌트는 미리 이벤트 핸들러를 등록해 두어야 하며 , vue 인스턴스 생명주기의 created 이벤트 훅을 이용한다. vue 인스턴스가 만들어질때 $on 메소드를 사용해 이벤트 수신 정보를 등록해 두어야 한다. 이벤트를 발신하는 컴포넌트에서는 $emit 메소드를 호출한다. DOCTYPE html> 06-24 var eventBus = new Vue(); child1 button!! {{currentTime}} Vue.component('child1-compo..
jQuery 의 동적 dom 생성시 autocomplete 이벤트 지정하는 방법법 autocomplete 사용할 경우, 동적 dom 생성시 매번 이벤트를 지정해 줘야 한다.dom 을 append 하고 나서, 추가된 마지막 dom 에 :last 하여 autocomplete() 함수를 지정하는 구문이다. Add More Fields $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count var availableAttributes = [ ..
React, Redux, and Firebase 로 todo 앱 만들기 A Simple Todo App withe React, Redux, and Firebase https://github.com/rajatk16/firedux-todo firebase 은 realtime database 에서 추가, 삭제가 이루어 진다. React와 함께 Redux 라이브러리를 사용하여이 앱의 상태를 관리합니다. Redux는 ToDo 앱처럼 단순한 앱에는 필요하지 않지만 Redux를 다른 React App에 추가하는 데 필요한 단계를 이해하는 데 도움이됩니다!Google의 Firebase는이 애플리케이션에서 사용할 놀라운 기술 중 하나입니다. Firebase는 인증, 저장, 테스트 및 데이터베이스와 같은 다양한 기능과 서비스를 제공 할 수 있습니다. 그러나이 게시물에서는 파이어베이스를 사용하..
React 를 통해 Firebase Authentication 사용해 보기 React 를 통해 Firebase Authentication 사용해 보기 필자는 Firebase로 인증을 완료하고 React를 신속하게 처리하기위한 간단한 가이드를 작성하고자했습니다.나는 여기서 매우 직접적이고 직설적 일 것이다. 인증 된 경로와 같은 엣지 경우를 다루지 않거나 오류 메시지를 올바르게 표시하지 않겠습니다.이 튜토리얼에서는 기본적인 Google 인증을 수행하는 데 필요한 최소한의 변경 만 수행 할 것입니다.우리는 몇 가지 오픈 소스 프로젝트를 사용할 것입니다.https://github.com/nodejs/nodehttps://github.com/facebook/reacthttps://github.com/facebook/create-react-apphttps://github.com/arma..
React App 을 Surge 에 배포해 보기 React App 을 Surge 사이트에 배포하는 방법에 대해 알아보고자 합니다. 해당 사이트는 https://surge.sh/ 이며 배포하는 방법이 매우 쉽습니다. 이는 단지 html , css , js 로 구성된 소스는 전부 무료로 사용이 가능하며, 배포시에는 서브도메인 별도로 제공해 줍니다. React App 을 개발하면 이를 배포하기 위해 build 명령어를 사용할 필요가 있는데요. npm run build 명령어를 실행하면 build 폴더가 생성되면서 해당 폴더 내에 optimized 되어 소스가 저장됩니다.해당 build 폴더의 내용을 surge 사이트에 배포해 보겠습니다. ✘ shimjaewoon@shimjaewoonui-MacBook-Air  ~/desktop/work/react/reac..
input box 에 숫자 또는 float, hex, 금액 처리만 가능하게 하기 input box 에 숫자 또는 float, hex, 금액 처리 통제하기https://jsfiddle.net/emkey08/tvx5e7q3 input box 에서 keydown keyup mousedown mouseup select contextmenu drop 관련 이벤트들을 적용하여 정규화를 사용해서 차단한 방법입니다.테스트는 https://jsfiddle.net/emkey08/tvx5e7q3 사이트에서 확인이 가능합니다.jQuery input filter showcaseThis will correctly handle Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the cursor posit..
javascript 숫자 8자리 형식을 년-월-일 형식으로 보이기 숫자 8자리 형식으로 된 날자 형식을 년-월-일 형식으로 하이픈(-) 넣어서 보여주는 방법을 정규화로 된 부분입니다. s = s.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3'); https://stackoverflow.com/a/36638153 Change date from YYYYMMDD to YYYY-MM-DD Javascript Change date from YYYYMMDD to YYYY-MM-DD Javascript I'm trying to convert a string from my database that is formatted as YYYYMMDD and is placed in the input box id="startingdate". How would I ..