김평범's OrdinaryCode

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다. 이럴 경우 주로 Class를 변경시켜서 적용이 가능하다. Vue에서 클래스를 조건에따라서 설정할 수 있다. 👩‍💻Vue 조건부 Class 예시 만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자. 라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다. 이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자 {{thema}} div class중 body를 가지고 있는 div를 thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자. 1️⃣vue Class if 조건에 따라 바꿔주기 vue에서 조건에..

현재 빗 버킷(bitbucket)으로 프로젝트 관리를 진행하고 있는데, 로컬 Commit을 완료하고 remote로 PUSH를 진행하니 you have commit messages that are missing valid issue keys:라는 오류가 나타났다. 👩‍🔧you have commit messages that are missing valid issue keys 해결방법 빗 버킷(Bitbukcket)의 경우 JIRA와 연동해서 사용하는 경우가 많기 때문에, 커밋 메시지 내에 Jira issue key URL이 없이 commit을 할 경우 해당 오류가 발생할 수 있다. 이러한 경우 bitbucket에서 issue keys 없이도 push를 할 수 있도록 잠시 풀어주면 된다. push를 진행할 bi..

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공유 버튼을 연결한 코..