일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- elasticsearch
- Design Patterns
- redis
- it
- AWS
- laravel
- Web Server
- tool
- db
- MySQL
- java
- jsp
- linux
- IntelliJ
- devops
- jenkins
- Git
- 요리
- 맛집
- JPA
- javascript
- Oracle
- ubuntu
- ReactJS
- springboot
- Spring
- Gradle
- php
- Spring Boot
- docker
- Today
- Total
목록javascript (57)
아무거나
Image
Jquery Ajax 통신 중 로딩 바 만들기 1. Ajax 요청 시 마다 각각 처리하는 방법 - beforeSend 에서 로딩바를 생성하고 complete에서 로딩바를 해제한다 - 아래 경우 마우스 커서를 변경하는 방식을 사용했으나 상황에 따라 변경하면 되겠다 $.ajax({ url: URL, dataType: 'json', type: 'POST', data: { //data }, beforeSend: function() { //마우스 커서를 로딩 중 커서로 변경 $('html').css("cursor", "wait"); }, complete: function() { //마우스 커서를 원래대로 돌린다 $('html').css("cursor", "auto"); }, success: function(dat..
(function($){ $.fn.extend({ fullPopupOn : function(opt) { ele = this; ele_w = this.width(); ele_h = this.height(); if(opt){ if(opt.width){ ele_w = opt.width; this.css('width',ele_w); } if(opt.height){ ele_h = opt.height; this.css('height',ele_h); } } marginleft = (ele_w/2)*(-1); margintop = (ele_h/2)*(-1); html = ""; $('body').append(html); this.css({'position':'fixed','left':'50%','top':'50%','..
해당 소스는 브라우져 주소창 url에 파라메터 정보가 다 있어야 된다. 주소창 url을 파싱해서 파라메터 정보를 가져오기 때문.
$('#discription').on("keyup",function(){ var byteTxt = ""; var byte = function(str){ var byteNum=0; for (i=0; i 127 ) ? 2 : 1; if(byteNum 1000) { console.log('--------------------'); console.log(byteTxt); console.log('--------------------'); alert("1000자 이상 입력할수..
"==" 연산자는 피연산자가 서로 다른 타입이면 타입을 강제로 변환하여 비교한다. 그리고 값을 변환하여 비교하는 규칙은 보잡하고 외우기도 쉽지 않다. 따라서 javascript에서 동등성 비교시에는 "===" 연산자를 사용하는게 좋다 '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true
Redux 리덕스는 상태관리 라이브러리이다. 리덕스는 우리가 만드는 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 아래 그림을 참고하자. 왼쪽은 Redux를 적용하지 않은것이고, 오른쪽은 Redux를 사용한것이다. 위의 이미지의 왼쪽 그림에서 만약 A에서 B로 데이터가 변경되거나 렌더를 다시해야 될 때 과정은 화살표 방향처럼 연결되어 있는 다른 컴포넌트들에게 상태가 전달된다. 이러한 나뭇가지식 관리를 하게 된다면 향 후 관리범위가 많아져서 골치아픈 상황이된다. 이러한 부분을 개선하고자 Redux를 사용하게 된 것이다. Redux는 Applicat..
Typescript with React + Redux 프로젝트 생성 먼저 타입스크립트 기반 프로젝트를 생성 create-react-app react-typescript-redux-example-1 --scripts-version=react-scripts-ts // 실행방법 cd react-typescript-redux-example-1 yarn start 원활한 개발 환경을 위하여 tslint 설정값을 수정하자. [tslint.json] { "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts"..
React-Router React-Router란 특정 URL로 유저가 접근했을 때, URL을 해석하여 기존에 개발자가 선언한대로 요청한 URL에 알맞는 React Component를 렌더링해서 보여주는 역할 Facebook 공식 라이브러리는 아니지만 React 관련 Router 라이브러리 중에서는 가장 많이 사용 React Router V4 React Router의 최신버전 React Router v3, 그 이하와는 API가 다름 V3도 여전히 유지보수 진행중 대부분의 동작이 React Component로 이루어짐 React Router 설치하기 전에.. 기존에 create-react-app이 설치되어있어야 한다. create-react-app . --scripts-version=react-scripts..
Component Props, State Props 컴포넌트 외부에서 컴포넌트로 넣어주는 데이터(함수도 가능) 컴포넌트 내부에서는 자신의 props를 변경할 수 없다. 물론 돌아가면 가능은 하다. 컴포넌트 외부에서 props 데이터를 변경하면, render가 다시 호출된다. State 컴포넌트 내부의 데이터 클래스의 프로퍼티와는 다르다. 프로퍼티는 변경한다고 render가 호출되지 않는다. 생성자 혹은 프로퍼티 초기 할당으로 state를 초기 할당 해줘야 한다. 내부에서 변경을 하더라도 setState 함수를 이용해야 render가 호출된다. 초기 세팅시 주의할 점(state 초기 할당 관련) [index.tsx] import * as React from 'react'; import * as ReactD..