분류 전체보기 (399) 썸네일형 리스트형 바닐라 자바스크립트를 이용한 스크롤 트리거 애니메이션의 원리와 구현 이전 애니메이션 | 드래그 가능한 슬라이드 구현하기 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!!이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마duklook.tistory.com 스크롤 트리거오늘은 바닐라 자바스크립트를 이용하여 스크롤 트리거를 구현해보는 시간을 가져볼까 합니다. 보통 스크롤 트리거는 스크롤 애니메이션, 스크롤 트리거 애니메이션 등으로 불리는데요, 스크롤의 특정 위치 마다 서로 다른 동작이나 애니메이션, 트랜잭션을 실행하는 기법을 지칭합니다. 시작 전에 아래 영상을 통해서 스크롤 트리거가 어떻게 동작하는지 살.. Blob 는 뭘까요? 들어가는 말오늘은 Blob 에 대해서 알아보는 시간을 가져볼까 합니다. 이번에 보고서 정보를 CSV 파일로 변환하는 함수를 작성하게 되었는데, 해당 함수에서 Blob 를 사용했습니다. 사용하는 것과 별개로 해당 객체에 대해서 잘 모르고 있다는 것을 많이 느꼈고, 이에 대해서 알아보고 정리하는 시간을 가져봅니다. Binary Large Object (BLOB) 는 뭘까요?우선 Blob 은 무엇을 의미할까요? 이진 데이터 형식의 거대한 객체라는 것은 언어만 봐도 알 것 같은데, 우선 크게 두 유형으로 나눠봅니다. 컴퓨터 과학에서의 BlobBlob는 데이터베이스 시스템에서 주로 사용되는 데이터 타입 중 하나입니다. 이미지, 오디오, 비디오 및 기타 멀티미디어 데이터를 저장할 수 있는 대용량 바이너리 데이.. 용량이 큰 레거시 폰트를 웹 최적화 폰트로 (TTF와 WOFF2) 들어가는 말NextJS 프로젝트에서 사용했던 폰트가 TTF 형식의 로컬 파일이었습니다. 배포하고 초기에는 렌더링 문제 등에 큰 영향이 보이지 않아서 그냥 넘어간 부분이었는데, 최근들어 프로젝트 파일이 무거워지고, 네트워크 리소스를 다운로드 하는 시간이 길어진 느낌이 들어서 네트워크 탭을 확인해보니 무거운 파일이 매번 다운로드 되고 있는 것을 발견했습니다. 이전 처음 로컬 폰트를 다운로드 받고 적용 시킬 때, 무거운 파일 형식임을 알고 있었고, 이를 나중에 줄여보자 라는 생각을 가지고 있었는데, 이번 시간을 통해 적용해볼까 합니다. 그리고 TTF 와 WOFF2 가 어떤 차이가 있는지 최적화 시도 후 마지막 파트에서 간략하게 알아보고 마무리 하겠습니다.현재 상황현재 NextJS google 에서는 지원하지.. 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!! 이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터duklook.tistory.com 드래그 가능한 슬라이드보통 모바일 환경에서든 웹 환경에서든 사용자가 마우스나 패드를 이용해서 드래그를 하면 슬라이드가 따라 움직이는 것을 볼 수 있습니다. 오늘은 그 기능을 구현해보는 시간을 가져볼까 합니다. 아래는 구현된 예시인데요. 한 번 시작전에 어떻게 동작하는지 한 번 확인해보세요! 드래그 가능한 슬라이드의 원리일단, 기능을 구현하기 전에는 해당 기능이.. [잔소리 프로젝트] 쉬어가는 챕터 - 현재 진행사항과 방향성에 대한 고민🤔 해당 프로젝트는..현재 프로젝트는 NextJS 14.2.4 버전을 기준으로 서버리스 아키텍처 기반으로 백엔드와 프론트엔드를 통합하여 진행하고 있습니다. 해당 프로젝트는 애드센스 수익 계산을 자동화하고, 이를 쉽게 원화로 변환하여 세금 신고 절차를 단순화시키는 것이 목적이며, 이러한 서비스를 제공하는 것을 주요 포인트로 잡고 있습니다. 참고로 이 글은 매우 짧으며 영양가 있는 글은 아니므로 혹여나 보셨다면, 뒤로 가기 하셔도 무방합니다. 현재, 수익 통계현재 까지 연도별로 수익통계를 확인할 수 있도록 작업이 완료되어 있고, CSV 파일 형태로 수익정보를 보고서 형태로 확인할 수 있도록 간단하게 구현이 되어 있습니다. 보다 많은 편의성을 위해 조금씩 추가할 예정이지만, 현재 까지는 빠른 배포 및 테스트를.. [잔소리 ] 트러블 슈팅 해당 포스트는..해당 포스트는 프로젝트를 진행하면서 경험한 다양한 문제들과 이를 개선하는 과정를 정리한 포스트 입니다. 모든 이슈를 정리하지는 않으며, 사이사이에 해결하기가 까다롭고 어려웠던 문제 위주로 선별하여 개인 참고 및 동일한 문제를 경험하는 분들에게 도움을 드리고자 작성합니다.원래 기존의 트러블 슈팅 작성 방식과 다른 방식으로 수정하였습니다. 이전 방식의 문제점은 가독성이었는데, 이를 조금 더 보기 쉬운 방식으로 수정하였습니다. [중복 DB 인스턴스] Unix 소켓을 통한 Cloud SQL 연결 시 5432 포트 활성화 문제(24.08.17)[요약] 중복 인스턴스가 생성되지 않도록해당 문제의 원인은 결국 5432 포트를 사용하는 인스턴스를 중복으로 여러 개 생성하려고 할 때 포트 충돌이 발생한.. [잔소리 프로젝트] 쉬어가는 챕터 - 생각보다 쉽지 않은 상황 들어가는 말이번 시간은 좀 쉬어가는 챕터 형식으로 현재 어떤 부분이 문제가 되고 있는가, 어떻게 개선해 나갈 것인가 등을 고민해보는 시간을 가져볼까 합니다. 오직 개발에만 집중하고 싶은데, 현실적인 부분을 고려하지 않을 수 없어서 최대한 시간을 절약해 가면서 개발 중인데요. 그 외에도 개발적인 부분에서 어떤 부분이 어렵게 다가왔고, 고려중인 부분인지 정리해볼까 합니다. 생각 보다 쉽지 않은 API 연동생각 보다 애드센스 API 를 사용하여 필요한 데이터를 가져오는 과정이 순탄하지 않습니다. 너무 만만하게 보았던 것인지, 애드센스 API 를 NextJS 환경에서 직접적으로 다루는 기술 블로그도 찾을 수 없고, 참고할 만한 자료도 파이썬이나 PHP 를 사용한 예시만 있어서 오직 단편적인 방식으로 제공되어 .. 여러분의 사이트는 안전한가요? ② HTTP Strict Transport Security 와 ③ X-Content-Type-Options 이전 포스트 | 여러분의 사이트는 안전한가요? ① | CSP 와 X-frame-Options 사이트 보안 향상 시키기 CSP 와 X-frame-Options들어가는 말이전 포스트에서 제가 만들었던 명언 웹 사이트( https://wise-sayings.com/ ) 의 웹 보안 수준을 MDN 에서 제공하는 무료 도구를 사용해서 측정했었고, 30/100 으로 낮은 점수를 받았습니다. 그duklook.tistory.com 들어가는 말이번 시간은 저번 포스트에 이어서 HTTP Strict Transport Security 에 대해 알아보고 실제 사이트에 적용해보는 시간을 가져볼까 합니다.2024.07.14 기준으로 X-Content-type-Options 부분의 내용도 추가하였습니다. 부분부분 내용이 매끄럽지 .. 이전 1 2 3 4 5 6 7 ··· 50 다음
