JavaScript 3

[bfcache] - vanila + vite 환경에서 공용으로 쓰는 header html을 재사용

원인 header.html을 제작하고 이를 fetch 함수를 통해서 가져오려고 하였다.그냥 정적인 html이라면 상관이 없지만 내가 제작한 header는 각종 버튼에 기능까지 추가가되어 JS코드가 꼭 필요한 컴포넌트중 하나였다. 때문에 header에 넣되 각 페이지마다 필요한 JS 코드의 순서와 DOM의 실행순서를 지켜서 제작을 해야하는 어려움이 있었다. 모두 완료가 되었을때 한가지 간과한것이 bfcache 이녀석이다. 사용자가 페이지를 뒤로가거나 앞으로 넘길때 페이지에서 동작하는 JS코드나 랜더링 등등을 잠시 멈춰두고 다시 돌아왔을때, 멈춘 위치에서부터 다시 시작하는것이 문제였다. 과정 생각해본 방법JS 파일을 다시 모듈화 하여 진행한다.직접 bfcache를 조작한다.Timeset을 써서 직접 조작..

문제해결 2026.01.22

JavaScript - FileReader()를 이용하여 이미지 구현하기

FileReader()란?FileReader는 웹 브라우저에서 제공하는 JavaScript API 객체로, 사용자가 선택한 파일을 자바 스크립트가 읽을 수 있는 형태로 변환하는 역할을 합니다. 참고 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader FileReader - Web APIs | MDNFileReader() Returns a new FileReader object. See Using files from web applications for details and examples. Listen to these events using addEventListener() or by assigning an event listener to the..

CSS/HTML - 2

오늘은 저번에 Login 페이지 구현에 이어서 그와 연동되는 main홈페이지를 제작하였다.사실 나는 주말에 계속 코딩을 진행해서 따로 페이지를 만들었었다. 오늘의 포스팅 주제는 다른 홈페이지가 어떤식으로 코딩되고 구동되는지 알아보기 위함이다.중점적으로 볼 사항은 아래와 같다.1. 코드를 어떻게 묶었는가2. , , , , 와 같은 시멘틱 태그들을 어떻게 적절하게 사용하는가?(사실 article, section은 드물 가능성이 높다)3. JavaScript를 사용했다면, 어떻게 사용했는지와 HTML을 어디에 어떻게 무엇을 담는지4. 전체적인 구동 방식과 레이아웃 설정 사실 그 외에도 배워봐야할 점은 많겠지만 많이 먹으면 배에 탈이나는법..배울 수 있는 양을 배워 확실하게 기록하고 남겨가자! 참고한 사이트는 ..