자바스크립트54 [Vue]vue2 + eslint 세팅 module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "eslint:recommended"], parserOptions: { parser: "@babel/eslint-parser", }, rules: {}, }; 2022. 8. 29. [Javascript] new Date 런타임에 따른 타임존 브라우저에서의 Date 객체 parse() 함수, getHour(), setHour() 등의 메소드들은 모두 클라이언트의 로컬 타임존 (정확히는 브라우저가 실행되는 운영체제에 설정된 타임존)에 영향을 받는다. 예를 들어 2015-10-12 12:00:00 같은 문자열은 사파리나 IE의 경우 NaN 을 반환하고, 크롬이나 파이어폭스의 경우 로컬 타임존의 값을 반환하며, 경우에 따라 다른 환경에서는 UTC 기준의 값을 반환하기도 한다. .000Z의 의미 크롬 브라우저 브라우저 런타임에서는 .000Z를 붙이지 않고 new Date()를 만들어야, 타임존 계산 없이 Date 객체를 만들 수 있다. 맥OS 한국 타임존 new Date('2022-08-04T04:00:33.000Z') =>Thu Aug 04 202.. 2022. 8. 19. [Javascript] new Date()에서 48시간 전 날짜 계산하기 2022. 7. 25. [javascript]Object.entries(객체) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries Object.entries() - JavaScript | MDN Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). developer.mozilla.org Object.entries(객체) 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. 예시 코드 const object1 = { a1: '김치', a2: '불고기' .. 2022. 7. 6. [Javascript ]new Date().getTime() new Date().getTime() millisecond를 반환함. 시간 구하기 new Date().getTime() / 1000 = 초 new Date().getTime() / 1000 / 60 = 분 new Date().getTime() / 1000 / 60 / 60 = 시간 new Date().getTime() / 1000 / 60 / 60 / 24 = 일 2022. 6. 4. [vue + 무한 스크롤] 무한 스크롤 구현 사용 기술 Javascript Intersection Observer(iob) iob는 사용자가 감시하고자 하는 페이지의 요소가 브라우저와 교차되는 정도를 관찰하고, 설정 비율 이상의 교차가 일어났을 때 실행되야 하는 콜백함수를 등록할 수 있는 객체이다. 사용법 const iob = new IntersectionObserver((entries) => { if (entries.isIntersecting) { // 실행 로직 } }, { //options }); 무한스크롤을 구현하면서 고려해야할 사항 1. 마운트될 때 한 번 실행해버리는 경우가 있음. 방법1. entries.isIntersecting === true 인 경우에 실행로직을 작성하면 된다. 2. 다시 위로 올라가면, 중복되서 페이지네이션을 요청.. 2022. 5. 20. [Javascript] 이미지 파일 업로드 구현 결과 참고 개발자를 위한 웹 기술 > Web API > File > 웹 어플리케이션에서 파일 사용하기 개발자를 위한 기술 > Web API > Blob 기능 요구사항 프로필 사진 업로드 기능 이미지 파일을 업로드 후, 업로드한 이미지 미리보기 구현 방법 결정하기 방법1. javascript의 FileReader 객체 FileReader.readAsDataURL() - 엄청 긴, 스트링을 URL로 반환하기 때문에, 속도가 느리다. 방법2. URL.createObjectURL(object) 주어진 객체를 가리키는 URL을 DOMString으로 반환한다. service worker에서 사용 안 됨. 파라미터 object는 File, Blob, MediaSource 객체를 넣을 수 있음 input file up.. 2022. 5. 13. [Javascript] 브라우저 별 UTC GMT * GMT: Greenwich Mean Time 런던 기점, 월링턴 종점으로하는 협셩 시계시 영국 시간 기준 (우리나라보다 9시간 느림) * UTC: GMT임 * 크롬 브라우저 생성한 시간 그대로 Date 객체가 만들어짐. const event = new Date('2022-04-22T00:00:00'); console.log(event); // Fri Apr 22 2022 00:00:00 GMT+0900 (한국 표준시) console.log(event.toUTCString()); // Thu, 21 Apr 2022 15:00:00 GMT * 사파리 브라우저 new Date()로 생성한 객체는 로컬 시간이 아닌, 이미 UTC 시간임. 사파리 브라우저에서 `new Date('ISOString')`를 사용하.. 2022. 4. 25. [Javascript] try...catch throw 문법 의도적으로 에러를 발생시켜서 수행하려는 로직에 예외가 발생했을 때, 예외처리를 테스트할 수 있는 방법이다. throw + Error 객체 try { // 원래 코드 주석함. throw new Error('에러 메시지'); // 👈 } catch(err) { console.error(`[${err.name}] ${err.message}`); // 사용자에게 보여줄 에러 메시지를 추가할 수도 있다. } Nuxt는 vuex store action에서 api요청 함수를 만든다. action에 만든 함수를 vue 컴포넌트로 호출해서 사용한다. 이때, 에러처리 방법. Vue 컴포넌트 methods: { async 메서드() { try { await this.액션API함수({ groupNo }); } catch (e.. 2022. 4. 25. [javascript] 시분초일자 등 01~09표현해야 하는 경우 스크립트 * 잘 못 표기되고 있는 사례 11:00, 12:00 으로 표기하는 스크립트 * 1 var format = year+"-"+(("00"+month.toString()).slice(-2))+"-"+(("00"+day.toString()).slice(-2)); * 2 padStart() string.padStart(2, '0') 2022. 4. 23. 이전 1 2 3 4 5 6 다음
