반응형

파이썬(Python)과 웹(Apache)을 연동하여 PHP 대체로 사용을 하려고 합니다.
UI는 HTML, PHP를 이용하고 비즈니스 로직은 Python로 변경을 할 것입니다.

There was a problem confirming the ssl certificate Error(에러) 해결 방법 - 까페24(Cafe24) 기준

저의 경우 Cafe24 호스팅(단독 웹호스팅)을 기준으로 작성을 하였으며, 아래 작업은 카페24 기술 지원을 받아서 진행하였습니다.

1. 웹 연동을 위해 .py (파이썬 파일)에 대한 설정 추가
우선 아파치가 설치된 디렉토리에서 config 파일을 수정합니다.

/usr/local/apache53/conf/httpd.conf

...
# 추가가 필요한 부분
Options +ExecCGI
AddHandler cgi-script .py

2. 웹 연동 후에 Form 데이터를 연동하려면 request 모듈을 PIP를 이용하여 추가로 설치하여야 합니다.
그런데 아래 보시는 것처럼 에러가 발생을 하여 더 진행을 못하게 되었습니다.

[계정명 bin]$ pip3 install requests
Collecting requests
/home/hosting_users/kplus1/python3.4/lib/python3.4/site-packages/pip/_vendor/requests/packages/urllib3/util/ssl_.py:318: SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Name Indication) extension to TLS is not available on this platform. This may cause the server to present an incorrect TLS certificate, which can cause validation failures. You can upgrade to a newer version of Python to solve this. For more information, see https://urllib3.readthedocs.io/en/latest/security.html#snimissingwarning.
SNIMissingWarning
Could not fetch URL https://pypi.python.org/simple/requests/: There was a problem confirming the ssl certificate: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:600) - skipping
Could not find a version that satisfies the requirement requests (from versions: )
No matching distribution found for requests

구글 검색을 통해서 다양한 해결 방법을 찾아 보았으나 호스팅 서버이다 보니, 원하는 결과를 얻지 못했습니다.

위에 보시는 것처럼 설치된 파이썬은 3.4 버전이었는데, python3.6.9 으로 업그레이드를 하면서 해결을 하였습니다.

또한, .py에 대한 아파치 설정 변경은 정책상 Cafe24(카페24)에서는 변경을 할 수가 없어서 .cgi를 통해서 해결을 하였습니다.

결국 파이썬 문법으로 .cgi 파일을 만들어서 퍼미션을 실행 권한을 주게 되면 웹에서 해당 .cgi를 호출했을 때 페이지가 열리게 됩니다.

반응형


반응형

자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법입니다.

1. 클릭 이벤트를 캡쳐합니다.
2. 클릭한 객체로 children를 이용하여 이미지 노드를 찾아갑니다.
3. 현재 이미지 속성값을 확인하여 해당 속성과 반대되는 속성으로 바꿔줍니다.

아래 소스를 보시는 바와 같이 굳이 folder_down.png/folder_up.png 를 다 쓰실 필요없이 바뀌어야 하는 부분만 바꾸게 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>화살표 이미지를 토글시켜 준다.</h1>
  <div class="area-desc">
    <span><img src="./img/folder_down.png"></span>
  </div>
  <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
  <script>
  $(".area-desc").click(function() {

    var arrowImage = $(this).children("span").children("img");
    arrowImage.attr("src", function(index, attr){
      if (attr.match('up')) {
        return attr.replace("up", "down");
      }
      else {
        return attr.replace("down", "up");
      }
    });
  });
  </script>
</body>
</html>

 

자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법

 

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

반응형


반응형

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom)에서 글자(폰트,Font) 크기(사이즈,Size) 변경 방법하는 방법입니다.

노트북의 해상도를 최고로 하게 되면 실제 에디터에서는 글자가 너무 작게 나와서 시인성 및 가독성 떨어집니다.

그래서 코딩하기 적당한 사이즈로 변경을 하는 방법을 정리하였습니다.

글자(폰트,Font) 크기(사이즈,Size)는 본인의 취향에 맞게 조절하시면 됩니다.

 

글자(폰트,Font) 크기(사이즈,Size)를 변경하기 위한 아톰 메뉴

아톰 → File → Settings(Ctrl+콤마)를 클릭합니다.

글자(폰트,Font) 크기(사이즈,Size)를 변경하기 위한 아톰 메뉴

 

글자(폰트,Font) 크기(사이즈,Size) 변경을 위한 Settings 메뉴

Settings → Editor 클릭합니다.

Editor Settings에서 Font Size를 찾아갑니다.

Default: 14로 되어 있는데 원하는 숫자만을 넣습니다. 

글자(폰트,Font) 크기(사이즈,Size) 변경을 위한 Settings 메뉴

변경한 글자(폰트,Font) 크기(사이즈,Size) 아톰에 반영 처리

숫자를 입력 후 변경된 내용을 반영하여야 합니다.

Editor Settings에는 반영하는 버튼이 없습니다.

Settings → Updates를 클릭하여 Avilable Updates 화면으로 들어갑니다.

Avilable Updates 화면에서 Check for Updates를 클릭합니다.

Checking for updates... 가 출력이 되면서 변경된 내용을 아톰에 반영을 합니다.

All of your installed packages are up to date! 라는 메시지가 나오면 반영이 완료 됩니다.

변경한 글자(폰트,Font) 크기(사이즈,Size) 아톰에 반영 처리

 

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

 

소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다. 구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다. 또한 플러그인을 통한 확장성을 가..

han288.tistory.com

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

 

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다. 줄 복사 한줄 내용을 그대로 다음줄에 복사합니다. 단축 키 : Ctrl + Shift + d 주석 일괄 처리 원하는 블럭을 한번에 주..

han288.tistory.com

2019/10/28 - [유용한 활용팁] - HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

 

HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성

아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다. Emmet의 유용한 단축키 활용법입니다. HTML 전문 한번에 만들기 기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html..

han288.tistory.com

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다. 아톰 설치 방법입니다. 1. 구글 검색 사이트에서 "atom"으로 검색을 합니다. 2. 검색 후 Atom 사이트에 접속을 하시고 아톰을 다..

han288.tistory.com

 

반응형


반응형

검색화 최적화 방법 중에 sitemap.xml 파일을 등록이 있습니다.

티스토리는 일반 웹사이트가 아닌 블로그이기때문에 사이트맵 등록이 쉽지 않습니다.

티스토리 구글(Google), 네이버(Naver) 검색 엔진 최적화(search engine optimization, SEO)를 위한 사이트맵(sitemap.xml) 등록을 해 보겠습니다.

 

사이트맵은 주기적으로 생성하여 갱신하여 주어야 합니다.

 

사이트맵 파일 생성 사이트 찾기

검색 사이트에서 "xml-sitemaps"라고 넣고 검색을 한 후 아래 사이트로 접속을 합니다.

사이트맵 파일 생성 사이트 찾기

 

사이트맵 생성하기

UI는 직관적이어서 누구나 쉽게 따라 할 수 있습니다.

티스토리 주소를 입력 후 "start" 버튼을 클릭하면 수분 내 sitemap 파일이 생성 되었다는 메시지를 보여 줍니다.

이 메시지에서 "view sitemap detail"을 클릭합니다.

사이트맵 생성하기

사이트맵 다운 받기

생성이 완료되었으면 "DOWNLOAD YOUR XML SITEMAP FILE" 버튼을 클릭합니다.

사이트맵 다운 받기

 

 

티스토리 콘텐츠 설정 변경하기

콘텐츠 > 설정에서 새로운 글쓰기를 사용하지 않습니다 로 변경을 합니다.

티스토리 콘텐츠 설정 변경하기

 

 

티스토리 사이트맵 업로드

글쓰기에 들어와서 비공개로 설정을 하고 첨부 파일을 업로드합니다.

티스토리 사이트맵 업로드

 

티스토리 사이트맵 주소 확인하기

등록된 글 상세내용에 들어가서 첨부된 파일의 링크 주소를 복사합니다.

티스토리 사이트맵 주소 확인하기

 

Googel Search Console 사이트맵 제출

Googel Search Console 사이트맵 제출

 

네이버 웹마스터 도구 사이트맵 제출

네이버 웹마스터 도구 사이트맵 제출

 

2019/10/12 - [유용한 활용팁] - 티스토리 Meta Tag 플러그인으로 Goolge Search Console, 네이버 웹마스터 도구 등록하기

2019/10/13 - [유용한 활용팁] - 티스토리 다음 검색 엔진 최적화(search engine optimization, SEO)를 위한 Daum 검색 등록 방법

2019/10/30 - [유용한 활용팁] - 티스토리 줌(Zum) 검색 엔진 최적화(search engine optimization, SEO)를 위한 검색 등록 방법

반응형


반응형

티스토리 개설 후 검색 최적화를 위해 노력중입니다.

처음으로 다음 검색 등록을 진행하였고, 다음으로는 구글 Search Console 과 네이버 웹마스터 도구까지 등록을 하였습니다.

대표적인 검색엔진에는 기본적인 설정은 하였고 아직 남아 있는 Zum, Bing 검색 엔진에 추가 진행을 할 예정입니다.

오늘은 티스토리 줌(Zum) 검색 엔진 최적화(search engine optimization, SEO)를 위한 검색 등록을 하도록 하겠습니다.

 

줌 검색등록 메뉴 찾기

ZUM 검색 사이트에서 "줌 검색등록"으로 검색을 하면 "zmu 사이트 검색등록" 사이트를 바로 확인하실 수 있습니다.

줌 검색등록 메뉴 찾기

 

줌 검색등록 메뉴

아래 파란색으로 표시가 된 "사이트 검색 등록" 메뉴에서 "신규 등록"을 클릭합니다.

줌 검색 등록 메뉴

 

줌 검색 사이트 등록

아래 사이트 등록 안내 입력창에 본인의 블로그의 내용을 정리하여 작성을 합니다.

줌 검색 사이트 등록 입력 화면

 

줌 사이트 검색 등록 완료

검색 사이트 등록을 하고 1 ~ 2일 사이에 처리 완료 메일을 받았습니다.

영업일 기준으로 1 ~ 2일이기에 주말에 신청하시면 월요일 또는 화요일에 결과 메일을 수신하게 됩니다.

줌 사이트 검색 등록 완료

 

2019/10/12 - [유용한 활용팁] - 티스토리 Meta Tag 플러그인으로 Goolge Search Console, 네이버 웹마스터 도구 등록하기

2019/10/13 - [유용한 활용팁] - 티스토리 다음 검색 엔진 최적화(search engine optimization, SEO)를 위한 Daum 검색 등록 방법

반응형


반응형

JavaScript로 input 입력값에 대한 생년월일 유효성 검사하기

1. 입력값 : YYYYMMDD

2. return 값: true / false

3. 2월 29일(윤년) 체크

function isBirthday(dateStr) {

	var year = Number(dateStr.substr(0,4)); // 입력한 값의 0~4자리까지 (연)
	var month = Number(dateStr.substr(4,2)); // 입력한 값의 4번째 자리부터 2자리 숫자 (월)
	var day = Number(dateStr.substr(6,2)); // 입력한 값 6번째 자리부터 2자리 숫자 (일)
	var today = new Date(); // 날짜 변수 선언
	var yearNow = today.getFullYear(); // 올해 연도 가져옴

	if (dateStr.length <=8) {
	// 연도의 경우 1900 보다 작거나 yearNow 보다 크다면 false를 반환합니다.
		if (1900 > year || year > yearNow){
			return false;
		} else if (month < 1 || month > 12) {
			return false;
		} else if (day < 1 || day > 31) {
			return false;
		} else if ((month==4 || month==6 || month==9 || month==11) && day==31) {
			return false;
		} else if (month == 2) {

			var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
			if (day>29 || (day==29 && !isleap)) {
				return false;
			} else {
				return true;
			} //end of if (day>29 || (day==29 && !isleap))
		} else {
			return true;
		}//end of if
	}
	else {
		//1.입력된 생년월일이 8자 초과할때 :  auth:false
		return false;
	}
}

JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

 

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

반응형


반응형

아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다.

Emmet의 유용한 단축키 활용법입니다.

 

HTML 전문 한번에 만들기

기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html이어야 합니다.

또는 아래와 같이 현재 문서의 포맷을 바꿔 주시면 화인이 가능합니다.

아톰에서 신규 페이지를 만들면 untilted라고 페이지가 나옵니다.

이때의 페이지 설정은 Plan Text이며, 이 부분을 마우스로 클릭합니다.

아톰에서 문서 포맷 바꾸기

여기서 HTML로 되어 있는 부분을 선택하시면 아톰은 해당 파일을 HTML로 인식을 합니다.

아톰에서 문서 포맷을 HTML로 바꾸기

한번에 HTML 전문을 만드는 방법은 !(느낌표) + TAB키입니다.

!+탭키를 누르는 화면
! 단축키로 HTML 한번에 만든 화면

DIV 태그 한번에 만들기

원하는 클래스, 아이디가 들어간 DIV와 하위 DIV를 한번에 만드는 방법입니다.

원하는 클래스가 들어간 경우 : .content>div*3 + TAB

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

content라는 클래스가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 클래스가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

원하는 아이디가 들어간 경우 : #wrap>div*3 + TAB

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만드는 단축키

wrap이라는 아이디가 들어간 DIV와 하위 DIV가 한번에 생겼습니다.

원하는 아이디가 들어간 DIV와 하위 DIV 한번에 만들어진 화면

 

container class가 들어가 dvi 생성하는 화면

 

스타일시트에서 width, height 값 넣는 단축키

w100 + TAB :  width: 100px

h100 + TAB :  height: 100px

w100p + TAB :  width: 100%

h100p + TAB :  height: 100%

스타일시트에서 width, height 값 넣는 단축키

 

스타일시트에서 margin, padding 값 넣는 단축키

m0 +TAB : margin: 0

p0 + TAB : padding: 0

스타일시트에서 margin, padding 값 넣는 단축키

 

2019/10/15 - [유용한 활용팁] - 소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연결 방법 - FTP접속 오류 해결

2019/10/17 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

2019/10/25 - [유용한 활용팁] - HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 유용한 단축키 활용법 - 줄복사, 줄찾기(검색), 일괄주석, 파일검색

반응형


반응형

HTML5, CSS3, JavaScript, PHP, Python 편집기 아톰(Atom) 사용 시 유용한 단축키입니다.

 

줄 복사

한줄 내용을 그대로 다음줄에 복사합니다.

단축 키 : Ctrl + Shift + d

에디터 아톰(atom) 줄복사 단축키

 

주석 일괄 처리

원하는 블럭을 한번에 주석 처리를 합니다.

단축키 : Ctrl + Shift + /(역슬래시)

편집기 아톰(atom) 주석 일괄 처리 단축키

 

줄 찾기

원하는 줄로 한번에 갈 수 있게 합니다.

단축키 : Ctrl + G

에디터 아톰(atom) 원하는 줄 찾기 - 원하는 줄 입력 화면
에디터 아톰(atom) 원하는 줄 찾기 - 원하는 줄로 이동한 화면

 

파일 찾기

프로젝트 내에서 원하는 파일을 일괄로 찾게 합니다.

입력한 텍스가 포함된 모든 파일을 찾습니다.

단축키 : Ctrl + P

에디터 아톰(atom) 원하는 파일 찾기 - 프로젝트 내에서 검색 화면

 

 

 

HTML5, CSS3, JavaScript, PHP 에디터 편집기 아톰(atom) 설치 방법

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다. 아톰 설치 방법입니다. 1. 구글 검색 사이트에서 "atom"으로 검색을 합니다. 2. 검색 후 Atom 사이트에 접속을 하시고 아톰을

han288.tistory.com

 

 

소스코드 편집기 아톰(Atom) FTP(remote-ftp) Package 설치, SFTP 연결 설정, 서버 여러대(다중 호스트) 연��

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다. 구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다. 또한 플러그인을 통한

han288.tistory.com

 

반응형

+ Recent posts