더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 22개의 일치하는 문서를 찾았습니다.
webdevetc[스타일 가이드] intellij, webstorm 자바스크립트 prettier 설정 방법
자바스크립트를 사용하여 웹 어플리케이션을 만들때 스타일 가이드를 위해서 Prettier를 많이 사용합니다. 만약 IDE를 사용하는 경우 Prettier를 설정하여 스타일 포맷이나 저장시 자동으로 Prettier가 반영될 수도 있는데요 ~ 아래는 Prettier를 간략하게 알아보고 IDE에 설정하는 방법 역시 알아봅니다.# Prettier를 사용하는 이유Prettier는 코딩 스타일 가이드 중 가장 잘 알려진 툴 중 하나입니다. Prettier를 사용하면 정해진 스타일 가이드 대로 코드가 작성되었는지 검증하고 그 결과를 알려주고 에러를 띄우거나 또 자동으로 수정해주기도...
Last Modified : 2022-07-21 23:41:00
Created : 2022-07-21 21:44:00- vuejs
[VueJS] provide, inject 사용하는 방법 알아보기
VueJS에서 컴포넌트 사이의 데이터를 전달하는 방법중 하나인 Provide / Inject 방법에 대하여 알아봅니다.# VueJS Provide와 Inject 사용하기VueJS에는 다양한 성격의 데이터들이 존재하는데요 ~ 이 데이터들을 각각의 컴포넌트 사이에 주고 받기 위한 방법으로 props를 사용하는 방법이 대표적입니다. 예를들어 name prop에 "abc" 값을 전달하기 위해서 아래처럼 사용합니다.<ParentComponent> <ChildComponent :name="siteName" /></ParentComponent...
Last Modified : 2021-05-07 17:49:20
Created : 2021-05-07 17:31:35 - webdevetc
[HTML5] Video 태그 사용 방법 및 예제 정리
아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.! Video 태그의 특징은?video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다. Video 태그를 사...
Last Modified : 2020-11-26 15:09:02
Created : 2020-02-12 23:40:56 - webdevetc
웹스톰(Webstorm) IDE 단축키 정보 알아보기
아래는 웹스톰(Webstorm) IDE의 단축키(shortcuts) 정보입니다. 자주 사용되거나 중요한 단축키 위주로 정리하였습니다.! 유용한 팁 및 정보먼저 아래는 자주 사용되는 유용한 팁입니다.@ 자동 인덴트 페이지 전체 적용하기(Auto Indentation)Ctrl + Alt + I // 전체 자동 들여쓰기 적용하기; 모든 페이지에 들여쓰기 설정을 적용할 때 이 단축키를 사용하면 매우 편리합니다.그럼 아래부터 단축키 전체 정보입니다.# 웹스톰(Webstorm) 단축키 정보 보기비슷한 분류끼리 정리하였으며 새로운 단축키 정보를 계속해서 업데이트 중입니다.! 찾...
Last Modified : 2020-04-21 00:35:00
Created : 2019-12-24 10:25:33 - react native
react native 컴포넌트 숨기기, hide
react native에서 원하는 컴포넌트 및 태그 요소를 숨기는(hide) 방법을 알아보겠습니다. 어떻게하면 숨길 수 있을까요?# react native 컴포넌트 요소 숨기기css를 사용하는 경우 display: none을 사용할 수 있겠지만 아쉽게도 react native에 적용 가능한 style에는 display가 없습니다. 이 경우 안보이도록 만드려면 몇 가지 방법이 존재합니다. 대표적인 방법은 아래와 같습니다.1. height, width 값을 0으로 만들기style의 height와 width값을 0으로 설정하는 방법으로 간단하면서 빠른 방법입니다...
Last Modified : 2020-08-10 23:00:02
Created : 2019-08-14 20:05:38 - angularjs
AngularJS 라우팅 설정 locationProvider.html5Mode() 역할은?
AngularJS는 라우팅 기능(Route)을 제공하여 접속된 url에 해당하는 페이지 소스를 보여줄 수 있습니다. 이때 적용된 코드에서 아래와 같은 코드를 쉽게 만날 수 있습니다.angular.module().config(function($locationProvider) { $locationProvider.html5Mode(true); ...});위 코드의 html5Mode()의 역할은 무엇이고 어떤 기능을 하는지 알아봅니다.# locationProvider.html5Mode() 사용하는 이유html5Mode()의 값을 true로 설정하는 경우...
Last Modified : 2018-01-16 06:36:02
Created : 2017-11-16 07:08:51 - html
HTML5 Video 태그 모바일에서 자동재생 안되는 경우, 안드로이드
HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?# 모바일에서 Video 자동영상 안되는 이유이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.# HTML5 모바일폰 자동재생하기아래 에제는 간단...
Last Modified : 2018-01-29 07:15:08
Created : 2017-08-03 20:09:37 
js함수 오버로딩(Overloading)란 무엇이고 자바스크립트에서 차이점
웹개발에서 함수를 사용할때 배우게 되는 함수 오버로딩(Overloading)에 대하여 알아봅니다. 이 것은 무엇이고 자바 그리고 자바스크립트에서의 차이점은 무엇일까요?# 함수 오버로딩(Function overloading)먼저 함수 오버로딩에 대하여 알아보겠습니다. 함수 오버로딩(overloading)은 사전적의미로 본다면 over loading~ 뭔가가 전달되어 읽혀진다로 생각할 수 있습니다. 즉, 함수에 전달되는 것은 인자(arguments)이므로 전달된 인자가 어떻게 읽혀지느냐와 관련이 있습니다. 그 어떻게는 아래에 설명하겠습니다.함수(메소드) 이름은...
Last Modified : 2019-08-22 09:31:36
Created : 2017-06-07 16:38:10- etc
웹개발 SlideShare로 배우기
웹개발을 배울 수 있는 수많은 방법이 존재합니다. 웹페이지를 검색하거나 동영상을 볼 수도 있지만 SlideShare를 사용하는 방법도 매우 효과적입니다.슬라이더 쉐어는 파워포인트 같은 프리젠테이션을 무료로 볼 수 있습니다. 웹과 관련된 내용도 많아 쉽게 배우고 적용할 수 있죠. 제가 슬라이더 쉐어를 좋아하는 이유는..퀄리티 높은 프리젠테이션이 많음시간대비 효율이 높음위 두 가지 이유를 들 수 있죠. 시간대비 효율이 좋은 이유는 동영상은 자세하지만 불필요한 부분을 보는데 시간이 많이 듭니다. 텍스트 웹문서를 보는 것도 좋은 방법이지만 내가 원하는 것을 찾기 어렵고 퀄리...
Last Modified : 2017-05-08 23:00:50
Created : 2017-05-08 22:07:50 - etc
비디오 재생하기 위한 방법으로 hls.js 사용하기
HTML5에서는 VIDEO / AUDIO의 기능이 매우 폭넓게 확장되었습니다. 그런데 크롬 및 기타 브라우저에서 m3u8 확장자를 가진 영상을 재생할 경우 플레이되지 않을 수 있습니다. 이는 해당 디바이스 및 OS에서 지원하지 않기 때문입니다. 이 경우 해결하기 위한 방법으로 hls.js를 사용하는 방법이 있습니다.hls.js를 사용하는 방법에 대하여 알아볼까 합니다. 대부분의 써드파티 앱처럼 이 역시 인스턴스를 생성하고 메소드를 호출하는 방식을 사용합니다.# HLS.js 시작하는 방법아래 방법은 hlsVideo라는 이름으로 인스턴스를 생성하고 몇 가지 이벤트 및 제...
Last Modified : 2017-04-25 19:41:55
Created : 2017-04-25 19:32:13