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

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

View : 3533 / Created : 2020-01-01

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

View : 1966 / Created : 2019-12-31

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

View : 4748 / 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 : 791 / Created : 2019-12-27

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

View : 406 / Created : 2019-12-24

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

View : 1974 / Created : 2019-12-24

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

View : 4713 / Created : 2019-12-19

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

View : 1405 / Created : 2019-12-17

js [자바스크립트] 스크롤 이벤트에서 스크롤 방향 알아내는 방법 자바스크립트에서 마우스의 스크롤 이벤트를 사용하는 경우 만약 마우스 스크롤의 방향을 알려면 어떻게 알 수 있는지 알아봅니다.# 자바스크립트 마우스 스크롤 방향 알기마우스 스크롤을 방향을 알기 위해서 가장 많이 사용되는 방법이 바로 <span data-cus

View : 3553 / Created : 2019-12-16

react [React] img 태그의 이미지를 추가하는 방법 및 예제 알아보기 React(리액트)에서 템플릿 파일 및 컴포넌트에 이미지를 추가하는 방법에 대하여 알아봅니다. react에서는 이미지를 추가하는 경우 두 가지 방법으로 구분할 수 있습니다.i. import를 사용하는 방법ii. require()를 사용하는 방법먼저 import를 사용하는 방법부터 알아보고 그 아래에 require()를 사용해보겠습니다.<span d

View : 5906 / Created : 2019-12-12

attrib, 파일숨김, 파일속성 [윈도우즈 cmd] attrib 명령어 알아보기, 파일 숨김 윈도우즈의 명령 프롬프트 CMD(Command Prompt) 명령어 중 하나인 attrib에 대하여 알아봅니다.# 윈도우 명령 프롬프트 attribattrib은 파일의 속성을 변경할 수 있는 명령어입니다. 파일은 파일이름, 확장 외에 속성을 가지고 있으며 읽기전용, 숨김 등등이 그것입니다.

View : 1266 / Created : 2019-12-11

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

View : 1303 / Created : 2019-12-11

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

View : 498 / Created : 2019-12-09

js [자바스크립트] 달력 이번 달 마지막 날 구하는 방법 자바스크립트를 사용하여 날짜를 구하는 방법 중 이번 달이 몇 일까지 있는지 알려면 어떻게 할까요? 다시 말하면..."특정 달의 마지막 날을 알아내는 방법"위와 같이 얘기할 수 있습니다. 아래에서 자세히 알아봅니다.# 자바스크립트로 마지막 날짜 구하는 방법자바스크립트는 날짜와 관련된 편리한 함수들이 존재하는데 먼저 <span data-c

View : 1746 / Created : 2019-12-04

vuejs [VueJS] 부모 자식 컴포넌트간의 데이터 전달하는 방법, sync modifier 수식어 사용 VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.# sync 수식어를 사용하여 컴포넌트 데이터 전달먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이

View : 1112 / Created : 2019-11-26

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

View : 4928 / Created : 2019-11-22

python Python 사용하여 간단한 웹서버 구축하기, Simple Web Server 파이썬(Python)을 사용하는 간단한 웹서버 환경을 만들어 보는 방법입니다. 어떻게 구축하는지 아래에서 알아보세요.# 파이썬을 사용한 웹서버 구축하기서비스 목적이 아닌 개발 및 학습 등의 목적으로 간단한 웹서버를 구동할 필요가 있습니다. 예를들어 학습에 필요한 예제를 구동해야 하는데 요구 사항이 웹서버가 필요한 경우가 그런 예 중 하나입니다.이런 목적의 웹서버는 최대한 빨리 쉽게 구현하는

View : 8049 / Created : 2019-11-19

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

View : 821 / Created : 2019-11-19

linux [linux] 리눅스 less 명령어 알아보기 리눅스 시스템에서 파일을 보기 위한 방법으로 less, cat 등이 사용됩니다. 수정할 경우는 touch, vi, vim 등이 사용되죠.! 리눅스 less는 언제 사용할까요?cat 명령어는 파일을 모두

View : 620 / Created : 2019-11-13

etc 윈도우즈 명령프롬프트(cmd)에서 파일, 문서 편집하는 방법 윈도우즈의 cmd를 입력하면 명령프롬프트를 실행합니다. 이때 만약 특정 파일을 편집하려면 어떻게 하면 될까요? 아래에서 알아봅니다.# 윈도우즈 파일 편집하는 방법cmd 커맨드라인에서 파일 편집을 위해서 사용할 수 있는 방법은 아래와 같이 크게 두 가지로 구분할 수 있습니다.1. notepad를 사용하는 방법2. bash를 사용하여 리눅스 기반

View : 5107 / Created : 2019-11-13

js 자바스크립트 1부터 n까지 곱하는 함수 만들기 자바스크립트를 사용하여 간단한 함수를 만들어보려고 합니다. 만약 n부터 1까지 계속 곱하는 함수를 만드려면 어떻게 할까요?# 1부터 n까지 곱하는 자바스크립트 함수 만들기아래는 1부터 n까지 곱하는 자바스크립트 함수 multiple()입니다. 먼저 코드를 살펴보면 아래와 같습니다.multiple = function(no

View : 841 / Created : 2019-11-11

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

View : 1866 / Created : 2019-11-07

css [scss] 변수 선언 방법 및 예제 알아보기 아래는 SCSS를 사용하여 스타일을 선언할 때 어떻게 변수를 선언하고 변수 선언과 관련된 다양한 방법들을 알아보려고 합니다.# scss의 변수 선언하기scss에서도 역시 변수를 선언하고 사용할 수 있습니다. 그렇다면 변수 선언을 왜 할까요?동일한

View : 214 / Created : 2019-11-04

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

View : 1686 / Created : 2019-10-31

js [자바스크립트] 스톱워치, 타이머 함수 만들기, 초시계 구현 자바스크립트를 사용하여 스톱워치, 타이머 기능의 함수를 만들어보려고 합니다. 아래에서 자세히 알아봅니다# 자바스크립트로 타이머, 스톱워치 함수 만들기먼저 이 기능은 언제 필요할까요? 간단하게 나열하면 다음과 같습니다.- 함수를 호출시 너무 빠른 간격으로는 호출하지 않을 경우(Debo

View : 3378 / Created : 2019-10-17

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

View : 1543 / Created : 2019-10-11

git [Git] 브랜치 develop에서 master로 머지하는 방법, merge 만약 develop 브랜치의 작업 완료 후 master로 머지(merge)하는 경우 방법입니다.git checkout mastergit merge develop먼저 master 브랜치로 이동 후 merge 명령어를 사용하여 원하는 브랜치(develop)을 머지할 수 있습니다.

View : 707 / Created : 2019-10-11

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

View : 609 / Created : 2019-10-10

git [Git] git clone 동작 안하는 경우 fatal error Git을 사용하여 repository를 생성 후 이를 로컬에 다운받아 싱크하는 과정에서 clone을 사용합니다.git clone repositoryName그런데 윈도우즈 커맨드에서 위 명령어가 동작하지 않는 경우? 다른 환경인 윈도우 linux나 Github Desktop의 경우 잘 동작한다면 인증 문제가 원인일 수 있습니다.# Git clone 인증 문제 해결하기<

View : 1577 / Created : 2019-10-10

css [scss] @mixin @include 사용방법 및 예제보기 CSS의 전처리기 css인 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.@mixin@include이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.<span data-cust

View : 1013 / Created : 2019-10-08

CATEGORIES

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