달망이 삽질인생

분류 전체보기255

[StatCounter] 전세계 화면 해상도 통계 및 개발시 사이즈 참고. 안녕하세요 이번에는 StatCounter라는 사이트의 화면해상도에 대해서 알아볼까 합니다. 개발하기 전 디자인을 할때, 어떤 화면을 대상으로 개발할까 참 고민이 많게 됩니다. 20년전 전해 내려오던 디자인데로 하게되면 스마트폰에 대한 대응이 안되겠죠? 그래서 해상도에 따른 디자인은 현재 사용자에 대한 트렌드 조사가 먼저 이뤄져야 합니다. 그런 조사를 미리 해서 정리해둔 사이트가 바로 statcounter입니다. https://gs.statcounter.com/screen-resolution-stats 해상도 관련 통계 말고도 많은 통계가 있습니다. 저는 여기서 Screen Resolution Stats를 봐보겠습니다. 2011년부터 2023년까지 모바일+타블렛+컴퓨터 통계 화면 사이즈가 정말 제각가으로 ..

2023/2024 가성비 노트북 추천 (새내기,직장인,사무용) - ASUS 젠북14 UM3402YA-KP391 20년 넘게 컴퓨터 조립부터 추천까지 200대는 넘게 주변에 소개하면서 살아왔던거 같습니다. 요즘 엄청 고스펙의 노트북이 나왔더라도 결국에는 일반 사용자들이 사용하는건 한계가 있더라구요. 진짜 좋은 게이밍 노트북을 찾고 계신다구요? 그럼 데스크탑을 사세요..... 그리고 노트북이나 컴퓨터는 물고기 마냥 시가가 매번 달라집니다 ㅋㅋㅋ 그나마 지마켓의 빅스마일데이가 가장 가격이 좋을때가 많고 그게 아니면 새내기 입학 시즌입니다 (매년 2~3월) 이번에도 많은 지인들 추천요청으로 이 제품을 선택하게 되었습니다. ASUS 젠북14 UM3402YA-KP391 이번 노트북의 추천 포인트 1. 밝은 밝기 400nit, 2. 그나마 들만한 무게 1.35kg 3. USB-C 타입 충전 (USB-PD) - 노트북 충전기 ..

CloudFlare Worker Cron Tip. 가격에선 최고 디버깅 빢심 worker cron 사용문제점 1. 초단위 불가 cron command에서 일반적으로 * * * * * 이렇게 * 별 5개를 사용하고, 첫 별 부터 끝 별까지 분,시,일,월,년 단위를 표현하곤하는데 리눅스계열에선 별을 6개까지 늘려서 초 단위로 쪼갤 수도 있다. 하지만 worker에선 불가함. 2. cpu 최대 시간 제한....... 1일마다 실행되며, 그 시간은 언제 끝나든 상관없게 짜고 싶지만 worker에서는 기본적으로 50ms만큼 실행되고, 최대로 늘리고 싶어도 30000ms(30초)만큼만 실행이 가능함. 더 이상 실행하게 되면 내부에서 exception이 발생하며, 아래와 같은 멘트가 뜬다. { \"message\":\"Error: Too many subrequest..

[Sveltekit] Google Adsense (광고) 붙이기 tips. 귀찮..... Tip. 1 구글 광고는 Localhost에서 나오지 않는다. 등록된 URL만 나옴. 괜히 localhost에서 나오게 할려고 하지말고, 개발용 url을 만드는게 속편함. Tip. 2 localhost에서 통계 잡히기 싫을땐 localhost에서 env와 if문을 이용해야함. 그게 아니면 프로퍼티로 data-adtest="on" 추가하면 됨.

[Sveltekit] Google Analytics, GTAG 'ERR_BLOCKED_BY_CLIENT' Error 스벨킷에서 구글 관련 기능을 사용하면서 크롬 개발자 콘솔에서 'ERR_BLOCKED_BY_CLIENT' 이런 에러를 보신적이 있다면..... 당황하지마시고 Adblock을 해지하세요..;; 당황하셨다고요? 저두요.....

[Tailwindcss] iOS Blur freezing 현상 (bug) css 파일 관리를 따로 하지 않아도 되고 브라우저마다 css를 맞추지 않아도 되서 좋은 tailwindcss !! 하지만 제품에 사용하다보면 여러가지 버그를 맞이 하게 됩니다. 그 중 이번 버그는 blur(블러) 효과를 쓰면 발생하는 버그인데요. https://tailwindcss.com/docs/blur 블러는 이미지를 흐리게 만드는 효과입니다. 많은 브라우저에서 오래전부터 지원되는 효과입니다. 사용은 간단합니다. tailwindcss를 이용할댄 blur-{size} 형태로 적어주고. 순수 css를 할때는 아래처럼 호환성을 생각해서 -webkit까지 적어줍니다. .bg-image { filter:blur(4px); -webkit-filter: blur(4px); } 하지만 ios 15.1 부터 ios..

웹 개발 화면 사이즈 (Chrome Emulate/Simulate Custom Device Size) 웹 개발을 할때 다양한 화면 사이즈로 테스트 해봐야되는데 주로 크롬 개발자 모드의 디바이스 툴바를 이용하는데요. 여기 있는 기본적인 화면 사이즈는 형편 없는 모델만 가득합니다...... 물론 파란 부분에 마우스를 올려놓으면 Mobile S 사이즈, Mobile L, Tablet, Laptop 등 여러가지 사이즈로 바꿀 수도 있습니다. 디바이스의 user-agent까지 적용해보고 싶을땐 디바이스 툴바에서 디바이스를 커스텀으로 추가하면 됩니다. Edit을 누르고. Add Custom device.. 버튼을 눌러서 기기 이름과 가로사이즈, 세로 사이즈, 픽셀비율, user agent까지 추가하면 됩니다. 모든 기기 마다 기억할 수 없기 때문에 Github에 누군가 정리해놓은게 있네요 https://github..

[Nodejs] 웹 개발 초보자가 알아야할 필수 정보들 저도 얼마 안된 입문자 이기 때문에 여러가지 알아가면서 계속 추가할 예정입니다. 글자 format 글자를 일일히 더하기엔 너무 귀찮음 "가"+"나"+"다"+"라" 물론 이런 포맷 방법도 있음 "{0} + {1} = {2}".format(4, 5, 9) 하지만 젤 편한건 역시, 템플릿 리터럴(₩₩, 백틱)을 이용한 방식. const name = '가나' const test = ` ${name} hi~ ` 백틱(₩, 1옆에 있는거)을 이용해서 적으면 엔터를 위한 개행문자도 필요없고 변수로 대체하기 위해 ${}를 사용하면, 순서를 외우거나 ""쌍따옴표로 끊었다가 + 하고 변수 넣고 하는 귀찮은 작업이 없어짐. 소스코드상에 숨기고 싶은 데이터 process에 있는 env 영역을 이용해서 사용함. 이렇게 하기보단..

[Sveltekit] UI 쉽게 꾸미기는 UI컴포넌트 모음 ! sveltekit은 ui를 만들때, 정말 편리하고 금방금방 만들 수있었습니다. 하지만! 그것 조차 귀찮고 이세상엔 빠르게 적용이 가능한 컴포넌트들이 많습니다. 매번 css파일 관리하고, style link시키고 필요없는 style포함시키고, 한 페이지를 켜기 위해 쓸모없는 코드가 너무 많습니다. MUI 컴포넌트는 좋아 보이지만, 저는 편집이 불편한 구글 기반 머테리얼은 별로 좋아하지 않아서 패스. Ant Design과 React Bootstrap은 React용이라서 패스. Svelte처럼 간단한 느낌의 컴포넌트는 없을까하고 웹서핑하던 도중. 개발을 할때 정말 편리하게 화면을 구성할 수 있게 해주는 UI 컴포넌트들을 찾아와 봤습니다. Tailwindcss.com tailwindcss는 다양한 브라우저 환경..

[Sveltekit] VSCode에서 디버깅하기 (Debugging) sveltekit은 hot-reload가 되기 때문에 개발하면서 화면을 바로바로 확인할 수 있어서 정말 개발하기 편합니다. 그래도 ui로 디버깅을 하거나, console.log 명령어로 매번 프린트 디버깅을 하기엔 시간소모와 공수가 많이 듭니다. 거기다가 api의 응답 데이터를 보거나, byte코딩을 할때면 더이상 기존 방법으로 하긴 매우 버겁죠. 서버사이드(server-side) 코드를 더욱이 디버깅하기 힘들죠. 그런 불편한 디버깅을 local 코딩처럼 디버깅 해주는 방법이 있습니다. 1. node-loader 설치 ESM 로더를 개발모드에서 활성화 합니다. $ yarn add @vavite/node-loader --dev 2. 개발 모드에서만 노드로더 활성화 vite.config.js 로 이동해서 아..

이전 1 ··· 3 4 5 6 7 8 9 ··· 26 다음

티스토리툴바