본문 바로가기

Front-end20

[javascript] bootstrap datepicker 사용 방법 Summary 1. 기본 형태Boostrap CSS+JSDatepicker CSS+JS 날짜 선택: 2. 위치 바꾸기.on 이하 구문으로 활성화가 될 경우 행동에 대해 설정할 수 있다.// datepicker.js$(document).ready(function() { $('#yearpicker').datepicker({ format: 'yyyy', // 날짜 형식: 2025 (yyyy-mm-dd) minViewMode: 2, // 연도 선택 모드 (0=일, 1=월, 2=연도) autoclose: true, // 날짜 선택 시 자동 닫힘 todayHighlight: true // 오늘 날짜 강조 .. 2025. 6. 17.
[javascript] c3.js 사용하는 방법 SummaryGPT 독학 가능 여부 : O1. 기초 사용법2. 다양한 차트 형태 만들기 (data.type)3. 축 만들기 (axis)4. 색상 지정하기 (여러개 - data.colors, 한 개 - color)5. 선 유형 변경6. 범례 (legend) 1. 기초 사용법c3를 사용하기 위해서는 d3가 있어야 한다.bindto: '#chart' 이 부분에서 id 값이 chart인 영역에 해당 차트를 집어넣는다.만약 안에 무엇을 넣어도 차트가 우선순위가 가장 높다. 📊 나의 첫 번째 C3.js 차트 아래와 같이 뜨면 성공이다! 2. 다양한 차트 형태 만들기 - data 안의 type[차트 형태 변경 방법]기존 코드에서 type: '원하는 차트 형태' 로 수정하면 된다. .. 2025. 6. 17.
[JS] 비동기 프로그래밍 Summary 1. 동기 vs 비동기 동기정해진 순서대로 한 번에 한 가지 일만 한다. ( 작업 1 이 다 끝나고 나서 작업 2를 수행하고, 작업 2가 다 끝나면 작업 3을 수행한다. )자바스크립트 엔진은 기본적으로 동기적으로 실행되도록 되어 있다. (default) = "자바스크립트는 싱글 스레드 언어이다." = 자바스크립트는 한 번에 한 가지 일만 할 수 있는 것이 default 이다.비동기작업이 끝날 때까지 기다리지 않고 다음 작업을 실행할 수 있도록 한다.setTimeout 함수는 비동기 함수이다.console.log('1');setTimeout(() => { console.log('2');}, 3000);console.log('3');// output //132 ❓근데 자바스크립트는 동기 .. 2025. 6. 11.
[JS] 배열 요약하나의 객체 요소들을 순회할 때는 for .. in 구문을 사용하고 배열을 순회할 때는 for .. of 구문을 사용한다는 것을 주의하자. 배열을 순회할 때 for .. in 구문을 사용하면 인덱스가 출력된다.예제하나의 객체 요소들을 순회할 때는 for .. in 구문을 사용하고 배열을 순회할 때는 for .. of 구문을 사용한다는 것을 주의하자. 배열을 순회할 때 for .. in 구문을 사용하면 인덱스가 출력된다. let days = ['mon', 'tue', 'wed'];// 추가days.push('thu'); // ['mon', 'tue', 'wed', 'thu']days.unshift('sun'); // ['sun', 'mon', 'tue', 'wed', 'thu']// 제거days.pop.. 2025. 6. 7.