포트폴리오겸 개인 소개를 담은 웹사이트를 만들고 있습니다. 처음 방문 했을 때 최적화 또는 좋은 사용자 경험을 위해 유저가 현재 어떤 상태에 놓여져 있는지 확인을 해야하는 경우가 있는데요. 첫 페이지가 로딩되면 애니메이션 효과가 실행되는데, 브라우저에서 Blur 상태가 되면 이벤트를 멈추고 다시 focus 상태가 되면 애니메이션이 동작해야 합니다. 이것은 window.addEventListener()를 통해 쉽게 구현되지만, 문제는 blur 상태로 페이지가 로딩되는 경우입니다. 아래의 순서로 버그가 발생되는데요. 버그 발생 순서 blur 상태로 웹사이트 로딩이 완료되고 애니메이션 실행 유저가 브라우저를 focus 하게 되면 애니메이션 효과가 중복으로 적용 첫 로딩에 이벤트와 Focus 이벤트가 발생되면 ..
2023.02.11
Clipboard API 예전 클립보드 복사 기능을 구현했던 코드를 다시 사용해보니 VSCode 상에서 Deprecated 표시가 됐습니다. MDN에서 찾아보니 기존에 사용하던 방법을 대체하도록 Clipboard API가 나왔었네요. 기존 방법은 웹 표준에서 삭제됐으나 기능은 작동합니다. readText() / writeText() // 읽기 navigator.clipboard .readText() .then((text) => { console.log(text); }); // 쓰기 navigator.clipboard .writeText() .then( console.log('Success Copied!') ); 복사의 경우 writeText() 함수는 문자열 매개변수를 전달해서 간단하게 복사를 구현할 있..
2023.02.06
요즘 개발 관련 포스팅도 많이 못쓰고 말이죠.. 곧 회사에서는 주 1회가량 스터디를 진행할 것 같습니다. 다 같이 강의를 보고 간략한 발표와 프로젝트를 수행하는 정도의 느낌으로 말이죠. 회의 때 이런저런 얘기를 하다 잘 몰랐던 부분이 있어 짚고 넘어가 보려 합니다. 브라우저는 HTML 문서를 읽는 도중에 태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행한다. 이 방식에는 2가지 이슈를 만들게 되는데.. 첫 번째로 생성되지 않은 DOM 요소에 접근하는 스크립트가 먼저 실행됐다면 에러가 발생한다. 두 번째로 큰 사이즈의 스크립트가 중간에 껴 있을 경우 해당 스크립트가 실행되기 전까지 페이지 로드가 멈출 것이다. 이런 이슈를 해결하기 위해 보통의 경우 태그가 끝나는 시점에 나도 이렇게 사용했지만 이 방..
2022.09.14
콘솔 로그는 혼자 개발한다면 괜찮지만 다수의 사람과 코드를 작성하고 빌드&배포를 진행할 경우 여기저기서 console.log가 찍히는 일이 발생하는데요. 일일이 지워주는 건 비효율적이기 때문에 빌드 단에서 모두 지워주는 플러그인을 사용해봤고 실무에서도 적용했습니다. 1. 플러그인 설치 npm i babel-plugin-transform-remove-console 2. .babelrc 또는 bable.config.js module.exports = { ... plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [], ... } 제 경우 빌드 할 때만 사용하기 위해 babel.config.js에서 플러그인을 추가해주었..
2022.09.13
요즘 회사에서는 Vue를 사용해 프로젝트를 진행하고 있습니다. 이번 1차 프로젝트가 곧 끝나가는데요. 2차도 마찬가지로 Vue를 사용해 개발한다고 합니다. 저는 리액트가 좋은데 말이죠? 아니면 최소한 IE를 배제하고 vue 3.0을 쓸 수 있도록 해주면 좋은데 말이죠 이 부분은 어쩔 수 없는 SI 프로젝트라 선택권이 없습니다. 그래도 모든 부분에서 득과 실이 있다고 생각하는데요. 취업하기 전 찍먹만 했던 뷰를 제 기술 스택으로 인정할 수 있게 됐습니다. 이 부분이 가장 큰 장점이라 열심히 해야겠습니다. 이제 기본을 단단히 하기 위해 다시 공부 기록용 포스팅을 이어나가도록 하겠습니다. 이전 트랜스파일러와 바벨에 대해서 포스팅했는데요. 오늘은 모듈 번들러인 웹팩에 대해 다시 공부해봤습니다. 모듈 번들러 리액..
2022.06.05
자바스크립트를 공부하다 보면 쉽게 들을 수 있는 폴리필과 바벨에 대해서 다시 공부해보며 기록해봅니다. 자바스크립트는 현재까지 계속 업데이트되고 있고 인기있는 언어인데요. 그리고 브라우저마다 자바스크립트를 실행하는 엔진이 다르기 때문에 하나의 코드가 서로 다른 브라우저에서 작동이 안 될 수 있습니다. 간단하게 브라우저별 JS 엔진 종류 눈에 익히고 넘어가봅니다. Chrome : V8 Safari : JavaScriptCore Firefox : 스파이더 몽키(Spidermonkey) Edge : 차크라(Chakra) 이제 트랜스파일러와 바벨, 폴리필이 무엇인지 알아보자 트랜스파일러(Transpiler) 컴파일러는 들어봤어도 트랜스파일러를 잘 모르는 사람이 많은데요. 컴파일러는 사람이 이해할 수 있는 고수준 ..
2022.05.29
sheet.js 셀 스타일 및 셀 병합 sheet.js 말고 excel.js 라이브러리를 사용한다면 셀 스타일과 병합하는 과정이 간단합니다. 그리고 github에 사용 방법도 자세히 나와있는 편이라 쉽게 찾아보며 엑셀 기능을 구현할 수 있습니다. 하지만 sheet.js를 사용해야 한다면 그 것은 IE 때문이지 않을까 생각됩니다. 바로 저 처럼 말이죠.. sheet.js 브라우저 호완성 위 이미지는 sheet.js의 브라우저 호완성 표입니다. 정말이지 끈질긴 IE녀석... GitHub - exceljs/exceljs: Excel Workbook Manager Excel Workbook Manager. Contribute to exceljs/exceljs development by creating an ac..
2022.05.23
firebase storage를 게시판 이미지 서버로 사용하고 있는데요. 게시판에 이미지를 업로드하고 글을 삭제하면 글 DB는 제거되지만 이미지는 이미지 서버에 그대로 남아있어 쓸데없는 용량만 차지하게 됩니다. 그래서 사용하지 않는 이미지를 찾아내 이미지 서버에서 삭제하는 코드를 작성해 보았습니다. Node.js 환경에서 진행합니다. 1. 전체 게시글 본문 불러오기 //async function const allPost = await Post.find({}, { content : true }); 게시판 DB는 MongoDB를 사용하고 있어 전체 게시글의 내용만 가져옵니다. content는 html 문자열로 저장되어 있습니다. 2. 스토리지 이미지 불러오기 import { initializeApp } fr..
2022.02.06
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev