반응형

javascript 7

React 환경설정

React 환경 설정 하다가 토나올뻔했다. 우선 내가 이해한 개념부터 React 환경설정에 필요한 요소는 1. node.js : 노드js는 javascript로 만든 버추얼 머신같은느낌? 하는일이 javascript프로그램 모듈 설치관리 실행 뭐 요정도 javascript가 브라우저에서 구동되는게 기본인데 이게 있으면 javascript를 윈도우 프로그램처럼 쓸수있다? 이런느낌이다. 2. webpack : 여러 어플리케이션들의 설정을 모아서 한번에 실행해주고 교통 정리를 해주는 역할 3. babel : 확장이 가능한 스크립트 컴파일러 preset에 모듈을 추가해서 여러가지 언어를 한번에 컴파일 할 수 있다.(ex less react es6 이런거를 한번에 다 컴파일 해준다.) React 환경설정 그러면 ..

javascript 2020.02.14

Dom Element 관리

도큐먼트 = 문서 엘레먼트 = 태그 도큐먼트의 엘레먼트 = xxxxx 글 전부 var rootElement = document.documentElement; 1.셀렉트 관련 Document.createElement()주어진 태그명을 사용해 새로운 요소를 생성합니다. Document.getElementsByClassName()주어진 클래스 이름을 갖는 요소의 목록을 반환합니다. Document.getElementsByTagName()주어진 태그명을 갖는 요소의 목록을 반환합니다. document.getElementById()주어진 ID를 가진 요소의 참조를 반환합니다. document.querySelector()문서 내에서 주어진 선택자를 만족하는 첫 번째 Element를 반환합니다. document.qu..

javascript 2020.02.11

javascript Array(배열) 관리

1. 선언 및 정의 방식 1) let array1 = []; // 빈 array 2) let array1 = ['ㅇㅇ','커컼','뚜뚜']; //값 넣기 2.배열 접근하기 let test = array[0]; 인덱스로 접근 3. 일괄처리 array1.forEach(function(item,inedex,array){ console.log(item); } 4.데이터 빼기 pop,shift,splice 데이터를 배열에서 제외하면서 가져옴 let popdata1 = array1.pop(); //맨뒤 let popdata1 = array1.shift(); //맨앞 인덱스로 제거 array1.splice(index,n개) //인덱스 갯수 인덱스로 제거안하고 넣기 array1.splice(index,0,data); ..

javascript 2020.02.11

dom관련(Document) javascript 함수 자주 쓸만한 함수 모음

1.셀렉트 관련 Document.createElement()주어진 태그명을 사용해 새로운 요소를 생성합니다. Document.getElementsByClassName()주어진 클래스 이름을 갖는 요소의 목록을 반환합니다. Document.getElementsByTagName()주어진 태그명을 갖는 요소의 목록을 반환합니다. document.getElementById()주어진 ID를 가진 요소의 참조를 반환합니다. document.querySelector()문서 내에서 주어진 선택자를 만족하는 첫 번째 Element를 반환합니다. document.querySelectorAll()주어진 선택자를 만족하는 모든 요소의 NodeList를 반환합니다. document.getElementsByName()주어진 이름..

javascript 2020.02.11

드롭존에 dropzone.js 크롭기능 추가 cropper.js 기능

1. 필요 js 1) dropzone.js https://www.dropzonejs.com/ 2) dropzone.css 3) cropper.js https://fengyuanchen.github.io/cropperjs/ 4) cropper.css 두가지 기능을 합쳐서 구현했습니다. 컨트롤러 쪽에서는 MultipartFile file 파라미터로 파일을 받고 json 형식으로 response해주면 됩니다. model.put("link", "http://xxx/xxx.png); //저장된 파일 이미지 경로URL model.put("userFileId", userFileId); //저장된 파일 아이디 model.put("result", true); //target = 드롭존 wrapper jquery객체 $(..

javascript 2019.06.04

dateTimePicker minDate/maxDate 설정

dateTimePicker 페이지 참조 https://eonasdan.github.io/bootstrap-datetimepicker/ $("xxx").datetimepicker({ "format" : "YYYY. M. D" ,minDate : moment().format("YYYY-MM-DD") ,maxDate : moment().format("YYYY-MM-DD") }); 이게 설정 하기가 햇깔리는게 우선 dateTimePicker페이지에 보면 minDate/maxDate는 moment,String,Date형을 지원한다고 써있는데 이게 지원은 하는데 Date형 말고 String형과 moment형은 포멧이 ISO 표준 아래 목록만 받아들이는것같다. Year: YYYY (eg 1997) Year and m..

javascript 2019.05.02
반응형