본문 바로가기

IT36

[CSS] Cascade Layers 정리 안녕하세요! aloveu입니다.오늘은 CSS의 새로운 스펙인 'Cascade Layers'에 대해 소개해 드리겠습니다. 사실 나온 지는 꽤 됐어요. 한동안 CSS에 관심을 덜 두고 JS쪽 개발만 하다 보니 이런 게 나와 있는 줄 몰랐었죠.여하튼 이 기능은 CSS의 스타일 우선순위를 보다 효과적으로 관리할 수 있게 해 주므로, 대규모 프로젝트나 프레임워크, 라이브러리 개발 시 매우 유용합니다.근데 요즘 프로젝트에서는 scss 많이 쓰는터라 거기서는 style.scss 파일에서 쉽게 우선순위별로 임포트 해서 쓸 수 있어서 이건 잘 쓰지 않을 것 같지만 모르고 안 쓰는 것과 알고도 안 쓰는 것은 다르겠죠?! 최근에 Angular PrimeNG 라는 UI라이브러리를 업데이트했다가 뭔가 스타일이 제 예상대로 작동.. 2024. 5. 13.
[JS] 반복문들의 성능 체크 안녕하세요! aloveu입니다.얼마 전 Map, Set의 성능 체크를 하고서 뭔가 신선한 충격을 받았어요.보지 않으셨다면?? https://aloveu.tistory.com/86 읽어보고 오시는 걸 추천드립니다. ㅎㅎ 오래된 개발자의 고정관념에서 나온 그런 충격이었는데 사실 이쪽 IT업계는 변화가 정말 엄청나니 언제든 바뀔 수 있는 결과였죠.그래서 생각난김에 javascript에서 쓰이는 Array 메서드들의 성능을 다시 한번 체크해 보는 시간을 가져봤습니다.오늘 테스트할 메서드는 이것도 얼마전에 포스팅을 했던 실무에서 꼭 필요한 Array 메서드라는 포스팅을 참고할 거예요.https://aloveu.tistory.com/64 [JS] 실무에서 꼭 필요한 Array 메서드안녕하세요! aloveu입니다. .. 2024. 5. 9.
[JS] Map(), Set()의 이상한 성능테스트 안녕하세요! aloveu입니다. 프로젝트를 진행하다 보면 성능문제가 항상 따라옵니다. 대용량의 데이터를 핸들링한다던지, 다른 작업들이 많다던지 하다 보면 어느새 버벅거리는 화면을 보게 됩니다. 프로젝트의 성능을 높이는 방법중에는 많은 방법이 있지만 오늘은 대용량의 데이터를 Object가 아닌 다른 방법으로 처리하는 법을 알아보도록 하겠습니다.우리가 코딩테스트를 하면서 알고리즘 문제를 풀 때 자주 보이는 Map, Set입니다. MapMap()은 자바스크립트의 Key-Value 페어로 이루어져 있습니다. 이 Key를 가지고 Value를 get, set 할 수 있고 Key 값들은 중복이 될 수 없습니다. 키값으로는 모두 사용이 가능합니다. Map에서는 키값으로 객체나 함수도 가능합니다.그리고 키의 순서가 있습.. 2024. 5. 7.
[CSS] 버튼을 누를 때 폭죽 터지는 animation을 넣어보기 안녕하세요! aloveu입니다.오늘은 버튼을 누를 때 폭죽 터지는 효과를 줘보려고 합니다.어디서 본 거 같죠?! ㅋㅋㅋㅋ 네 유튜브에서 좋아요를 눌렀을 때 보이는 그겁니다.따봉은 이미지 구하기 귀찮으니 폭죽만요 ㅋㅋㅋㅋ일단 하나씩 해봅시다. 1. 폭죽 부분 만들기점이 동그랗게 퍼지면서 터지는 효과를 보니 왠지 css에 border 에서 dash나 dotted를 쓰면 될 거 같죠?! 결과" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 오?! 벌써 뭔가 보여요. 그러면 이 원을 커지면서 서서히 사라지게 만들어야합니다. 2. Animation 적용 animation burst를 추가해서 초기에는 투명한 상태에서 시작하고 2초 동안 burst 애니메이션을 실행하게 합니다. 결과" d.. 2024. 4. 29.
윈도우 PC에서 자녀 보호 설정하기 - Family Safety 안녕하세요! aloveu입니다. 다들 자녀 컴퓨터관리는 어떻게 하시나요?!제 아들은 중학생이 되는 해 연말정도에 데스크톱을 하나 장만해 줬습니다.그러면서 컴퓨터에 자녀 보호 기능을 세팅해야 했어요.여기서는 윈도우에 세팅하는 과정을 포스팅합니다. 맥은 패스할게요.혹시나 자녀 컴퓨터에 세팅을 해야 하는 일이 있으신 분은 따라 해 주시면 됩니다. 아이들은 싫어하겠지만요...개요마이크로소프트에서 제공하는 Microsoft Family Safety라는 앱을 사용할 예정입니다.여기서는 컴퓨터 사용가능 시간, 하루 이용시간, 웹 검색 필터로 허용된 웹사이트만 접근할 수 있게 세팅할 수도 있고 프로그램 설치 관리도 가능합니다.윈도우는 깔려 있을 거니깐 부모와 자녀 둘의 마이크로소프트 계정이 필요합니다. 저는 windo.. 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.
반응형

티스토리툴바