본문 바로가기

전체 글370

Service worker란? 사용법

참고: 웹 앱에 푸시 알림 추가 service worker Javascript assets이다. web server와 web browser 사이에서 프록시처럼 동작한다. service worker의 목적은 offline access 제공을 위한 신뢰성을 높이기 위함이다. 앱과 유사하게 동작시키게 하기 위해서 점진적으로 웹사이트를 향상시킨다. 사용자 구독 브라우저 알림 동의 받기 app/index.html 에서 호출하는 javascript 파일( script/main.js )에 서비스 워커를 등록하는 스크립트를 작성합니다. script/main.js if ('serviceworker' in navigator && 'PushManager' in window) { console.log('Service Work.. 2022. 5. 6.

[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.

[크로스브라우징]safari에서 new Date()사용하면, utc로계산됨

* utc : 한국 시간보다 9시간 늦음. 크롬, 파이어폭스는 new Date('2022-04-22T03:34:22.000')을 생성하면, 다음처럼, 입력한대로의 시간을 객체로 가지게 된다. * 크롬 개발자 도구 콘솔 * 파이어폭스 개발자 도구 콘솔 * Edge 개발자 도구 콘솔 하지만,,, 사파리는 utc로 변환되서 객체로 변환된다. 사파리가 utc로 변환했고, 현재 내가 사용하는 사파리는 한국 시간을 표시할 거니까, +9시간이 더해진 시간으로 객체를 만들고 있던 것이다. 또 한가지 주의할 점이, 사파리에서 new Date('yyyy-m-dd')는 에러가 발생합니다. new Date('yyyy-mm-dd') 이렇게 작성해야 합니다. 해결 방법 // yyyy, m, d, h, m,s var y = new.. 2022. 4. 23.

[nuxtjs] fetch

두 가지 경우에 호출되어 실행되는 훅 - 서버 사이드 렌더링을 위해 서버에서 화면을 구성할 때, - 브라우저에서 URL 주소 변경으로 페이지를 이동할 때 fetch 실행 시점 created() 훅 -> fetch() 훅 -> mounted() Nuxt lifecycle 참고 https://nuxtjs.org/docs/concepts/nuxt-lifecycle/ 2022. 4. 21.

브라우저 cookie javascript로 쓰는 방법

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

wrap-overflow vs word-break 차이점

wrap-overflow 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용합니다. .overflow-wrap { overflow-wrap: break-word; } word-break 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. https://developer.mozilla.org/ko/docs/Web/CSS/word-break .word-break { word-break: break-all; // 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외) } 2022. 4. 18.

[Nuxtjs&Vuejs]AWS S3 업로드한 파일 브라우저에서 다운로드 버튼으로 다운로드 하는 기능 만들기

요규사항 사용자가 s3에 업로드한 파일을 브라우저 상에서 버튼을 클릭해서 다운로드 Vue 컴포넌트 파일 구현 코드 html 저장 · 다른 이름으로 저장 script export default ({ // ... async mounted() { await fetch(this.feedback.attachment, { method: 'GET' }) .then(res => { return res.blob(); }) .then(blob => { const url = window.URL.createObjectURL(blob); this.$refs.save.href = url; }); }, }) 2022. 4. 15.

width가 %일 때, ellipsys로 글자 생략하기

프로필 remseremseremseremseremseremser emseremseremseremseremseremserems eremseremseremseremseremseremse remseremseremseremseremseremsere mseremseremseremseremse &-info { width: 100%; &-class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block; } } 2022. 4. 11.

티스토리툴바