주말에 스파오닷컴의 한정수량 물품을 살려구 00시를 기다리던중에 카페 날웃게해에서 브레이브걸스 유정양의 생일카페가 4월30~5월 3일까지 한다는 소식을 접하고 오늘 급하게 방문하였습니다. 

날씨가 너무 좋았던 오전에 오픈시간에 맞춰갔는데, 6~7분정도 기다리고 계셨던거같네요.

 

각 메뉴별로 특전내용이 틀리니 확인해서 메뉴를 시키는게 좋다. 마카롱이나 스폐셜 메뉴같은경우 수량이 한정되어 있으니 참고 바람.

유정이 시켰다던 초코라떼와 핑크레몬에이드를 시켰다. 이 곳 카페에 음료나 디저트류가 괜찮으니 한번 정도 방문해서 먹어보는걸 추천한다.

카페 사장님 말로 유정양이 메니저랑 잠깐 들렀다고 하는데 아마도 이 의자를 이용하셨나봄. 젊은 사장님께서 같이 찍은 인증샷을 보여주셨는데 매우 부러웠다. ㅎㅎㅎ

 

지난번 유나생일 카페행사때는 사람이 많다보니 2층을 둘러 보지 않고 바로 나갔는데, 오늘은 여유있게 카페를 구경할 수 있었다.

2층은 벽면에 사진으로 장식되어 있다. 2층은 음료나 취식이 불가능하다. 사진은 상당히 많이 전시되어 있었다. 

 

 

마카롱을 자주 즐겨먹진않지만, 적당하게 달고 맛있었다.  

블로그 이미지

클라인STR

,

아침에 컴퓨터를 대기모드로 하고 일어났는데, 갑자기 인터넷이 안되었다. 

컴퓨터 작업표시줄 > 네트워크아이콘 오른쪽마우스 >네트워크 및 인터넷 설정 열기 선택한다.

 

 

왼쪽메뉴에서 프록시를 선택한다. 

 

수동 프록시 설정이 그림과 같이 켜져 있다면, 프록시 서버 사용 켬을 눌러서 끈다.

프록시 서버 사용이 꺼진걸 확인하고 인터넷을 여부를 다시 확인한다.

블로그 이미지

클라인STR

,

vue create "프로젝트명"  프로젝트를 생성한다.

아래에 해당하는 라이브러리를 설치한다.

 

yarn add  @fortawesome/vue-fontawesome@prerelease

yarn add  @fortawesome/fontawesome-svg-core

yarn add  @fortawesome/free-solid-svg-icons

yarn add @fortawesome/free-regular-svg-icons

yarn add @fortawesome/free-brands-svg-icons

 

main.js
HelloWorld.vue 

 

 

'Vue.js' 카테고리의 다른 글

오프라인에서 Vue 환경만들기  (0) 2021.04.12
Vue.js not dected (by vue3)  (0) 2021.04.10
yarn vue-cli self signed certificate in certificate chain  (0) 2021.04.08
블로그 이미지

클라인STR

,

모바일웹에서 공유기능에 대한 요청이 와서 해당 기능을 구현하기 위해서 내용을 정리해본다. 

 

 

navigator.share() 메서드는 디바이스에 네이티브 공유하기 기능을 작동시킨다. 

Web Share API 가 지원되지 않는 환경일 경우 메소드의 결과는 undefined 이다.

 

share메서드의 파라메터 구성은 아래와 같다.

 

title : 공유될 제목을 나타낸다.

text: 공유될 본문을 나타낸다.

url : 공유될 URL을 나타낸다.

 

<script type="text/javascript">    
  
	 var btnShare = document.getElementById("btnShare");
		 btnShare.addEventListener("click", function(){
		
	   var shareTitle = "공유하기 기능 테스트";
		var shareText = '공유하기 기능 입니다.';
		var contentURL = "/share/shareUrl";
		var URLPreFix = "";
		
		URLPreFix = URLPreFix + "//" + location.host;
		
		var shareURL = URLPreFix + contentURL;
		
		if (navigator.share){
			  navigator.share({
			      title: shareTitle,
			      text: shareText,
			      url: shareURL,
			  })
		    .then(() => console.log('Successful share'))
		    .catch((error) => console.log('Error sharing', error));
		}else{
			alert("공유하기를 지원하지 않는 환경입니다.");
		}
	});
		
</script>

안드로이드폰에서 실행한 화면 예제)

참고 포스팅 글들 

developer.mozilla.org/ko/docs/Web/API/Navigator/share

 

Navigator.share - Web API | MDN

Navigator.share Navigator.share() 메소드는 Web Share API 의 부분으로서 디바이스의 네이티브 공유하기 메커니즘을 작동시킨다. Web Share API 가 지원되지 않는다면, 이 메소드는 undefined 일 것이다.var sharePro

developer.mozilla.org

ui.toast.com/weekly-pick/ko_20190618

 

Web Share API 사용하기 | TOAST UI :: Make Your Web Delicious!

Web Share API는 안드로이드 Chrome 61 버전에서 처음 소개되었지만 다들 있는지도 모르는 기능이었다. 본질적으로, 이 API는 기기의(혹은, Safari를 사용하는 데스크탑의) 링크나 연락처 카드 등의 컨텐

ui.toast.com

 

블로그 이미지

클라인STR

,

오프라인에서 인터넷이 안되므로 인터넷이 되는 환경에서 프로젝트를 생성한 다음 오프라인으로 옮겨야 된다. 

 

온라인 환경에서 해야 될 것들 

 

1. vue-cli 명령을 이용하여 프로젝트 생성

2. 필요한 라이브러리를 설치한다. npm 명령어 또는 yarn 

3. 프로젝트경로로 가서. yarnrc생성

4.. yarnrc에

yarn-offline-mirror "./npm-packages-offline"
yarn-offline-mirror-pruning true

5. node_modules 와 yarn.lock 파일을 삭제한다.

6. 터미널을 실행하여 아래와 같은 명령어를 실행한다. 

yarn cache clean
yarn install

7. yarn install 명령어를 실행하면 yarn.lock 파일과 node_modules 폴더가 다시 생긴다. 

node_modules 파일은 삭제하고 압축해서 폴더를 오프라인 환경으로 옮길 준비를 한다. (오프라인 환경으로 옮긴 다음 yarn install 명령어를 다시 실행하면 node_mnodules 파일이 다시 생기므로 삭제하고 옮긴다.)

 

 

 

오프라인  환경에서 해야될것들 

 

1. 적당한 위치에 폴더를 옮기고 압축을 해제한다.

2. 터미널에서 아래와 같이 명령어를 입력하면  npm-packages-offline 폴더에 압축된 라이브러리를 참조하여 node_modules 폴더를 생성한다.

yarn install --offline

 

 

참고

musma.github.io/2019/08/23/nodejs-offline-deployment.html

 

오프라인 환경에 NodeJS 애플리케이션 배포하기

오프라인에서 npm install을???

musma.github.io

velog.io/@hayeon1234/%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%EC%97%90%EC%84%9C-React-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

오프라인에서 React 환경 만들기

오프라인에서 create-react-app이 안되기 때문에 인터넷이 되는 환경에서 프로젝트를 생성한다. 필요한 node module을 설치한 후 프로젝트를 오프라인으로 옮겼다. create-reat-app을 이용하여 프로젝트 생

velog.io

 

'Vue.js' 카테고리의 다른 글

Vue3 Font Awesome 사용하기  (0) 2021.04.16
Vue.js not dected (by vue3)  (0) 2021.04.10
yarn vue-cli self signed certificate in certificate chain  (0) 2021.04.08
블로그 이미지

클라인STR

,

Eclipse에서  Unresolved compilation problem 해당 에러가 발생하는 경우 

톰켓에 서버를 선택하고 오른쪽 마우스 버튼 메뉴에서 Project Clean을 선택하고 다시 빌드를 한 다음 톰캣을 재구동 해본다.

블로그 이미지

클라인STR

,

Vue.js not dected (by vue3)

Vue.js 2021. 4. 10. 01:39

Vue3 버전으로 버전을 상향하고 실습을 하고 있는데 Vue devtoolsrk Vue.js를 인식하지 못해 확장 플러그인이 정상 동작하지 않았다.

chrome.google.com/webstore/category/extensions?hl=ko

 

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com

크롬 웹스토어를 접속하여  검색어 항목에 vue3 devtools를 검색하면 확장 프로그램 목록이 나타난다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이 글을 쓰는 현재 Vue3 devtools 버전은 6.0.0 beta 버전이다. 해당 버전을 다시 설치하고 이전 설치된 버전은 삭제한다. 

 

플러그인 설치 후 크롬브라우저를 재 실행하고 Vue.js devtools 가 정상 작동하는지 확인한다.

'Vue.js' 카테고리의 다른 글

Vue3 Font Awesome 사용하기  (0) 2021.04.16
오프라인에서 Vue 환경만들기  (0) 2021.04.12
yarn vue-cli self signed certificate in certificate chain  (0) 2021.04.08
블로그 이미지

클라인STR

,

vue create 명령어 실행중 self signed certificate vue-cli self signed certificate in certificate chain

 

yarn config set "strict-ssl" false   명령어를 실행 한뒤 cmd 창을 닫고 다시 연다. 

 

vue create "프로젝트명" 실행한다.

 

'Vue.js' 카테고리의 다른 글

Vue3 Font Awesome 사용하기  (0) 2021.04.16
오프라인에서 Vue 환경만들기  (0) 2021.04.12
Vue.js not dected (by vue3)  (0) 2021.04.10
블로그 이미지

클라인STR

,