frond-end 썸네일형 리스트형 웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502) 20240502 운영 서버 에서 woff2 웹 폰트 가 Error 가 나서 사이트의 폰트적용이 안되는 이슈가 나타났다- 다른 압축 형식인 대체 폰트도 설정안해놔서 폰트 적용 안됨 (브라우저에 폰트가 캐싱이 되어 있어서 유저들은 몰랐을 수도..) 로컬에서 다운 받은 파일을 불러와서 해결 해당 이슈 몇시간 후인 GeekNews 에 올라왔다.. 다들 원인 파악 못하고 있었던 듯..https://news.hada.io/topic?id=14613 인증서 문제로 인한 cdn.jsdelivr.net 접속 불능 사태 | GeekNews생각보다 크리티컬한 이슈인데, 별도 언급이 없는 것 같아 공유드립니다.전 세계적으로 가장 큰 오픈소스 프로젝트 CDN 서비스인 jsDelivr의 엣지 도메인 중 하나인 cdn.jsd.. 더보기 AWS S3 + CloudFront 배포 생성 실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFront ? AWS 에서 제공하는 CDN 서비스. 캐싱을 통해 사용자게에 좀 더 빠른 전송 속도를 제공함을 목적으로 한다..html .css. .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다.CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다. 콘텐츠를 전.. 더보기 Bitbucket 배포 환경 만들기 AWS S3 + CloudFront + Bitbucket 배포 환경 구성을 이어서 적어보았다. 이전의 글 참고 🔽https://eonhwa-theme.tistory.com/185 AWS S3 + CloudFront 배포 생성실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFronteonhwa-theme.tistory.com 🍒 Bitbucket pipeline 이 뭔데?🍒 AWS S3+CloudFront + Bitbucket 연동 🍒 Bitbucket tag base 배포 .. 더보기 jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) Vue3 프로젝트에서 운행내역, 급여명세서, 재직증명서 등 pdf 다운받는 기능이 있다.테이블 형식으로 표출하는 내용이라 jspdf , jspdf-autotable 라이브러리 사용해서 구현해놓은 상태이다. jsPDF 함수 정리해놓은 github 참고 https://artskydj.github.io/jsPDF/docs/module-AcroForm-AcroFormComboBox.html#setOptions AcroFormComboBox - Documentation(PDF 1.5) If set, the new value shall be committed as soon as a selection is made (commonly with the pointing device). In this case, supp.. 더보기 "모던 프론트엔드" 에 대해 회사에서 담당하는 서비스는 Vue.js 를 사용하고 있다. 같은 프론트엔드 팀의 다른 서비스를 맡고 있는 팀원들은 React 를 사용하고 계시다. 담당하는 서비스가 다르더라도 매주 수요일마다 프론트엔드 세션을 하는데 이해도를 높이기 위해서 나름대로 둘 다 스위칭이 가능할 정도로 학습이 필요하다고 생각했다. 더 나아가 왜 이러한 프레임워크를 사용하며, 그 전에 바닐라 자바스크립트, HTML, CSS 기본이 되는 것들을 잘 이해한다면 어느 프레임워크를 사용하던지 잘 적응이 될거라 믿는다. 그런 점에서 프론트엔드 생태계에서 롱런하기 위해 프레임워크 같은 도구에 너무 매몰되지 말아야 한다. ﹆﹆ 모던 프론트엔드 란? 코파일럿 에게 물어보길 "Modern Frontend"는 일반적으로 Frontend 웹 개발에 .. 더보기 Frontend-Tech-handbook (.~ daily update ) Frontend-Tech-handbook 프론트엔드 테크 개념에 의한 필수적으로 알아야 할 지식에 대해 정리한 글입니다. 되도록이면 매일 하나 이상의 글을 올려서 업데이트할 예정입니다. (TIL) 자바스크립트 🐾 프로그래밍이란? 더보기 로그아웃 시 다른 에러 상태 코드 도 같이 보여주는 문제 (axios + vue3) 현재 실무 vue 서비스에서클라이언트에서 로컬스토리지의 액세스 토큰 유무로 로그인/비로그인을 판단한다.axios를 사용하여 HTTP 요청을 보내고 응답을 처리하는 wrapper 함수로 동작 중 이다. 여기서는 axios의 요청 및 응답 인터셉터를 사용하여 특정 상황에 대한 처리를 구현하고 있다. 🍒 실무에서 axios 이용한 로그인, 로그아웃 기능 #1🍒 trouble issue -> trouble shooting #2 🔎 #1. 현재 접속하고 일정시간 지나면 자동으로 로그아웃 되는 부분의 기능이 어떻게 동작중인가? 토큰 자체가 갖고 있는 정보로 브라우저의 시간과 비교해서 로그아웃 당함로그아웃 로직은 API 호출 시 응답의 상태코.. 더보기 [CSS] z-index 의 동작방식 z-index 의 쌓임 맥락 z-index를 이해하기 위해서 먼저, 쌓임 맥락(Stacking Context) 의 개념을 이해해야 한다. 쌓임 맥락 이란, HTML 요소들에 사용자를 바라보는 기준으로 가상의 z축을 생성하여 3차원 개념으로 보는 것 이다. 따라서, 쌓임 맥락을 형성한다는 것은 자신만의 3차원 공간을 형성하는 것이며 그 요소들의 우선순위를 z-index 가 정하게 되는 원리이다. 출처 : https://tympanus.net/codrops/css_reference/z-index/ 위 그림을 보면, 각 요소들이 사용자를 바라보는 z축 상에서 z-index 에 따라 "쌓이는" 것을 볼 수 있다. 바로 이것이 쌓임 맥락의 개념이며 쌓임 맥락을 형성하는 조건은 꽤 많다. position 이 rel.. 더보기 [typescript] any VS unknown 🁢 anyScript 는 이제 그만 프로젝트의 tsconfig.json 파일에서 compilerOptions 에서 [참고: https://www.typescriptlang.org/tsconfig] noImplicityAny 는 any 라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이다 즉, true 로 설정할 경우 any 로 추론될 수 있는 타입을 명시적으로 지정해줘야 한다. 하지만 feature 를 개발하다보면 시간에 쫓기거나 혹은 귀찮아서 타입 지정시 any 를 남발하게 되는데... 'any' 타입은 타입스크립트의 타입 체크를 완전히 무시하게 만들어 준다. 'any' 타입의 변수에는 어떤 종류이 값이든 할당할 수 있으며, 그 변수를 사용하여 어떤 작업을 수행해도 타입스크립트 컴파일러는 오류를.. 더보기 CORS 위의 사진처럼 웹 개발을 하다보면 가끔 cors 정책 위반으로 인해 에러가 발생하는 경험이 있을거에요 cors error 가 프론트에서 발견하지만 보통 백엔드에서 해결해줘야 하는 에러라고 생각해서 그동안 잘모르고 지나갔었는데요 단순 서버에서의 에러인 줄 았았는데 브라우저의 에러라는 것을 알게 돼서 프론트엔드 개발자라면 cors 에 대해 개념정도는 알아야 하지 않나 싶어서 스터디 하게 되었습니다. 보통 cors 에러가 나타날때 " 다른 출처를 막는게 cors 구나" 라고 생각했었는데 알고보니 다른 출처 요청을 허용해주는게 cors 더라구요 . 한번 제대로 알아봅시다. 자바스크립트에서의 요청은 기본적으로 서로다른 도메인에 대한 요청을 보안상 제한해요. 여기서, 두가지 정책이 있는데 same origin 정책.. 더보기 이전 1 2 다음
