alpeca's world alpeca's world

사용자들에게 푸쉬 알림을 보내고 싶은데.. 난 앱 개발자가 아닌데.. 언제 또 앱 개발 공부를 하지.. 앱 개발 안해도 푸쉬 알림을 보낼 수 있습니다! 웹 푸쉬를 활용하면 브라우저의 푸쉬 기능을 입맛대로 사용할 수 있습니다! 🔑 웹 푸쉬 구현에 앞서.. 웹 푸쉬 구현에 앞서 실습 환경은 아래와 같습니다. 다른 프레임워크라고 하더라도 기본적인 구조는 같으니 이해하시기에 어렵지 않으실 겁니다! Vue (v3.3.4) Node Firebase firestore ( 모바일 기준 ) 웹 푸쉬는 카카오 브라우저 및 네이버 브라우저에서는 동작하지 않습니다. 적절한 조치를 취해 기본 브라우저(삼성, 크롬, 사파리)로 유도해야합니다. IOS의 경우, 16.4버전 이상부터 푸쉬 기능이 지원되며 PWA로 구현하여 앱을 다운..

🙋🏻‍♂️: wrapper 하위로 레이어 형태로 된 다양한 알럿이 떴으면 좋겠어요. 👨🏻‍💻: 매 컴포넌트마다 불러와서 해야하나..? Vue에는 어디서 붙여도 원하는 곳으로 보낼 수 있는 Teleport가 있습니다!! 🌟 요약 텔레포트 레이어 컴포넌트를 만든다. 레이어 내 데이터들은 pinia로 관리한다. 최상위 컴포넌트에 레이어 컴포넌트를 등록해놓는다. 필요한 곳에서 pinia를 통해 호출한다. 😋 Vue Teleport 만들기 먼저 공통으로 쓰일 레이어를 만들어 줍니다. {{ title }} {{ cancel }} {{ confirm }} 위 마크업에 쓰인 함수 및 변수는 pinia를 통해 컨트롤하는 값들이 될 것입니다. 이제 위 마크업을 컴포넌트로 감싸줍니다. ... to 속성에 어느 element..

🙋🏻‍♂️: textarea 영역의 placeholder 문구를 두줄로 보여지게 해주세요. 👨🏻‍💻: 개행 문자를 넣으면 되려나...? placeholder에서의 줄바꿈 요청이 왔을 때, 딱 떠오른 생각은 개행 문자를 넣는 것이었다. 그닥 신경쓸만한 요구사항이 아니었다. 😋 개행 문자로 쉽게 적용 html상에서 처리할 땐, 유니코드를 사용하여 줄바꿈을 적용할 수 있습니다. Vue 환경에서 placeholder 값을 변수/상수로 할당시켜 표현하고 싶다면 \n으로도 적용할 수 있습니다. 😩 아이폰 사파리에서는 줄바꿈이 되질 않아요 매번 아이폰이 문제다.. Can I Use 사이트에서 placeholder의 line breaks는 사파리에서는 지원이 안된다고 나와있었다.. 기능이 안되는 것도 아니고 사파리에서..

🙋🏻‍♂️: MAC pro 14 / M2 / Ventura 13.5 / Homebrew 4.2.2 👨🏻‍💻: Mac에 nginx를 설치해보자! 🌟 요약 brew services brew install nginx brew services start nginx nano /opt/homebrew/etc/nginx/nginx.conf 😋 설치 먼저, brew services로 nginx가 설치되어 있는지 확인합니다. list에 없는 것을 확인했으면 아래 명령어로 설치를 합니다. brew install nginx 설치가 완료되었고, /opt/homebrew/etc/nginx/ 경로로 설치가 된 것을 확인할 수 있습니다. 🐣 실행 brew services start nginx로 실행시킵니다. 이제 localhost..