달망이 삽질인생

전체 글250

[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 로 이동해서 아..

[Strapi] GET API 사용시 미디어 정보가 보이지 않을때. (populate) 서론 Strapi는 Collection-Type을 생성하면 API를 자동으로 생성해 줍니다. 거기다가 데이터도 추가하면 조회가 되지요. 간단하게 유저 프로필(UserProfile) Collection-Type을 만들고, nickname, direct_url, greetings를 텍스트 형태로 추가하고, thumbnail, cover를 media형태로 추가합니다. 하지만, API호출할때 media형태의 데이터는 기본적으로 응답해서 보여주지 않습니다. API를 호출해서 정보를 가져와봅시다. GET {{api_url}}/user-profiles Response { "data": [ { "id": 2, "attributes": { "nickname": "test", "direct_url": "11", "crea..

[ngrok] localhost를 외부에서 접속할 수 있게 해주는 툴. 이전부터 유용하게 써왔던 도구 이지만, 막상 생각할려면 이름을 까먹어서 이참에 리뷰해봅니다. 언제 사용될까? 서버를 컴퓨터에서 구동하면 주로 127.0.0.1:8080 또는 localhost:8080 이런 웹 서버 주소로 만들어지게 됩니다. 로컬 주소다보니 외부 컴퓨터에서는 찾을 수 없는 서버 주소이죠. 그럴때 외부 서버가 찾을 수 있는 dns를 만들어주며 연결도 가능한 도구 입니다. ngrok를 사용하기 전에는 어떻게 했을까요? 물론 지금도 사용하는 방법이긴 하지만, 1) 로컬 네트워크에서 내 아이피 주소를 찾고 (ex. 192.168.0.11) 2) 공유기에 접속해서 내 주소를 포트포워딩을 하거나, DMZ을 해줍니다. 2-1) 그리고 또 다른 공유기로 가서 또 포트워딩을 하거나 DMZ해제 해주고.. ..

[통계] 2023년 10월 react vs vue vs sveltekit 혼돈의 웹 개발 춘추전국시대가 끝나고, 안정기가 찾아와져서 아직도 그러한지 궁금해서 찾아보게 되었습니다. 단순 기록용으로 남깁니다. 최근에 러닝커브가 적어서 배우기 쉬운 sveltekit도 비교해봤지만 아직 사용자는 매우 미비한거 같네요. svelete를 응원하는 입장이에요. react가 잠시 주춤할때도 있었지만 역시나 견고합니다. 인도가 압도적이네요 역시 리엑트는 useEffect가 엄청난 검색량이 있고, 빌드 도구인 vite 검색어까지 급등하고 있네요. sveltekit은 그냥 자체적으로 자료가 적다보니 언어에 대한 자체 검색어가 많네요. vue는 구현이 쉽고, 큰 프로젝트에서 쓰기엔 구조화 하기 힘들어서 토이 프로젝트에 많이 사용됩니다. 그렇다보니 꾸미는 위주인 tailwind css 까지 언급되고..

[Sveltekit] alias설정으로 경로 줄여서 모듈 import 편하게 하기. (ex $app, $lib) sveltekit에서 모듈을 추가할때면 import를 사용합니다. 복잡한 app 경로는 "$app" 과 같은 이름으로 이용합니다. 이외에도 "/src/lib" 경로를 "$lib"으로 사용하기도 합니다. 기본적으로 모듈은 상대경로를 사용하고, 마지막에 모듈명을 써줍니다. "/MyModule.js" 폴더 경로가 복잡하면 이런 경우도 생기게 되죠 "/src/components/module/MyModule.js" 그리고 지금 쓰고 싶은 코드 경로가 복잡하면 이련경우도 생기게 됩니다. "../../../../MyModule.js" "../../../MyModule.js" "../../MyModule.js" 그리고 같은 코드를 다른곳에 쓰고 싶어서 import부분을 복붙하다보면 상대경로가 달라져서 오류가 나곤합니다..

Sound Play JS Library 브라우저에서는 음악을 재생하는 많은 방법이 있습니다. 1. HTML Audio 태그 오디오 지원되지 않는 브라우저 https://www.w3schools.com/jsref/dom_obj_audio.asp 2. Howler.js https://howlerjs.com/ 아직까지도 계속 업데이트 되고 있는 라이브러리 입니다.

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

티스토리툴바