Verdana

HTTPS 설정이 된 서버에서

제트스트림 로그인 시 HTTP로 넘어가서 로그인이 되지 않을 때

app/Providers/AppServiceProvider.php 파일에 아래 코드 추가

public function boot()
 {
    if (!App::environment('local')) {
        resolve(\Illuminate\Routing\UrlGenerator::class)->forceScheme('https'); 
    }
 }

paste 이벤트 발생 시 jQuery로 바인딩 하여
정규식을 이용해 개행문자를 제외한 모든 테그를 제거하고
selection과 range를 이용하여 커서위치에 붙여넣기 기능

//-- 방법1. 정규식으로 개행문자를 제외한 테그를 모두 바꾼 후 insertNode로 한번에 추가

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');
    pasteVal = pasteVal.replace(/<(\/)?br>/gi, "##BR##").replace(/<[^>]+>/g, '').replace(/##BR##/g, '
').replace(/\r\n/g, '
');

    var selection = window.getSelection();
    var selRange = selection.getRangeAt(0);
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    selRange.insertNode(selRange.createContextualFragment(pasteVal));

    e.preventDefault();

});

//-- 방법2. 상위div 만들어서 감싸고 insertNode로 추가하는 법

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    var fullNode = document.createElement("div");
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }
        fullNode.appendChild(newNode);
    }
    selection.getRangeAt(0).insertNode(fullNode);

    e.preventDefault();

});

//-- 방법3. 개행문자로 쪼갠 후 배열을 뒤집어서 insertNode 로 하나씩 추가하는 방법

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    pasteValArr = pasteValArr.reverse();
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }

        selection.getRangeAt(0).insertNode(newNode);
    }

    e.preventDefault();

});

//--방법4. 부모 노드에 appendChild로 추가하는 법 (노드중간에다가 추가할때 에러 발생)

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }                  
        selection.anchorNode.appendChild(newNode);
    }

    e.preventDefault();

});

자주 쓰는 정규식

//숫자 3단위마다 콤마 찍기

var numberWithCommas= function(num){

  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

// 아이디 체크 정규식
const regExpId = /^[a-z0-9_-]\w{5,20}$/;
  
// 비밀번호 길이 체크 정규식
const regExpPassword = /^\w[6,16]$/;
  
// 비밀번호 조합(영문, 숫자) 및 길이 체크 정규식
const regExpPassword = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,16}$/;
  
// 이메일 체크 정규식
const regExpEmail=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
  
// 휴대폰번호 정규식
const regExpMobile = /^01([016789]?)-?([0-9]{3,4})-?([0-9]{4})$/;
  
// 숫자만 사용 정규식
const regExpNumber = /^\d+$/;

ie 브라우저로 접속 시에만 결과값이 보인다. 

크로스브라우징 이슈가 있을 경우 브라우저 판단 후

body태그에 class를 추가해주면 css 작업시 편해진다.

Javascript에서 문자열 길이를 체크할때, 그냥 length를 사용하면

1Byte인 영문, 숫자 입력시엔 상관없지만

한글 '가' 입력시에도 length 값은 1로 나온다.

아래 스크립트는 escape() 함수를 이용해 입력받은 값이 한글인지 판단 후 글자수를 2byte로 계산해준다.

PHP 에 오토로딩 기능이 포함되었지만 app 개발자는 오토로딩할 클래스를 직접 spl_autoload_register 를 사용하여 일일이 등록해야 하는 번거로움이 있습니다. 

컴포저는 사용할 패키지나 클래스가 있을 경우 간단하게 패키지명만 기술하면 자동으로 로딩해 주는 아주 편리하고 훌륭한 기능을 제공하고 있습니다.

이 책에서는 자동으로 클래스나 인터페이스를 로딩해 주는 것을 오토로딩으로 부르며 오토로딩을 수행하는 로더(Loader)를 오토로더(Auto Loader) 라고 호칭합니다.

만약 컴포저를 사용할 수 없는 오래된 프레임워크에서 외부 라이브러리를 사용하고 할 경우 매우 불편하고 귀찮은 작업을 수행해야 합니다.

파일 시스템을 추상화하여 로컬 파일이든 드랍박스에 저장된 파일이든 혹은 아마존 클라우드에 저장된 파일이든  단일한 인터페이스로 손쉽게 다룰 수 있는 유명한 라이브러리인 league/flysystem 패키지(라라벨 5에는 기본 탑재되어 있습니다.)를 프로젝트에서 사용한다고 가정해 봅시다.

만약 컴포저를 사용할수 없는 환경이라면 이 패키지를 사용하기 위해서는 다음과 같이 spl_autoload_register 함수에 패키지를 등록해야  사용할 수 있습니다.

하지만 컴포저를 사용한다면 composer require league/flysystem 명령을 콘솔에서 실행하거나 다음과 같이 composer.json 의 require 항목에 의존성을 기술하고 composer update 를 실행하면 오토로더가 생성됩니다.

오토로더는 classmap 과 psr-4 두 가지 방식을 사용할 수 있습니다. 다음은 composer.json 에 현재 프로젝트내 database 폴더는 classmap 방식의 오토로더를 사용하고 app 폴더는 App 라는 네임스페이스를 쓰는 psr-4 방식의 오토로더를 사용하겠다는 의미로 라라벨 5의 기본 설정입니다.

이제 클래스맵과 psr-4 방식의 차이점에 대해서 알아보도록 하겠습니다.

클래스맵 방식의 오토로더로 설정할 경우 클래스맵에 지정된 폴더내에 모든 php 를 읽어서 다음과 같은 정적 배열을 생성하고 이 파일들을 오토 로딩합니다.

정보를 정적으로 생성후 로딩하므로 클래스맵은 런타임에 처리 속도가 psr-4 보다 빠르지만 새로운 파일이나 폴더가 추가되면 컴포저에게 오토로딩 정보를 갱신해야 한다고 알려줘야 합니다. 이 명령어는 dump-autoload 또는 dumpautoload 명령어이며 vendor/autoload.php 에 새로운 클래스맵 오토로더를 생성합니다.

psr-4 방식의 오토로더는 다음과 같이 네임스페이스와 이를 매칭시킬 디렉토리만 지정하게 되며 동적으로 런타임에 요청한 클래스나 인터페이스, 트레이트를 찾게 됩니다.

유명한 로그 라이브러리인 Monolog 패키지는 Monolog 네임스페이스가  vendor/monolog/monolog/src/Monolog 에 매핑되어 있습니다.

다음과 같이 Monolog 의 Logger 와 Handler\StreamHandler 클래스를 사용하는 소스가 있습니다.

psr-4 방식의 오토로더는 vendor/monolog/monolog/src/Monolog 폴더내에서 네임스페이스를 기준으로 다음 경로에서 use 로 지정된 php 파일을 찾게 됩니다.

• vendor/monolog/monolog/src/Monolog/Logger.php
• vendor/monolog/monolog/src/Monolog/Handler/StreamHandler.php

이렇게 psr-4는 use 지정된 클래스나 인터페이스에 따라 런타임에 동적으로 로딩하므로 클래스나 인터페이스가 추가되어도 새로 컴포저에게 알려주지 않아도 되므로 매우 유용하지만 클래스맵보다 속도가 느린 단점이 있습니다.

그러므로 개발 환경에서는 psr-4 를 사용하고 운영 환경은 클래스맵을 사용하는 것이 개발의 편의성 및 운영시 속도를 향상 시킬 수 있는 좋은 방법이며 컴포저는 이를 위해서 dump-autoload 명령어에 -o 옵션을 제공하고 있습니다.

운영 환경에서 다음 명령어를 실행할 경우 psr-0, psr-4 방식의 오토 로더를 클래스맵으로 덤프해 주므로 런타임에 클래스를 파일 시스템에서 찾지 않으므로 더욱 빠른 웹 서비스를 제공할 수 있습니다.

Ref

• https://getcomposer.org/doc/00-intro.md#autoloading
• https://getcomposer.org/doc/01-basic-usage.md#autoloading

출처 : https://www.lesstif.com/pages/viewpage.action?pageId=24445513

React를 사용해보고싶지만 webpack / babel 등을 설정하느라 시간을 투자하기 싫을때

create-react-app 도구를 사용하면

React 작업환경을 명령어 하나로 설정 할 수 있다.

CentOS7 (7.4v) 환경에서 React + create-react-app + yarn + Node js 환경을 구축해보자

공식사이트를 참고하여 Node js를 설치

https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

CentOS7 에서 저장소 할당 후 Node js를 설치하면 된다.

저장소에 추가

Node js 설치

Node js 설치시 npm은 자동으로 설치된다

버전 확인

yarn 설치

버전 확인

create-react-app 설치

React 프로젝트 생성 (create-react-app 프로젝트명)

포트 열어주기

CentOS7은 포트를 열어주어야 한다.

나는 Node js 의 기본 포트인 3000번과 http의 기본포트인 80을 같이 열어놓았다.

포트허용

방화벽 상태도 확인해주자

public.xml 파일에 직접 입력시

====

<?xml version="1.0" encoding="utf-8"?>

<zone>

  <short>Public</short>

  <description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>

  <service name="dhcpv6-client"/>

  <service name="ssh"/>

  <port protocol="tcp" port="80"/>

  <port protocol="tcp" port="3000"/>

</zone>

====

방화벽 적용

방화벽 시작

혹시 ip가 막혀있을수 있다면... 허용 IP 추가

--add-source=<source range>/netmask 옵션을 사용하여 IP 추가

ex ) 192.168.1. 대역에서 ssh 접근을 허용시

설정 변경후 재시작

create-react-app 프로젝트 내에서 포트 변경시

package.json파일의 "start"값 앞에 포트를 적어주자

- Window 

"scripts": { "start": "set PORT=원하는포트 && react-scripts start",

- Linux & Mac 

"scripts": { "start": "PORT=원하는포트 react-scripts start",

나는 80포트에서 실행하고싶어서 80으로 설정해두었다.

이제 생성한 프로젝트 안의  package.json 파일 위치에서 yarn start로 실행하고

http://localhost:설정포트 

로 접속하면 초기 페이지가 뜬다.

포트설정을 별도로 하지 않았다면

http://localhost:3000

나처럼 80포트로 설정해두었다면

http://localhost 

로 접속하면 된다.

정상적으로 뜬다면 성공

출처 : https://juein.tistory.com/36?category=780579

## 글로벌 설정
git config --global user.name "Administrator"
git config --global user.email "admin@example.com"

## 저장소복제 clone
git clone git@xxx.xxx.xxx.xxx:root/test.git
-> git clone http://xxx.xxx.xxx.xxx:root/test.git

## 설정조회
git config - -global - -list	# 전역
git config  -list		#저장소별


## 기본명령어
git pull   # 
git add .  # 모든파일 add
git commit -m "문구문구"  # 모든 add 파일 commit
git remote add origin master https://www.www.www  # 원격지 연결
git push origin master  # 원격지 전송

git branch addSample  # addSample 브랜치 생성
git checkout addSample  # master 체크아웃후 addSample 접속

git checkout master  # addSample 체크아웃후 master 접속
git merge addSample  # addSample과 파일 합치기

git branch -d addSample  # 로컬에서 addsample 브랜치 삭제
git push -d origin addSample # 원격지에서 addsample 브랜치 삭제

1. redis(레디스)가 뭔가요? 많이 들어는 봤는데…..

레디스(REmote DIctionary Server) 는 메모리기반 key-value store(저장소) 입니다. 

redis 는 주로 두가지 용도로 많이 습니다.

1. 데이타(또는 페이지) 캐시

2. 세션 저장소 

세션 저장소로 사용할 경우 대용량 분산처리가 가능하며, 서브도메인 세션공유를 쉽게 처리할수 있습니다.

2. redis 설치 및 시작

   2.1 centos6.x 에서 redis 설치 (centos7 도 동일)

[root@vultr ~]# yum install redis
.....
Running rpm_check_debug
Running Transaction Test
Transaction Test Succeeded
Running Transaction
  Installing : redis-3.2.11-1.el6.x86_64                                                                                                  1/1
  Verifying  : redis-3.2.11-1.el6.x86_64                                                                                                  1/1
 
Installed:
  redis.x86_64 0:3.2.11-1.el6
 
Complete!
[root@vultr ~]#
#기본실행 서비스에 등록해둡니다.
[root@vultr ~]# chkconfig redis on
[root@vultr ~]# service redis start
Starting redis-server: [ OK ]
 
# redis-cli 로 정상 접속되는지 확인합니다.
[root@vultr ~]#
[root@vultr ~]# redis-cli
127.0.0.1:6379> keys *
(empty list or set)
127.0.0.1:6379> quit
[root@vultr ~]#

2.2 ubuntu 에서 설치

root@vultr:~# sudo apt-get install redis-server
Suggested packages:
  ruby-redis
Do you want to continue? [Y/n] y
root@vultr:~# 
#redis-server를 자동실행 서비스에 등록한다.
root@vultr:~# sudo apt-get install sysv-rc-conf
root@vultr:~# sysv-rc-conf redis-server on
 
root@vultr:~# redis-cli
127.0.0.1:6379> keys *
(empty list or set)
127.0.0.1:6379> quit
root@vultr:~#

3. phpredis 설치

PHP 에서 redis 를 사용하기 위해서는 phpredis 라는 php 모듈이 필요합니다. 모듈을 컴파일해서 설치해야합니다. 어렵지 않음으로 순서만 잘 이해하면 됩니다.

먼저 php설치정보를 확인해야 합니다. php -i  나 웹페이지에서 phpinfo() 를 확인합니다.

화면에서 php.ini 의 설치위치를 잘봐둡니다. 제 서버는 /usr/local/php/etc/php.ini 에 위치하고 있네요.

phpredis 를 다운받아 컴파일 해야 합니다. 컴파일 순서는 아래와 같습니다.

1. phpredis 최신 버전을 다운받습니다. git 을 통해 받거나, wget 으로 받으시면 됩니다.
2. 다운받은 파일을 압축을 해제한다음, 디렉토리로 이동합니다.
3. phpize 를 실행해줍니다. phpize 를 찾이못한다면, 풀경로로 실행합니다.
4. configure 를 실행합니다. 이때 php 가 설치된 php-config 정보를 넣어줍니다.
5. make, make install 을 실행해줍니다.

[root@vultr ~]# wget https://github.com/nicolasff/phpredis/zipball/master -O phpredis.zip
Saving to: “phpredis.zip”
[root@vultr ~]# unzip phpredis.zip
[root@vultr ~]# ll
total 228
drwxr-xr-x 5 root root   4096 Sep 27 14:59 phpredis-phpredis-24e7859
-rw-r--r-- 1 root root 224711 Nov  9 21:45 phpredis.zip
[root@vultr ~]#
[root@vultr ~]# cd phpredis-phpredis-24e7859/
[root@vultr phpredis-phpredis-24e7859]# phpize
Configuring for:
PHP Api Version:         20131106
Zend Module Api No:      20131226
Zend Extension Api No:   220131226
[root@vultr phpredis-phpredis-24e7859]#
#만약 phpize 를 못 찾는다면 # /usr/local/php/bin/phpize 처럼 전체 경로로 실행
#configure 실행
 
[root@vultr phpredis-phpredis-24e7859]# ./configure --with-php-config=/usr/local/php/bin/php-config
......
creating libtool
appending configuration tag "CXX" to libtool
configure: creating ./config.status
config.status: creating config.h
[root@vultr phpredis-phpredis-24e7859]#
 
#컴파일
[root@vultr phpredis-phpredis-24e7859]# make
...
Build complete.
Don't forget to run 'make test'.
[root@vultr phpredis-phpredis-24e7859]# 
[root@vultr phpredis-phpredis-24e7859]# make install
Installing shared extensions:     /usr/local/php/lib/php/extensions/no-debug-non-zts-20131226/
[root@vultr phpredis-phpredis-24e7859]#

위에서 make install 후 출력되는 경로를 잘 확인해두어야 합니다. 나중에  php.ini 에 추가할 예정

 /usr/local/php/lib/php/extensions/no-debug-non-zts-20131226/

php.ini 파일을 수정해 주어야 합니다. php.ini 파일 위치는 아까 phpinfo()에서 확인하였습니다. php.ini 파일을 열어서 마지막에 아래 라인을 추가해줍니다. 저장후 php-fpm 을 재시작하고 다시 phpinfo()를 보시면 php에 redis 모듈이 표시되는걸 확인할수 있습니다. 세션 정보도 redis 로 변경합니다.

[redis]
extension=/usr/local/php/lib/php/extensions/no-debug-non-zts-20131226/redis.so
session.save_handler = redis
session.save_path = “tcp://127.0.0.1:6379”

[root@vultr phpredis-phpredis-24e7859]# vi /usr/local/php/etc/php.ini
 
[redis]
extension=/usr/local/php/lib/php/extensions/no-debug-non-zts-20131226/redis.so
session.save_handler = redis
session.save_path    = "tcp://127.0.0.1:6379"
:wq
 
[root@vultr phpredis-phpredis-24e7859]# php -i | grep redis
redis
Registered save handlers => files user redis rediscluster
session.save_handler => redis => redis
PWD => /root/phpredis-phpredis-24e7859
_SERVER["PWD"] => /root/phpredis-phpredis-24e7859
This program is free software; you can redistribute it and/or modify
[root@vultr phpredis-phpredis-24e7859]#

4. 마지막으로 php로 redis 테스트

<?php
$redis_host = "127.0.0.1";
$redis_port = 6379;
echo "<h1>redis 테스트<h1><br/>";
try {
    $redis = new Redis();
    $redis->connect($redis_host, $redis_port, 1000);
    $key = "mytest:first_key:incr_test"; //키분류는 :(콜론)을 찍는게 일반적
    $value = $redis->get($key);
    echo "value : ".$value."<br>";
    $redis->incr($key); //테스트를 위해 값증가
    $redis->expire($key, 3); //3초만 유지함.
} catch(Exception $e) {
    die($e->getMessage());
}
?>

해당 소스를 저장후 웹페이지서 테스트를 하면, 처음 value가 없다가 새로고침 할때마다 1씩 증가합니다. 3초간 기다렸다가 다시 새로고침하면, 초기화 되는걸 볼수 있습니다.

phpredis 의 자세한 사용법은 https://github.com/phpredis/phpredis  를 참고하세요.

5. 끝으로..

그누보드5 (영카트) 에서 사용할때 주의점

그누보드5의 common.php 에는 session 설정과 관련된 코드가 들어 있습니다. redis 를 session 저장소로 사용하는 경우 session.save_path 를 수정하면 안됩니다.  /common.php 파일 190번 라인에 있는 아래 코드를 주석 처리 합니다.

//session_save_path(G5_SESSION_PATH);

출처 : http://blog.bongwork.com/archives/44

// 전체 키를 가져옴 [ return : data ]
$returnData = $redis_select->keys('*'); 
print_r($returnData);

// 키에대한 값을 가져옴 [ return : data ]
$returnData = $redis_select->get($test[0]);

// 해시에 대한 전체 값을 가져옴 [ return : data ]
$returnData = $redis_select->hgetall('all_contents');

// 해시에 대한 값을 가져옴 [ return : data ]
$returnData = $redis_select->hget('TESTHASH', {$key});

// 해당 해시에 대한 키를 가져옴 [ return : data ]
$returnData = $redis_select->hkeys('TESTHASH');

// 해시 등록[ return : true/false ]	( 기존에 있는 키값이라면 덮어씌우고 false 떨굼 )
$saveData = serialize(array("a","b","c");
$returnData = $redis->hset('TESTHASH', "key", $saveData);

// 해당 해시 삭제 [ return : true/false ]
$returnData = $redis->hdel('TESTHASH',$userResetSeq);			

// 커넥션종료
$redis_select->disconnect();