본문 바로가기

자바스크립트54

브라우저 cookie javascript로 쓰는 방법

만료 시간이 되면, 브라우저 디스크에서 만료 시간이 된 쿠키가 자동으로 사라지게 하는 방법을 고민했습니다. expires가 아닌, max-age를 사용해야, 디스크에서 지워지는 것을 확인했습니다. expires옵션을 쿠키 생성할 때 빼도 정상적으로 동작하는 것도 확인했습니다. max-age만 들어가면 됩니다. max-age는 초단위로 입력하면 됩니다. 쿠키 값 변경 수정 덮어씌우기 이미 브라우저에 같은 도메인에 같은 패스에 동일한 쿠키명이 있는경우, 아래 처럼 실행하면, 기존에 있던 쿠키 'auth'는 그대로 있고, 같은 이름의 'auth'쿠키가 새로 생긴다. domain은 앞에 점이 붙은, .example.com이다. document.cookie = `auth=쿠키값;domain=example.com;.. 2022. 4. 20.

[Highcharts]linechart series

문서 https://www.highcharts.com/docs/chart-concepts/series?_ga=2.264317647.1747863571.1644805038-1869819279.1637734258 dataset에 x축 설정하는 법 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays/ Highcharts Demo - JSFiddle - Code Playground jsfiddle.net 또는 https://jsfiddle.net/vx013nb6/ x축 날짜 입력 dataset 예시 https://jsfiddle.net/qj3jr5.. 2022. 2. 14.

[highcharts] 차트 높이 수정 방법

chartOptions: { title: '', chart: { type: 'gauge', height: 75 + '%', // 👈 높이 설정 퍼센트 // or height: 75 // 👈 높이 설정 px 고정값. // ... }, } 공식 문서 참고 : https://api.highcharts.com/highcharts/chart.height 2022. 2. 8.

[chartjs] legend style 변경

구현 결과 line, bar, pie 모두, 같은 세팅으로 적용 가능 차트 인스턴스 const chart = new Chart(ctx, { type: 'bar', // ... legend: { usePointStyle: true } ) dataset let dataset = { hoverBackgroundColor: [], backgroundColor: [], data: [], pointStyle: 'Rounded', // 👈 원 타입 설정 pointRadius: 1, // 👈 The radius of the point shape. If set to 0, the point is not rendered. }; pointStyle 타입 참고 https://www.chartjs.org/docs/latest/s.. 2022. 2. 7.

node 버전 업그레이드 하는 방법

로컬 환경에서 npm run build 할 때는 잘 되었는데, 테스트를 위한 서버에서 npm run build를 했을 때 npm i를 하는 과정에서 설치 에러가 계속 발생함. node -v로 두 환경의 node 버전을 확인한 결과. 로컬 환경 14.15.4 테스트 서버 환경 8.10.0 테스트 서버 환경에 node 버전을 14.15.4로 변경해 보기로 했습니다. 1. npm 캐시 삭제 npm cache clean -f 2. node 버전 관리 'n' 모듈 설치 npm install -g n 3. n을 사용해서 버전 업데이트 n stable : 안정 버전 n latest : 최신 버전 n lts : lts 버전 n x.x.x : 특정 x.x.x 버전 n 14.15.4 버전 안 바뀌는 문제 업그레이드한 no.. 2021. 10. 21.

[Javascript][업무]파일 업로드 기능 구현하기

업무를 진행하면서 발생한 문제를 해결한 내용입니다. Jquery로 작성된 코드에서 문제가 있었습니다. 같은 파일을 연속적으로 업로드가 안 되는 문제였습니다. HTML과 Javascript 파일 업로드 방법 파일 업로드할 때, 사용하는 HTML 태그 업로드 이벤트를 실행하는 자바스크립트 - change() 사용 // 🛠 pure javascript document.querySelector('#fileUpload').change() => { var sFormData = new FormData(); sFile = document.querySelector('#fileUpload')[0].files[0]; sFormData.append('file', sFile); // 로직 작성 } // 🛠 Jquery $('#.. 2021. 7. 16.

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

안녕하세요. 회사에서 베트남 시니어 개발자 코드를 통해 학습한 내용을 일부 기록한 글입니다. axios를 잘 정리해서 사용한 것 같아서 따라서 사용하고 있습니다. 이 코드를 보고 개발하는 프로젝트는 전부 이렇게 작성해서 사용하고 있습니다. 이 코드의 좋은 점은 다음과 같습니다. - axios 인스턴스를 만들 때 구성 기본 값 설정을 쉽게 해 줄 수 있습니다. - 인터셉트 사용 설정. 구성이 좋았다고 생각한게, core라는 디렉토리에 axios 인스턴스를 생성하는 자바스크립트 파일 1개를 만들었다는 것입니다. 📁 src | +- 📁 api | +- 📁 core +- 📄 index.js // 👈 axios 인스턴스를 만들고, 인스턴스를 내보냅니다. +- 📄 main.js // 👈 axios 인스턴스를 imp.. 2021. 7. 13.

[Javascript] export와 export default의 차이점

저도 원래 사용하고 있는 문법이었습니다. 그런데 업무 중에 시니어 개발자 코드에서 export와 export default를 하나의 javascript 파일에서 동시에 사용하는 것을 보고, 언제 export {}를 쓰고, 언제 export defautl 를 사용하는지가 궁금해졌습니다. 예시로 아래 코드처럼 말이죠. // 📄 index.js const alertData = { alertMessage: '', type: 'error' } export default alertData export {alertData} 차이점 export {} export default named export라고 함. ex) import 무조건 export한 객체 | 함수 이름 개발자가 원하는 이름으로 import 할 수 있음... 2021. 7. 13.

[Javascript] (1)정규식 초 간단 필수 문법 정리-부정그룹

정규식 부정그룹 문법 2021. 5. 17.

[Javascript] (2)정규식 초 간단 필수 문법 정리- 정규식 메서드

정규식 메서드 문자.search(정규식) search 메소드로 문자열에 매칭되는 index 반환하기 search는 첫번째로 매칭된 문자열의 인덱스 번호를 반환한다. 문자.match(정규식) match 메서드는 매칭되는 모든 문자열을 찾아서 그냥 반환한다. const reg1 = /\?/g; const str1 = 'few?few?few?'; 'g'를 빼면 아래처럼만 나옵니다. 문자.replace(정규식, '바꿀 문자'); replace는 매칭된 문자열을 모두 치환해 준다. const reg1 = /\?/g; 특수문자 포함 여부 파악하기 const str = "020-3212-1235"; str.match(/[?!.-]/); 단어 문자 \w = [0-9a-zA-z_] \W = \w의 역집합 참고 : wor.. 2021. 4. 26.

티스토리툴바