김평범's OrdinaryCode

Vue.js + Nuxt.js로 만든 프로젝트를 리눅스 Ubuntu(우부투) 서버에 배포를 하려고 FTP로 소스로 모두 옮기고 npm run build를 진행하여 배포를 진행하려 했다. 분명 npm run build도 잘되고, npm run start 시 Server가 완벽히 열리는 것 까지 확인했는데, 실제로 서버 접속을 진행하니 ERR_CONNECTION_REFUSED가 뜬다!! 코드 자체에 문제가 있나 싶어서 로컬에서도 npm run build를 진행한 뒤, 서버를 실행해보면 로컬에서는 또 잘 작동하고, 서버에도 잘 접속이 된다. Ubuntu에서도 npm run dev로 실행하면 서버에도 잘 접속되고 문제가 없는데 유독 npm run start만 하면 ERR_CONNECTION_REFUSED 뜨는 ..

🌷파일 질라(FileZilla)에서 PPK 로그인하기 1. 파일 > 사이트 관리자를 열어서 PPK로 로그인할 설정을 해준다. 프로토콜 : SFTP-SSH File Transfer Protocol 선택 호스트 : 접속하려는 호스트 주소 입력 로그온 유형 : 키파일 사용자 : 접속 사용자명 입력 키파일 : 가지고 있는 PPK 파일 선택 2. 연결을 클릭한다. 🌷푸티(Putty)에서 PPK 로그인하기 1.putty에 접속해서 아래 정보를 입력한다. HostName: 접속하려는 호스트 주소입력 Connection Type : SSH 선택 2. Category에서 SSH > Auth를 선택한다. 3. Private key file for authentication에서 Browse를 눌러서 가지고 있는 PPK파일을..

vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 이용하는 방법이다. vue 이미지 변수로 연결하기 샘플 코드는 아래와 같다. 이미지를 data에 선언한 변수를 연결한 뒤, 이미지를 클릭하면 if문 분기를 이용해서 이미지가 변경되는 코드이다. 실제 화면 해당 소스를 실제로 실행해보면 imgName에 들어있는. png 파일을 연결해준다. 또한 이미지를 클릭하면 imgName Data가 변경되면서 이미지가 if문 분기에 따라 변경되게 된다. URL 이미지에 연결 마찬가지로 URL을 연결하는 것도 가능하다. 그리고 그 URL 안에도 변수 처리 또한 가능하다...

먼저 Vue에서 부트스트랩 datetimepicker를 못 연결하신 분들은 아래 포스팅을 먼저 확인하고 오길 바란다. 2021.06.04 - [FrontEnd/Vue.js] - [vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법 [vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법 내가 현업에서 사용하는 데이트피커는 vue-bootstrap-datetimepicker이다. https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-datetimepicker Vue.js date time picker component for b..

내가 현업에서 사용하는 데이트피커는 vue-bootstrap-datetimepicker이다. https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-datetimepicker Vue.js date time picker component for bootstrap 4 www.npmjs.com Datepicker 설치하기 npm i vue-bootstrap-datetimepicker DatePicker 연결하기 아래 코드로 설치한 datePicker를 연결할 수 있다. import datePicker from 'vue-bootstrap-datetimepicker'; 만약 VueNuxt 프로젝트를 이용하는 분들이라면 datepicker를..

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

개발하다 보면 별생각 없이 개발을 하지만 가끔 npm이 꼬이거나 할 때 cmd 창으로 npm, node 버전을 확인할 때가 있다. node 버전 확인하는 방법 해당 명령어는 node 설치 후 사용할 수 있는 명령어로 node -v시 node를 못 찾는다는 식으로 에러 메시지가 나오면 먼저 노드를 설치해야 된다. node -v npm 버전 확인하기 npm 버전도 동일한 방법으로 확인할 수 있다. node를 설치하면 npm은 같이 설치가 돼서, 별도로 추가 설치할 필요가 없다. npm -v 설치된 npm 리스트 확인하기 프로젝트 내 설치된 npm 리스트를 확인하는 것도 가능하다. 해당 명령어로는 프로젝트에 설치된 모든 npm 리스트와 버전을 확인할 수 있다. npm ls 특정 npm 버전 확인하기 npm l..

홈페이지의 특정 페이지를 카카오톡으로 공유할 일이 있을 경우 URL을 직접 복사해서 쓰는 것 외에 공유 기능을 개발이 가능하다. 해당 기능은 카카오 Developers를 가입하고, 내 사이트 URL을 등록한 뒤 사용이 가능하다. 카카오 디벨로퍼 사이트 : developers.kakao.com/ 🎱카카오톡 내 애플리케이션 등록하고 앱 키 발급받기 카카오 Developer에서 내 애플리케이션을 누른 뒤 내 애플리케이션을 만들어준다. 애플리케이션을 추가해줘야 내 사이트를 인증받을 수 있는 앱 키를 발급받을 수 있다. 기존 카카오 디벨로퍼 다른서비로 앱 키가 있다고 하면 기존 애플리케이션 앱 키를 이용해도 상관없다. 🔗VUE 카카오톡 URL 공유 버튼 만들기 코드 Vue에서 카카오톡 URL공유 버튼을 연결한 코..

홈페이지 내 특정 URL 공유 기능을 개발할 때가 있다. 이때 사람들이 많이 사용하는 트위터, 페이스북으로 URL을 공유하는 방법에 대해서 오늘은 설명해볼까 한다. meta태그 설정하기 URL을 공유하게 되면 URL과 함께 대표적인 이미지, 타이틀, 세부 내용 등이 같이 보내는 것이 가능하다. 해당 정보를 담는 곳이 바로 meta 태그이다. 오픈그래프 meta 태그 중 오픈그래프는 HTML에 대한 정보를 담기 위한 프로토콜이다. SNS 공유 시 게시될 때 해당 정보를 이용하기 때문에 공유를 위해서는 오픈그래프인 og 매타태그를 설정해줘야 한다. 설정 방법은 아래와 같다. 트위터 카드 속성 트위터의 경우는 meta태그를 twitter로 설정해야 된다. 트위터의 경우 card 속성이 이 있다. 사진위주일 경..

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다. 주소창은 전체 선택해서 복사를 하는 것도 가능하나, 모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서 요즘은 링크 복사 가능한 버튼을 만들어서 제공한다. 🧐JAVASCRIPT 링크 복사 예시 코드 HTML 복사하기 Javascript copyUrl () { //url 넣을 input 생성 const urlInput = document.getElementById("urlInput"); //현재 URL 가져오기 urlInput.value = window.document.location.href; //clipboard 복사 urlInput.select(); document.execCommand("copy")..