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

Front-end61

[VS Code]vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3') 해결방법 vs code(visual studio code)에서 익스텐션 삭제 혹은 다른 이유로 vs code가 실행되지 않을때 해결방법입니다. 오류 메시지 "vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3')" Mac 기준으로 설명을 드리자면, 터미널을 여시고 아래 명령어를 입력해주세요. open /Applications/Visual\ Studio\ Code.app -n 그리고 vs code를 재실행하면 됩니다. 윈도우에서도 명령 프롬프트를 열어서 같은 방법으로 하시면 되리라 예상해봅니다. 2023. 3. 3.
[VS Code]Visual Studio Code javascript 확장 익스텐션 code runner 설치 및 사용방법 Visual Studio Code에서 javascript 출력을 도와주는 code runner 확장 익스텐션 입니다. "code runner" 이라고 확장 익스텐션 검색창에 입력하시면 첫번째 나오는 확장프로그램입니다. 설치를 하시고, js 파일을 만드셔서 아래 문구를 작성해보세요. var a='hello world'; console.log(a); 그리고 단축키 + 마우스 우클릭으로 "code run"을 눌러 확인해보세요. 윈도우 : ctrl + alt + n 맥 : control + optiion + n 하단 출력부분에 출력이 됩니다. 크롬 개발자 도구로 하셔도 되지만, vs code로 바로 확인이 가능합니다. 2023. 2. 11.
[Typescript]타입 스크립트를 해야하는 이유 javascript 가 발전해가면서 ES5 ~ ESNext (2015년~ 현재까지) 프론트앤드와 백앤드에서 아주 중요한 언어이다. 하지만 javascript 는 타입(string)을 선언하지 않아도 유연하게 동작을 한다. 문제는 여러 개발자와 협업을 하면서 타입을 알수가 없어서 오류를 찾기가 쉽지가 않는 문제점이 있다. 하지만 타입스크립트는 타입을 지정해야하기 때문에, 함수가 어떻게 사용이 됐는지 오류는 무엇인지 쉽게 찾을수 있다. // javascript function makeWebmini(name, age){} // typescript function makeWebmini(name: string, age: number){} 타입을 지정해주므로 문자열인지 숫자인지 구분이 명확해진다. Typescrip.. 2023. 2. 11.
[Javascript]arrow function 화살표 함수 ESNest 에서는 function 키워드 외에도 화살표 => 로 함수를 선언할 수 있다. function add(a, b){ return a + b; } // 화살표 함수 const add = (a, b) => a + b 간단한 함수는 화살표 함수를 사용함으로해서 소스를 간결하게 만들수 있다. 2023. 2. 11.
[VS Code]비주얼코드 Live Server 확장팩 사용법 로컬에서 작업한 문서를 손쉽게 확인하려면 Live Server 확장팩을 설치해주시면 됩니다. 저장할때마다 새로고침을 할 필요성이 없습니다. html,css 작업물을 바로바로 확인한다고 보시면 됩니다. 먼저 확장 프로그램 설치하면 하단 우측에 Go Live 버튼이 생성됩니다. Go Live 버튼을 클릭하면 Port : 5500 으로 바뀝니다. 브라우저 주소창에 http://localhost:5500 으로 접속하시면 됩니다. 작업문서를 저장하면 새로고침을 안해도 실시간으로 변경되는 장점이 있습니다. 2023. 2. 5.
[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.
[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.
[Vue.js]vue 시작하기 - 설치 및 실행 맥(Mac) 기준으로 설명하겠습니다. vue를 시작하려면 vue js를 설치해줘야합니다. 그전에 node.js 를 먼저 설치해주세요. 설치방법은 vs code 에 터미널이나 맥 기본 프로그램 터미널을 이용하시면 됩니다. 저는 편집툴을 vs code를 이용하기 때문에 vs code 터미널을 사용하겠습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free an.. 2022. 11. 25.
[Vue.js]vue 설치시 sudo: npm: command not found 에러 문구 해결방법 맥북에서 vue 설치시 터미널에서 sudo npm install -g @vue/cli 명령어를 입력하면, sudo: npm: command not found 문구가 나올때 해결 방법입니다. 여러가지 방법이 있겠지만, 해결이 안될경우 node js 공홈(https://nodejs.org/ko/)에서 .pkg 파일을 다운받아서 설치를 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 sudo npm install -g @vue/cli 명령어로 실행하면 제대로 설치가 됩니다. 2022. 11. 25.

티스토리툴바