본문 바로가기

분류 전체보기369

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

[PWA]무엇? 왜 씀?

무엇? a Progressive Web App pwa는 웹 앱임. 사용자에게 앱 같은 경험을 줄 수 있음 https로만 통신할 수 있음 왜 씀? PWA를 만들기 위해 고려되어야 할 점 - 어떤 디바이스에서도 반응형이 되어야 한다. - 앱스토어 말고, 사용자의 홈 스크린에 저장할 수 있어야 한다. - Manifest file - 아이콘, 앱 이름, 앱 정보, 앱 스플래쉬 스크린을 설정할 수 있다. - Service Worker 2022. 4. 7.

티스토리툴바