본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

전체보기763

[VS Code]비주얼코드 Live Server 확장팩 사용법 로컬에서 작업한 문서를 손쉽게 확인하려면 Live Server 확장팩을 설치해주시면 됩니다. 저장할때마다 새로고침을 할 필요성이 없습니다. html,css 작업물을 바로바로 확인한다고 보시면 됩니다. 먼저 확장 프로그램 설치하면 하단 우측에 Go Live 버튼이 생성됩니다. Go Live 버튼을 클릭하면 Port : 5500 으로 바뀝니다. 브라우저 주소창에 http://localhost:5500 으로 접속하시면 됩니다. 작업문서를 저장하면 새로고침을 안해도 실시간으로 변경되는 장점이 있습니다. 2023. 2. 5.
[사이트]naver.me로 단축 url 변경하는 방법 2011년 부터 네이버에서 단축 url 미투두(me2.do)를 서비스했다가 피싱문제로 2016년 8월 18일경 종료를 했습니다. 그후에 naver.me 단축 url를 서비스했었는데 이 서비스 또한 종료가 되었습니다. 그런데 naver.me 주소로 공유된 글들이 오픈채팅방에서 종종 보이실겁니다. 방법은 다음과 같습니다. 1. 네이버 앱을 실행합니다. 2. naver.me 주소로 변경할 사이트를 검색 or 주소로 접속합니다. 3. 하단에 공유하기 화살표 버튼을 클릭합니다. 4. 카톡으로 공유해서 보내면 naver.me로 url이 변경되서 공유가 됩니다. 네이버앱에서 화살표 버튼으로 공유하는게 포인트입니다. 2023. 1. 26.
[Vue.js]VUE3 ESlint 오류 관련들 ESlint는 코드 작성시 문법 오류 및 버그 확인 뿐만아니라 협업간에 작업 스타일과 들여쓰기등 규칙이 틀리면 잔소리하는 VS Code 확장팩인데요. 조그만 규칙이 틀리면 오류라고 판단합니다. 오류가 다양해서 공부삼아 정리를 해보고자 합니다. 1. vue/no-multiple-template-root 오류 error The template root requires exactly one element vue/no-multiple-template-root 와 안에 로 한번 묶어주세요. Home | About Sass VUE2버전에서는 안에 반드시 로 묶여있어야 에러가 나지 않습니다. 하지만 VUE3버전에서는 안에 로 묶여있지가 않는데, ESlint가 아직 버전업이 안되서 그렇다고 합니다. 2. .eslint.. 2023. 1. 23.
[Vue.js]Vs Code Vue.js 필수 확장 프로그램 vue로 개발할때 Vs Code에 필수 적으로 설치해야하는 프로그램입니다. 여기에서 필수는 vue로 코딩을 손쉽게 도와준다고 보시면 됩니다. 1. Vuter vue 코딩시 코드 하이라이팅 지원, 문법 강조, 코드 자동 완성, 디버깅 등 지원 2. HTML CSS Support 여러 기능들이 있지만, 태그를 자동으로 닫아준다던지 자동완성 형태로 코드를 찾아줍니다. 3. Vue 3 Snippets 스니펫을 이용하여 코드 자동 완성 4. ESLint 코드 작성시 문법 오류 및 버그 확인 참고로 vetur은 vue2때 사용했으며, vue3을 사용할경우 호환성 문제로 오류가 발생할 수 있다고 합니다. vue3을 사용하신다면 Vue Language Features (Volar)를 사용하시면 됩니다. 2023. 1. 22.
[SASS]vscode sass 컴파일 경로 설정하기 vscode에서 Live Sass Compiler를 통한 sass 컴파일 경로 설정하는 방법입니다. Live Sass Compiler 설정파일에서 해당부분을 찾아서 수정해줍니다. "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/.." }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/.." } ], savePath에서 설정하시면 됩니다. "savePath": null (현재 .sass파일에 .css생성) "savePath": "~/" (현재 위치로 부터의 상대경로) "savePath": "/".. 2023. 1. 21.
[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다... 2023. 1. 21.
[SASS]npm install node-sass 설치 에러, node.js 버전 확인 SASS 설치시 (npm install node-sass) 오류가 발생하면, 설치된 node.js 버전이 node-sass 버전을 지원하지 않을 가능성이 크다. node.js 버전이 호환되는 node-sass 버전표를 참고해보자. NodeJS Supported node-sass version Node Module Node 19 8.0+ 111 Node 18 8.0+ 108 Node 17 7.0+, 2023. 1. 18.
[VS Code]즐겨쓰는 웹프로그래밍 텍스트 편집 에디터 Visual Studio Code 웹퍼블리셔 일을 하면서, 다양한 프로그램을 사용했고, 현재도 여러 편집툴을 사용하고 있는데요. (깊숙히는 모릅니다. ㅎ) 예전에는 웹디자이너가 코딩까지 같이 했던 시절이 있었습니다. 웹표준이란 개념이 없어서 모두 레이아웃이 table로 제작할정도 였습니다. 그때는 화면을 보는게 편해서 드림위버를 사용했었습니다. 웹퍼블리셔로 일하면서 에디터플러스를 사용하다가, 맥은 에디터플러스가 없어서 서브라임텍스트를 현재도 사용하고는 있습니다만, 터미널을 연결해서 써야할 경우가 많고, 다양한 확장 프로그램이 있어서 업무용으로는 VS Code를 사용하고 있습니다. 드림위버, 에디터플러스, 서브라임텍스트, 브라켓, VS Code 을 사용하면서 어떤게 좋다 안좋다 보다 프로젝트 개발 환경에 맞는 에디터나, 본인이 사용하기에 .. 2023. 1. 17.
[사이트]사이트 순위(랭킹) 분석해주는 사이트 사이트를 운영하다보면 본인 사이트의 순위가 궁금하기도 하고 즐겨찾는 사이트의 순위는 몇등정도일까? 궁금할때가 있는데요. 사이트 순위(랭킹)을 분석해주는 사이트라 소개해드립니다. https://www.similarweb.com/ Website Traffic - Check and Analyze Any Website | Similarweb All in one Website analytics & competitive traffic intelligence platform - Compare website traffic and performance, analyze strategies & grow your market share! www.similarweb.com 순위를 알고싶은 사이트 주소를 입력하면, 나라별 접속 .. 2023. 1. 11.
[영화]영웅 안중근 의사와 싱크율 100%의 정성화 캐스팅의 탈월한 선택 역사에 대한 소재이기에 영웅 영화 개봉일을 기다렸는데요, 처음에 주연이 누구인지 모르고 많이 닮았네? 라고 생각했는데 뮤지컬 배우 정성화였네요. 포스터만 봐도 윤제균 감독의 정성화 캐스팅은 뮤지컬 영화에 맞게 탁월했다고 생각이 드네요. 영화 내용은 역사를 바탕으로 제작했기때문에 따로 설명이 필요하진 않을거 같습니다. 개인적으로 제가 좋아하는 배우 김소은이 등장해서.. 먼저 정성화는 개그맨 출신이었는데 뮤지컬을 하게 되었는데요, 개그맨이란 이미지가 아직 남아있었는데, 영웅 영화를 통해 개그맨 이미지가 없어진듯합니다. 노래, 연기, 감동까지 재미있게 봤습니다. 배정남이 출연해서 어울릴까? 라는 생각도 했는데 감초역할을 나름 잘 소화한거 같습니다. 영웅 한글 예고편 영화를 통해 안중근 의사에 대해 좀더 자세히.. 2022. 12. 30.
[나스]시놀로지 NAS에 웹서버 구축하기 5탄(Data 파일 및 DB 자동백업 하기) 시놀로지 NAS에 웹서버 구축하기 5탄 - 사이트 Data 파일 및 DB 자동백업 하는 방법입니다. 사이트를 운영하다 보면 백업은 필수인데요. 설명하기 쉽게 사이트 도메인이 test.com 이라고 가정하겠습니다. 폴더 구조가 test > www 안에 파일들이 존재하고 www가 사이트에 루트라고 하겠습니다. 사이트내 파일(데이터)들은 www 안에 존재하기 때문에 www 폴더를 통째로 백업을 하게 되며, 데이터 파일 백업과 함께 DB도 백업을 할것입니다. 물리적으로 시놀리지 volume1에 웹서버를 구축했다면, 백업은 volume2에 할것입니다. 즉, volume1 (HDD)가 문제가 생겼을때 백업파일은 다른 볼륨(volume2)에 백업하는것입니다. (포인트는 웹서버 볼륨과 백업 볼륨이 달라야 하는것입니다... 2022. 12. 24.
[영화]실망시키지 않은 아바타2 물의길 영화 후기 아바타1(감독판 포함)을 수없이 많이 봤을 정도였다. 그만큼 아바타2를 오랜시간 기다렸는데 개봉하자 마자 보게 되었다. 제작비 한화 4~5천억이 들정도로 스케일이 대단했고, 러닝 타임이 3시간 12분정도 된다. 퇴근 후 9시에 시작해서 12시10분정도에 끝이 났다. 졸릴만도 한데 어찌나 집중이 되던지.. 아바타1편이 숲속이었다면, 이번엔 바다에서 벌어지는 전투씬이다. 2편이 나오기까지 13년이 걸렸는데, 그동안 제이크 설리의 자식들도 같이 자란듯 싶다. 아바타2는 한국에서 14일에 제일 먼저 개봉했고, 20억 달러(한화 약 2조 6,760억 원)의 수익을 올려야 손익분기점을 넘는다고 한다. 요약 줄거리 1. 제이크 설리는 13년동안 네명의 자식도 낳고, 잘살고 있다. 2. 어느날 하늘 사람들(인간)이 판.. 2022. 12. 15.
[Mac]맥북 벤투라(Ventura)에서 크롬 자동실행 해제하기 맥북 부팅시 자동으로 크롬이 실행되는걸 해제하는 방법입니다. Mac OS Ventura 기준입니다. 시스템 설정 > 일반 > 로그인 항목에 접근합니다. 검색 박스에 '로그인 항목'으로 검색하셔도 됩니다. 로그인 항목 > 로그인 시 열기에 'Google Chrome.app'를 선택하시고 '-'를 눌러서 삭제합니다. 2022. 12. 4.
[javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함) 하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다. 먼저 script 를 사이에 삽입합니다. // youtube function getVidID(param) { var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g; var match = r.exec(param); return match[1] ? match[1] : match[2]; } var frameBase = ''; var vidObj = [ "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소 "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소 "https://youtu.be/DRJBGE-Zqj8", // data-idx.. 2022. 12. 2.
[HTML]ios(아이폰)에서 video 태그로 mp4 영상 삽입시 재생안될때 해결방법 아이폰에서 mp4 영상을 바로 호출하면 재생이 되나, video 태그로 삽입시 재생이 안되는 문제입니다. 먼저 video 태그의 속성을 살펴봅시다. 아이폰에서 autoplay 실행시 playsinline 를 추가하면 전체화면 전환없이 바로 재생이 됩니다. 즉 autoplay 를 넣을경우 playsinline 를 같이 넣어줘야한다는 의미입니다. 그래야 아이폰에서 영상이 제대로 보여집니다. autoplay : 자동재생 playsinline : IOS 자동재생 그리고 자동재생을 하기 위해서는 muted(음소거) 도 같이 넣어줘야합니다. 예제) 영상이 안보일시 포스터도 넣어보세요. 썸네일 사이즈가 맞지 않는다면 CSS에 poster 사이즈를 100%로 줍니다. video[poster]{width:100%} 2022. 11. 29.

티스토리툴바