반응형 React,Node,JQuery,js54 [javascript] Json Key 가져오기 #keys #getOwnPropertyNames JS 의 json key 가져오기 Object.keys() var jsn = { a : 'hello~', b : 'bryan' }; var keys = Object.keys(jsn); console.log(keys) ["a", "b"] Object.getOwnPropertyNames() var jsn = { a : 'hello~', b : 'bryan' }; var keys = Object.getOwnPropertyNames(jsn); console.log(keys) ["a", "b"] 비표준 브라우저 호환 ( explorer 9 이하 ) var jsn = { a : 'hello~', b : 'bryan' }; for( var k in jsn ) { console.log(k + ":" + jsn[k]);.. 2020. 12. 18. [jQuery] Mobile 기기에서 <select> 의 change trigger 되게 하기 iPad 에서 select 의 값, 또는 index 를 변경하기. 아래와 같은 select tag 가 있습니다. RED BLUE GREEN 이 select box에서 색상을 선택하면 어딘가에 색상을 더하고 다시 select box에서 색상을 선택합니다. 웹에서는 잘 됨 이때 아래와 같이 change 이벤트를 사용하겠죠. // select change $('#colorList').change(function(e){ let selectedVal = $(this).val(); addColors(selectedVal); $(this).val(''); }); change 이벤트에서 현재 값을 가져와서 -> 색상추가하는 작업을 하고 -> 현재 선택된 값을 초기화. 그래야 같은 색상을 두번 추가할 수 있겠죠. 문제 .. 2020. 12. 17. [javascript] event 에 $(this) 사용 시 주의 사항. 01 event callback 에 ()=>{} 와 function(){} 의 차이. 아래와 같은 select box 가 있을 때, aa bb change event 를 설정 하려면 $('#classLabels').change(함수) 를 사용합니다. // function(){} 사용 $('#classLabels').change(function(){ let selectedVal = $(this).val(); $(this).val(''); alert(selectedVal); }); function(){} 을 사용했을 때 $(this) 는 를 잘 찾습니다. 하지만 아래와 같이 ()=>{} 를 사용하면 // ()=>{} 사용 $('#classLabels').change(()=>{ let selectedVal = $(.. 2020. 12. 15. [jQuery] jquery selector (예제 多) jQuery Selector jQuery DOM 탐색 jQuery select 기본 종류 표현 All $('*') ID $('#id') Element (Tag) $('elementName') class $('.className') multi $('tag, tag1, tag2') 예제 공통적으로 사용할 html, css 소스 입니다. jsfiddle.net 에서 테스트 합니다. fiddle meta 에서 jquery 와 bootstrap css 를 추가(+) 시킵니다. HTML Login If you have an account with us, please log in. LOGIN remember Forgot your password? CSS body { background-color:gray; } 위의 .. 2020. 11. 12. [js] Javascript online editor javascript online editor JSFiddle - Code Playground jsfiddle.net Create a New Pen ... codepen.io ↑↑↑↑↑↑ 위에 두개중 하나를 사용하세요. ↓↓↓↓↓↓ 아래는 이제 비추비추 chrome.google.com/webstore/detail/javascript-editor/enhkeonpomkliaedmafeniofidolfmdd 위 링크를 클릭해서 chrome 에서 확장 추가를 합니다. 아래와 같이 추가되었습니다. 클릭~ 테스트 해보는데... ES6 에 추가된 arrow function 을 지원하지 않네요...OTL 이건 못 쓰는.. 2020. 11. 5. [NPM] npm install EEXIST: file already exists 해결하기 npm install eexist file already exists git clone 후에 npm install 을 하는데, EEXIST : file already exists.. 어쩌고 오류가 뜹니다. 오류내용엔 이미 사용중이다 라고 해서 덮어쓰기를 해보려고 npm install --force 를 해봐도 마찬가지고 권한 문제라는 내용도 있어서 cmd 창을 관리자 권한으로 실행해서 npm install 을 해도 마찬가지였습니다. Solved Project 내 node_modules 폴더 삭제 npm install npm audit fix 그리고 실행해 봅니다. npm start 잘됩니다. 2020. 7. 23. [Atom] 아톰 설치 HTML5, CSS3, JavaScript, PHP등 무료 에디터 Package의 쉽운 설치 자동완성 기능 코드 색상도 package 로 변경 가능 Html 포멧 자동 정렬기능, 태그 자동 닫기 텍스트 세로로 드래그 선택 git, github 등 Version control 기타 등등 아톰 공식 사이트로 이동해서 다운받습니다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you buil.. 2020. 6. 26. [React] Copy to Clipboard 사용 React 에서 Copy to Clipboad 쓰기 간단하게 라이브러리 설치해서 쓰면 됩니다. $ npm install --save react react-copy-to-clipboard 사용 방법 import { CopyToClipboard } from 'react-copy-to-clipboard' render() { const url = window.location.href; // url 복사 Copy URL to the clipboard } onCopy event 도 있습니다. this.setState({copied: true})}> codepen demo : https://codepen.io/nkbt/pen/eNPoQv?editors=0010 2020. 4. 3. [React] 이미지 tag 에서 Public 폴더의 이미지 사용하기 React Public 폴더 이미지 경로 public 폴더에 copy.png 라는 이미지가 있을 때 react.js 파일에서 2020. 4. 3. [React] Nginx 배포 시 하위 Route 에서 404 에러 날때 React 개발 시 잘 됐는데 nginx 로 배포했는데 root index는 잘 나오는데 단순한 localhost/login 이런것도 404 로 나올 때 우선 봐야할 게 nginx.conf 에서 try_files 살펴봐야 합니다. server { listen 80; localhost / { root /app/build; index index.html; try_files $uri $uri/ /index.html; } } 저의 경우엔 try_files 설정만 넣으니까 잘되네요. 2020. 4. 3. 이전 1 2 3 4 5 6 다음 728x90 반응형
