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

---

인기순

• webdevetc npm package-lock 설치 및 사용 방법 Node 환경의 패키지 관리툴인 npm을 사용하면 package.json과 package-lock.json 파일이 생성되게 됩니다. 아래는 package-lock.json 파일에 대하여 알아보려고 합니다.# package-lock.json 무엇인가먼저 언제 이 파일이 생성 될까요? npm install 등의 방법으로 package.json 또는 /node

  View : 1423 / 2020-05-25
• webdevetc 윈도우즈에서 특정 ip, 포트 외부 및 사내 접근 허용 방법, 방화벽 인바운드 설정하기 윈도우즈 환경에서 자신의 ip 주소를 외부 및 사내에서 접근하도록 ip 또는 포트를 허용하는 방법을 알아봅니다.# 윈도우즈 외부 접근 ip 및 포트 허용하기자신의 pc로 접근을 허용 가능하도록 하려면 방화벽 설정을 변경해야합니다. 보안상의 이유로 기본값은 외부의 접근이 막혀있으며 이때 인바운드 규칙을 변경 추

  View : 2308 / 2020-05-18
  
• webdevetc [서버구축] 단일 서버와 데이터베이스 서버의 분리가 왜 필요할까 일반적으로 단일 서버로 운영하거나 아니면 데이터베이스 서버를 분리하여 사용하는 경우가 많습니다. 그렇다면 이 둘의 차이점은 무엇이고 언제 그리고 왜 이렇게 사용하는지 알아보려고 하니다.# 서버 구축시 단일 서버와 데이터베이스 서버 분리 방법의 차이는?일반적으로 단일 서버를 사용하는 경우... 즉 WAS 서버와 Database서버를 하

  View : 5023 / 2020-05-07
  
• webdevetc 최근 개발자 채용시 내세우는 근무 환경과 혜택, 여건 등은 무엇이 있을까 회서에서 실력있는 개발자를 구하기는 결코 쉬운 일이 아닙니다. 최근에는 많은 회사들이 이런 저런 다양하고 독특한 장점들을 내세우고 있죠.아래는 최근 개발자의 채용공고를 살펴보면서 공통적이거나 특색있는 채용 조건 등을 알아보고자 합니다. 최근에는 어떤 근무형태, 근무환경 또는 복리후생 등

  View : 823 / 2020-05-06
  
• webdevetc [npm] node 패키지 모듈의 버전을 원하는 버전으로 변경하는 방법 아래는 노드 패키지 모듈(npm) 설치 할 때 원하는 버전을 선택, 설치(인스톨)하는 방법을 알아봅니다.# 노드 패키지 원하는 버전으로 설치하기패키지 모듈을 npm으로 설치시 반드시 최신 버전이 필요한 것은 아닙니다. 오히려 그 이하의 버전이 필요하기도합니다. 특히 모듈 사이의 <sp

  View : 5055 / 2020-04-21
• webdevetc 웹개발 소스를 크롬에서 바로 수정 및 저장 방법 알아보기 크롬 브라우저를 사용하여 개발자 도구를 사용해 직접 소스를 변경, 추가하는 방법에 대하여 알아봅니다.! 브라우저에서 직접 수정하고 추가하는 방법이 가능?크롬 브라우저를 사용하는 경우 크롬의 Workspace 설정으로 가능합니다. 그럼 개발자 도구를 사용하여 브라우저에서 직접 수정하고 저장하는 방법에 대하여 자세히 알아봅니다.# 개발자 도구로 크롬에서 바로 수정,

  View : 16760 / 2020-04-18
  
• webdevetc 윈도우즈 시작프로그램 중지, 삭제하는 방법 윈도우즈에서 시작프로그램을 정리하는 방법을 알아봅니다. 여기서는 빠르게 시작 프로그램을 중지, 삭제하려면 어떻게 할 수 있는지 알아봅니다.! 시작프로그램 정리의 필요윈도우즈 등의 OS를 오래 사용하면 자신도 모르는 프로그램이 설치되기도 하고 이런 프로그램, 어플리케이션이 시작프로그램에도 등록되어 부팅되면 계속해서 실행될 수 있습니다. 이 중에는 거의 사용하지 않거나 사용되지 않

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

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

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

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

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

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

  View : 3898 / 2019-12-17
• webdevetc css background로 사용된 svg 이미지 IE에서 깨지는 현상 해결하기 홈페이에 사용된 이미지가 IE에서만 깨지는 현상이 발견되어 수정하였습니다.! svg 깨짐 현상의 이유는?원인은 IE 환경에서 SVG 이미지를 css의 backgroud 속성을 사용하여 size 및 position을 설정하는 경우 발생하게 됩니다. 즉 브라우저 환경에 다른 스타일이 적용되어 크로스 브라우징이 필요하게 되었습니다.! 해결방법</s

  View : 3424 / 2019-12-11
• webdevetc 로컬에 npm simplehttpserver 노드 패키지로 간단하게 웹서버 띄우기 자신의 로컬 pc에 웹서버 개발 환경을 구축하는 경우, 특히 간단한 웹사이트 개발시 복잡한 서버 구조는 딱히 필요가 없을 수 있습니다.이때 웹서버를 띄우는 방법으로 Node package 중 하나인 simplehttpserver를 사용할 수 있죠. node를 사용한 웹서버 구동으로 자바, php, python 등의 서버 언어가 딱히

  View : 955 / 2019-12-09
  
• webdevetc HTML5의 드래그앤드랍 구현 방법 및 예제, Drag and Drop HTML5, 자바스크립트를 사용하여 드래그앤드랍(Drag and Drop)을 구현하는 방법에 대하여 알아봅니다.# 드래그앤드랍이란?드래그앤드랍은 사용자 인터페이스(UI) 구현 방법 중 하나로 <span data-c

  View : 11273 / 2019-11-22
• webdevetc tensorflow.js란 무엇이고 어떤 장점이 있을까? 잘 알려진 것 처럼 텐서플로우(TensorFlow)는 파이썬에서 동작하는 딥러닝, 머신러닝 등에 사용하는 프레임워크로 잘 알려져 있습니다. 여기에 .js를 붙이면 바로 TensorFlow.js가 되죠. 바로 이것은 무엇인지 알아봅니다.# TensorFlow.js란 무엇인가?텐서플로우는 구글에서  만든 파이썬 기반의 프레임워크으로 서버에서 구동되고 동작합니

  View : 1718 / 2019-11-19
  
• webdevetc [element-ui] 엘리먼트 UI dialog 컴포넌트 예제 및 방법 VueJS에서 많이 사용되는 UI 라이브러리인 element UI의 diablog 컴포넌트에 대하여 알아봅니다.# dialog component화면에 window.open()의 새로운 창이 아닌 내부 레이어를 사용한 모달창을 띄우는 경우 dialog라고 부르기도 합니다. 엘리먼트UI(element UI) 역시 dialog를 사용할 수 있도록 컴포넌트를 제공합니다.

  View : 4151 / 2019-11-07
• webdevetc Nodejs에서 morgan 설치 및 사용하기 NodeJS 서버로 구성된 웹 환경에서는 로그(log)를 관리하기 위한 별도의 서드파티 라이브러리나 툴을 사용할 것을 권장합니다. 그래서 많이 쓰이는 것 중 하나인 morgan을 알아봅니다.morgan은 nodeJS 에서 사용되는 로그 관리를 위한 미들웨어 입니다. 그럼 morgan을 사용하는 이유는 무엇일까요?- 로그 관리를 쉽게 하기 위함(환경에 따른 다른 설정 등); 가장 큰 이유입니다. 에러에만 사용하거나 dev환

  View : 5011 / 2019-10-31
• webdevetc 윈도우즈 포트 열기, 인바운드 및 아운바운드 설정하기 윈도우즈(Windows) 개발 환경 로컬 포트 열어주기는 방법을 알아봅니다.! Why ?포트를 열어 외부에서 접근 가능하도록 ip를 허용할 경우 사용합니다. 만약 로컬 pc에서 개발을 완료한 경우 개발 작업물을 보여주는 목적으로도 사용할 수 있습니다.자세한 방법은 아래의 과정에 따라 이동합니다.- 제어판 이동- 시스템 및 보안 이동- Windows Defender 방화벽 이동- 좌측 고급

  View : 2241 / 2019-10-11
  
• webdevetc CentOS 버전 확인 하는 방법 현재 설치된 CentOS 버전을 확인하는 방법을 알아봅니다. 이 때 아래 커맨드 cat /etc/centos-release를 입력합니다.cat /etc/centos-release위 명령어를 입력하면 화면에 해당 버전이 아래와 같이 출력됩니다.CentOS release 6.10 (Final)이제 CentOS 버전이 6.10 버전임을 확인할 수 있습니다.

  View : 880 / 2019-10-10
• webdevetc [react native] com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE 에러 발생 수정하는 방법 react native를 사용하여 앱 개발시 아래처럼 에러가 나타납니다.com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE처음 부터 문제가 발생하는 것은 아니고 테스트를 위해 실행을 반복하다보면 나타납니다. 문제 원인을 확인해보니 Android 가상 Device의 메모리 이슈입니다. 해결 방법

  View : 1683 / 2019-09-20
• webdevetc Android Studio build 에러 Unfortunately you can't have non-Gradle Java modules and > Android-Gradle modules in one project Android Studio에서 Build를 진행해 apk 파일을 생성하는 과정에서 다음과 같은 모듈 에러가 발생하였습니다.Unfortunately you can't have non-Gradle Java modules and > Android-Gradle modules in one project문제는 Sync가 진행되지 않으면서 apk 파일 생성이 되지 않는데 위 에러를 아래 방법으로 해결하였습니다.- Android Studio 이동-

  View : 2824 / 2019-09-18
• webdevetc Git사용시 gitignore 동기화 무시하는 방법 Git을 사용하여 개발, 배포등의 프로세스를 사용할 경우 동기화, 즉 서버에 반영하지 말하야 할 파일이나 폴더가 존재합니다. 예를들면 방문자에 의해 바뀌는 파일 업로드나 아니면 개발자 각각의 설정 파일 등이 그런 것들입니다.그렇다면 이런 파일을 서버와 동기화하지 않고 추가하지 않는 방법은 어떻게할까요? 이때 .gitignore를 사용하면 되는데요 아래에서 알아봅니다.<b

  View : 1497 / 2019-07-31
• webdevetc 파비콘이 없는 경우 에러 방지, prevent favicon error 웹페이지에 파비콘이 없거나 아직 준비되지 않은 경우 브라우저에서 에러가 발생할 수 있습니다. 에러 메시지는 파비콘이 존재하지 않는다는 메시지입니다.# 파비콘 에러 메시지 무시하기만약 파비콘을 사용할 계획이 없거나 에러 메시지를 무시하려면 어떻게 할까요? 이 때는 아래와 같이 파비콘 관련 설정을 <head> 태그에 추가하면 에러는 사라지게 됩니다.<link rel="s

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

  View : 1842 / 2019-07-16
  
• webdevetc bootstrap DataTable 사용시 sorting 정렬하는 방법 부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)<span data-custo

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

  View : 5430 / 2019-06-14