본문 바로가기

JavaScript

(6)
[React] React Datepicker 시간 선택 커스텀 조건은 다음과 같다 - 예약 시간은 9:30-5:30 사이에 결정 (임시) - 사용 시간은 최소 30분에서 최대 2시간 * 즉, 5:00 시작이라면 5:30까지 사용 가능 정리하면, 종료 시간의 최대값은 시작 시간의 2시간 이후로 하되, 5:30을 넘어가면 안된다 React Datepicker crafted by HackerOne reactdatepicker.com 다행히도 React Datepicker의 공식문서(?)는 매우 친절해서, 수십 가지 경우의 수에 맞는 예제를 볼 수 있었다 결론적으로 구현한 코드는 다음과 같다 (SDatePicker는 DatePicker를 커스텀 한 것이고, 한글화 및 set(get)Hours 등의 함수들은 import해주면 된다) const ReserveMain = () ..
[React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리) 📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 날짜를 선택하면 Input에 해당 날짜가 입력될 수 있게 구현하고 싶었습니다. 캘린더를 일일이 구현하기에는 많은 시간이 걸릴 거 같아서, 리액트 캘린더 관련 라이브러리를 찾아보던 중에 react-datepicker라는 라이브러리를 발견했습니다. 지금껏 공부하면서 캘린더 관련해서는 처음이기 때문에 알게 된 내용을 정리하려 합니다. 1. react-datepicker react-datepicker는 리액트에서 달력을 매우 간단하고 재사용이 쉽게 가능하게 만들 수 있게 한 라이브러리입니다! npm 사이트의 주간 다운로드 횟..
[jQuery] 자식 요소를 찾는 children() , + find() jQuery를 사용하여 특정 선택자를 기준으로 자식 요소들을 어떻게 찾을 수 있을까? --> 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용 예시)) 다음과 같은 DOM이 있는 경우 첫번째 두번째 1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때 --> children() 사용 $('ul').children('li'); // return 'li' 배열(li 두개) // 첫번째 li를 찾을때 $('ul').children('li:eq(0)'); /return 첫번째 li 2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때 --> find() 사용(children은 자식 태그까지만 찾을 수 있다)..
[spring] 파일다운로드 구현 개발환경 Eclipse spring, egovFrameWork Tomcat 8.5 oracle 11g 첨부파일을 클릭하면 파일 다운로드가 자동으로 진행될 수 있도록 처리해보겠습니다. 초급 개발자의 이론이므로 간단한 참고만 부탁드립니다. 1. 첨부파일 표출 - 게시판 View 페이지 ${post.title} ${post.writer} &nbsp|&nbsp ${post.dateWrite} ${post.content} 첨부파일 ${file.filenameReal} ${file.fileSize}Byte 게시판에서 파일 다운로드가 필요한 View페이지 입니다. View페이지로 왔을 때, 이 게시물에 대한 파일 목록을 나타내었습니다. 첨부파일을 클릭하면 downloadFile([파일이름])메소드가 실행되어 파일 다..
[JavaScript] Converting circular structure to JSON(json 형태의 배열 로그 찍기) 해석하자면, 선회하는 구조를 JSON으로 바꾸려고 해서 나는 에러. 모르는 객체가 어떤 값을 담고있나 찍어보려고 하다가 이런 에러를 발견했다. JSON.stringify로 해봤는데 위의 에러가 나와서 선회하는 구조니까 배열인가 싶었다. for문으로 돌리면서 json형태로 바꿔주면 console을 찍을 수 있지 않을까라는 생각이 들었다. 1 2 3 4 // 에러가 나는 객체가 trNode라고 한다면, for (output in trNode){ console.log("노드 값: "+JSON.stringify(output)) } Colored by Color Scripter cs 위와 같이 콘솔을 찍어보니, 잘나온다. 출처 : https://zorba91.tistory.com/246
아이폰에서 사용 못하는 정규식( /\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g ) 돈(,) 표시 // 제목 관련내용은 =========== 표시 밑부터 입니다. 안드로이드 폰에서 문제없이 작동하던 기능 해보고 다했다 짝짝짝 하고 끝냈는데 아이폰에서 동작이 안된다고 뭐라고 한소리 들었다*(테스트용 아이폰을 주던가ㅡㅡ..) 보통 이런식으로 펑션을 쓸텐데 $('select').change(function () { alert('you changed this'); }); 이런식 혹은 Uncaught TypeError: $(...).live is not a function $('select').live('change',function () { alert('you changed this'); }); 이런식으로 사용하면 된다고 한다. $('select').bind('change',function () { aler..