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

• js [자바스크립트] 객체가 문자열인 경우 객체 또는 JSON 타입으로 변경하는 방법 자바스크립트의 객체가 만약 문자열인 경우를 생각해봅니다. 예를들어 input 태그에 문자열로 아래의 값이 저장된 경우를 생각해봅니다.'{ siteName: "webisfree" }'문자열이지만 원래는 객체임을 한 눈에 알 수 있습니다. 그렇다면 위 문자열을 다시 객체로 변환해보려고 합니다. 어

  View : 627 / Created : 2020-03-23
  
• js [자바스크립트] requestAnimationFrame()을 사용하는 방법 및 예제 자바스크립트의 내장함수인 requestAnimationFrame()에 대하여 알아봅니다.# 자바스크립트 requestAnimationFrame() 메소드 알아보기자바스크립트에서 애니메이션을 구현하는 방법으로 new Date()를 사용한 타이머

  View : 988 / Created : 2020-03-19
  
• js 자바스크립트 소수점 이하의 값만 구하는 방법 자바스크립트를 사용하여 소수점 이하의 값만 구하는 방법에 대하여 알아봅니다.# 자바스크립트 소수점 이하의 값만 얻는 방법정수가 아닌 실수의 숫자 값 중 소수점 이하의 값을 구하려고 합니다. 예를들어 10.234라는 숫자가 있다면 0.234의 값만 얻고 싶습니다. 이때 사용 가능한 방법이 바로 <span data-custo

  View : 1033 / Created : 2020-03-19
  
• js [자바스크립트] 랜덤 색상, 칼라 구하는 방법 자바스크립트를 사용하여 랜덤 색상을 선택하는 방법을 알아봅니다. 어떻게 하면 자바스크립트에서 간단하게 랜덤 색상을 얻을 수 있을까요?# 자바스크립트 랜덤 색상 선택하기랜덤 색상을 선택하는 함수를 만들어보겠습니다. 일단 웹에서 사용 가능한 타입 중 <span data-

  View : 1236 / Created : 2020-03-17
  
• js 순수 자바스크립트로 스크롤 이동 애니메이션 구현하기, animate 자바스크립트에서 현재의 스크롤 위치를 원하는 엘리먼트 및 위치로 이동하는 방법을 순수 자바스크립트를 사용하여 라이브러리 없이 구현해보고자 합니다. 아래에서 자세히 알아보세요.# 자바스크립트 스크롤 애니메이션 구현하기먼저 스크롤을 이동하는 경우는 언제 필요할까요? 가장 많이 사용되는 경우는 내부

  View : 3098 / Created : 2020-03-16
  
• js 타입스크립트에서 세미콜론은 사용하지 말아야할까의 고민 요즘은 거의 모든 프레임워크가 타입스크립트를 지원합니다. AngularJS의 경우 타입스크립트의 사용이 선택이 아닌 필수가 되어버렸고 ReactJS와 VueJS 역시 타입스크립트를 사용할 수 있도록 지원하고 있죠.이런 환경에서 타입스크립트를 사용할 때 세미콜론을 반드시 써야하는지 아니면 쓰지 않아야 하는지 혼동스러운 경우가 발생하는데요 이에 대하여 간단히 상황을 정리해봅니다. 이 글은

  View : 426 / Created : 2020-03-15
• js 자바스크립트에서 객체가 가진 키 값의 개수 구하는 방법 자바스크립트에서 객체가 가진 키의 개수만 구하는 방법을 알아봅니다.# 자바스크립트 객체의 키의 개수 구하는 방법객체 타입을 선언 후 값이 있는지 없는지 확인하기 위해서 키값의 여부를 확인하는 것도 하나의 방법입니다. 이런 이유로 키 값의 개수를 알기 위해서 사용 가능한 방법이 바로 <span data-cu

  View : 527 / Created : 2020-03-15
  
• js 자바스크립트 ES 6에서 async await 사용하는 방법 알아보기 자바스크립트 ES 6의 async, await에 대하여 알아봅니다. 이 둘은 뭘 할 수 있고 어떤 경우에 사용할까요?# ES 6의 async, await 알아보기자바스크립트를 사용하여 비동기 방식으로 무엇인가를 실행할 때.. 예를들어 api를 호출한다면 호출이 끝난 후 콜백함수를 실행하고 합니다. 그런데 경우에 따라서는 비동기 호출이

  View : 597 / Created : 2020-03-14
  
• js [자바스크립트] window.onload 여러 번 사용하는 대체 방법 자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 onload를 많이 사용합니다.그런데!!!만약 웹페이지에서 window.onload가 여러 번 사용하는 경우? 이 경우 예상과 달리 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있습니다. 그럼 어떻게 해야하는지 대체할 방법을 알아봅니다.! 우선 onload 이벤트는 언제 필요할까요

  View : 928 / Created : 2020-03-12
• etc [Windows CMD] 명령어 start 알아보기 윈도우즈 커맨드 라인 명령어 start에 대하여 알아봅니다.# command start 명령어 알아보기윈도우즈에서 cmd를 누르고 start라는 명령어를 입력하면 또 다른 새로운 창이 나타나게됩니다. sta

  View : 1166 / Created : 2020-03-12
  
• css [CSS] 16:9 등의 비율 ratio 적용하는 방법과 팁 웹페이지를 만들때 만약 16:9 등 원하는 화면 비율을 적용하려면 어떻게 할까요? CSS를 사용하여 비율로 화면을 적용하는 방법에 대하여 알아봅니다.! 화면 16:9 비율이 언제 필요할까요사실 16:9 비율이 필요한 경우는 크지 않습니다. 다만 웹사이트에서 자주 사용되는 경우는 아래와 같습니다.<ul class="pos

  View : 587 / Created : 2020-03-11
  
• js 자바스크립트 배열에서 빈 값만 제거하기 자바스크립트에서 만약 빈 배열 값이 존재하는 경우 이런 값만 삭제하는 방법을 알아보려고 합니다.예를들어 기존의 값이 위라면 아래와 같이 변경하는 방법입니다.myNum = [1, undefined, 3, '', 5]; // 변경 전myNum = [1, 3, 5] // 변경 후즉 값

  View : 2319 / Created : 2020-03-07
  
• js [자바스크립트] textContent 그리고 innerText 차이점 알아보기 자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법 중 하나인 textContent에 대하여 알아봅니다. 여기서 방법 중 하나라고 얘기한 이유는 잘 알려진 innerText가 존재하기 때문이죠.# 자바스크립트 textContent 프로퍼티 알아보기자바스크립트 프로퍼티인 <span data-custom-s

  View : 1984 / Created : 2020-03-07
• vuejs [VueJS] 태그에 백그라운드 이미지 추가하는 방법 VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약

  View : 1013 / Created : 2020-02-21
  
• angularjs [AngularJS] 파일 변경시 자동 리로드되는 끄는 방법, 자동 리로드 해제 AngularJS 앱을 로컬 개발 환경에서 실행하는 경우 ng 스크립트에서 자동으로 파일이 변경되면 리로드하도록 기본값이 설정됩니다. auro reload가 되는데요 ~ 만약 자동 리로드를 끄려면 어떻게 해야 하는지 알아봅니다.# AngularJS 로컬 개발시 자동 리로드 비활성화 하기방법은 간단합니다. 로컬 웹서버를 ng server로 띄울 때 옵션을 변경하면 되죠. 이때 사용할 옵션이 바로 --live-reload

  View : 237 / Created : 2020-02-17
• js [자바스크립트] 객체를 새로운 객체로 복사 clone하는 방법 자바스크립트에서 객체(Object) 타입을 복사, 복제(Clone)하는 방법에 대하여 알아봅니다. 어떻게 하면 똑같은 객체를 하나 더 만들 수 있을지 알아봅니다.! 객체 복사, 복제 앞서 반드시 알아둘 사항객체를 복사하기 이 전에 중요한 개념을 이해하는 것이 좋겠죠. 바로 깊은 복사(Deep copy)와 <span data-custom-style="ct05"

  View : 464 / Created : 2020-02-17
• angularjs [AngularJS2] select 태그 option에 for문 사용시 기본값 사용 방법 AngularJS에서 select 태그의 option에 ngFor를 사용하는 경우 기본값을 사용하는 방법을 알아봅니다.# select 태그 ngfor문에 기본값 사용하기먼저 기본값을 사용하기 위해서는 ngFor가 적용된 option 태그에 [selected]를 사용해야합니다.[selected]="조건값"조건이 true인 경우에는 기본값

  View : 441 / Created : 2020-02-16
• webdevetc 자바 템플릿 Thymeleaf (타임리프) 주석 처리 방법 자바 템플릿 타임리프(ThymeLeaf)에서 서버 사이드 주석을 사용할 경우의 방법입니다. 클라이언트 주석은 html 소스 보기에서 확인할 수 있어 완전히 숨겨야 하는 경우 서버사이드 주석이 사용됩니다.! ThymeLeaf 주석 사용방법타임리프 주석은 아래와 같이 사용합니다. 만약 button 태그를 주석처리하는 경우 다음과 같습니다.@ 블럭 단위의 주석 사용 방법<

  View : 682 / Created : 2020-02-14
• js [자바스크립트] 클립보드 카피시 IE, Edge에서 스크롤이 하단으로 이동하는 이슈 크로스브라우징 관련 내용입니다. 특정 텍스트를 클립보드에 복사하는 경우 IE 및 Edge에서 스크롤이 하단으로 이동하는 문제가 발생합니다. 어떻게 해결하는지 아래에서 확인해보세요.! 해결방법해결방법은 클립보드를 위해 생성한 임시 태그 input 또는 textarea에 fixed 스타일을 추가하는 것입니다. 해당 이슈는 스크롤이 생기면서 발생하게 되는데 fix

  View : 363 / Created : 2020-02-13
• webdevetc [HTML5] Video 태그 사용 방법 및 예제 정리 아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.! Video 태그

  View : 2143 / Created : 2020-02-12
• python Python에서 virtualenv 설치 및 사용 방법 Python 환경에서 pip 파이썬 패키지를 관리할 수 있도록 도와주는 virtualenv에 대하여 알아봅니다.! Python의 virtualenv는?virtualenv는 파이썬 환경에서 독립된 가상 환경을 제공하여 파

  View : 445 / Created : 2020-01-13
  
• webdevetc 자바 템플릿 타임리프(thymeleaf)에서 html 파일 추가하는 방법 및 예제 자바 템플릿 엔진으로 사용되는 타임리프(thymeleaf)에서 html 파일을 include, 추가하는 방법에 대하여 자세히 알아봅니다.# 타임리프(tymeleaf)에 html 파일 추가하기다른 템플릿 언어들 처럼 thymeleaf에도 html 파일을 원하는 곳에 include, 추가 할 수 있습니다. 예를들어 공통적으로 사용되는 header나 foote

  View : 1167 / Created : 2020-01-03
• python Python Flask에서 CORS Cross Origin 사용하기 Python에서 Flask를 사용하는 경우 CORS(Cross Origin Resource Sharing) 설정이 필요할 수 있습니다. 예를들어 다른 도메인이나 로컬 환경에서 자바스크립트로 api 등을 호출하는 경우 브라우저에서 동일 출처 위반의 에러가 나타날 수 있습니다. 이를 해결하려면 어떻게 할까요?이때 <span data-custom-

  View : 3073 / Created : 2020-01-01
  
• python [Python] 파이썬에서 폴더 추가 및 삭제하는 방법과 예제 파이썬에서 폴더를 생성하는 방법을 알아봅니다. 추가로 폴더가 있는지 확인 후 없는 경우에만 추가하려면 어떻게 할 수 있을까요?# 파이썬 폴더 추가하기먼저 폴더 추가 방법을 알아보겠습니다. 폴더를 추가할 경우 os 패키지 모듈의 mkdir()을 사용합니다.<br

  View : 1654 / Created : 2019-12-31
  
• js 자바스크립트 이벤트 제거, removeEventListener 자바스크립트에서 이벤트를 제거하는 방법을 알아봅니다.# 자바스크립트 이벤트 제거하기, removeEventListener자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수 있으며 이 때 removeEventListener()를 사용합니다.

  View : 3958 / Created : 2019-12-30
• webdevetc uwsgi 멀티 라우팅 사용시 no internal routing support, rebuild with pcre support uwsgi 에러 발생 uwsgi 미들웨어를 사용한 웹어플리케이션 구축 후 uwsgi에서 내부 라우팅을 사용하려고 설정하거나 기타 이유로 아래와 같이 에러가 발생할 수 있습니다."no internal routing support, rebuild with pcre support uwsgi"아래는 해당 이슈를 해결하기 위한 방법입니다.# uwsgi internal routing 에러 수정하기일

  View : 703 / Created : 2019-12-27
• webdevetc 웹스톰 vim 모드 끄는 방법 웹스톰(Webstorm)을 처음 설치시 설정 가능한 옵션으로 vim 모드를 사용할 수 있습니다. 만약 Vim mode인 경우 이를 설정 해제하려면 어떻게 하는지 알아보고자 합니다.# 웹스톰 vim 모드 해제하기앞서 말한 것 처럼 처음 설치시 vim모드를 설정하면 추가로 IdeaVim 플러그인이 설

  View : 365 / Created : 2019-12-24
  
• webdevetc 웹스톰(Webstorm) IDE 단축키 정보 알아보기 아래는 웹스톰(Webstorm) IDE의 단축키(shortcuts) 정보입니다. 자주 사용되거나 중요한 단축키 위주로 정리하였습니다.! 유용한 팁 및 정보먼저 아래는 자주 사용되는 유용한 팁입니다.@ 자동 인덴트 페이지 전체 적용하기(Auto Indentation)Ctrl</spa

  View : 1655 / Created : 2019-12-24
• css [CSS] 스크롤 이동 애니메이션 속성, scroll-behavior 스크롤 이동시 오직 css만 사용하여 스크롤 애니메이션을 구현할 수 있는 scroll-behavior에 대하여 알아봅니다.# CSS scroll-behavior 속성웹페이지에서 스크롤을 원하는 위치로 이동하는 방법으로 자바스크립트를 사용하거나 href="#id"의 방

  View : 4234 / Created : 2019-12-19
  
• webdevetc IE 브라우저에서 flex 엘리먼트의 vertical 정렬(세로정렬)이 안되는 이슈 웹사이트를 만들어 테스트 하는 중 IE에서만 발생하는 이슈입니다.! 이슈사항엘리먼트에 display: flex;를 사용한 경우 정렬을 위해 사용하는 align-items가 다른 브라우저는 잘 동작하나 Internet Explorer(IE) 11에서만 정상적으로 작동하지 않았습니다.@ 원인원인을 확인해보니 IE에서는 세로 정렬을 위해 align-items를 사용하는 경우 반드시 height 값이 필요하다는 것을

  View : 1157 / Created : 2019-12-17