본문 바로가기

분류 전체보기84

SEO에는 WEBP! 변환 프로그램 소개 안녕하세요! aloveu입니다.오늘은 제가 블로그를 운영하면서 쓰고 있는 이미지 변환 툴을 소개해드릴게요.먼저 이 툴을 소개하기 전에 왜 이미지를 변환해서 블로그에 이미지 삽입을 해야 하는지부터 알고 가야 할 것 같은데요. WEBP의 장점WEBP 확장자는 페이지 로딩 속도 개선에 많은 도움이 돼요. JPG나 PNG 이미지 포맷보다 훨씬 작은 파일 크기를 가지고 있어서죠. 빠른 페이지 로딩 속도는 구글등 검색엔진에서 좋은 랭킹 요소로 작용을 해요.작은 사이즈로 모바일 최적화된 이미지 포맷이라 모바일 친화적인 웹사이트가 높은 점수를 받아요.시각적인 품질을 유지해줘요. WEBP는 우수한 압축 알고리즘을 사용해서 파일 크기는 작지만 품질이 떨어지지는 않죠.그래서 저는 블로그 글을 작성하면서 삽입하는 스샷, 썸네.. 2024. 5. 14.
[CSS] Cascade Layers 정리 안녕하세요! aloveu입니다.오늘은 CSS의 새로운 스펙인 'Cascade Layers'에 대해 소개해 드리겠습니다. 사실 나온 지는 꽤 됐어요. 한동안 CSS에 관심을 덜 두고 JS쪽 개발만 하다 보니 이런 게 나와 있는 줄 몰랐었죠.여하튼 이 기능은 CSS의 스타일 우선순위를 보다 효과적으로 관리할 수 있게 해 주므로, 대규모 프로젝트나 프레임워크, 라이브러리 개발 시 매우 유용합니다.근데 요즘 프로젝트에서는 scss 많이 쓰는터라 거기서는 style.scss 파일에서 쉽게 우선순위별로 임포트 해서 쓸 수 있어서 이건 잘 쓰지 않을 것 같지만 모르고 안 쓰는 것과 알고도 안 쓰는 것은 다르겠죠?! 최근에 Angular PrimeNG 라는 UI라이브러리를 업데이트했다가 뭔가 스타일이 제 예상대로 작동.. 2024. 5. 13.
리츠(REITs) ETF가 지금 투자 적기인가?! 안녕하세요! aloveu입니다.주식을 공부하다 보니 요즘 조금씩 나오고 있는 말이 리츠더라고요. 미국 금리 인하 전망이 대두되면서 리츠에 투자를 해야할 거 같다는 글들이 보여서 무슨 상관이 있는지 알아볼 겸 해서 오늘 포스팅을 준비했습니다.리츠(REITs) 란?리츠는 'Real Estate Investment Trusts'의 약자로, 한국말로는 부동산투자회사라고 합니다.리츠는 땅이나 건물 등 부동산에 투자하고, 그 부동산에서 발생하는 임대수익이나 매각차익등의 수익을 주주들에게 배당하는 회사를 말해요.그래서 리츠 관련 주식을 사면 간접적으로 부동산에 투자를 하는 셈이 되는 겁니다.이 부동산/리츠 섹터에 속해 있는 주식 중에 하나가 바로 저번에 포스팅을 했었던 리얼티인컴입니다. 리얼티인컴을 더 알고 싶다면?.. 2024. 5. 11.
[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.
나스닥 지수 펀드?! QQQ, QQQM 안녕하세요! aloveu입니다.다들 예상하셨죠?! 오늘 공부할 건 이제 나스닥 지수 펀드입니다. 우리가 흔히 뉴스에서 듣는 나스닥 나스닥 하는 건 나스닥 종합주가지수를 말합니다. 이 지수를 따라 만든 펀드를 나스닥 지수펀드라고 합니다.  나스닥 종합주가지수(Nasdaq Composite Index)나스닥 종합 주가지수의 티커는 IXIC입니다. 이건 나스닥 증권거래소에 상장된 전체 기업의 주가 변동을 종합한 지수입니다. 약 3천여 개의 기업이 있고요. 보통 기술, 통신, 바이오테크, 금융등이 있는데 뉴욕증권거래소와는 조금 달리 여기에는 대표적으로 기술주들이 많이 포함되어 있습니다.  한경닷컴에서 제공하는 마켓맵을 보시면 영향력이 큰 기업들을 한눈에 보실 수 있습니다. 한경닷컴 S&P 500 마켓MAP 보기.. 2024. 5. 6.
애드센스 광고를 추가하려면?! 안녕하세요! aloveu입니다.제 블로그 UI가 또 바뀌었죠?? 사실 자주 바뀌면 안 되는데 퇴근하고 와서 잠깐씩 조금조금 수정하다 보니 계속 뭔가 변화가 있네요. 작업하다 보면 하나같이 맘에 안 들어가지고... 여하튼 블로그를 꾸미다 보니 내가 원하는 곳에 애드센스 광고를 추가하고 싶었어요. 저는 예전 포스팅에도 말씀드렸다시피 광고가 덕지덕지 붙으면 뭔가 가독성이 떨어져서 블로그 글이 눈에 안 들어오다 보니깐 글을 해치지 않는 곳에 넣고 싶었습니다. 광고를 많이 넣고 싶은데 가독성을 해치지 않게... 뭔가 딜레마죠 =ㅁ=;그래서 글 상단 광고도 빼고 싶지만... 그것까진 나중에 하겠습니다. 각설하고 애드센스 광고를 제가 원하는 곳에 추가하기 위해서 포스팅을 씁니다.우리가 자동광고나 글상단, 하단, 사이.. 2024. 5. 2.
아이와 함께라면?! 하남 나무고아원 안녕하세요! aloveu입니다. 오늘은 5월 1일 근로자의 날이에요. 회사를 안 가기도 했고 날이 너무 좋아서 와이프와 함께 산책을 나가기로 했습니다.가까운 곳에 미사 나무고아원이 있어서 거기를 가기로 하고 나왔어요.처음 미사에 이사를 왔을 때는 주변에 나무고아원이라는 곳이 있길래 아동복지시설인 줄로만 알고 있었어요.근데 그게 아니고 미사 쪽 도시개발사업을 할 때 버려지는 나무들을 옮겨 심어서 나무고아원이라는 명칭으로 조성한 곳이라고 합니다. 간단히 나무고아원 정보를 알려드리자면... 운영시간동절기(11월 ~ 2월) 09:00 ~ 17:00하절기(3월 ~ 10월) 09:00 ~ 18:00입장료 : 무료 주차주차비는 무료고요 주차장은 꽤 있는데 주말에는 많이 붐벼서 주차하기 힘들어요. 대신에 나무고아원에서.. 2024. 5. 1.
[CSS] 버튼을 누를 때 폭죽 터지는 animation을 넣어보기 안녕하세요! aloveu입니다.오늘은 버튼을 누를 때 폭죽 터지는 효과를 줘보려고 합니다.어디서 본 거 같죠?! ㅋㅋㅋㅋ 네 유튜브에서 좋아요를 눌렀을 때 보이는 그겁니다.따봉은 이미지 구하기 귀찮으니 폭죽만요 ㅋㅋㅋㅋ일단 하나씩 해봅시다. 1. 폭죽 부분 만들기점이 동그랗게 퍼지면서 터지는 효과를 보니 왠지 css에 border 에서 dash나 dotted를 쓰면 될 거 같죠?! 결과" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 오?! 벌써 뭔가 보여요. 그러면 이 원을 커지면서 서서히 사라지게 만들어야합니다. 2. Animation 적용 animation burst를 추가해서 초기에는 투명한 상태에서 시작하고 2초 동안 burst 애니메이션을 실행하게 합니다. 결과" d.. 2024. 4. 29.
반응형

티스토리툴바