김평범'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 뜨는 ..

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를..

웹 페이지를 제작 중 특정 페이지의 경우 단순히 보는 것이 아닌 프린트 기능이 필요할 때가 있다. 물론 기본 적인 브라우저 내에서는 인쇄 기능을 제공 하나, 모든 페이지가 아닌 HTML에서도 특정 페이지를 프린트를 하고 싶을 경우 Print-js를 연결해서 사용해보도록 하자 🖨️print-js print-js는 자바스크립트 라이브러리로 웹상의 요소를 프린트를 도와준다. 간단하게 npm으로 설치가 가능해서 손쉽게 웹 애플리케이션에서 사용이 가능하다 설치방법 //npm npm install print-js --save //yarn yarn add print-js Import 설치한 라이브러리는 import 시켜서 사용이 가능하다. import printJS from 'print-js' Nuxt window ..

🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마다 날짜를 계산할 때 사용하는 라이브러리였다. 2011년 첫 공개된 moment.js는 이제는 이미 발표가 된 지 9년이 지났고, 지금의 웹은 이 moment가 발표되었을 때와 많은 부분이 변했다. moment 제작진들은 이제 새로운 기능 대신 안정성을 우선으로 하여 moment를 이제 더 이상의 업데이트가 없다고 발표를 했고, 다른 라이브러리를 사용하라는 말을 남겼다. 이제부터 moment.js는 더 이상 지원이 없어진다는 점을 밝힌 것이다. 물론 지금 사용하는 곳에 문제가 없다면 당장은 문제..

🧛‍♂️ Are you interested in participating? 문구 발생 nuxt Project를 생성해서 npm run dev 명령어 실행 시 Are you interested in participating?(Y/n)이라는 문구가 계속 뜨는 문제가 발생했다. 처음엔 왜 뜨지? 하고 무시하고 Y, n 여러 개를 선택해서 넘어가 보았지만, 지속적으로 서버가 돌아갈 때마다 물어보는 경험을 하게 된다. 위의 내용에 따라 보면 NuxtJS의 경우 익명의 원격 측정 데이터를 수집하여 지속적으로 개선하는데 노력하니 원격으로 데이터를 수집하길 참여해달라는 내용이다. 들어가 보니 수집되는 항목은 아래와 같다 호출하는 명령어(nuxt dev, nuxt Build 등) Nuxt.js, Node.js 버전 일반..

🎉 마이크로 인터랙션 요즘 SNS에서 흔히 볼 수 있는 인스타그램의 "좋아요", 트위터의 경우 리트윗은 사용자들이 작은 동작으로 해당 게시물에 피드백을 주는 좋은 방법이다. 마이크로 인터랙션은 사용자들이 홈페이지에서 하는 작은 행동들을 어떠한 변화를 주었는지를 사용자 경험으로써 느낄 수 있게 해 준다. 자신이 행한 특정 행동에 자연스러운 UI 피드백을 주어 구구절절한 설명이 없이도 사용자는 변화를 알아차릴 수 있도록 시각화하며 오류 및 다음 행동들을 지시할 수 있게 한다. 왜 마이크로 인터랙션을 사용해야 하는가? 마이크로 인터랙션으로 우리는 사용자에게 어떠한 일이 지금 일어나고 있는지 다음 목표를 위해 어떠한 일을 진행해야 하는지 기다림 동안 페이지 이탈을 방지시켜주는 등의 기능을 제공할 수 있습니다. ..

🐣 들어가기 전 어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다. Classic mode for store/ is deprecated and will be removed in Nuxt 3. 무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가 에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나, 지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다. 💡 Store에서의 Classic Mode과 Module Mode Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다. 해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에 vue..

Vue.js가 IE8까지 지원한다고 하는데.. Vue는 ES5 기능을 사용하기 때문에, IE8 이상에서는 정상 작동한다고 나와있다. 하지만 프로젝트를 개발하다보면 axios나 vue에서 작동하는 라이브러리들을 실제로 적용했을 때는 IE11에서 조차도 제대로 작동하지 않는 문제가 발생한다. 내가 만드는 프로젝트는 대부분 특정 타깃이 있기 때문에 IE11를 지원하지 않으니 다른 브라우저를 사용할 수 있었지만, 이번 프로젝트로 하는 대표 홈페이지 리뉴얼의 경우 불특정 다수 여러 사람이 우리 홈페이지를 접근하는 환경에 놓이게되었다. 아무리 explorer가 사라지고 있긴 하지만, 혹시 컴퓨터를 잘 모르는 사람이 우리 회사 대표 홈페이지를 접근했는데 이상한 화면이 뜬다면? 이 부분은 반드시 대응해야 한다는 생각으..