'프로그래밍' 카테고리의 글 목록

5편 - Reactant 의 Dependency Injection 알아보기

Dependency Injection Reactant는 TypeScript (JavaScript 지원)를 지원하는 의존성 주입을 제공합니다. 의존성 주입 메타 데이터를 기록하기 위해 Reflect.metadata뿐만 아니라 TypeScript에 근거 experimentalDecorators 기능을 권장합니다. 데코레이터의 실험적인 지원을 활성화하려면 tsconfig.json 명령 줄 또는 experimentalDecorators 컴파일러 옵션을 활성화해야합니다. { "compilerOptions": { "experimentalDecorators": true } } @injectable() @injectable() 를 사용하면, Reactant을 사용하여 현재 모듈을 주입 가능한 모듈로 바꿉니다. @inj..

프로그래밍/ReactJS, React Native 2020. 8. 13. 01:36

4편 - Reactant 의 View Module 알아보기

View Module ViewModule을 상속받고 컴포넌트 메소드(React 함수 컴포넌트)를 정의함으로써 View에서 모듈을 구현하는데 사용할 수 있습니다. 현재 ViewModule의 임의의 메소드를 컴포넌트에 주입할 수도 있고, useConnector를 사용하여 현재 공유 모듈 상태 또는 다른 의존 모듈의 상태를 주입할 수도 있습니다. interface Todo { text: string; completed: boolean; } @injectable() class TodoView extends ViewModule { @state list: Todo[] = []; addTodo(text: string) { this.list.push({ text, completed: false, }); } @actio..

프로그래밍/ReactJS, React Native 2020. 8. 13. 01:19

3편 - Reactant 의 @state 와 @action 알아보기

https://reactant.js.org/docs/state-action Reactant · A framework for building React applications A framework for building React applications reactant.js.org @state 및 @action Reactant는 React의 불변의 공유 state 를 장식(decorating)하는 @state 를 제공하며, state 변경 업데이트를 장식(decorating)하는 @action 도 제공합니다. 이것은 Redux 와 Immer 을 기반으로 되어 있습니다. @state 다음 예제 list 에서 Foo 모듈은 React의 공유 state 가 아니며, 변경된 위치에서 React 컴포넌트로 자동 업..

프로그래밍/ReactJS, React Native 2020. 8. 13. 01:07

2편 - Reactant 설치 부터 개념 알아보기

https://reactant.js.org/docs/concepts Reactant · A framework for building React applications A framework for building React applications reactant.js.org 설치 reactant-cli를 사용하여 새로운 Reactant 프로젝트를 빠르게 생성하는 것이 좋습니다. reactant-cli 에 대한 자세한 정보를 참조하세요. Reactant · A framework for building React applications A framework for building React applications reactant.js.org reactant-cli 사용 npx reactant-cli init ..

프로그래밍/ReactJS, React Native 2020. 8. 13. 00:45

1편 - Reactant : A framework for building React applications 소개

ReactantA : framework for building React applications 탄생배경 React는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리이지만 React를 기반으로 애플리케이션을 개발하려면 많은 구축 구성과 다른 많은 라이브러리 선택 (React 상태 라이브러리 및 라우터 라이브러리 선택 및 학습 등)을 수행해야합니다. ). 또한 비즈니스 로직이 어떻게 추상화되고 구조화되어야하는지 고려해야합니다. React를 사용하는 모든 사람은 React가 어떻게 구축되었는지에 대한 자신의 인식을 실천하지만 비즈니스 로직 자체에 빠르게 집중할 수는 없습니다. 애플리케이션 비즈니스의 규모가 커짐에 따라 쉽게 이해하고 유지 관리 할 수있는 프레임 워크가 절실히 필요합니다. 그리고..

프로그래밍/ReactJS, React Native 2020. 8. 12. 23:26

타이머 timer 시분초를 localStorage 와 함께 사용

타이머 시분초를 localStorage 와 함께 사용하여 새로고침해도 초기화 되지 않게 하기 https://stackoverflow.com/questions/43134829/wants-javascript-countdown-to-continue-from-where-it-was-even-after-refresh

프로그래밍/JavaScript 2020. 6. 24. 13:39

javascript 의 Template Strings 사용해 보기

javascript 의 Template Strings은 ES6 을 지원하는 브라우저에서 가능합니다. + 연산자를 통한 문자열 조합 처리 var firstName = 'Jake'; var lastName = 'Rawr'; console.log('My name is ' + firstName + ' ' + lastName); // My name is Jake Rawr Template String 을 통한 문자열 조합 처리 (이는 ES6 을 지원하는 브라우저에서 가능함) var firstName = 'Jake'; var lastName = 'Rawr'; console.log(`My name is ${firstName} ${lastName}`); // My name is Jake Rawr Template Stri..

프로그래밍/JavaScript 2020. 6. 19. 12:32

javascript 의 == (or !=) 보단 === (or !==) 연산자를 사용하자.

자동적으로 형변환을 해서 비교해야 할 부분이 있다면 == (or !=) 를 사용합니다. 단, === (or !==) 연산자를 사용하면 어떤 형변환을 수행하지 않습니다. 따라서 성능측면으로 보면 == (or !=) 보다는 === (or !==) 연산자가 더 좋죠. 그리고 == (or !=) 지시자는 형변환을 하므로 생각치도 못한 결과값을 아래와 같이 초래 할 수 있으니 가급적 === (or !==) 의 지시자를 사용하는 것을추천합니다. [10] == 10 // is true [10] === 10 // is false '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is tru..

프로그래밍/JavaScript 2020. 6. 19. 12:25

웹브라우저의 image 캐시(cache) 를 javascript 로 해결하는 방법

html 내부에 이미지가 존재하는데 브라우저 캐시로 인해 동일한 이미지명을 새로운 이미지로 변경할때는 캐시로 인해 반영되지 않습니다. 이를 위해서 뒤에 파라미터 넣어서 항상 서버로 부터 이미지 경로를 호출해서 바인딩 하는 방법은 아래와 같이 간단하게 스크립트로 할 수 있습니다. jQuery $(document).ready(function () { $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() }); }); Javascript var nods = document.getElementsByClassName('NO-CACHE'); for (var i = 0; i < nods.length; i++)..

프로그래밍/jQuery 2020. 6. 18. 12:55

jQuery 로 다중의 textarea 의 값 일괄 변경하기

jQuery 로 다중의 textarea 의 값 일괄 변경하기 Replace multiple strings within textarea with jQuery I have a working code that replaces multiple strings within a textarea. However it only replaces strings that are written onLoad in my textarea. I want to paste some text into the textarea and rep... stackoverflow.com js $(".change").click(function() { var dictionary= { "Schwarz":"#000000", "Braun":"#6F3E18", ..

프로그래밍/jQuery 2020. 6. 15. 09:43

d-day 를 설정하고 현재시간을 비교하여 카운트다운

d-day 를 설정하고 현재시간을 비교하여 카운트다운을 하는 소스 참고사이트 https://www.fome-job.com/board/board_list.php?code=bbs_contents2 2020 중견기업 온라인 일자리박람회 LOGIN 로그인/가입은 직감앱 서비스 회원 계정을 이용합니다. www.fome-job.com

프로그래밍/JavaScript 2020. 6. 9. 15:39

React.js 의 class 방식과 function 방식 비교 (react hook)

React.js 의 Class 사용방식과 Function 을 사용한 hook, custom hook 이렇게 3가지 방식을 비교한 코드입니다. 작동은 전부 동일합니다. props 를 통해 300 값을 전달하여 카운팅 -1 을 1초마다 작동합니다. 버튼 onclick 을 통해 + 10 만큼 추가 됩니다. App.js import React, { Component } from 'react'; import './App.css'; import { Countdown } from './countdown' import { CountdownClass } from './countdownClass' import { CountdownWithUseInterval } from './countdownWithUseInterval' ..

프로그래밍/ReactJS, React Native 2020. 5. 28. 02:22

django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module

django에서 제공하는 MySql 연동 드라이버 모듈은 3가지가 존재합니다. 1. MySQLdb - 제일 안정된 드라이버, python3은 지원하지 않습니다. 2. Mysqlclient - MySQLdb를 개선한 패키지, Python3.3 이상의 버전도 지원하고있음, 장고에서 추천합니다. 3. MySQL Connector/Python - MySQL 개발사 오라클에서 제공하는 드라이버 입니다. 하지만 간단히 사용하기가 수월치 않습니다. PS C:\Python34\djangno-sample\todoSubject> python manage.py runserver Watching for file changes with StatReloader Exception in thread django-main-thread..

프로그래밍/PYTHON 2020. 4. 8. 17:02

파이션 - 학생 성적 처리프로그램(Sqlite3 적용)

windows 에 sqlite3 를 설치해서 이를 dictionary 에 담아 성적을 관리하는 시스템입니다. 주현님의 블로그(아래 링크있음) 의 "Python - 학생 성적 처리프로그램" 에서 sqlite3 를 적용시킨 것 말곤 수정한 내용은 없습니다. sqlite 를 적용한 이유는 종료하게 되면 저장했던 내용들이 없어져서 이를 보관하는 방법 중 txt 파일 또는 db 인데, 무료인 sqlite 경량 database 를 적용해 봤습니다. import sqlite3 db=sqlite3.connect('students.db') #sqlite3 students.db #create table student(name text, korean int, english int, math int, score int, av..

프로그래밍/PYTHON 2020. 4. 8. 15:24

react 생성시 public, src,and scripts folder 생성 안될 경우

react 생성시 public, src,and scripts folder 생성 안될 경우 전역으로 create-react-app 을 전부 삭제하고 재설치하는게 답이다. 아래 1,2,3 순서대로 실행하면 잘 됩니다. https://github.com/facebook/create-react-app/issues/8088 public, src,and scripts folder not created while installing react-app · Issue #8088 · facebook/create-react-app npx version: 6.13.2 node version: 12.13.1 npm : 6.13.2 Created a react-app using: npx create-react-app my-app..

프로그래밍/ReactJS, React Native 2020. 3. 17. 15:55

Vanilla JS & MVC 로 todo 리스트 구현

자바스크립트를 vanilla js 를 통해 mvc 형식으로 구현한 예제이다. 만드신 분 멋짐.~ index.html index.css @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); * { /* border: 1px solid #000; */ position: relative; box-sizing: border-box; } :root { --color-primary: #d3cce3; --color-secondary: chocolate; --color-font-dark: darkred; --color-font-light: #eee; } body { margin: 0; min-height: 100vh; background: radial-gra..

프로그래밍/JavaScript 2019. 12. 24. 00:03

requireNativeComponent: "RNCWebView" was not found in the UIManager

requireNativeComponent: "RNCWebView" was not found in the UIManager /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import WebView from 'react-native-webview'; const App: () => React$Node = () => { return ( ); }; export default App; 실행할 경우 webview 에 대해 제대로 설치가 안되어 실행이 되지 않은 에러 구문입니다. 오류가 발생할 경우, 아래와 같은 절차로 mac 의 터미널에서 실행하..

프로그래밍/ReactJS, React Native 2019. 11. 5. 00:50

모바일 웹에서 카카오맵 앱 호출하여 띄울려고 할 경우

모바일 웹에서 카카오맵 앱 호출하여 띄울려고 할 경우 스크립트 코드 (function () { /** * 사이트 네임스페이스 초기화 */ var initNamespace = function() { if (typeof window.lddi === 'undefined') { window.lddi = { util: {}, siteCode: {} }; } }; var AppLink = { aosUrl: 'intent://scan/#Intent;scheme=kakaomap;package=net.daum.android.map;end', iosUrl: 'http://itunes.apple.com/app/id304608425', customSchemeMain: 'kakaomap://gate?page=a0137', go..

프로그래밍/JavaScript 2019. 10. 11. 18:42

chrome push 의 알림 클릭시 특정 url 이동시키기

chrome 에 push 를 전송하고나서 알림이 뜨면 이를 클릭할 경우 특정 도메인 주소로 이동하는 방법을 구현한 스크립트입니다. self.addEventListener('notificationclick', function(event) { let url = 'https://example.com/some-path/'; event.notification.close(); // Android needs explicit close. event.waitUntil( clients.matchAll({type: 'window'}).then( windowClients => { // Check if there is already a window/tab open with the target URL for (var i = 0;..

프로그래밍/JavaScript 2019. 9. 10. 13:23

clusterize.js Tiny vanilla Js 플러그인, 대용량 data를 쉽게 table 형태로 보여줌.

https://clusterize.js.orghttps://codepen.io/thdoan/pen/NgqmVG Tiny vanilla JS plugin to display large data sets easilyTiny vanilla Js 플러그인 라고 불리며, 대용량의 데이터를 쉽게 table 태그에 보여줍니다. jQuery 를 사용하지 않아 느리진 않은듯 싶습니다. 공식사이트 주소는 https://github.com/NeXTs/Clusterize.js 입니다. body { font: normal 16px/1.2 Calibri, sans-serif; } .clusterize table { width: 100%; border: 1px solid #000; border-collapse: collapse; ..

프로그래밍/JavaScript 2019. 9. 2. 01:39

javascript 로 page 별 timeout 설정하여 로그아웃 강제시키기

https://www.c-sharpcorner.com/forums/user-specific-session-timeout-in-asp-net javascript 로 page 별 timeout 설정하여 로그아웃 강제시키기 var logoutUser = false; var timeoutHnd = null; var logouTimeInterval = 15 * 60 * 1000; // 15 mins here u can increase session time function onuser_activite() { if (logoutUser) { ; } else { ResetLogOutTimer(); } } function OnTimeoutReached() { logoutUser = true; alert("You hav..

프로그래밍/JavaScript 2019. 8. 30. 11:31

jQuery after, insertAfter & before, insertBefore 알아보기

jQuery after, insertAfter & before, insertBefore 메 소 드 내 용 after() 지정한 요소 뒤에 새로운 요소를 삽입 A.after(B) - A 뒤에 B를 추가 insertAfter() 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B - B 뒤에 A 를 추가 before() 지정한 요소 시작 부분에 내용을 삽입 A.berfore(B) - A 앞에 B를 추가 insertBefore() 지정한 요소 시작 부분에 내용을 삽입 A.insertBefore(B) - B 앞에 A 를 추가 DOCTYPE html> Result Greetings Div #1 Div #2 Div #3 Div #4 $(document).ready(function() { $('#one..

프로그래밍/jQuery 2019. 8. 28. 18:11

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 ..

프로그래밍/ReactJS, React Native 2019. 8. 21. 01:23

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..

프로그래밍/VueJS 2019. 8. 1. 02:52

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 = [ ..

프로그래밍/jQuery 2019. 6. 28. 17:21

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는 인증, 저장, 테스트 및 데이터베이스와 같은 다양한 기능과 서비스를 제공 할 수 있습니다. 그러나이 게시물에서는 파이어베이스를 사용하..

프로그래밍/ReactJS, React Native 2019. 6. 22. 03:04

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..

프로그래밍/ReactJS, React Native 2019. 6. 22. 01:49

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..

프로그래밍/ReactJS, React Native 2019. 6. 22. 01:27

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..

프로그래밍/jQuery 2019. 6. 8. 02:21

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 ..

프로그래밍/JavaScript 2019. 5. 10. 16:08

심재운 블로그

프로그래밍 → (213)건