반응형

JavaScript로 Input type의 날짜를 체크하는 함수들입니다.

isDate 함수

날짜 형식이 맞는지 체크하는 함수입니다.

입력값 형식은 yyyymmdd, yyyy-mm-dd, yyyy/mm/dd 3가지 사용을 할 수 있습니다.

function isDate(yyyymmdd) {

  // input
  // yyyymmdd, yyyy-mm-dd, yyyy/mm/dd
  // output
  // 0: 정상, 1: 해당월의 날짜 넘음, 2: 존재하지 않는 달, 3: 포맷 안맞음, 4: -인 날짜

  var y, m, d;

  if (yyyymmdd.length == 8) {
    if (!yyyymmdd.match(/[0-9]{8}/g))
      return 3;
    y = yyyymmdd.substring(0, 4);
    m = yyyymmdd.substring(4, 6);
    d = yyyymmdd.substring(6, 8);
  } else if (yyyymmdd.length == 10) {
    if (!yyyymmdd.match(/[0-9]{4}[-/][0-9]{2}[-/][0-9]{2}/g))
      return 3;

    y = yyyymmdd.split('-')[0];
    m = yyyymmdd.split('-')[1];
    d = yyyymmdd.split('-')[2];
  } else {
    return 3;
  }

  var limit_day;
  switch (eval(m)) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      limit_day = 31;
      break;
    case 2:
      if ((y - 2008) % 4 == 0)
        limit_day = 29;
      else
        limit_day = 28;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
        limit_day = 30;
        break;
    default:
      return 2;
      break;
    }
  if (eval(d) > limit_day) {
    return 1;
  }
  if (eval(d) < 1) {
    return 4;
  }
  return 0;
}

 

getDate함수

년도, 월, 일, 포맷값을 입력값으로 넣으면 원하는 날짜를 Date 형태로 가져옵니다.

function getDate(yyyy, mm, dd, format) {
  var today = new Date();

  var year = today.getFullYear();
  var month = today.getMonth();
  var day = today.getDate();

  var resultdate = new Date(yyyy+year, month+mm, day+dd);
  year =  resultdate.getFullYear();
  month = resultdate.getMonth();
  day = resultdate.getDate();

  month++;

  if(month < 10){
    month = "0" + month;
  }
  if(day < 10){
    day = "0" + day;
  }

  if(format == undefined){
    return year + "" + month + "" + day;
  }else{
    return year + format + month + format + day;
  }

}

 

dateCalc 함수

이 함수는 소스를 보시고 필요에 맞게 고쳐서 사용하시면 됩니다.

startObj : 시작날짜 입력 필드

endObj : 종료날짜 입력 필드

function dateCalc(startObj, endObj) {
  var startDt = startObj.val();

  startDt = startDt.replace(/-/gi,"");
  startDtyear = startDt.substring(0,4);
  startDtmm   = startDt.substring(4,6);
  startDtdd   = startDt.substring(6,8);
  startObj.val(startDtyear + startDtmm + startDtdd);

  /**
   * 1년후를 계산한 로직으로 필요한 로직으로 수정하여 사용하면 됩니다.
   */
  endObj.val(startDtyear-0+1 + startDtmm + startDtdd);

  var fulldate = startDtyear + startDtmm + startDtdd -0;
  var curDate  = getDate(0,0,0);	//현재날짜 month는 0~11
  var curYear  = curDate.substring(0,4);
  var curMonth = curDate.substring(4,6);
  var curday   = curDate.substring(6,8);

  /**
   * 여기서부터 처리를 원하는 로직을 넣으면 됩니다.
   */


}

 

자바스크립트로 날짜 형식이 맞는지 확인하는 화면

반응형


반응형

PHP에서 Form의 데이터를 POST 또는 GET 방식으로 전송 시 

데이터에 원하지 않게 역슬래시(\)가 들어가는 경우가 있습니다.

데이터베이스에 저장시 '(작은 따옴표)가 들어가서 문제가 생기는 것을 방지하기 위해

PHP에서 제공하여 주는 \' 이렇게 처리를 해 주는 좋은 기능입니다.

 

하지만 이런 내용을 정확히 모르고 접근을 하게 되면,

이유없이 추가되는 역슬래시로 문제 해결에 어려움을 겪을 수가 있습니다.

더욱이 이 기능은 PHP 프로그램 내에서는 변경 할 수가 없고

서버 config값에서 처리를 해 줘야 합니다.

 

이에 대한 대처 방안으로는 get_magic_quotes_gpc(), stripslashes 2개 함수를 이용하는 방법입니다.

get_magic_quotes_gpc()를 이용하여, 해당 옵션이 켜져 있는지 확인을 하고,

만약 켜져 있다면 stripslashes 함수를 이용하여 역슬래시를 제거하는 것입니다.

아래와 같이 소스 코딩을 하시게 되면 해결이 가능합니다.

	$form_data = $_REQUEST['form_data'];
	if (get_magic_quotes_gpc()) {
	  $form_data = stripslashes($from_data);
	}

PHP Form 데이터 POST, GET 전송시 역슬래쉬(\) 자동 추가 현상 해결 방안 - get_magic_quotes_gpc(), stripslashes

# 참고 자료 (출처 : php net)

get_magic_quotes_gpc

(PHP 4, PHP 5, PHP 7)

get_magic_quotes_gpc Gets the current configuration setting of magic_quotes_gpc

Description

get_magic_quotes_gpc ( void ) : bool

Returns the current configuration setting of magic_quotes_gpc

Keep in mind that attempting to set magic_quotes_gpc at runtime will not work.

For more information about magic_quotes, see this security section.

Return Values

Returns 0 if magic_quotes_gpc is off, 1 otherwise. Or always returns FALSE as of PHP 5.4.0.

Changelog

VersionDescription

5.4.0 Always returns FALSE because the magic quotes feature was removed from PHP.

Examples

Example #1 get_magic_quotes_gpc() example

<?php
// If magic quotes are enabled
echo $_POST['lastname'];             // O\'reilly
echo addslashes($_POST['lastname']); // O\\\'reilly

// Usage across all PHP versions
if (get_magic_quotes_gpc()) {
    $lastname = stripslashes($_POST['lastname']);
}
else {
    $lastname = $_POST['lastname'];
}

// If using MySQL
$lastname = mysql_real_escape_string($lastname);

echo $lastname; // O\'reilly
$sql = "INSERT INTO lastnames (lastname) VALUES ('$lastname')";
?>

 

stripslashes

(PHP 4, PHP 5, PHP 7)

stripslashes Un-quotes a quoted string

Description

stripslashes ( string $str ) : string

Un-quotes a quoted string.

Note:

If magic_quotes_sybase is on, no backslashes are stripped off but two apostrophes are replaced by one instead.

An example use of stripslashes() is when the PHP directive magic_quotes_gpc is on (it was on by default before PHP 5.4), and you aren't inserting this data into a place (such as a database) that requires escaping. For example, if you're simply outputting data straight from an HTML form.

Parameters

str

The input string.

Return Values

Returns a string with backslashes stripped off. (\' becomes ' and so on.) Double backslashes (\\) are made into a single backslash (\).

Examples

Example #1 A stripslashes() example

<?php
$str = "Is your name O\'reilly?";

// Outputs: Is your name O'reilly?
echo stripslashes($str);
?>
반응형


반응형

HTML5, CSS3, JavaScript, PHP 에디터 편집기로 무료인 아톰을 많이 사용합니다.

아톰 설치 방법입니다.

1. 구글 검색 사이트에서 "atom"으로 검색을 합니다.

구글 검색 사이트에서 아톰 검색 화면

2. 검색 후 Atom 사이트에 접속을 하시고 아톰을 다운로드 합니다.

아톰 다운로드

3. 설치를 다 한 후 코딩에 유용한 플러그인을 설치합니다.
1) FILE → Settings → Install 선택

아톰 플러그인 설치 메뉴 화면


2) 필수 설치 플러그인
- Emmet : HTML , CSS, Javascript, PHP 자동 완성기능

Emmet 플러그인 검색 화면

- pigments : 색상코드의 컬러 표시

pigments 플러그인 검색 화면

- sync-settings : 지금 사용하고 있는 PC 환경설정을 다른 장소의 PC에서도 동일한 환경 설정을 할 수 있게 함

아톰 플러그인 sync-set tings 검색 화면

- atom-beautify : HTML 자동 정렬

atom-beautify  : HTML 자동 정렬

- minimap : 전체 소스를 오른쪽에 보여주고 현재 소스 위치를 표시하여 줌

minimap   : 전체 소스를 오른쪽에 보여주고 현재 소스 위치를 표시하여 줌

- highlight-line : 내가 위치한 Row를 하이라이트하여 줌

highlight-line : 내가 위치한 Row를 하이라이트하여 줌

- tool-bar : 열어논 탭의 파일확장자에 따라 각각 프로그램 아이콘을 보여줌

-  tool-bar  : 열어논 탭의 파일확장자에 따라 각각 프로그램 아이콘을 보여줌

- seti-icons : 아톰 탐색기에 표시되는 각 파일의 확장자 아이콘을 보여줌

-  seti-icons : 아톰 탐색기에 표시되는 각 파일의 확장자 아이콘을 보여줌

- Auto close HTML  : html 태그 자동 닫기 기능

Auto close HTML  : html 태그 자동 닫기 기능

- sublime-style-column-selection, sublime-block-comment : 아톰에서 세로 드래그 기능 사용 가능

sublime-style-column-selection
sublime-block-comment

- atom-live-server : 실시간 소스 보기

atom-live-server  : 실시간 소스 보기

- atom-bracket-hightlight : (), {}, [] 와 같은 괄호의 색깔을 다르게 하여 가독성을 높여줌

atom-bracket-hightlight : (), {}, [] 와 같은 괄호의 색깔을 다르게 하여 가독성을 높여줌

- minimap-hide : 패널 분리한 곳만 미니맵을 보여주게 함

minimap-hide : 패널 분리한 곳만 미니맵을 보여주게 함

- linter-eslint: 자바스크립트 문법에러를 표시해 줍니다. 단, 설치 후에 원하는 규칙을 추가가 필요합니다.

linter-eslint: 자바스크립트 문법에러를 표시해 줍니다. 단,  설치 후에 원하는 규칙을 추가가 필요합니다.

- aligner : key와 value를 이쁘게 정렬하여 줍니다.

aligner : key와 value를 이쁘게 정렬하여 줍니다.

- language-babel : es6 지원

language-babel : es6 지원

- linter-jshint : 자바스크립트 자동완성 표시

linter-jshint  : 자바스크립트 자동완성 표시

- atom-ternjs : javascript, ES6, Node.js, jQuery, AngularJS 자동완성기능 제공

atom-ternjs : javascript, ES6, Node.js, jQuery, AngularJS  자동완성기능 제공

project-plus : 작업 이력을 표시하여 원복하기 편리합니다.

project-plus : 작업 이력을 표시하여 원복하기 편리합니다.

- swackets : 블럭마다 다른 색상 지정하여 코딩할 때 가독성이 좋습니다.

swackets : 블럭마다 다른 색상 지정하여 코딩할 때 가독성이 좋습니다.

여기까지 추천해 드린 플러그인을 설치하여 줍니다.
개인 취향에 따라서 플러그인은 취사 선택하셔도 됩니다.

이제 아톰을 사용할 준비는 되었습니다.

 

만약, 서버에 FTP로 접속하여 작업을 하여야 한다면, 아래 포스팅을 확인하시면 됩니다.

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

반응형


반응형

아톰(Atom) Github에서 개발한 문서 및 소스코드 편집기입니다.

구글 오픈소스웹브라우저프로젝트인 크로미엄기반 CoffeeScript로 작성되었으며, 무료로 제공을 하고 있습니다.
또한 플러그인을 통한 확장성을 가지고 있습니다.

아톰을 통해서 서버에 FTP로 접속을 위한 설정 방법을 소개해 드립니다.

아톰의 FTP 접속 방법은 Romote 탭에서 선택한 소스 파일을 먼저 Local에 다운로드를 한 후
수정된 파일으로 업로드하는 형태입니다. (기본 설정을 바꾸지 않으시면 이 설정이 기본 설정입니다.)

얼마전부터 21번 포트를 이용하여 일반 FTP로 서버 접속을 하게 되면,
소스 다운로드가 정상적으로 되지 않는 반면,
제 PC에 있는 파일을 수정하면 정상적으로 서버에는 반영이 되는 접속 오류가 생겼습니다.

호스팅 업체에서는 보안을 이유로 SFTP 접속 권장을 하고 있는데,
FTP 연결 방법을 SFTP로 변경을 하니, 예전과 동일하게 정상적으로 소스 다운로드 후 수정 작업이 가능해졌습니다.

그럼 패키지 설치부터 다중 호스트 연결까지 정리하도록 하겠습니다.

1. 패키지 설치

메뉴 → File → Settings → Install로 이동을 함

패키지 설치를 위한 메뉴

Install Packages에서 "remote-ftp"로 검색을 한 후 "remote-ftp 2.2.2"를 설치

패키지 설치를 위한 Install Packages 검색

2. SFTP 연결

FTP를 연결할 디렉토리 생성

아톰 SFTP 연결을 위한 디렉토리 생성

신규로 생성된 폴더를 Project에 추가

아톰 SFTP 연결을 위해 생성한 디렉토리를 프로젝트에 추가

메뉴 → Packages → Remote FTP → Create SFTP config file 선택

아톰 SFTP Config 파일 생성

.ftpconfig 파일이 생성이 되며, 계정 및 디렉토리 경로를 입력
- 아래 표시된 4곳만 설정하면 접속 가능합니다.

아톰 SFTP 연결을 위한 기본 설정

메뉴 → Packages → Remote FTP → Toggle 선택

아톰 SFT 연결을 위한 탭 활성화

좌측 화면에서 Romote Tab 선택 후 Connect 선택 후 접속 확인

아톰 SFTP로 서버 정상 접속 화면

3. 멀티 FTP 연결 방법
메뉴 → File → Settings → Packages →Settings 선택

아톰 FTP 다중 호스트 설정 메뉴

설정값 중간 정도에 "Beta strategies"에서 Beta Multiple Hosts 체크

아톰 FTP 다중 호스트 설정 값

다른 디렉토리를 추가 후 위와 같이 동일한 방법으로 FTP연결을 하면 2개의 서버를 접속 가능

반응형


반응형

날짜를 저장할 때는 일반적으로 칼럼을 날짜 타입으로 만듭니다.

저장할 때는 쉽게 하는데, 막상 검색을 해서 가져오려고 하면 헤매는 경우가 종종 있습니다.
문자 타입이 아니다 보니, 칼럼을 문자로 변형하여 가져오곤 하는데요.
이 경우 전체 테이블의 칼럼을 문자로 변환을 하고 데이터를 가져오기 때문에
해당 칼럼에 인덱스가 있다고 하더라고 Full Scan을 하여 조회 속도가 느려지게 됩니다.
처음 데이터가 많지 않을 때는 속도를 체감하지 못하지만
데이터가 누적이 되면서 점점 느려지는 속도를 확인하시게 됩니다.

잘못된 데이터 조회 방법 예시

SELECT *
  FROM {$TABLE}
 WHERE DATE({$COLUMN}) BETWEEN '2019-10-01' AND '2019-10-15'

위의 * 표시는 예시입니다.
실제 사이트 운영 시에는 * 아닌 각 칼럼들을 나열해 주시는 게 좋습니다.

그럼 어떻게 조회를 하는 것이 좋을까요?
해당 칼럼에 데이터를 시:분:초까지 넣어서 날짜 유형으로 변형을 하고 조회를 하시면 됩니다.

1. 자동 형변환을 이용하여 조회하기

1) MySQL은 '2019-10-01'같이 String으로 입력을 해도 자동으로 날짜 타입으로 변환하여 조회를 합니다.
2) 날짜 타입으로 자동 변환이 될 때는 YYYY-MM-DD 00:00:00 으로 됩니다.
그래서 뒤의 날짜는 원하는 날짜 +1일을 하셔야 합니다.

SELECT * FROM {$TABLE}
 WHERE {$COLUMN} BETWEEN '2019-10-01' AND '2019-10-15'

2. MySQL 문법에 맞게 조회하기

1) 원하는 날짜에 시:분:초를 추가하여 입력하여 주세요.
2) 뒤의 날의 날짜는 23:59:59로 추가하여 주셔야 다 조회가 됩니다.

SELECT * FROM {$TABLE}
 WHERE {$COLUMN} BETWEEN STR_TO_DATE('2019-10-01 00:00:00','%Y-%m-%d %H:%i:%s')
    AND STR_TO_DATE('2019-10-14 23:59:59','%Y-%m-%d %H:%i:%s')

위의 예제들은 특정 기간을 조회하는 SQL입니다.

하지만, 최근 일주일과 같이 현재 날짜를 기준으로 데이터를 조회하는 경우가 있습니다.
이 경우는 위이 SQL에서 날짜를 계산하여 조회를 하셔도 되지만 MySQL함수를 이용하여
좀 더 쉬게 조회를 할 수 있습니다.

​1. 최근 일주일 데이터 조회

SELECT * FROM {$TABLE}
 WHERE {$COLUMN} > DATE_SUB(NOW(), INTERVAR 7 DAY)

​2. 최근 1개월 데이터 조회

SELECT * FROM {$TABLE}
 WHERE {$COLUMN} > DATE_SUB(NOW(), INTERVAR 1 MONTH)

3. 최근 1년 데이터 조회

SELECT * FROM {$TABLE}
 WHERE {$COLUMN} > DATE_SUB(NOW(), INTERVAR 1 YEAR)

MySQL 날짜 타입 칼럼 데이터(Date Type column Data) 조회(검색) 방법 - STR_TO_DATE, DATE_SUB 활용

반응형


반응형

이제 막 티스토리를 개설하였다면 검색 최적화(search engine optimization, SEO)를 고민하실 거예요.
각각 검색 엔진에 막게 최적화 진행을 하여야 하는데요.

지난번 포스팅에서는 Google Search Console과 네이버 웹마스터 도구를 안내해 드렸습니다.
오늘은 티스토리 다음 검색 엔진 최적화를 위한 Daum 검색 등록 방법을 소개해 드리겠습니다.

1. 다음 검색 사이트에서 "다음 검색 등록" 키워드로 검색

Daum 검색에서 다음 검색등록 찾기

2. Daum 검색등록 사이트로 이동하여 신규 등록하기

   - 등록 탭에서 사이트 검색이 선택된 상태에서 티스토리 주소를 입력후 확인 버튼을 클릭

Daum 검색등록 사이트로 이동하여 신규 등록하기

3. Daum 검색 사이트 신규 등록하기

   - 공통정보의 제목, URL, 설명-품목, 디렉토리, 신청자정보를 작성 후 확인 버튼을 클릭

Daum 검색 사이트 신규 등록하기

4. Daum 검색 신규 등록 신청 완료 화면

Daum 검색 신규 등록 신청 완료 화면

 

5. Daum 검색 신규 등록 신청 완료 수신 메일

   - 신규등록 완료 후 심사가 진행되고 업무일 기준으로 5일이 걸린다는 메일을 받게 됩니다.

Daum 검색 신규 등록 신청 완료 수신 메일

6. 검색등록 신청 결과

며칠 후 메일 확인을 하여 보니, 아래와 같이 완료 메일이 도착을 하였습니다.

Daum 검색 신규 등록 완료 수신 메일

 

다음 티스토리 최적화 점검 결과

다름 사이트에서 티스토리 주소로 검색을 해서 아래와 같이 사이트가 노출이 된다면
다음에서 기본 최적화는 되어 계신 걸로 보시면 됩니다.
만약, 최적화가 되어 있지 않다면 검색 결과가 나오지 않으실 거예요.

반응형


반응형

티스토리에서는 다양한 플러그인을 제공하고 있습니다.

예전부터 티스토리를 운영하시던 분들중 고급 사용자 분들은 

Goolge Search Console, 네이버 웹마스터 도구를 HTML 태그를 이용하여 등록하였어요.

하지만 이제는 플러그인으로 제공을 하여 아주 쉽고 간단하게 등록을 할 수가 있게 되었습니다.

 

1. 관리자 화면에서 플러그인 메뉴 중 메타 태그 등록 플러그인을 선택합니다.

티스토리 메타 태그 플러그인 메뉴

2. 네이버 웹마스터도구에서 사이트 추가를 합니다.

네이버 웹마스터도구 사이트 추가

3. 사이트 소유 확인을 위하여 HTML 태그를 선택합니다.

   그리고 메타 태그를 복사합니다.

네이버 웹마스터 도구 사이트 소유 확인

4. 메타 태그 등록 플러그인 화면에서 아래와 같이 메타 태그를 추가합니다.

메타 태그 플러그인에서 네이버 웹마스터도구 등록하기

5. 네이버 웹마스터 도구 인증 화면입니다.

네이버 웹마스터 도구 인증 메시지

6. 인증이 완료가 되면 아래와 같이 티스토리 사이트가 추가 됩니다.

네이버 웹마스터 도구 연동 사이트 목록

7. 구글 서치 콘솔(Goolge Search Console)에서 속성 추가를 눌러 주세요.

Goolge Search Console 속성 추가

8. 속성 유형 선택을 URL 접두어로 해 주세요.

Goolge Search Console 속성 유형 선택

9. 티스토리 메타 태그 등록 플러그인에서 메타 태그를 추가하고 변경사항 적용을 누릅니다.

10. Goolge Search Console에도 이제 속성이 추가 되었습니다.

Goolge Search Console 소유권 확인 메시지

 

이제 막 티스토리를 만들고 보니, 환경 설정을 해야 할 것들이 참 많네요.

하나씩 풀어나가 봐야 겠습니다.

반응형


반응형

티스토리를 이제 막 개설하신 분들은 관리 화면이 익숙하지 않으실 거예요.

당장 카테고리를 어디서 만들어야 하는지도 알 수가 없고요.

HTML을 잘 다루시는 분들은 스킨을 이용하여 만드시기도 한다고 하시는데요.

저의 경우 초급 단계다 보니, 관리자 화면을 이용하여 만드는 방법을 알려 드리겠습니다.

 

1-1. 오른쪽 상단의 아이콘을 클릭 후 아래의 톱니 바뀌를 클릭하세요.

티스토리 관리자 화면 들어가기

1-2. 위 메뉴를 확인하기 어려우시면 티스토리 홈 화면의 하단에 관리자를 클릭하세요.

 

2. 관리자 메뉴에서 콘텐츠 → 카테고리 관리를 클릭하세요.

   카테고리 관리에서 + 카테고리 추가를 클릭 후 카테고리를 추가하시면 됩니다.

티스토리 카테고리 편집 메뉴

 

3. 아래 보시는 것처럼 카테고리 추가를 클릭하면 카테고리명을 넣을 수 있는 화면이 나옵니다.

   카테고리명을 넣으시고 변경사항 저장을 클릭하시면 카테고리가 생성되시는 것을 확인하실 수 있습니다.

티스토리 카테고리 생성 화면

저도 이제 티스토리를 시작하는데요.

모르는 게 너무 많습니다. 

 

저처럼 처음 시작하시는 분들을 위해서 제가 알게 된 내용을 하나하나 공유 드리도록 하겠습니다.

반응형

+ Recent posts