본문 바로가기

JavaScript228

[javascript] 웹 스토리지 (local storage & session storage) 데이터를 저장할 때 우리는 서버 측에 저장할 것인지 클라이언트 측에 저장할 것인지에 대해 선택하게 되는데요. 오늘은 클라이언트 측에 정보를 저장할 수 있는 방법 중에서 브라우저 상에 데이터를 저장하고 사용할 수 있는 웹 스토리지 에 대해 알아보려합니다. 1. 웹스토리지? 웹 스토리지는 HTML5부터 생긴 새로운 기능입니다. (HTML5 지원않는 브라우저인 경우에는 사용이 불가합니다.) 저장 시에는 키-밸류의 형태를 사용합니다. 키는 언제나 String 값인데 참고내용에 따르면, 숫자(int) 등의 값으로 적는다고 해도 저장 시에는 키 값이 자동으로 String으로 변환되어 저장된다고 합니다. 쿠키와 기능은 유사하지만 서버에 전송되지않고, 유효기간도 없습니다. 그리고 쿠키가 최대 4KB인데 반해 웹스토리지.. 2023. 1. 25.
[javaScript] filter()사용하여 커스텀 select 메뉴 검색 기능 만들기. * 이 글은 이전 글인 classList를 사용한 커스텀 select 메뉴만들기 와 이어집니다. 안녕하세요! 오늘은 저번에 이어서 커스텀 select 메뉴를 완성해보도록하겠습니다. 국가같이 많은 양의 선택지가 주어져서 option이 길어지는 경우, filter() 메서드를 통해 검색을 구현해서 유저가 원하는 선택지를 손쉽게 찾을 수 있도록 해보겠습니다. *filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. 그래서 이번에 진행할 내용은 아래와 같습니다. 1. input에 값을 적을 때마다 일치하는 옵션 보여주기. 2. input에 값이 없으면(입력값이 없으면) 모든 옵션들 보여주기. 3.일치하는 값이 없으면 없다고 사용자에게 알려주기. 3.옵션 선택 시 선.. 2023. 1. 11.
[javascript] classList를 사용한 커스텀 select 메뉴 만들기 안녕하세요. 오늘은 classList를 select 메뉴를 커스텀해서 아래와 같이 만들어보겠습니다. 우선 만들고자 하는 커스텀 내용은 1.option들을 클릭시에 볼 수있도록 하게 만들고 2. option 선택 시 선택된 내용이 select에 적용되고(1,2 classList 사용) 3.select 메뉴를 만드는데 내용이 많아 option이 한없이 길어지는 경우, 검색을 통해 찾을 수 있게 만든다. 입니다. 오늘은 이 중 1,2번까지 진행해보겠습니다. 우선 classList에 대해 알아봅시다. classList의 add,remove,replace,toggle을 통해 클래스 값을 수정할 수 있습니다. 사용예제는 아래에 첨부하였으니 자세한 내용은 아래 링크를 통해 참고바랍니다. https://develope.. 2023. 1. 10.
Day.js를 활용하여 날짜 및 시간 조작 Javascript에서는 Date객체를 외에도 시간과 날짜를 편리하게 관리할 수 있는 다양한 라이브러리가 존재합니다. 기존에 가장 많이 사용되던 라이브러리는 Moment.js이지만 현재 더 이상 업데이트를 하지 않는다고 선언한데다 비교적 용량이 크다는 문제가 있습니다. 이러한 단점을 극복하기 위한 다양한 라이브러리가 개발되었으며 오늘은 그 중 하나인 Day.js 사용법에 대해 알아보려 합니다. 라이브러리 용량도 Moment.js대비 약 30배 정도 가벼우며 문법 또한 비슷하여 기존에 Moment.js를 사용했던 경험이 있다면 쉽게 사용할 수 있다는 장점이 있습니다. 좀 더 자세한 사용법을 알고 싶으면 아래의 공식 페이지, 혹은 한국어로 변역된 git 페이지를 참고하시면 됩니다. 공식 홈페이지 https:.. 2023. 1. 1.
[ JavaScript ] Chart.js 라이브러리 사용해서 복합(막대, 라인) 그래프 그리기 안녕하세요, 오늘은 Chart.js 라이브러리를 사용해서 복합 그래프 (Mixed Chart) 를 그려보겠습니다. 이번 포스팅은 12월 17일자로 업로드 된 'Chart.js 라이브러리 사용해서 막대 그래프 그리기' 포스팅과 이어지는 내용입니다. 앞선 포스팅에서는 막대 그래프를 그렸고, 오늘은 그 위에 라인 그래프를 추가하겠습니다. 예제에 나와있는 라인 그래프 옵션 외에도 여러 가지가 있으므로 아래 링크를 참고해주세요. https://www.chartjs.org/docs/latest/charts/line.html Line Chart | Chart.js Line Chart A line chart is a way of plotting data points on a line. Often, it is used .. 2022. 12. 28.
[JavaScript] 별점 드래그 기능 만들기 안녕하세요. 오늘은 회색 별을 드래그 했을 때 노란색으로 채워지는 기능을 만들어 보겠습니다. star.html ★★★★★ ★★★★★ star.css .rating_box { display: flex; } .rating { position: relative; color: #ddd; font-size: 30px; text-align: center; } .rating input { position: absolute; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .rating_star { width: 0; color: #ffc107; position: absolute; left: 0; right: 0; overflow:.. 2022. 12. 21.
[ JavaScript ] Chart.js 라이브러리 사용해서 막대 그래프 그리기 안녕하세요 오늘은 Chart.js 라이브러리를 사용해서 막대 그래프를 그려보겠습니다. Chart.js 는 자바스크립트 차트 라이브러리 중 하나로, d3.js, highcharts 등과 함께 인기있는 라이브러리 중 하나입니다. 설치 방법: - CDN 사용 - npm npm i chart.js 먼저 차트에 표시할 데이터를 준비하겠습니다. 공공데이터포털의 '부산광역시_하수처리시설 월별 평균 수질현황 서비스' 오픈API 데이터를 활용하겠습니다. Fetch API 를 사용해서 http 요청을 보내겠습니다. const serviceKey = "발급받은_본인의_인증키" const url = `http://apis.data.go.kr/6260000/BusanTblSwgqtyStusService/getTblSwgqtyS.. 2022. 12. 17.
[ JavaScript ] moment.js 라이브러리 사용해보기 안녕하세요! 오늘은 moment.js를 이용해 javascript에서 날짜를 다뤄보는 방법을 알아보겠습니다. moment.js는 javascript에서 날짜 관련해 많이 쓰이는 라이브러리입니다. moment.js를 사용하기 위해 npm 또는 cdn 등을 쓸 수 있습니다. 공식홈페이지에서 더 다양한 사용법을 확인해볼 수 있습니다. https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Rel.. 2022. 12. 11.
[javascript] collapsible 테이블 만들기. 안녕하세요! 오늘은 테이블 행 클릭 시 테이블 행에 관한 상세 내용을 확인할 수 있게하는 collapsible table을 display 속성table-row 값을 사용해서 표처럼 표현하여 구현해봅시다. display의 table-row를 사용하면 요소를 테이블의 행(row)처럼 표시할 수 있습니다. 우선 구현 된 모습입니다. 첫번째와 두번째 행 클릭 시 상세내용이 펼쳐져 응시일, 과목, 점수를 나타내는 내부 테이블이 보입니다. 클릭했던 행을 다시 클릭하면 접히는 것을 확인할 수 있습니다. 마치 하나의 행처럼 보이는데 그 안에 또다른 테이블이 들어가져있죠? 등록연도 이름 지역 나이 2022 김철수 경기도 20 김철수 응시일 과목 점수 2022/03/21 토익 880 2022/06/22 HSK 270 20.. 2022. 12. 8.

티스토리툴바