Language 6

[react] timepicker 관련 라이브러리 + 찾아보다 알게된 컴포넌트 공유 사이트

개요 오늘도 즐거운 팀프 코딩 시간.... 현재 작업중인 컴포넌트는 아래와 같은 컴포넌트를 만드는 것입니다. 약속추가 부분의 날짜를 받는 부분을 실제로 구현하려다 라이브러리가 있는지 먼저 찾아보며 봤던 사이트를 공유/기록 하고자 올리게 되었습니다. 본론 https://blog.bitsrc.io/13-react-time-and-date-pickers-for-2020-d52d88d1ca0b 13 React DatePickers and TimePickers for 2020 Useful React components and libraries that save you time when letting users choose their own time. blog.bitsrc.io 여러 사이트를 봤지만 해당 사이트가 ..

Language/Javascript 2022.05.01

[styled-component] react-slick 사용하기 (how to use react-slick)

개요 Carousel을 만드는 과제를 하면서 이것저것 많이 보고 이 정도까지 열심히 만들어봤는데... https://youtu.be/xXTb7uQcSLQ 생각보다 퀄리티가 많이 부족해서 쓰지 않고 react-slick이라는 라이브러리를 사용하였습니다. 이번 포스트에서는 아쉬운 맘을 담아 제가 만들던 코드를 올리고, react-slick의 설치부터 제작까지 진행하며 유용했던 정보, 꼭 알아야할 정보를 적고자 합니다. 본론 1. Carousel 직접 제작 1.1) 도움이 많이 된 글 모음 - Carousel 개념 잡는데 좋았던 글 (1) [JavaScript] 자바스크립트로 캐러셀(Carousel) 구현하기 자바스크립트로 캐러셀 슬라이더 만들기 step-by-step velog.io - Carousel 개념..

Language/Javascript 2022.04.13

[styled Component] Styled Component로 custom dropdown 만들기

개요 오늘도 즐거운 팀프로젝트 기간... 휴학 1년과 이번 한달간 배운게 비등비등한 수준으로 팀에 적응하기 위해 열심히 살고있습니다... 이번 포스트에서 다룰 내용은 styled Component를 이용해 custom component를 만드는 방법입니다. Storybook을 하면서 styled component로 드롭다운을 만드는 업무를 하게 되었습니다. 처음에는 스타일에 custom이 그냥 select와 option으로 하면 금방 끝날 것 같았는데... 역시 오늘도 새벽이네요... 이번 중간고사는 3일 벼락치기만 해도 감사할 정도로 시간이 없어요.... ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 그래서 이번 포스트는 scrollbar를 꾸민 법만 간단히만 적을거고 자세한건 나중에 올라올 저의 팀프젝 github의 src/co..

Language/Javascript 2022.04.11

[자바스크립트] String을 number로 바꾸는 법

개요 이번 해커톤에 나가서 document.getElementById로 datalist에서 선택된 값을 숫자로 받아와야 했습니다... 여러 언어가 섞이고 검색도 잘안되던 날이라 좀 헤맸고 발견한 해답을 기록해두고자 합니다. 본문 1. Number() 간단합니다. String인 값을 Number()로 감싸주면 됩니다. var string = "12"; var integer = Number(string); alert(typeof(integer)); // number 2. parseInt(), parseFloat() Number와 마찬가지로 감싸주면 됩니다. 자세한 내용은 아래 링크를 참고하세요..! https://developer.mozilla.org/ko/docs/Web/JavaScript/Referenc..

Language/Javascript 2021.09.26

[css] label에 vertical-align이 안되어서 (시리즈-찾다가 알게된 정보!)

시리즈 "찾다가 알게된 정보!"는 오류나 막히는 부분에서 왜 안되는가... 찾다가 신박해서 혹은 잊지않으려고 기록해두는 시리즈입니다. 문제 상황 오늘은 동아리 단체 프젝으로 파일선택을 위한 input태그를 label과 함께 써보았는데요.. label에 다른 정보는 다 작동하는데 vertical-align:middle;이 자꾸 작동이 안되더라구요 ㅠㅠ 그래서 사진처럼 "사진 변경하기" 글자가 위로 올라가있어서 몇시간동안 이런저런 짓 다해보다가 그 이유를 알게되었습니다. 해결 과정 오늘도 stackoverflow에서 해결을 해보고자 했습니다. https://stackoverflow.com/questions/1554941/vertical-align-text-in-a-label Vertical Align tex..

Language/CSS 2021.06.30

[JS, JavaScript] document.getElementById()를 이용해 값을 바꾸려했는데 반영이 안됨. (부제 : 생일 Dday 출력하기)

개요 포트폴리오에 생일까지 며칠남았는지 표현하고 싶어서 자바스크립트를 오랜만에 찾아보게 되었습니다. 본론 그리 큰 파일도 아니고, js파일을 따로 많이 사용할 것도 아니라서 이렇게 script 태그를 사용해서 생일 Dday를 출력하려고 했습니다. 생년월일 1999.11.22 javascript로 값을 넣을 때에는 document.getElementById("id명")을 사용해서 넣는다는 게 일단 생각나서 처음엔 위와 같이 코드를 작성하였습니다. 그런데 에러가 떡하니 뜨고 값이 변하지 않길래 서치를 했더니 innerHTML을 넣어줘야 반영이 된다는 결과가 나왔습니다. 그래서 document.getElementById("BD") = birthdayText; 대신 document.getElementById("..

Language/Javascript 2021.04.28