kasumil의 코딩 공작소

원래는 이분 코드를 썼으나 나에게 맞지 않아서 수정하였다. https://wooncloud.tistory.com/26#comment21335878 [자바스크립트] Date Range Picker : 기간 날짜 라이브러리 웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by w wooncloud.tistory.com $(function () { $('#dates').daterangepicker({ "locale": { "format": "YYYY-MM-DD", "separator": " ~ ", "applyLabel": "확..

이전에 리액트에서 해당 기능을 사용한 적이 있는데, 그당시는 너무 어려웠으나 지금은 너무 쉽다. https://kasumil.tistory.com/67?category=875765 [위코드] TIL(Today I am Learned) -31(기업협업)(DatePicker 완성) - 오늘의 할일. 코드 리팩토링. 기능 구현 상담 후 수정할 것 있는지 확인 후 merge할 것. -코드 리뷰 3일간 날 괴롭히던 datepicker의 기능을 대부분 구현했다. 기존에 하드 코딩으로 2019를 표시했던 kasumil.tistory.com 특히나 jquery용 라이브러리라 자료도 많고 너무 편리하다. 이걸 리액트로 만들다보니 엄청 고생했던 기억이.. ㄟ( ▔, ▔ )ㄏ 다만, 단점으로는 cdn이 잘 안먹혀서 ui c..

아까전에 TIL을 다 쓰고 잠자러가기전에 조금만 더 만져보기로 했는데, 이게 왠걸 바로 해결. 바로 해당값에 직접 접근하려고 했던 것이 문제였다. 달력창을 호출하면서 아무 생각없이 조물딱 거리다가 불현듯 생각이 났는데, 처음에는 달력을 호출해서 나가도 안꺼지는건가 했는데, 마우스를 달력 선택범위 밖으로 꺼내보니 잘 작동하더라. 즉, 마우스 이벤트는 정상적으로 작동되고 있었고, 단지 날짜를 클릭했을 경우 꺼지지 않는 게 문제였다는 것을 인식하였다. 이를 해결하기 위해서 datepicker 안에서는 직접 접근이 어렵기때문에 이를 해결하기 위해서 useEffect를 만져보았다. 이전에 작성한 내용에서 해당 날짜의 변화값을 인지하는 useEffect에서 해당 내용을 추가하였다. //날짜 형식변환기, 마우스 이벤..

- 오늘해야할 일. 없음. 쉬는날인데 뭘해야하니? 라고 생각했지만, 놀것도 없어서 코딩을 붙잡고 있다. 낮잠도 잤고 말이다 ㅎㅎ 오늘의 노동은 useEffect에서 다운로드 기능을 구현해보았다. 그냥 인터넷에서 찾아보니 a태그로 구현해보라길래 그대로 가져와봤다. 그로인한 문제점. 아직 구현해보지 않았기에 잘 작동할 것인가? 라는 의문. sessionStorage의 저장되어 있는 값들을 가져오는 것을 선언했는데, console창에서 사용되었지만, 선언되기전에 사용되었다는 경고문이 뜨더라.. 이를 어찌해야 해결할 수 있는지 여부와 다운로드 기능이 과연 잘 작동할 것인가? 라는 의문이 생김. const SubmitQuery= () =>{ useEffect(() => { const comp = sessionSt..

- 오늘의 할일. 코드 리팩토링. 기능 구현 상담 후 수정할 것 있는지 확인 후 merge할 것. -코드 리뷰 3일간 날 괴롭히던 datepicker의 기능을 대부분 구현했다. 기존에 하드 코딩으로 2019를 표시했던 것을 이제 자동으로 시간이 지나도 알아서 작동되게 구현하였고, WRDS처럼 2007년 페이지를 기준으로 했던 것처럼, 내가 만든 부분도 13년으로 설정해서 현재는 2007년 내년에는 2008년 내후년은 2009년으로 자동으로 바뀌게 만들었다. 원래 J쿼리로 만들어진 것이라 구현이 매우 빡셌다. 자료도 대부분 J쿼리 전용이라... 이에 참고한 자료가 HackerOne에서 만든 React-datepicker 자료 https://reactdatepicker.com/ React Datepicker..

- 오늘의 할일. React Datepicker 커스텀하기. 남은 포인트 설정하기. DatePicker를 커스텀하는 중. 특정일자로 datepicker를 설정하려고 하는데, jQUERY와 다르게 react라서 헤맸다. 원래는 jQUERY에선 그냥 "2019-12-31"만 적으면 되는데 DATEPICKER는 날짜만 기입되면 안되고, 해당 날짜 앞에 new Date("날짜") 쳐야 작동하는 것.... setStartDate(date)} selectsStart startDate={startDate} endDate={endDate} minDate={new Date("1925-12-31")} maxDate={new Date("2019-12-31")} dateFormat="yyyy-MM-dd" onKeyDown={..