6 페이지 - 웹개발 커뮤니티 블로그

js 자바스크립트에서 URL 쿼리스트링(query string) 쉽게 가져오는 방법 웹페이지에서 url/uri를 통해서 전달된 쿼리스트링 정보를 자바스크립트에서 읽어오는 방법에 대하여 알아봅니다.# 쿼리스트링 정보 자바스크립트 읽어오는 방법웹페이지로 정보를 전달하고 이를 읽어오는 방법으로 쿼리스트링(query string)을 통해 전달할 수 있습니다. 이렇게 전달된 경우 아래와 같은 형태의 url 주소를 가지고 있겠죠.<div class

View : 4641 / Created : 2019-07-26

html [html] base 태그 사용 방법 알아보기 웹페이지 HTML에 사용되는 <base> 태그에 대하여 알아봅니다.# HTML base 태그는?base 태그는 head 안에서 선언된 것을 볼 수 있는데요 ~ base 태그를 사용하면 기준이 되는 base url/uri를 설정하여 사용할 수 있습니다.

View : 1982 / Created : 2019-07-22

jquery 제이쿼리 다음 엘리먼트 찾기 next() nextAll() 제이쿼리 선택자는 매우 편리한데요~ 만약 어떤 엘리먼트를 선택자로 찾았는데 그 다음에 위치한 엘리먼트를 가져오는 방법을 알아볼까합니다.# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합

View : 1338 / Created : 2019-07-21

vuejs [VueJS] 태그 이름 무시, vue 컴포넌트 제외하는 방법 VueJS에서 컴포넌트가 아닌 태그를 사용할 경우 에러가 발생합니다. 어떻게 하면 에러가 나타나지 않을까요?예를들어 <myTag></myTag>라는 태그를 웹페이지에 코드에 추가한다고 가정해봅니다.<div id="vueApp"> <myTag>Hi</myTag></div>VueJS에서는 myTag가 Vue에 등록된 태그라고 인식하고 찾기 시작할텐데

View : 521 / Created : 2019-07-21

etc 넷플릭스(Netflix) 요금제 및 기타 정보 인기 영화 및 드라마 등을 볼 수 있는 가장 유명한 스트리밍 사이트 중 하나, 넷플릭스(Netflix)에 대한 가격 및 기타 정보들입니다. - 회사명 : 넷플릭스- 홈페이지 : <a href="https://www.netflix.com/kr/" target="_b

View : 1115 / Created : 2019-07-20

css CSS display grid 방법 및 예제 보기 css를 사용하여 화면 그리드(grid) 레이아웃을 구현하는 가장 간단한 방법은 display: grid 또는 display: inline-grid를 사용하는 것입니다. 아래와 같이 css를 선언하여 사용합니다.display: grid | inline-gridgrid는 격자를 의미하는데 css그리드 형태의 레이아웃을 구현할 때 이 방법을 사용하면 매우

View : 2854 / Created : 2019-07-18

webdevetc 애드센스 광고에서 ads.txt 파일 생성 및 추가하는 방법 구글 애드센스(Adsense)를 사용하는 경우 ads.txt 파일을 생성하여 자신의 웹사이트에 적용하는 방법을 알아봅니다.구글 애드센스는 ads.txt 파일을 서버에 추가하여 사용할 것을 권장하고 있는데 하지만 ads.txt가 실제 광고 수익에 얼만큼 큰 영향을 미치는지는 알 수 없는 것 같습니다. 다만 향후에는 대부분의 사이트에서 ads.txt를 사용해야만 하는 상황이 올 것이라 예상할

View : 1212 / Created : 2019-07-16

js 자바스크립트 객체 병합, 합치는 방법, merge 자바스크립트에서 여러개의 객체를 하나로 병합하는 방법... 즉, 객체(Object)를 합치는 방법(Merging)에 대하여 알아보겠습니다.! 객체를 언제 합쳐야 할까요?여러가지 이유가 있겠지만 가장 많은 이유는 컬렉션 등의 데이터를 가지

View : 6543 / Created : 2019-07-09

css CSS filter 프로퍼티 사용하여 블러 효과 적용하기, blur CSS의 filter 프로퍼티를 사용하여 블러 효과(Blur effect)를 적용하는 방법에 대하여 알아봅니다. CSS의 filter는 CSS3에서 지원된 프로퍼티로 특정 이미지나 요소에 적용하면 다양한 필터 효과를 적

View : 4738 / Created : 2019-07-09

js 제이쿼리 not() 메소드 알아보기 제이쿼리(jQuery)에서 선택자 결과에 사용 가능한 not() 메소드에 대하여 알아봅니다. 어떻게 그리고 언제 사용할 수 있을까요? # 제이쿼리 not() 메소드 알아보기먼저 엘리먼트를 선택하기 위해서 선택자(selector)를 사용합니다. 이때 $(s

View : 1585 / Created : 2019-07-06

js 자바스크립트에서 AJAX 비동기 방식으로 Excel 파일 다운로드 받는 방법 자바스크립트를 사용하여 비동기 AJAX를 사용하여 엑셀(Excel) 다운로드 받는 방법을 알아봅니다. 먼저 아래의 상황에서 ajax 다운로드를 수행하게 됩니다.- AJAX로 서버에 값을 전송- 전송된 값에 따라 엑셀(blob) 타입으로 서버에서 엑셀 파일을 리턴- 전달 받은 response를 다운로드 링크를 만들어서 클릭 이벤트를 실행

View : 7344 / Created : 2019-07-02

js [자바스크립트] ]Select 태그의 값의 value 프로퍼티 변경시 onchange가 동작 안 하는 경우 해결하기 자바스크립트에서 select 태그에 onchange 이벤트를 사용할 수 있습니다. 그런데 onchange 이벤트가 동작하지 않는 경우가 발생할 수 있는데요... 그 원인과 해결방법을 알아봅니다.onchange가 select 태그에 바로 동작하지 않는 경우는 select 태그를 클릭해서 값을 선택하지 않고 select 태그의 value 프로퍼티의 값을 스크립트를 사용하

View : 1737 / Created : 2019-07-01

js 자바스크립트 FormData 데이터 전송 알아보기 자바스크립트에서 서버에 데이터를 전달해주는 API(인터페이스) FormData에 대하여 알아보겠습니다.! FormData는 무엇인가?자바스크립트를 사용하여 데이터를 서버에 보낼 수 있으며 Ajax 방식, 비동기식으로 데이터나 파일 모두 전송 가능하다는 점이 장점입니다. 최근 FormData가 많이 사용되는 이유는 비동기식 통신으로 <form&

View : 4394 / Created : 2019-06-27

webdevetc bootstrap DataTable 사용시 sorting 정렬하는 방법 부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)# DataTable 정렬하는 방법DataTable의 정렬은 설정에

View : 3829 / Created : 2019-06-21

webdevetc curl 411 에러, Length Required 해결하기 curl을 사용하여 서버와 통신하는 경우 아래와 같은 메시지와 에러가 발생할 수 있습니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD><TITLE>Length Required</TITLE><META HTTP-EQUIV="Content-Type" Content="text/html;

View : 1611 / Created : 2019-06-19

js 자바스크립트 Object 메소드 entries() 알아보기 자바스크립트의 객체(Object)에 사용할 수 있는 entries() 메소드에 대하여 알아봅니다.# 자바스크립트 Object의 entries() 메소드는?자바스크립트은 여러 타입이 있는데요 그 중에 객체 타입은 배열처럼 여러 개의 값을 가지고 있습니다. 만약 객체가 어떤 값들을 가지고 있는지 모두

View : 1893 / Created : 2019-06-18

css CSS 레인보우(rainbow) 색상의 텍스트 만들기 CSS를 사용하여 텍스트에 특별한 효과를 만들 수 있습니다. 이번에는 무지개 효과를 만드는 방법에 대하여 알아봅니다. 어떻게 하면 무지개 효과를 만들 수 있을까요? 아래에서 확인해보세요. # CSS 텍스트 무지개 효과 구현하기텍스트를 강조하는 방법으로

View : 1720 / Created : 2019-06-18

webdevetc dateTimePicker UI 사용시 동적으로 날짜 format 변경하는 방법 날짜 시간을 입력 받을 수 있는 라이브러리 datetimepicker UI는 시간과 날짜를 함께 설정할 수 있는 편리한 UI 컴포넌트로 매우 자주 사용됩니다. 아래는 datetimepicker의 날짜 시간 포맷을 동적으로 변경하는 방법에 대하여 알아보겠습니다.만약 상황에 따라 사용할 날짜/시간 포맷을 동적(dynamic)으로 변경하려면 어떻게 해야할까요? 페이지 로딩시 설정

View : 2470 / Created : 2019-06-14

webdevetc nginx 국가 코드별 접속 차단 및 허용 설정하기 원치 않는 국가에서 접근을 시도하는 경우 어떻게 하면 접속을 막거나 허용할 수 있는지 고민하게 되었습니다. 이유는 몇 가지 있는데 최근 급증한 데이터 트래픽 증가가 원인 중 하나였습니다.어쨌든 방문자의 접속을 제어하고 싶은데 어디서 제어할 것인가를 결정해야 합니다. 이 중에서 간단한 방법인 서버측 환경, nginx 설정을 사용하여 국가 별로 허용하거나 제한하는 방

View : 1408 / Created : 2019-06-07

js [자바스크립트] input 태그 placeholder 프로퍼티 자바스크립트를 사용하여 input 태그의 placeholder 값을 가져오거나 변경 가능한 프로퍼티 placeholder에 대하여 알아봅니다.placeholder자바스크립트 프로퍼티 placeholder는 input 태그에 사용하여 적용된 placeholder의 값을 변경하거나 가져올

View : 1799 / Created : 2019-06-04

js 자바스크립트 객체를 쿼리스트링 값으로 바꾸기 자바스크립트를 사용하여 API를 호출하는 경우 서버에 값을 전달해야 하는 경우가 있죠. 이때 객체로 된 값을 쿼리스트링(QueryString)으로 변환하려면 어떻게 해야하는지 알아봅니다.# 객체로 된 값을 쿼리스트링(query string) 값으로 변환하기서버에서는 encoded 값으로 문자열로

View : 1230 / Created : 2019-05-15

js 자바스크립트 fetch API 알아보기 자바스크립트를 사용하여 AJAX 비동기 통신을 위해 별도의 라이브러리를 많이 사용하고 있습니다. 예를들면 jQuery의 ajax() 메소드를 사용하거나 아니면 axios 라이브러리 등을 단지 AJAX 구현을 위한 목적으로 추가해 사용해왔습니다.왜냐하면 <

View : 8713 / Created : 2019-05-15

python Python pip 설치 후 package 버전 확인 방법 python에서 pip를 사용하여 패키지를 설치하여 사용하는 경우 현재 버전을 확인하는 방법을 알아봅니다. 아래의 show 플래그는 특정 패키지의 여러 가지 정보를 출력합니다.pip show <packageName>그럼 예를들어 어떻게 출력되는지 아래에서 확인해보세요.# pip 설치된 패키지 정보 알아보기설치된 패키지 pym

View : 5477 / Created : 2019-04-16

python Python Jinja2에서 소문자 대문자 사용하는 방법 Python에서 Jinja2를 사용할 때 텍스트를 소문자 또는 대문자로 변환, 바꾸는 방법을 알아봅니다. 어떻게 하면 될까요?# Jinja2 템플릿 소문자 대문자 변환하는 방법대문자 소문자 변환은

View : 488 / Created : 2019-04-11

vuejs VueJS 부모 자식 컴포넌트에 props 사용하여 양방향 바인드 방법 VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), <span dat

View : 5912 / Created : 2019-04-04

webdevetc 네이버블로그 본문에 광고를 노출하자. 네이버애드포스트 본문에 광고 개제하기 네이버블로그를 운영해오던 많이 이들에게 드디어 반가운 소식이 들려오게 되었습니다. 바로 네이버블로그의 본문에 광고 게재가 된다는 사실입니다!!"네이버블로그 본문에 광고 게재되다."아마 많은 분들이 궁금해왔던 부분인데요... 네이버는 블로썸 데이에서 현재의 네이버블로그에 대하여 여러가지 개편 및 개선될 사항들을 미리 얘기

View : 1318 / Created : 2019-03-29

vuejs [VueJS] vue-router 사용하는 방법, 라우트 설정 VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주

View : 13061 / Created : 2019-03-25

js [ECMAScript] es6 module import export 방법 알아보기 ES 2015(ES 6)에서 새롭게 추가된 모듈(module) import, export에 대하여 알아봅니다.ES 6에서의 큰 변화 중 하나가 바로 Module 방식의 export, import가 추가된 사항입니다. 사실 이 전까지의 자바스크립트는 실질적인 모듈이 지원되지는 않았습니다. 하지만!! ES 6부터 export, import를 사용하는 방법이 가능하므로 큰 변화중 하나입니다. 이 중

View : 1615 / Created : 2019-03-22

webdevetc 쿠팡파트너스 등록 방법 및 배너 달기 쿠팡 파트너스란?작년인 2018년 7월 쿠팡은 새로운 광고 플랫폼 쿠팡 파트너스를 선보였습니다. 구글의 애드센스처럼 광고를 자신의 앱이나 웹 등에 개제하고 수익을 얻을 수 있는 구조입니다. 특히 단순 링크 방식의 배너에서 수익이 발생할 수 있어 네이버블로그

View : 2789 / Created : 2019-03-19

linux [리눅스] 마지막 사용자 접속 기록 보기, last 리눅스에서 로그인 사용자의 기록을 확인하는 방법을 알아봅니다. 만약 최근 가장 마지막에 접근한 사용자의 정보를 얻으려면 어떻게 할까요?@ 참고사항로그인 사용자 기록을 확인하는 경우는 언제일까요? 다양한 경우가 있겠지만 하나 예를들자면.. 만약 서버에 어떤 변경사항이 발견되었는데 누가 수정하였는

View : 2807 / Created : 2019-03-18

CATEGORIES

LATEST POSTs 최근 등록된 포스팅 목록