김평범's OrdinaryCode

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

Notion에서 기본적인 설정을 바꾸는 것이 가능하다. 왼쪽 메뉴의 Settings & Members에서 노션 관련된 설정을 변경할 수 있다. 한국어를 설정했다면 설정과 멤버 메뉴에서 수정이 가능하다. 노션 언어 변환하기 (한국어 & 영어) 노션을 사용하다보면, 영어와 한국어 중 편리한 언어를 쓰는 것이 가능하다. Settings&Memers 에 Langugage®ion에 들어가면 언어 설정 변경이 가능하다. 현재는 영어와 한국어 두 개를 선택할 수 있다. 노션 표 한주 시작 설정 변경하기 영어 외 해당 메뉴에서는 노션 표에서 한주의 시작을 월요일로 하는 설정도 가능하다. 노션에서 캘린더에서 요일을 월요일부터 설정을 하면 해당 옵션을 켜면 된다. 노션 다크 모드 설정하기 노션 Setting&Memb..

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

대학교 발표 및 요즘 유행하는 인스타그램 카드 뉴스, 블로그 썸네일 까지 우리가 작성하는 콘텐츠에 각각 맞는 디자인 들이 필요하다. 하지만, 나는 디자이너가 아니고, 포토샵도 몰라서 못했던 날들을 이제 미리 캔버스를 이용하면 해결할 수 있다. 🎨미리 캔버스란? 미리 캔버스는 저작권 걱정 없는 디자인 요소들을 제공해서 각 상황에 맞는 디자인 템플릿을 제공해준다. 미리 캔버스에서 마음에 드는 디자인을 찾았다면 간단하게 텍스트만 변경하면 바로 내가 원하는 디자인 작품이 완성된다. 미리캔버스 시작하기 미리 캔버스는 아래 사이트의 가입한 뒤 바로 사용이 가능하다. 소셜 로그인도 제공돼서 회원가입도 매우 간단하다 https://www.miricanvas.com/ 미리캔버스 저작권 걱정 없는 완전 무료 디자인툴 미리..

회사에서 노션을 활용하기 시작하면서, 이미 만든 노션에 아카이브를 점점 사용자들에게 공개하는 홍보페이지를 사용하는 분들이 많아졌다. 노션에서는 이미 URL공개라는 기능을 활용해서 웹에서 내가 만든 페이지를 공개할 수 있다. 하지만, 이렇게 공개된 페이지는 보다시피 사용자가 검색해서 들어오기 어려운 URL 주소를 가지고 있다. 개인과 개인들이 공유를 할 때는 링크로 공유하기 때문에 큰 신경을 쓸 필요 없지만, 회사에서 홍보용으로 사용하는 사이트의 주소가 저렇게 복잡하면 이야기는 달라진다. 그럼 URL을 좀 더 홈페이지처럼 바꿀 수는 없을까? 물론 가능하다. 이미 노션에 관심이 많은 분이라면 한 번쯤 들어봤을 사이트 바로 우피이다. 💻우피- 당신의 노션 페이지가 웹사이트가 됩니다. 우피라는 사이트에서는 내가..

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

노션이란? 요즘 내가 가장 사용하는 메모 툴인 Notion은 내가 여기저기 홍보 중이다. 특히 Notion의 강점은 실시간으로 업데이트가 되어 PC, 핸드폰, 테블릿 모두에 설치해서 내가 원하는 기기에서 항상 최신 자료를 관리하고 사용할 수 있다. 아직 노션을 잘모르는 분은 아래 링크를 먼저 확인하길 바란다! https://ordinary-code.tistory.com/63 개인이 노션 잘 활용하는 방법 5가지 - 노션 첫 사용하는 분을 위한 글 내가 Notion을 사용하는 이유 요즘 핫한 메모 어플인 노션 처음엔 무료 플랜의 경우 블록 수 제한이 있어 활용하는 데 있어 고민이 있었지만, 지금은 개인들에게는 무료로 풀려서 고민 없이 바로 ordinary-code.tistory.com 👩🏻‍🤝‍👩🏻노션으로..

개발하다 보면 별생각 없이 개발을 하지만 가끔 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..

노션을 간단하게 메모 어플로만 사용하는 분들도 많았지만, 회사에서 프로젝트 관리툴로 이용하던 분들은 노션 API를 기다리고 있었다. 드디어 노션 API Beta버전에 관련된 공지가 떴다! 📕노션 API 가이드 노션 API 베타 관련된 소식이 뜨면서 가이드 페이지가 생성되었다. 해당 내용에서는 노션API를 활용해서 우리가 사용하는 또 다른 툴을 노션과 연결할 수 있다는 내용이 담겨있다. https://www.notion.so/guides/connect-tools-to-notion-api Connect your tools to Notion with the API Learn what Notion’s API can do and how your team can build integrations to create ..