https://react-anyone.vlpt.us/ - 리액트를 간략하게 정리해둔 사이트 누구든지 하는 리액트 · GitBook 누구든지 하는 리액트 이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행 react-anyone.vlpt.us https://codesandbox.com - 별도의 환경 구성을 하지 않고 리액트 테스트를 할 수 있는 사이트 CodeSandbox: Online Code Editor and IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes c..

리액트를 가장 단순하게 한 단어로 표현하고자 하면 "바꿔치기" 라고 설명할 거 같다. (변화 노노...! 그 대신에 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들자..!) 기존의 view 를 변화시킬 때 일련의 과정, DOM 에서 어느 부분 인지를 찾고 그 부분에서 어느 요소가 어떻게 변했는지를 알아보고 이를 변경하고 하는 등의 과정들을 생각하면서 이를 어떻게 바꿔줘야 하는가 등의 고민을 하기보단 React 라이브러리를 통해 그냥 통체로 변화된 view 로 갈아치울 수 있기 때문이다. 그런데 웹 브라우저 환경에서 (수 많은 요청들이 오고가는 상황에서..) 이렇게 통체로 view를 갈아치우기엔 엄청난 리소스가 필요하며 이것을 가능하게 한다 한들 브라우저의 성능저하, pc의 과부하 등의 문제가 있을 수 있..

현재의 웹 상태는 단순히 웹 이라기 보단 하나의 웹어플리케이션이라 불리는 상황. 기존의 프론트앤드 언어를 사용하여 이를 구현 할 경우( javascript, jquery, etc .. ) 작업의 효율성 및 코드의 유지보수 차원에서 번거로움이나 불필요한 자원 낭비가 있을 수 있기에 이를 해결하기 위해 프론트엔드 라이브러리가 등장하게 되었다고 한다. 아래는 자주 쓰는 프론트엔드 라이브러리 라 하며 간략하게 설명지어 본다. 1. Angular - 다양한 기능이 내장되어 있다. http client, router, 다국어 지원, 공식 라이브러리 지원 등 - 만들어진지 오래되엇으며 사용률도 어느정도 있는 편 - typescript 를 기본으로 함 2. React - components 라는 개념을 메인으로 하는 ..

ime-mode:상태값 으로 한글 기본을 설정할 수 있음. auto : 기존 값 normal : 기본 값 active : 활성화. IME기본 설정 언어(한글로 되어있으면 한글)로 입력됨. inactive : 비활성화. 영문이 기본으로 입력됨. disabled : 한/영 전환키를 사용해도 영문으로만 입력됨.

리액트를 시작해보자..! 리액트 공식 사이트 • https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org • 한글 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 강의 • 학습 블로그 : https://velopert.com/reactjs-tutorials [React.JS] 강좌 목록 | VELOPERT.LOG velopert.c..

react 공부 중 정리해두면 좋을 거 같아 옮겨적네요.https://github.com/facebook/prop-types 에서 더 자세한 정보를 확인할 수 있습니다. 1. PropTypes 종류 array : 배열 arrayOf (다른 PropType) : 특정 PropType으로 이뤄진 배열을 의미함 - (ex) arrayOf(PropTypes.number) 는 숫자로 이뤄진 배열. bool : true or false func : 함수 number : 숫자 object : 객체 string : 문자열 symbol : ES6의 Symbol node : 렌더링할 수 있는 모든 것 (숫자, 문자열, 혹은 JSX코드. children도 node PropType임) instanceOf(클래스) : 특정 클..

다른 방법도 있는 거 같아 정리해봐요 [소스] var maskingUtil = (function() { return { maskingSocialNumber: function(value) { if (value) { var regex = /(\d{6})([\s|-]?)(\d{7})/gi; var result = value.replace(regex, '$1$2*******'); return result; } }, maskingDriverLicense: function(value) { if (value) { var regex = /(\d{2}|\D{2})([\s|-]?)(\d{2})([\s|-]?)(\d{6})([\s|-]?)(\d{2})/gi; var result = value.replace(regex, '$..

최근 개인정보 마스킹과 관련된 업무를 진행한김에작업했던 내용을 정리해보고자 합니다. * 정규식 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D* 정규식 검토 사이트 : https://regexr.com/ // null 체크 checkValueNull : function (str) { if(typeof str == "indefined" || str == null || str == "") { return true; } else { return false; } }, // 마스킹 maksMaskingValue : function (str) { var preMaskingData = str; ..

게시물 검색 시 문이 안 먹히게 하는 방법입니다. 등의 항목들이 들어왔을 경우 태그를 문자열로 바꾸어 작동이 안되게 하는 방법이네요. /** * XSS 공격 방지에 대한 문자 변환을 한다. */ onGetEscapeXSS : function (inputText) { var targetText = inputText; if (targetText != '' ) { var source = ["&", "", "\"", "'", "/", "(", ")", "%", "-"]; var target = ["&","",""","&#39;","/","(",")","%","-"]; for(var i = 0; i < source.length; i++) { targetText = targetText.replace(sou..

document.location.href.substring(document.location.href.lastIndexOf("/") + 1, document.location.href.length); 를 사용하면 요청 url의 호출 ip, port, 경로 를 제거한 값을 알 수 있다.