달망이 삽질인생

스터디164

[SEO] 사이트맵 - 사이트를 홍보하는 가장 기본적인 방법 어렷을 적부터 자주 접해왔던 사이트맵이지만 프론트앤드를 하고 있는 요즘 사이트맵에 대해 더욱 자세히 알아보기위해 이 글을 작성합니다. 사이트 맵이란 사이트를 만들었으면 홍보를 해야되는데 가장 쉽게 하는 방법은 검색엔진에 노출되는것이고 그 검색엔진에게 사이트의 구조를 알려주는 것입니다. 그 구조를 알려주는 방법으로 가장 오래된 sitemap(사이트맵) 이 있습니다. 검색엔진이 없던 시절에는 인터넷 접속도 너무 느렸던 지라. 메인 홈페이지보다는 사이트맵을 보고 사이트를 직접 하나씩 탐색해보곤 했습니다. 오랜 시간이 지나면서 검색엔진이 하나둘 생겨나고 그 검색엔진은 사이트 내의 모든 링크를 탐색도 하지만 효율적인 탐색을 위해서 사이트맵을 참조하고 있습니다. 사이트맵 위치 사이트맵의 파일 위치는 사실 어느 경로..

[Supabase] js query예제 모음, 에러 메세지 모음. supabase가 너무 편하지만 document에 안나오는 방식이 많아서 누군가에게 도움이 될까해서 올립니다. 1. foreign table의 내용에서 글자를 찾을때 ... .select(` id, rank_idx, followers_count, creator:Creators!inner( user_id, user_name, ) `) .or(`or(user_name.like.%${searchText}%, user_id.like.%${searchText}%)`, { foreignTable: 'Creators' }) ... select함수 호출 후에 외래테이블의 값을 찾을땐, options로 {foreignTable:'TABLE_NAME'}을 넣어줘야함. .or로 찾을때는 기본 1개밖에 못 찾음. 2개 이상하..

[Tailwindcss] 커스텀 컬러 custom-color 가끔 동적으로 색상을 변경하고 싶을때가 있습니다. A 버튼을 누르면 빨강 B 버튼을 누르면 파란색으로 바꾸고 싶을때가 있죠 https://tailwindcss.com/docs/customizing-colors Customizing Colors - Tailwind CSS Customizing the default color palette for your project. tailwindcss.com tailwindcss 문서를 보다보면 custom color는 tailwind.config.js파일을 수정하면 된다고 합니다. module.exports = { theme: { colors: { transparent: 'transparent', current: 'currentColor', 'white': '#ff..

[Sveltekit] 환경변수 설정 - 필수! 과정 개발 시스템 마다 다른 환경변수 세팅! 이번 게시글에서는 Sveltekit을 위한 환경변수 세팅을 해보겠습니다. 환경변수가 뭐냐면, 환경에 따른 변수 입니다. (?) 로컬환경에서 테스트 할때와 개발서버에서 테스트 할때, 스테이지 서버에서 테스트 할때, 운영서버에서 실행할때 모두 api주소나 db주소가 다를 수 있습니다. 매번 값을 변경하고 서버에 올리는 일을 하긴 너무나 힘들고 번거롭고 실수하기 마련입니다. 환경에 맞춰서 변수를 바꿔주는 변수를 환경변수라고 합니다. node.js에서 하는 방법 nodejs같은 환경에서는 .env 파일을 가지고 변수를 컨트롤합니다. nodejs는 dotenv 라는 패키지를 사용합니다. https://github.com/motdotla/dotenv GitHub - motdo..

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

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..

이전 1 2 3 4 5 6 ··· 17 다음

티스토리툴바