본문 바로가기

IT33

[CSS] 버튼을 누를 때 폭죽 터지는 animation을 넣어보기 안녕하세요! aloveu입니다.오늘은 버튼을 누를 때 폭죽 터지는 효과를 줘보려고 합니다.어디서 본 거 같죠?! ㅋㅋㅋㅋ 네 유튜브에서 좋아요를 눌렀을 때 보이는 그겁니다.따봉은 이미지 구하기 귀찮으니 폭죽만요 ㅋㅋㅋㅋ일단 하나씩 해봅시다. 1. 폭죽 부분 만들기점이 동그랗게 퍼지면서 터지는 효과를 보니 왠지 css에 border 에서 dash나 dotted를 쓰면 될 거 같죠?! 결과" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 오?! 벌써 뭔가 보여요. 그러면 이 원을 커지면서 서서히 사라지게 만들어야합니다. 2. Animation 적용 animation burst를 추가해서 초기에는 투명한 상태에서 시작하고 2초 동안 .. 2024. 4. 29.
윈도우 PC에서 자녀 보호 설정하기 - Family Safety 안녕하세요! aloveu입니다. 다들 자녀 컴퓨터관리는 어떻게 하시나요?!제 아들은 중학생이 되는 해 연말정도에 데스크톱을 하나 장만해 줬습니다.그러면서 컴퓨터에 자녀 보호 기능을 세팅해야 했어요.여기서는 윈도우에 세팅하는 과정을 포스팅합니다. 맥은 패스할게요.혹시나 자녀 컴퓨터에 세팅을 해야 하는 일이 있으신 분은 따라 해 주시면 됩니다. 아이들은 싫어하겠지만요...개요마이크로소프트에서 제공하는 Microsoft Family Safety라는 앱을 사용할 예정입니다.여기서는 컴퓨터 사용가능 시간, 하루 이용시간, 웹 검색 필터로 허용된 웹사이트만 접근할 수 있게 세팅할 수도 있고 프로그램 설치 관리도 가능합니다.윈도우는 깔려 있을 거니깐 부모와 자녀 둘의 마이크로소프트 계정이 필요합니.. 2024. 4. 25.
[NPM] Axios Error 어느 날 잘 되던 axios가 error를 catch 하지 못하고 그냥 디폴트 에러 메시지만 계속 보여주고 있는 걸 발견했습니다.그건 axios가 업데이트되면서 생겼던 문제였는데 하나씩 오류 원인과 해결 방법을 정리해 보고자 포스팅을 합니다.생각보다 간단한거긴해서 글 내용은 좀 짧겠네요. 이슈 발견서버에서 에러코드를 받아 에러코드에 따라 다른 메시지를 화면에 뿌려야 하는데 계속 디폴트 에러메시지만 보여주고 있었어요.콘솔에는 에러 메시지가 찍혔죠. 원인내용인즉슨 endsWith라는 프로퍼티가 없다는거였어요. 콜스택을 따라 들어가 보니 request 하고 에러가 났을 때 err객체를 받아서 stack을 호출하는 게 보였죠.우리는 axios 인스턴스를 만들고 response inter.. 2024. 4. 23.
[Js, Vue] AbortController + onMounted + onUnMounted 안녕하세요! aloveu입니다.겪었던 오류 이슈들을 정리하다 보니 문득문득 생각나는 것들이 있네요.오늘은 Vue의 생명주기인 onMounted, onUnmounted에 대해 설명을 드리고 Js에서 Fetch요청을 중단시킬 수 있는 AbortController에 대해서도 같이 설명을 드리겠습니다.먼저 관련 없어 보이는 이 두개를 왜 같이 묶어서 포스팅을 하는지 배경부터 설명을 드리겠습니다.배경Vuejs로 만들어진 프로젝트에서 빠르게 페이지를 이동을 하면 이전 페이지 onMounted에서 호출했던 API들이 취소가 안되고 다른 페이지에 이동한 이후에도 호출되고 있던 것이었어요.결론은 onMounted도 하나의 function으로 이미 호출된 시점에서 함수 내부 로직을 끝까지 완수했던 것뿐이었어요.. 2024. 4. 22.
[Vue] Router 안녕하세요! aloveu입니다. Vue Router에 대한 설명과 최근에 Vue2와 Vue3에서 작업을 하다가 오류가 났던 이슈들을 함께 정리를 해볼까 합니다.Vue Router일단 뷰라우터는 Vue.js의 공식 라우터입니다. Router란 웹 애플리케이션에서 URL에 따라 적절한 컴포넌트나 페이지를 렌더링 하도록 만들어주는 역할을 합니다. 내비게이션 가드, 중첩라우팅, 동적라우팅 등의 기능을 제공합니다. 처음에 SPA관련 프레임워크나 라이브러리를 사용하면 생소한 개념처럼 느껴지는데 SPA에서 아주 중요한 역할을 합니다. 전체페이지를 다시 로드하지 않고 동적으로 렌더링 하게 만드는 게 Vue Router의 역할이자 SPA의 핵심이기 때문입니다.  기본적인 건 뷰라우터 공식 홈페이지(ht.. 2024. 4. 21.
[Angular] HttpClient 안녕하세요! aloveu입니다. javascript에서 http요청을 처리하기 위해 fetch, axios... 등을 사용하죠. angular는 하나의 완성된 프레임워크이기 때문에 웹개발하는데 필요한 거의 모든 서비스를 제공합니다. 그래서 angular에서는 HttpClient라는 자체 모듈을 제공하고 있죠. | HttpClient 기능 Angular의 HttpClient는 get(), post(), put(), delete() 등의 메서드를 사용할 수 있습니다. Observable 기반으로 작동해서 비동기 데이터 처리와 오류 처리가 쉽습니다. 인터셉터를 지원하고 응답 데이터를 캐싱하거나 변환해서 처리할 수 있습니다. | Option observe 옵션 옵저브 옵션은 응답 데이터를 어떤 형태로 받을지 정.. 2024. 4. 16.
[Vite] vite로 번들링 도구를 바꾸기 안녕하세요! aloveu입니다. 최근까지 vue-cli-service의 빌드로 번들링을 하고 있다가 프로젝트가 커지고, 팀도 커지고... 뭔가 애매하게 개발하는데 아까운 시간들을 조금이나마 아껴보고자 배포 프로세스 점검하고 코드 리팩토링하고 하면서 번들링까지 손대게 됐습니다. vite를 로컬에서 적용해보니 웬걸?! 빠릅니다. 이게 천국인가 싶어요. 이미 많이들 쓰고 계시겠지만 그나마 이 글을 보고 참고하시는 분들을 위해 그 과정들을 정리해 보겠습니다. | Vite (빗) 바이트라고 읽었습니다. 하지만 빗입니다. 프랑스어로 빠르다는 의미를 가지고 있어요. 그래도 바이트가 입에 착 붙습니다. 빠르고 간결한 웹프로젝트 개발에 초점을 맞춘 차세대 빌드 툴입니다. 특징 매우 빠른 로컬 서버를 띄워줍니다. 그냥 엔.. 2024. 4. 14.
[Angular] standalone 적용하기 기존에 개발되어있는 Angular 프로젝트를 고도화하는 과정에서 겪었던 standalone 적용 기를 적어봅니다. Angular를 17버전대로 버전업을 진행하면서 바꿀 거면 성능까지 고려해서 적용을 해보자 마음을 먹었습니다. | Standalone Components Standalone Components는 Angular 14 버전부터 도입된 기능으로 16 버전에서는 정식 기능으로 채택됐고 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 기존에는 컴포넌트를 생성하면 NgModule에 등록해서 써야 했지만 이제는 모듈에 등록 없이 사용할 수 있습니다. | 왜 바꿔야하나? 독립적으로 사용할 수 있기 때문에 코드 분할 및 지연 로딩을 보다 효과적으로 구현할 수 있고 초기 로딩 속도를 향상할 수 있습니다. 번.. 2024. 4. 13.
[JS] 실무에서 꼭 필요한 Array 메서드 안녕하세요! aloveu입니다. 오늘은 이것만 알아도 데이터 바인딩 50%는 먹고 간다고 말할 수 있는 Array 메서드들에 대해서 공부해 볼 겁니다. 게시판, 상품, 방명록이나 댓글 같은 리스트 형식의 API를 받다 보면 내가 원하는 형태로 가공하고 화면에 뿌릴 줄 알아야 합니다. 그때 쓸 수 있는 그래도 실무에서 자주 쓸만한 메서드들만 정리해 봤습니다. | 목차 map() filter() find() every() some() reduce() sort() | map() 맵 메서드는 배열의 모든 요소에 대해 어떤 값을 적용시켜 새로운 배열을 만들 때 씁니다. arr.map(function(currentValue, index, arr), thisValue) currentValue : 현재 처리 중인 요소.. 2024. 4. 11.
반응형

티스토리툴바