꿈꾸는 개발자

Uncaught SyntaxError: Unexpected token :

Dreamload — Tue, 4 Sep 2018 14:44:04 +0900

Uncaught SyntaxError: Unexpected token :

스크립트 구문 오류로 대부분 새미콜론(;) 을찍다가 콜론(:) 찍는 오타로 발생될때가 많다.

검색을 해서 찾아서 수정;

추억은 스며든다

Dreamload — Wed, 13 Jul 2016 00:03:11 +0900

추억은 계속 스며든다.

오랜 시간이 지나도, 더욱 선명하게 떠오른다.

추억에 물들어 있을때쯤 희미하게 떠오르는게 있다.

그건 바로 아쉬움이다.

추억과 함께 아쉬움이 존재하기도 하고, 아련했던 추억에

다시 돌아오지 않는 그 시절을 떠올려 보기도 한다.

하지만 결국 스며들기만 할뿐 돌아갈 수 없고 아쉬움만 생각하다

어느세, 검게 물들어 버린다.

그때쯤이면 누군가를 미워할 수 도 있다.

하지만 이미 스며든 추억은 쉴틈없이 움직인다.

추억은 짧은 순간을 찍었던 한장의 사진과 도 같고, 길게만 느껴졌던 과거를

압축시킨 영상과도 같다.

추억속으로 가다보면, 그시절 그향기 또한 느낄 수 있다.

비록 잠깐 뿐이지만, 그 향기는 너무 좋다.

어릴 적 땅이 하얗게 포장된 집 앞마당을 은색 코트를 입고

한손에는 과자봉지를 들고 들어 오시던 아버지가 아직도 떠오른다.

분명 그때의 난 세상 그 무엇보다

행복했었다.

[instaget.net]인스타그램의 사진을 가져올 수 있는 사이트

Dreamload — Sat, 11 Jun 2016 14:12:39 +0900

요즘 사람들에게 SNS는 일상생활에 없어서는 안될 필수 항목이 되었다. 최근에는 페북스타 또는 좋아요가 많이 눌리는 페북페이지들이 비싸게 거래되고 하는경우도 종종 발견되고 한다. 이런 현상때문에 SNS가 그리 좋게는 보이지 않는다. 나또한 SNS를 즐겨 하지만 글을 자주 올리거나 하는건 아니다.

오늘은 인스타그램에 있는 사진들을 쉽고 편리하게 가져올 수 있는 사이트를 하나 소개할려고한다. 인사타그램 같은경우 정말 가져오고 싶은 사진이 있어도, 일반적인 방법으로는 사진을 다운로드 할 수 없게 되어있다. 물론 캡쳐를 통해 가져올 수 있지만, 이방법은 원본사진이 아니기 때문에 사진의 화질이 좋지 않다. 하지만 오늘 소개할 InstaGet.net 사이트를 이용하면 쉽고 편리하게 해당 사진을 가져올 수 있다. 물론 사진을 다운로드도 할 수 있지만, 사진의 링크또한 볼 수 있기때문에 블로그 포스팅 또는 사진을 링크형식으로 올릴때 정말 편리하게 이용할 수 있다.

암튼 서론은 여기까지 하고, instaget.net 사이트를 통해 인스타그램의 사진을 가져오는 방법에 대해 알아보도록하자. 우선 아래의 링크를 통해 instaget.net 사이트에 접속하도록 하자.

Link : http://instaget.net

접속하면 아래 그램과 같이 깔끔한 화면을 볼 수 가있다. 이용방법같은경우 그림 1번 항목을 클릭하면 자세히 나와있기때문에 이곳에서는 상세하게 설명은 하지 않겠다.

위 그림의 2번항목 같은경우 "여기에 HTML 코드를 붙여넣기 하세요" 라고 나와있다. 이 말은 인스타그램에 접속하여, 원하는 이미지의 주소를 복사하여 붙여넣기 하면 된다. 일단 아래그림처럼 검색어를 입력하면 해당 이미지들이 노출되는데 여기서 원하는 이미지를 클릭하면 그림과 같이 주소창의 값이 바뀌게 된다. (~~개인적으로 아이유를 좋아한다.~~)

주소를 복사했으면 다시 instaget.net 사이트로 돌아와서 아래그림과 같이 1번 항목에 복사한 주소를 붙여넣기 해보자. 붙여넣기를 하는 순간 신기하게도 원하는 사진이 노출되는 모습을 볼 수 있다. 그림 항목 2번같은 경우 인스타그램에서 가져온 이미지의 URL 이다.

(출처 : 인스타그램 - 캡쳐)

위그림처럼 쉽고 편리하게 해당 이미지와 URL들을 가져올 수 있다. 또한 instatget.net 사이트의 경우 다른 곳보다 깔끔하고 편리한 기능 때문에 한번 이용하게 되면 계속해서 이용하게 되는것같다.

AJAX 를 이용한 JSON 통신

Dreamload — Sun, 15 Nov 2015 15:26:24 +0900

AJAX 통신은 없어서는 안될 웹기술 중 하나로 페이지의 이동이없이 서버로부터 데이터를 읽어 들어와 해당되는 레이아웃이 출력하여, 데이터를 실시간으로 주고 받을 수 있다.

간단한 예를 몇가지 든다면, 첫번째로 대표적인 페이스북을 들 수 있는데 페이스북은 스크롤을 내릴 때마다 스크롤이 끝에 도달 하기전 페이스북의 글들이 계속 해서 추가되는걸 볼 수 있다. 요즘은 이런 형태의 웹들이 많이 늘어나고 있다. 불필요하게 전체적인 데이터들을 계속해서 가져오는것보단, 갱신된 부분만 가져오는 이 기술은 정말 유용하다. 또다른 예를 하나더 든다면 회원가입을 들 수 있다. 사용자가 회원가입 을 할때 아이디, 닉네임 을 입력하면, 중복 검사를 하게 되는데 과거에는 팝업창을 이용하여 많이 사용하였지만, 지금은 AJAX 통신을 사용하여 팝업없이 결과를 바로 출력할 수 있게되었다.

☞ AJAX 간단한 예제

개인적으로 javascript 는 잘 못다루는 관계로 여기서는 jquery 를 사용한 방법을 설명 할 도록 하겠다. 아래는 예제소소로 구성되었기때문에, 테스트를 할 시 URL 의 경로같은경우 자신의 경로와 맞게 설정해야한다.

index.php

<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function ajax_send(sel){
        $.ajax({
            url:$(sel).attr('action'), // ajax url 
            dataType:"json", // ajax 통신의 데이터 형식
            async:false,  // 동기(false):비동기(true) 
            type:$(sel).attr('method'),
            data:$(sel).serialize(),
            success: function(data){
                
                if(data['result']=='f'){ /* 로그인 실패시 */
                        alert(data['msg']); 
                }else if(data['result']=='success'){ /* 로그인 성공시*/
                        alert(data['msg']); 
                        $('#login').html(data['id']+'님 환영합니다.');
                }
                    
            },error: function(xhr, status, error){
                    var error_confirm=confirm('데이터 전송 오류입니다. 확인을 누르시면 페이지가 새로고침됩니다.');
                    if(error_confirm==true){
                        document.location.reload();
                    }
                }   
            });     
        return false;
}
</script>
</head>
<body>

<h1>로그인</h1>
<div id="login">

<form action="ajax.php" name="form_ajax" method="post" onSubmit="return ajax_send(this)">
    <input type="hidden" name="ACCESS" value="true">
    <input type="text" name="id" value="" placeholder="아이디를 입력해 주세요">
    <input type="password" name="pw" value="" placeholder="비밀번호를 입력해 주세요">
    <input type="submit" value="로그인">
</form>

</div>

</body>
</html>

ajax.php

<?php
    // 일반 페이지에서 넘어왔을 시  차단
    if(!isset($_POST['ACCESS'])){
            echo json_encode(array('ACCESS'=>'denied'));
            exit;
    }

    // 아이디 또는 비밀번호를 입력하지 않았을 시 
    if(empty($_POST['id'])||empty($_POST['pw'])){
            echo json_encode(array('result'=>'f','msg'=>'아이디 또는 비밀번호를 입력해주세요'));
            exit;
    }

    // 데이터베이스값을 대체하는 변수  
    $get_id = 'user'; // 임의로 정의된 아이디 
    $get_pw = sha1('1234'); // 임의로 정의된 비밀번호 

    // 아이디 불일 치시 
    if($get_id!=$_POST['id']){
            echo json_encode(array('result'=>'f','msg'=>'아이디가 일치하지 않습니다.'));
            exit;
    }

    // 비밀번호 불일치 시 
    if($get_pw!=sha1($_POST['pw'])){
            echo json_encode(array('result'=>'f','msg'=>'비밀번호 일치하지 않습니다.'));
            exit;
    }

    // 로그인이 성공했을 시 
    echo json_encode(array('result'=>'success','msg'=>'로그인에 성공하였습니다.','id'=>$_POST['id']));
    exit;
?>

실행화면

로그인전 화면

로그인 후 화면

티스토리 초대장 배포 1 차

Dreamload — Fri, 2 Oct 2015 13:19:42 +0900

티스토리 초대장 배포 1 차

이번에 처음으로 티스토리 초대장을 배포할려고 합니다. 뭐 활동량이 적어서 그렇게 많은 초대장은 보유하고 있지는 않지만, 초대장을 아는 지인을 제외하고는 배포한적이 없다보니 남는게 있어서 이렇게 배포할려고 합니다.

초대장 신청 같은 경우 이곳에 댓글로 티스토리 아이디로 사용될 정확한 이메일만 적어주시면 될듯합니다. 만약 이메일주소가 정확하지 않을경우 초대장은 전송되지 않기 때문에, 주의하시기 바랍니다. 또한 댓글을 비공개로 작성할 시 티스토리 댓글 시스템상 비회원은 자신의 댓글을 확인할 수 없는점을 알아주었으면 합니다.

혹시나 메일주소 유출로 인한 스팸메일 공격이 불안하신 분은 webmaster@redinfo.co.kr 로 보내주시면 될 듯합니다. 초대장은 공평하게 선착순으로 드릴테니 이점에 대해서는 양해를 부탁합니다

광고/홍보

로또자동추첨 싸이트

광고/홍보 관련 문의하기

티서치를 사용한 간단한 데이터값 조작

Dreamload — Thu, 1 Oct 2015 15:08:57 +0900

티서치란?

티서치란 실행되는 프로그램의 메모리에서 데이터값들을 찾아내어 임의적으로 데이터값들을 수정할 수 있는 프로그램이다. 티서치는 주로 암호화 되지 않는 데이터값들로 된 프로그램이나 서버로 부터 중요 데이터값들을 읽어들이지 않고 사용자 컴퓨터에서 중요 데이터값들을 읽어들이는 프로그램에서 많이 사용한다. 하지만 사용용도에 따라 불법프로그램으로 분류될 수 있으니, 온라인으로 된 프로그램에서는 사용하지 않는게 좋다.

티서치 다운로드

TSearch(Kor).exe

예제로 사용될 똥피하기 게임 다운로드

똥피하기1.exe

간단한 사용예제

1. 티서치를 실행하여 아래와같이 Open Process 를 클릭한다.

(이미지 1-1)

2. Select process 창에서 타겟이 될 프로그램을 선택한 후 열기를 클릭한다. (※ 여기서는 예제로 똥피하기라는 게임을 선택 - 똥피하기 게임이 반드시 실행되 있어야한다.)

(이미지 2-2)

3. 아래와 같이 게임을 한판하여 점수를 기록한다. (※ 여기서는 현재 점수를 기준으로 잡는다)

(이미지 1-3)

4. 티서치로 돌아와서 아래와 같이 Open Process 바로 아래 돋보기 아이콘을 클릭한다.

(이미지 1-4)

5. 똥피하기 게임에서 얻은 현재 점수의 값을 아래와 같은 Search 창에서 Value 입력칸에 입력후 확인을 누른다.

(이미지 1-5)

6. 다시 똥피하기 게임으로 돌아와서 게임을 한판 더한후 현재 점수를 기록한다.

(이미지 1-6)

7. 다시 티서치로 돌아와서 아래와같이 두번째 돋보기 아이콘을 선택한다.

(이미지 1-7)

8. 두번째로 실행한 똥피하기 게임에서 얻은 현재 점수를 아래와같이 Search Next 창에서 Value 입력칸에 입력한뒤 확인을 누른다.

(이미지 1-8)

9. 아래와 같이 입력된 값과 똑같은 값이 하나가 검색이 되는데 이 값을 더블클릭한다. (※ 만약 값이 하나가 아닌 여러개라면 설명에 나온 목록중 6번,7번,8번 을 반복하면 된다)

(이미지 1-9)

10. 위에서 더블클릭된 값은 아래와같이 오른쪽칸으로 넘어오게 되는데 이때 붉은색으로 표시된 Value 값을 클릭하여 원하는 값으로 변경한다.

(이미지 1-10)

결과화면

(이미지 2-1)

웹싸이트의 가장 기본적인 레이아웃 구성

Dreamload — Thu, 1 Oct 2015 13:26:02 +0900

웹싸이트의 틀은 기본적으로 header, sidebar, content, footer 로 이루어져 있다. 이건 꼭 구성되어야할 틀의 구성이 아닌, 오랫동안 구성되어온 하나의 습관처럼 되어 만들어진 규칙이기도 하다. HTML5로 넘어오면서 이런 틀의 규칙을 적용하여 좀더 의미있는 요소들이 많이 생겨나게 되었다. 오늘 설명할 레이아웃 구성을 이미지로 표현하면 바로 아래의 기본적인 레이아웃 구성 이미지와 같다.

기본적인 레이아웃 구성 이미지

(이미지1-1)

+ 위의 이미지에서는 표시되지 않았지만, 가장 바깥쪽 테두리는 wrap 요소 이며 sidebar 와 content 를 감싸는 요소는 container 이다.

기본적인 레이아웃 구성요소 설명

wrap : 모든 레이아웃을 감싸고 있는 레이아웃
header : 기본적으로 웹싸이트 로고나 메인메뉴가 들어가는 레이아웃
container : sidebar 레이아웃 과 content 레이아웃을 감싸는 레이아웃
sidebar : 서브메뉴를 표시하는 레이아웃
content : 페이지의 내용을 표시하는 레이아웃
footer : 저작권 글이나, 기타 메뉴가 들어가는 레이아웃

HTML 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>가장 기본적인 레이아웃 구성</title>
        <style>
            div{ border:solid 1px #000; font-weight:bold; font-size:30px; text-align:center;}
            #wrap{ width:1024px;  padding:10px;background-color:#ccbaba; overflow:hidden; margin:0 auto;}
            #header{background-color:#1ed741; height:80px; color:#fff;}
            #container{ padding:10px;background-color:#3d3939; overflow:hidden; margin:10px 0;}
            #sidebar{ float:left; width:320px;background-color:#f57373; height:400px;}
            #content{ float:right; width:650px; background-color:#ccbaba; height:400px;}
            #footer{ background-color:#2f26e4; height:80px; color:#fff;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                header
            </div>
            
            <div id="container">
                <div id="sidebar">
                    sidebar
                </div>
                
                <div id="content">
                    content
                </div>
            </div>
            
            <div id="footer">
                footer
            </div> 
        </div>
    </body>
</html>

실행화면 - 크롬

(이미지1-2)

웹캠을 CCTV 처럼이용해 보자 - 제노스캠

Dreamload — Wed, 30 Sep 2015 18:23:04 +0900

제노스캠은 웹캠 과 웹캠이 설치된 컴퓨터만 있다면, 제노스캠 프로그램을 이용하여, 언제 어디서든 웹캠이 설치된 곳의 화면을 스마트폰으로 볼 수 있다. 물론 스마트폰으로 영상을 볼려면 스마트폰 어플을 추가로 설치해 주어야한다. 한가지 주의할점은 스마트폰을 이용하여, 영상을 확인할 시 데이터 이용료가 나가기 때문에, 이점을 잘 확인하고 사용해야 한다.

제노스캠 프로그램 메인

(제노스캠 프로그램 메인화면)

Auto login : 자동로그인

Auto run : 자동 실행

Remember ID : 아이디 저장

Hidden mode : 숨김모드 (실행시 작업표시줄로 표시될지 설정)

제노스캠 프로그램 로그인된 화면

(제노스캠 프로그램 로그인된 화면)

Record Folder : 녹화된 영상이 저장된 폴더

Settings : 일반 설정, 녹화된 영상이 저장될 폴더지정, 저장 최대 용량 지정

Help : 도움말

Log Out : 로그아웃

Hidden : 숨김모드로 전환

Exit : 종료

+ 녹화를 하기위해선 Video 선택 메뉴에서 PC 에 설치된 웹캠을 지정한후 옆에 Record 버튼을 클릭 ( 붉은색으로 표시되어야 녹화가 진행)

사용방법 같은 경우 제노스캠 싸이트 상단의 가이드 메뉴로 들어가면 자세히 나와있기때문에, 여기서는 굳이 따로 설명할 필요는 없을것 같다. 하지만 제노스캠 싸이트에 메뉴얼에 나온 제노스캠 프로그램은 현재 제노스캠 프로그램과는 조금 다른 화면인듯 하다. 다운로드 또한 아래의 제노스캠 싸이트를 통해 최신버전을 다운받아서 사용하는게 좋기 때문에 이곳에서는 따로 파일을 올리지 않겟다.

제노스캠 싸이트

구글 검색시 클릭되는 싸이트 링크를 새탭에서 띄우기

Dreamload — Tue, 29 Sep 2015 17:44:53 +0900

원래 있었던건지는 모르겠으나 얼마전부터 구글의 내부적인 시스템이 변경된듯 했다. 그 이유중 하나가 바로 검색시 클릭되는 싸이트링크가 현재창에서 넘어가는 것이였다. 다른 사람은 모르겠으나 나같은 경우 필요한 정보를 찾기 위해선 현재창에서 넘어가는건 불편함을 가져오게 될 뿐이였다.

처음엔 내가 사용하는 크롬설정이 변경된듯 하여 크롬의 설정에서 찾아보았지만 여전히 검색링크를 클릭시 현재창에서 실행되었다. 그래서 혹시나하는 마음에 익스플로러를 실행시켜서 테스트해보았는데 역시나 검색링크가 현재창에서 넘어갔었다. 결국 원인은 구글에 있다는걸 깨닫고 구글메인 화면에서 쉽게 해결 할 수 있었다.

아래는 구글 검색시 클릭되는 싸이트링크를 현재창이 아닌 새탭에서 보이게 설정하는 방법이다.

1. 아래와 같이 구글 메인화면으로 이동하여 붉은 색으로 표시된 설정 부분을 클릭 (www.google.com)

2. 아래와 같이 클릭시 나오는 레이아웃 메뉴에서 붉은색으로 표시된 검색 설정 을 클릭

3. 검색설정에서 아래와 같이 붉은색으로 표시된 설정란을 찾아서 검색한 검색결과를 새 브라우저 창에서 열기 체크상자에 체크를 한후 저장을 클릭

붉은색으로 표시된 부분을 포토샵으로 할려했으나, 워낙 간단한 거라서 티스토리에서 그렸더니, 모양이 좋지 않게나온것 같다. 뭐 이런말은 핑계일 수 있으나, 워낙 오랜만에 포스팅을 하다보니 조금 귀찮은건 사실이다. 다음번엔 좀더 유용한 팁을 가지고 포스팅을 해야겠다.

코드이그나이터 - 데이터베이스 쿼리의 값을 이스케이프 시키기

Dreamload — Tue, 29 Sep 2015 16:41:47 +0900

☞ 이스케이프 문자와 인젝션

우리가 알고 있는 이스케이프 문자는 \(백슬래시) 로 시작되는 문자이며, 이스케이프는 PHP 나 기타 프로그래밍시 문자열에 대한 제어를 할 수 있는데 이러한 이스케이프 문자열중 자주 쓰이는 문자열은 \n(줄바꿈), \s(띄어쓰기), \t(들여쓰기-Tab), \\(백슬래시) 등이 있다.

프로그래밍시 데이터베이스에서 쿼리의 값을 이스케이프시키는건 보안의 좋은 예 중 하나이다. 그 이유는 어렵게 생각할 필요는 없다. 만약 데이터베이스를 잘 모른다면 어렵게 다가올 수 있으나, 데이터베이스를 좀 다루어 본 사람이라면, 금방 알 수 있을것이다.

데이터데이스에서 쿼리를 통하여 검색, 삽입, 삭제, 업데이트 가 이루어지는데 이러한 데이터들을 PHP에서 처리한다면 기본적으로 큰 따옴표(") 와 작은 따옴표(') 안에서 작업이 이루어 질것이다. 하지만, 사용자의 입력으로부터 받아오는 값들은 100% 신뢰할 없기 때문에 항상 값들을 처리해야한다. 그이유는 데이터베이스 쿼리에 들어가는 값들이 악성 사용자에 의해 전혀 의도하지 않는 쿼리문을 생성시킬 수 있기 때문이다. 아래는 악성 사용자에 의해 이루어질 수 있는 데이터베이스 쿼리문중 가장 기본적인 예제이다.

악성 사용자가 입력한 데이터 ( ' OR ''=' )

서버에서 값을 처리할 시

$query_string="SELECT *FROM member WHERE member_id='admin' AND member_pw='' OR ''=''";

위의 예제는 악성 사용자가 관리자의 아이디를 알고 있을 시 이루어질 수 있는 악성행위 이다. 물론 위와 같이 비밀번호를 원문으로 사용하는곳은 없을것이다. 위의 예제에선 쉽게 보여주기위한 예제중 하나이다. 또한 이러한 방법 아닌 아이디입력 부분에서 admin' OR ''=' 값을 입력하여도 접속이 이루어 질 수 있다.

이러한 악성 사용자에 의해 이루어지는 데이터베이스 쿼리 공격을 인젝션 공격 이라고 한다. 이러한 인젝션 공격을 막기 위해선 앞쪽에서 설명한 이스케이프 문자를 이용하여야 한다.

☞ 데이터베이스 쿼리값을 이스케이프 시키기

이곳에선 코드이그나이터를 설명하기 때문에 CI 에서 제공되는 데이터베이스 라이브러리를 이용하여 쿼리값을 이스케이프 시키는 방법을 알아보도록 하자. 우선 적으로 데이터베이스 라이브러리를 사용하기 위해선 아래와 같이 database 라이브러리를 로드해 주어야 한다.

$this->load->database();

CI 에서는 쿼리값을 이스케이프 시키는 방법에 대해 두가지를 제공한다. 하나는 쿼리값을 이스케이프 시키는 함수를 사용하는 방법이며, 다른 하나는 바인딩 쿼리를 이용하여 쿼리값을 이스케이프 시키는 방법이다. 각각의 사용방법은 정말 간단하기 때문에, 길게 설명할 필요가 없는것같다. 아래는 각각의 사용방법에 대한 간단한 예제이다.

쿼리 이스케이프 함수 사용하기

<?php
/* 문자열 */
$string="' OR ''='";

/* 이스케이프 함수 사용 */
$escape_str=$this->db->escape($string);

/* 출력 */
echo $escape_str;

/* 결과 => \' OR \'\'=\' */
?>

바인딩 쿼리 사용하기

<?php
/* 입력된 아이디값 */
$id="admin' OR ''='";

/* 입력된 비밀번호값 */
$pw="' OR ''='";

/* 쿼리 문자열 : 쿼리값에 들어가는 값을 물음표(?) 로 넣어준다 */
$query_string="SELECT *FROM test WHERE test_id = ? AND test_pw = ?";

/* 쿼리 바인딩 사용 : 두번째 인수값을 배열형태로 차례대로 넣어준다 */
$query=$this->db->query($query_string,array($id,$pw));

/* 쿼리 바인 실행시 예상되는 쿼리 문자열
=> SELECT *FROM test WHERE test_id = 'admin\' OR \'\'=\'' AND test_pw = '\' OR \'\'=\''
*/
?>

위와 같이 쿼리의 값을 이스케이프 시키는 방법에 대해 알아보았다. 여기서 중요한 점이 한가지 있는데 CI 에서는 쿼리값에 대한 이스케이프 함수가 자체적으로 작은 따옴표를 생성하기 때문에 쿼리문자열을 만들 시 작은 따옴표는 없애는게 좋다. 만약 아래와 같이 작은 따옴표를 사용하여 만들어진 쿼리문자열에 CI의 이스케이프 함수를 사용한다면 데이터베이스의 결과는 오류를 나타낼 것이다.

CI 에서 이스케이프 함수 사용시 주의할 점

<?php
/* test 아이디 값 */
$test_id="admin";

/* 이스케이프 시키기 */
$test_id=$this->db->escape($test_id);

/* 쿼리 문자열 */
$query_string="SELECT *FROM test WHERE test_id='".$test_id."'";

/* 쿼리 실행 */
$query=$this->db->query($query_string);

/* 예상되는 결과의 쿼리 문자열 : 이스케이프 함수에 의해 작은 따옴표 두개가 입력되게 된다.
=> SELECT *FROM test WHERE test_id=''admin''
*/
?>

참고할 메뉴얼 싸이트

CI 2.1.0 한글 메뉴얼 싸이트

CI 3.0 메뉴얼 싸이트

코드이그나이터 - Encryption (암호화) 클래스

Dreamload — Wed, 23 Sep 2015 19:33:05 +0900

☞ 암호화 클래스란?

암호화 클래스란, PHP 에서 처리되는 데이터를 암호화시켜주는 클래스이다. PHP 에서 제공되는 MD5 또는 SHA1 처럼 생각할 수 있으나, CI에서 암호화클래스는 이런 암호화 뿐만 아니라 이보다 더 높은 기술을 가진 암호화 기술들이 제공되기 때문에 상당히 유용한 클래스로 볼 수 있다. 또한 데이터 암호화 뿐만 아니라 복호화도 지원이 되기 때문에, 사용자들에게 보여지는 민감한 데이터를 암호화시켜 보안을 높일 수 있다.

암호화 클래스에서는 기본적으로 2가지의 방법이 제공된다고 메뉴얼에 기재되어있는데 이는 Mcrypt 라이브러리 와 랜덤해쉬 XOR 인코딩 방법들이다. 하지만 Mxrypt 라이브러리 같은 경우 서버에서 사용이 불가능하다면, 암호화된 메세지는 암호화세션 또는 적절한 수준의 보안을 제공한다고 나와있다. 뭐 높은 보안을 요구하지 않는이상 이부분에 대해서는 크게 신경 쓸 필요는 없을 듯하다.

☞ 암호화 클래스의 사용

우선적으로 암호화 클래스를 사용하기 전에 CI 메뉴얼을 확인해 보면 알겠지만, 사용자의 암호를 저장할 시 CI 의 암호화 함수나 다른 암호화 함수를 사용해선 안되며 꼭 해시되어야 한다고 나와있다. 이말은 쉽게 말해 사용자의 암호같이 고정된 데이터의 처리를 CI의 암호화 클래스를 사용하여 암호화를 실행한다면 키값이 변할 시 그값은 틀린값으로 나와서 제대로된 비교를 할 수 없으며, 사용자 암호같은 경우 사용자들이 해당 싸이트를 신뢰할 수 있어야하는데, 복호화가 이루어 지는 싸이트는 사용자들의 암호의 원문을 알 수 있기때문에 사용지들이 신뢰할 수 없게 되므로 사용자 암호는 꼭 해시 함수를 사용하라는 뜻이다.

암호화 클래스에는 암호화를 시킬 시 키값을 받게 되는데 이 키값은 암호화된 문자열을 복호화 시킬 시 필요한 작은 정보조각이다. 키값 설정에 대한 자세한 설명은 CI의 메뉴얼에 상세히 기재되어있다. 결론만 말하자면, 키값은 영속적이고 고정적인 데이터를 사용할 시 에는 절대 키값을 변경해선 안되며, 키값의 장점을 최대한 활용하기 위해선 키값의 보안이 절대적으로 이루어져야 하며, 키값의 길이는 영문 기준으로 32글자(128)로 대문자와 소문자가 섞인 랜덤 문자열을 사용하는게 좋다는 것이다.

키값의 설정같은 경우 CI의 기본경로인 application/config/config.php 파일에서 아래와 같은 항목을 통해 기본값으로 사용할 키 값을 설정할 수 있으며, 기본 설정값이 아닌 따로 구성된 키값 리스트들을 이용하여 암호화 복호화 시 각 함수의 인자값으로 키값을 설정해 줄 수 있다.

암호화 클래스 기본 키값 환경설정 (application/config/config.php)

$config['encryption_key'] = bin2hex("abcdefghijklmnop");

위에서 사용된 bin2hex 함수는 입력받은 데이터를 16진수로 변환시켜주는 함수이다. 따라서 위에서 언급된 키값 규칙중 글자의 수는 32글자를 입력해야 하지만, bin2hex 함수를 사용한다면 16글자만 입력하면 되기 때문에, 글자의 수를 덜어주면서 키값의 질을 한층 높여주는 결과를 얻을 수 있다. 여기서 한가지 주의할점은 영문 또는 숫자가 아닌 다른 문자를 입력하면, 제대로된 글자수의 키값을 얻을 수 없기때문에, bin2hex 함수를 사용할 시 항상 영문과 숫자를 사용해야 한다.

암호화 클래스의 함수같은 경우 CI 의 메뉴얼에 상세히 나와있기때문에 이곳에는 따로 자세히 작성하지는 않겠다. 한가지 주의할점은 CI 의 버전이 3.0 으로 넘어오면서 암호화 클래스명과 몇가지 함수들의 기능이나, 함수명들이 변경되거나 추가되었기때문에 CI의 버전별로 메뉴얼을 잘 확인하여야한다. 나같은 경우 CI .2X 를 사용하다가 CI 3.0으로 갈아타면서 변경된 암호화 클래스의 함수들을 확인 못하고, 삽질을 한 경우가 있었다.

아래는 CI 의 버전별로 간단한 사용방법 예제이다. 위에서도 말했다시피 버전별로 다른 부분이 많이 있기때문에 CI의 메뉴얼을 참고하는게 좋다.

암호화 클래스 간단한 사용예제1 (CI 2.X)

<?php
/* 암호화 클래스 로드 */
$this->load->library('encrypt');

/* 암호화할 데이터 */
$msg="암호화 문자열 입니다.";

/* 데이터 암호화 두번째 인수값으로 키값을 줄 수도 있다. */
$en_msg=$this->encrypt->encode($msg);

/* 데이터 복호화 (암호화 함수의 인수값으로 키값을 전달했다면, 
반드시 두번째 인수값으로 동일한 키값을 지정해주어야한다 */
$de_msg=$this->encrypt->decode($msg);

/* 암호화된 데이터 출력 */
echo $en_msg;

/* 복호화 : 데이터 원문 출력 */
echo $de_msg;
?>

암호화 클래스 간단한 사용예제2 (CI 3.0)

<?php
/* 암호화 클래스 로드 */
$this->load->library('encryption');

/* 암호화할 데이터 */
$msg="암호화 문자열 입니다.";

/* PHP의 기본함수 bin2hex 함수와 
CI 암호화 클래스 함수를 사용하여 랜덤한 key 값을 생성 */
$key = bin2hex($this->encryption->create_key(16));

/* 암호화 클래스의 설정값중 새로 생성된 키값을 초기화 */
$this->encryption->initialize(array('key'=>$key));

/* 데이터 암호화 */
$en_msg=$this->encryption->encrypt($msg);

/*데이터 복호화 */
$de_msg=$this->encryption->decrypt($en_msg);

/* 암호화된 데이터 출력 */
echo $en_msg;

/* 복호화 : 데이터 원문 출력 */
echo $de_msg;
?>

마지막으로 아래는 CI 에서 사용되는 암호화 클래스에대한 메뉴얼 링크이다. 자신이 사용하는 CI 버전을 잘 확인하여, 참고하면 도움이 될것이다.

CI 암호화 클래스 메뉴얼 싸이트

CI 2.1.0 한글 메뉴얼 싸이트

CI 3.0 메뉴얼 싸이트

코드이그나이터 - Email 클래스의 이해와 환경설정

Dreamload — Wed, 23 Sep 2015 16:54:37 +0900

☞ Email 클래스란?

CI 에서 Email 클래스란 말그대로 이메일을 보낼 수 있도록 이메일에 대한 함수들이 담긴 클래스 이다. 여기서 중요한점은 CI 에서는 정말 간단한 설정과 코딩으로 보낼 수 있다는 점이다. 나같은 경우 처음 CI 를 이용해 이메일 기능을 만들때 복잡할 줄 알았지만, CI 메뉴얼데로 해보니 정말 간편하고 쉽게 기능을 만들 수 있어서 좋았다.

우선적으로 CI의 메뉴얼을 보면 이메일 클래스는 아래와 같은 기능들이 제공된다고 나와있다. 아래의 기능은 CI 3.0 을 기준으로 작성되었다. CI 3.0 에서 추가된 부분은 굵은 글씨로 표시해 두었기때문에 CI의 버전별 메뉴얼을 참고하여 보면 도움이 될것이다.

Multiple Protocols: Mail, Sendmail, and SMTP (다양한 프로토콜 지원 : Mail, Sendmail, and SMTP)
TLS and SSL Encryption for SMTP (SMTP 를 위한 암호화된 TLS 와 SSL 지원)
Multiple recipients (다양한 수신자 지원)
CC and BCCs (CC 와 BCC 지원)
HTML or Plaintext email (HTML 또는 일반텍스트 이메일 지원)
Attachments (파일첨부 지원)
Word wrapping (자동 줄바꿈 지원)
Priorities (우선순위설정 지원)
BCC Batch Mode, enabling large email lists to be broken into small BCC batches. (BBC 배치 모드 지원, 대량의 이메일을 보낼 시 이메일 리스트들을 작은 BCC 배치로 쪼개주는기능 지원)
Email Debugging tools (이메일 디버깅 도구 지원)

(CI 3.0 메뉴얼 싸이트 참고)

☞ Email 클래스의 환경설정

이메일 클래스를 사용하기 위해선 $this->load->library('email') 을 이용하여 이메일 라이브러리를 로드해 주어야한다. 뭐 이런건 CI에서 기본적인 사항이니 긴말은 하지 않겠다.

이메일 클래스를 로드하였다면 가장먼저 이메일 클래스에 대한 환경설정을 해주어야한다. 기본적으로 환경설정을 해주지 않아도 CI에서는 기본값이 설정 되어있기때문에 상관없겠지만, SMTP 서버를 이용하여 이메일을 보낸다면, SMTP 서버에 대한 정보가 필요하기 때문에 이메일 클래스에 대한 환경설정을 꼭 해주어야 한다.

우선적으로 이메일 클래스의 환경설정 방법에는 2가지가 있는데, 첫번째 방법은 아래의 예제와 같이 환경설정 내용을 이메일 초기화 함수의 인수값으로 전달하면 된다. 아래같은 경우 임의로 지정된 값들이기 때문에 자신의 설정에 맞게 값을 넣어주어야 한다.

$this->email->initialize() 함수로 환경설정 인수값 전달하기

$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.gmail.com';
$config['smtp_user'] = 'test@gmail.com';
$config['smtp_pass'] = 'test123';
$config['smtp_port'] = '587';
$config['mailpath'] = '/usr/sbin/sendmail';
$config['mailtype'] = 'html'; 
$config['charset'] = 'utf-8';
$config['wordwrap'] = TRUE;

$this->email->initialize($config);

이메일 환경설정에 대한 두번째 방법은 환경설정파일에 설정값을 저장하는 방법이다. 이방법은 쉽게말해 첫번째 방법처럼 이메일 클래스의 초기화 함수를 사용하여 인수값을 전달해주지 않고, 환경설정 파일에 저장된 설정값을 이용하여 자동으로 환경설정값을 초기화 시키는 방법이다. 환경설정 파일로 설정값을 저장하는 방법은 아래와 같은 설정값을 CI의 기본경로 application/config 디렉토리에 email.php 파일로 저장하면 된다.

환경설정 파일에 설정값 저장하기 (application/config/email.php)

$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.gmail.com';
$config['smtp_user'] = 'test@gmail.com';
$config['smtp_pass'] = 'test123';
$config['smtp_port'] = '587';
$config['mailpath'] = '/usr/sbin/sendmail';
$config['mailtype'] = 'html'; 
$config['charset'] = 'utf-8';
$config['wordwrap'] = TRUE;

위와 같이 환경설정 파일에 설정값을 저장하면 이메일 클래스를 사용할 시 이메일 클래스의 초기화 함수인 $this->email->initialize() 함수를 사용할 필요가 없다.

이메일 클래스에 대한 환경설정 항목에는 위에 나온 설정값보다 더많은 설정항목들이 제공되는데, 이 설정 항목들은 CI의 버전 마다 다를 수 있으니 CI 버전별 메뉴얼을 참고하는게 좋다. 아래에 나온 이메일 클래스 환경설정 항목들은 CI 2.X 기준으로 CI 3.0 에서 추가된 항목들만 몇가지 적어보았다.

CI 3.0 에서 추가된 이메일 환경설정 항목

항목	기본값	옵션	설명
smtp_keepalive	FALSE	TRUE OR FALSE (boolean)	SMTP의 연결 유지
smtp_crypto	기본값 없음 (No Default)	tls OR ssl	SMTP 암호화
dsn	FALSE	TRUE OR FALSE (boolean)	서버로부터 통보 메시지를 활성화

위의 항목의 위에서 말했다시피 CI 3.0 에서 추가된 항목들이다. 일반적으로 위의값들은 설정값으로 지정해 주지 않아도 될듯하다. 물론 필요에 따라서 설정해 주어도 좋지만 기능에 대한 이해가 부족할 시 기본값으로 두는게 좋다.

이메일 클래스에서 함수들의 사용방법은 메뉴얼에 더 자세히 나와있기때문에, 따로 이곳에 작성하지는 않겠다. 마지막으로 아래는 이메일 클래스에서 함수들의 사용방법이 나와있는 CI 메뉴얼 싸이트이다.

CI 이메일 클래스 메뉴얼 싸이트

CI 2.1.0 한글 메뉴얼 싸이트

CI 3.0 메뉴얼 싸이트

코드이그나이터 - 코어(Core) 시스템 클래스 대체와 확장

Dreamload — Thu, 17 Sep 2015 05:44:59 +0900

☞ 코어(Core) 시스템 클래스 란?

코어 시스템 클래스는 코드이그나이터에서 CI 가 작동될때마다, 자동으로 초기화 되어, 사용자가 로드하지 않아도, 작동되는 클래스를 뜻한다. 한가지 쉬운 예를 들면, URI 클래스를 들 수 있다. 이 클래스는 환경설정파일인 autoload 에서 자동로드 를 설정하거나 사용자가 임의로 로드해 주지 않아도 CI에서 작동될때마다 자동으로 초기화가 이루이지게 되는데 이러한 클래스를 코어 시스템 클래스라고 한다.

코어 시스템 클래스 같은 경우 CI의 메뉴얼을 보면 사용자가 수정하기엔 여러가지 위험이 따른다고 설명이 되어있다. 하지만 멋데로 수정하지 않는 이상 위험까지 따르지는 않으니, 안심해도 된다. 물론 나의 개인적인 생각일 뿐이다.

☞ 코어(Core) 시스템 클래스 목록

아래는 코어 시스템 클래스 목록이며, 이러한 클래스들은 위에서도 말했다시피 CI가 작동될때마다 호출되는 클래스 들이다.

Benchmark
Config
Controller
Exceptions
Hooks
Input
Language
Loader
Log
Output
Router
Security
URI
Utf8

( http://www.codeigniter.com 에서 메뉴얼 참고 )

☞ 코어(Core) 시스템 클래스의 대체

코어 시스템 클래스의 대체의 경우 아래와 같은 코드를 이용할 수 있다. 아래의 예제는 대체 할려는 코어 시스템 클래스가 URI 인 경우이며 대체 클래스명은 아래와 같이 CI 라는 접두어로 시작하여야 한다.

<?php
class CI_URI{
    /* 대체 코드 작성 */
}
?>

위와 같이 코어 시스템 클래스를 대체할 코드를 작성한뒤 application/core 디렉토리에 저장하면 된다. 저장할때는 CI 접두어를 뺀 URI.php 로 저장하면된다.

코어 시스템 클래스의 대체하는 방법은 매우 간단하나 대체를 하여 수정하는건 위험한 부분이니 CI 프레임워크의 구조를 잘 모른다면 사용하지 않는게 좋다. 하지만, 오류가 나더라도 걱정할건 없다. 그이유는 코어 시스템 클래스의 대체는 코드이그나이터에서 제공되는 방법중 하나이기때문에, 자신이 대체한 파일에서 오류가 난부분을 수정하거나 수정이 불가피 할 시 에는 삭제를 하면 되기 때문이다.

☞ 코어(Core) 시스템 클래스의 확장

코어 시스템 클래스를 확장하는 방법은 그렇게 어려운 부분이 아니다. 또한 코어 시스템 클래스의 대체 방법보단 훨씬 유용한 방법이기도 하다. 기본적으로 코어 시스템 클래스를 확장하기 위해선 아래와 같은 규칙과 특징을 가지고 있다.

클래스를 생성할 시 클래스명은 반드시 application/config/config.php 에 정의된 변수인 $config['subclass_prefix'] 값으로 시작해야한다.
클래스를 생성할 시 확장할라는 내장 코어 시스템 클래스를 extends 하여 생성해야 한다.
만약 확장된 클래스 내 메소드에서 내장 클래스에 정의된 메소드와 같은 이름의 메소드가 존재한다면, CI 에서는 내장 클래스에 정의된 메소드 대신 사용자가 정의한 메소드를 사용하게 된다.

아래의 예제는 위의 규칙을 적용하여 확장된 코어 시스템 클래스이다. 확장된 코어 시스템 클래스는 Controller 이며, Controller 에서 전역적으로 사용되는 메소드가 있을 시 유용하게 사용할 수 있다.

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/* MY Controller */
class MY_Controller extends CI_Controller {

    var $data;

    function __construct()
    {
        parent::__construct();
        
        if(isset($_POST['data'])){
            
            $this->data=$_POST['data'];
            
        }else{
            
            $this->data='NULL'; 
        }

    }
    
    function _header($header)
    {
        $header['data']=$this->data;
        $this->load->view('header',$header);
    }

}
?>

위와 같이 코어 시스템 클래스를 확장하였다면, Controller 에서는 기존에 확장하여 사용하던 CI_Controller 가 아닌 새로 확장된 코어 시스템 클래스인 MY_Contrller 를 extends 해주어야 한다. 아래는 확장된 코어 시스템 클래스를 사용하는 예제이다.

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/* Main Controller */
class Main extends MY_Controller {

    
    function __construct()
    {
        parent::__construct();
        echo $this->data;
        
    }
    
    function index()
    {
        $header['title']='REDINFO';
        $this->_header($header);
    }

}
?>

위에서도 계속 언급했다시피 코어 시스템 클래스의 확장은 프레임워크의 내부를 대체 하거나, 새로 추가하는것이기 때문에, 되도록 이면, 대체보단 확장을 사용하는것이 위험성을 줄일 수 있다. 물론 개발자들마다 스킬이 다르기 때문에, 더 나은 코어 시스템 클래스를 대체 또는 확장 하는건 개발자들의 몫이지 위험성을 놓고 볼 문제만은 아니다.

HTML 의 FORM 요소로 지정할 수 있는 속성과 속성값

Dreamload — Mon, 20 Jul 2015 06:03:40 +0900

FORM 요소는 일반적으로 사용자가 데이터를 입력할 수 있는 입력폼 요소들의 범위를 설정하거나, 서버로 전송할 데이터들을 설정할 때 사용한다. 이때 서버란 데이터를 처리할 수 있는 프로그램을 뜻하며 PHP 나 CGI 를 예로 들 수 있다. 이러한 서버는 FORM으로 넘겨진 값들을 가져오기 위해선 꼭 필요하다. 이렇듯 FORM 요소는 데이터를 전송하기 위해 꼭 필요한 요소기이도 하나 요즘은 AJAX를 사용하여, 요소에 구애 받지 않고, 전체페이지의 로드없이 서버로 데이터를 보내고 받고 하는게 추세이다. 물론 AJAX를 사용한다해서 FORM 요소를 사용하지 않는건 아니다. 그 이유는 FORM 은 입력폼이라는 또하나의 자식과 같은 요소들을 컨트롤 할 수 있기때문에 FORM 요소 범위 안에 작성된 값들을 쉽게 컨트롤 하기 위해선 꼭 필요하다.

FORM 의 기본적인 구조는 아래 와 같이 <form></form> 을 사용하여, 작성한다. FORM 요소 범위안에는 기본적으로 입력폼으로 사용가능한 요소들이 사용된다. 이곳에서는 FORM 요소 범위안에 들어가는 요소들이 아닌 FORM 요소 속성과 속성값으로 올 수 있는 키워드에 대해 알아보도록 하자.

FORM 요소의 기본구조 예제

<form action="http://ex.com/form.php" method="get" >
<input type="text" name="ipt" value="" />
.
.
.
</form>

위의 예제에서는 가장 기본적인 action 속성과 method 속성만 지정한것이고, 아래와 같이 더욱 많은 속성과 값들을 지정할 수 있다. 아래는 FORM 요소로 지정가능한 속성과 속성값으로 올 수 있는 키워드의 설명이다.

FORM 요소로 지정가능한 속성과 속성값

action 속성

입력된 데이터를 송신하여 처리할 서버프로그램이 있는 URL 경로를 지정한다.

method 속성

보낼 데이터를 어떤 형태로 송신할 것인지 지정한다. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

get

- 이 값은 URL 끝에 '?' 다음에 FORM 의 데이터값들을 추가할때 지정한다. (기본값)

post

- 이 값은 FORM 의 데이터값들을 본문으로 보낼 시 지정한다. 이 방식은 일반적으로 보낼 데이터가 보안이 필요하거나, 데이터의 길이가 길 경우 사용한다.

accept-charset 속성

FORM 요소의 데이터를 송신할때 사용할 문자 인코딩을 지정한다. 만약 문자인코딩이 여러개 인경우 스페이스바로 분류하여 지정하면 된다.

autocomplete 속성

이 속성은 HTML5 의 새속성으로 입력필드에 입력된 데이터에 대해 자동채움을 유효화할지 무효화 할지 지정할 수 있다. 이말은 FORM 을 이용하여 서버로 데이터를 전송한뒤, 사용자가 뒤로 가기를 눌렀을 시 이전에 입력된 데이터를 자동으로 채워넣을지 아니면 비워놓을지를 선택하는것이다. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

- 이값은 이전 데이터를 유효화 한다. 즉 이전 데이터를 자동으로 채워넣는다. (기본값)

off

- 이값은 이전 데이터를 무효화 한다. 즉 초기화 시킨다.

enctype 속성

데이터를 송신할 시 데이터의 인코딩을 지정하는 속성이다. 쉽게 말해, FORM 요소를 이용하여 데이터를 전송할 시 어떠한 형태의 데이터를 전송할지 이 속성값이 미리 지정하는것이다. 이속성의 기본 키워드값은 application/x-www-form-urlencoded 이며, 이속성의 값으로 올 수 있는 키워드는 아래와 같다.

application/x-www-form-urlencoded

- 이 값은 일반적인 데이터를 보낼 시 지정한다. (기본값)

multipart/form-data

- 이 값은 보내야할 데이터에 첨부파일이 있을 경우 지정한다.

text/plain

- 이 값은 플레인 텍스트만으로 이루어진 데이터를 보낼 경우 지정한다.

name 속성

FROM 요소의 이름을 지정한다. 이때 name 속성의 값은 다른 FORM 요소와 중복되어선 안된다.

target 속성

이 속성값은 FORM 요소에서 데이터를 송신 후 결과를 표시할 브라우징 컨텍스트를 지정한다. 일반적인 A 요소의 target 속성과 같으며. 이 속성의 값으로 올 수 있는 키워드는 아래와 같다.

브라우징 컨텍스트명

- 이 값으로는 iframe 이나 frame 으로 이루어진 요소들의 name 속성의 값을 지정할 수 있다.

_blank

- 새 브라우징 컨텍스트에 표시

_self

- 현재의 브라우징 컨텍스트에 표시 (기본값)

_parent

- 현재 브라우진 컨텍스트에 부모창이 존재할시 그 부모창에 표시

_top

- 최상위 브라우징 컨텍스트에 표시

novalidate 속성

이 속성은 HTML5의 새속성으로 FORM 에서 데이터를 송신 할때 입력된 데이터의 유효성을 무효화 할 때 사용한다. 이 속성값을 사용하는 이유는 INPUT 요소의 type 속성값으로 url 또는 email 과 같은 특정한 데이터 형식만을 취급하는 input 요소가 존재할 시 데이터를 검증하게 되는데, HTML5의 novalidate 속성을 지원하는 브라우저같은 경우 올바르지 않는 데이터가 있을 시 오류를 발생시키게 된다. 결론적으로 이런 오류검증 기능을 무효화 시키기 위해 이속성을 지정한다. 이 속성의 값은 따로 지정해줄 필요는 없지만 만약 지정해 준다면 novalidate="novalidate" 나 novalidate="" 로 지정해 주면 된다.

onSubmit 속성

이 속성은 INPUT 요소의 type 속성중 submit 를 사용할 시 지정할 수 있다. 이 속성을 지정하는 이유는 데이터를 보내기전에 처리할 일들이 있을 경우 사용하게 된다. 일반적으로 함수를 이용하여 많이 사용하며, 하나의 예를 들면 onSubmit="return func()" 처럼 사용할 수 있다. func() 는 사용자정의 함수이고, return 을 해주는 이유는 함수내에서 결과값을 검증하여, 잘못됫을 경우 함수내에서 return false 를 사용하여 FORM 의 SUBMIT 기능을 중지시키기 위해서이다.

FORM 요소의 속성과 값은 위에서 설명한것과 같다. 물론 위에서 설명한 속성말고도 지정해 줄 수 있는 속성들은 몇가지더 존재하지만, 여기서는 FORM 요소에서 쓰이는 기본적인 속성에 대해서만 설명하도록 하겠다.

코드이그나이터 - 오류표시 설정

Dreamload — Sun, 19 Jul 2015 04:19:16 +0900

일반적으로 웹싸이트를 제작한뒤 운영할때 간혹 오류표시 기능을 끄지 않아, PHP 오류들이 그대로 노출되는 경우가 많다. 오류표시 노출의 경우, 웹서버의 경로나, 공개되어선 안되는 PHP 관련 변수들이 노출되어, 해커같은 악성사용자들의 좋은 먹잇감이 되기도 한다. 물론, URL로 특정 경로접근이 막아져 있는 경우는 경로에 대해 크게 걱정할 필요는 없겠지만, DB 오류와 관련된 부분들은 상당히 위험할 수 있다. 또한 웹싸이트의 오류를 일반 사용자들이 본다면, 그다지 좋아하지는 않을것이다.

이와 같이 오류에 대한 설정은 웹싸이트 운영을 할 시 상당히 중요하다. CI 에서는 index.php 파일에서 오류표시 기능을 설정할 수 있다. 물론, 일반적으로 ini_set() 함수 또는 php.ini 설정파일에서 에러표시 기능을 설정할 수도 있겠지만, 이곳에서는 CI에서 에로표시 기능을 설정하는 방법을 설명하기 때문에, CI를 기준으로 살펴보도록 하자.

☞ CI 에서 오류 표시 설정

위에서도 말했다시피 CI 에서는 index.php 파일의 설정을 통해 PHP의 오류표시에 대해 설정할 수 있다. 우선 index.php을 열어서 살펴보면 아래와 같은 구문을 볼 수 있을것이다.

define('ENVIRONMENT', isset($_SERVER['CI_ENV']) ? $_SERVER['CI_ENV'] : 'development');

위의 구문이 바로 CI에서 오류표시기능에 대한 설정을 하는 부분이다. 현재의 설정값은 development 로 설정이 되어있다. development 값은 개발자 모드로 이값을 설정시 오류를 표시하게 된다. 일반적으로 웹싸이트를 제작하는 동안은 development 값을 사용하게 된다. 하지만 웹싸이트를 운영할 시, PHP 오류표시로 인한 경로노출은 보안의 취약점중 하나가 될 수 있기 때문에, 웹싸이트를 운영할 시 에는 에러가 표시되지 않도록 production 값을 설정해 주는게 좋다. 이러한 값들의 자세한 설명은 아래에서 살펴보도록 하자. 아래는 CI에서 오류표시에 대한 설정값들의 설명이다.

development : 이 값은 개발모드로 브라우저에 PHP 오류를 표시할 때 사용한다.

production : 이 값은 운영모드로 브라우저에 PHP 오류를 표시하지 않을 때 사용한다.

testing : 이 값을 설정하면 브라우저에 PHP 오류를 표시하지 않는다. 결론적으로 production 모드와 같다

이처럼 CI에서 PHP 오류표시 대한 설정방법은 간단하다. 굳이 긴 설명을 하지 않아도 이러한 설정법들은 익숙하기 때문에, CI를 처음 접하는 경우에도 쉽게 이해 할 수 있을것이다. 하지만, CI 같은 경우 위의 설정값말고도 오류표시에 대한 설정을 해주어야 하는 부분이 있다. 그건 바로 DATABASE 에대한 오류표시 설정이다. DB 같은경우 중요한 정보들이 담겨 있기때문에, DB에대한 오류표시기능이 켜져 있을 시 오류가 발생한다면, 데이터베이스의 중요한 정보들을 노출 시켜 보안의 큰 취약점이 될 수 있다.

일반적으로 DATABASE 에대한 오류표시설정은 CI에서 DB 환경설정 파일인 database.php 에서 설정할 수 있다. CI의 기본경로 본다면 아래의 경로와 같다.

application/config/database.php

위의 경로를 통해 database.php 파일을 살펴보면 db에 대한 여러 설정들을 볼 수 있을것이다. 그중에서 오류표시에 대한 설정은 아래의 그림에서 붉은색으로 표시된 db_debug 값을 이용하여 할 수 있다. 이값이 TRUE 라면 DB에 대한 오류를 화면에 표시하게 되고, FALSE 라면 DB에 대한 오류를 화면에 표시하지 않게 된다.

(database.php 의 설정파일 내용중..)

CI를 이용하여 웹싸이트를 제작할 시 많이 하는 실수중 하나가 바로 DB 오류표시기능을 켜놓은 상태에서 운영을 하는것이다. 이러한 실수는 앞서말했다시피 보안의 큰 취약점이 될 수 있다. 아무리 PHP 오류표시를 Off 시켰다해도, CI 에서는 db_debug라는 설정값이 TURE 일경우 자체적으로 DB의 쿼리문들을 디버깅하여 오류를 보여주도록 설계었기 때문에, 웹싸이트를 운영할 시에는 항상 이값은 FALSE 로 해놓아야한다.

웹싸이트를 제작할 시 디자인과 기능도 중요하지만, 이러한 디자인과 기능보다도 더 중요한건 바로 보안이다. 웹싸이트를 보안하는건 정말 어렵게 다가올 수 있으나, 단순하게 생각해보면 그렇게 어려운일만은 아니다. 여기서 단순하게 생각한다는 말은 쉽게 말해 어려운 보안만을 생각하는게 아니라, 쉬운 보안방법부터 생각한다는 것이다. 한가지 방법을 예로들면 오늘 설명한 CI의 오류표시 설정을 예로 들 수 있다. 그 이유는 말않해도 알겟지만, 오류표시 노출은 해커에게 정보를 넘겨주는 행위로 볼 수 있기 때문이다.

이야기가 길어지면 왠지 주제가 보안쪽으로 흘러갈거 같아서 여기서 끝내도록 하겠다.

IE8 이하의 하위 브라우저에 대한 생각

Dreamload — Wed, 8 Jul 2015 17:13:51 +0900

과거에 웹싸이트 제작하다 보면 IE8 이하의 브라우저 때문에 스트레스를 많이 받았었다. CSS 부분은 그렇다 쳐도 JS/JQUERY 같은경우, 복잡한 기능은만들기도 힘들고, 크로스브라우징을 위해, 노가다를 해야만했다. 거기다가 IE 이녀석은 일반 사용자들이 많이 사용하기도 하고 , XP같은 경우 버전8까지밖에 지원이 안되기 때문에, 상당히 골치거리였다. 그래서 난 그당시 깔끔하게 IE8 이하는 버렸다. 시대와 기술들은 날이 갈수록 발전해 나가는데, 뒤쳐진 기술들을 보완할 필요는 없다고 생각했기 때문이다.

(JQUERY 2.X 버전부터는 IE 6, 7, 8 을 지원하지 않는다)

JQUERY 같은 경우도 버전이 업그레이드 되면서 현재 최신 버전은 IE8을 지원하지 않는다. 단순히 IE8에서 사용할 수 없는 기능이 존재하는게 아닌, 처음부터 JQEURY 객체인 $을 인식하지 않는것같다. 결과적으로 JQUERY 최신버전에서는 IE 8 이하 브라우저 자체를 지원을 하지 않는다는 소리다. 궁금하다면 IE8 브라우저에서 JQUERY 최신 버전을 로드해보면 될것이다.

하지만 아직까지도 많은 개발자들이 웹제작시 IE8 이하의 사용자들을 고려하여 하위브라우저를 보완 하고있다. 아마도 웹싸이트의 방문자를 고려한것 같은데, 내 생각은 위에서 말했다시피 시간낭비라고 생각한다. 그 이유는 앞으로 수많은 사용자들이 뒤떨어진 기능을 사용해 나갈 것인지, 아니면 새로운 기능을 사용해 나갈것인지를 생각해 보면 알 수 있다. 쉽게 말해 IE8 이하의 브라우저를 앞으로 더 많이 사용하지는 않을것이다.

결론적으로 시대에 뒤떨어져 지원되지 않는 기능들을 최신 기능과 같이 작동되도록 억지로 보완할 필요는 없다고 생각한다. 그 이유는 앞으로 새로운 기술들이 생겨날 것이고, 그 기술또한 보완할점이 많을 텐데 굳이 시간과 정성을 들여 뒤떨어진 기능을 보완한다는건 기술개발에 있어서 많은 시간이 낭비되고 오히려 새로운 기술개발에 있어서 제한 상항이 많이 생겨날 뿐이기 때문이다. 그렇기 때문에 앞으로는 과거의 기술들에 대해 안되는 기능을 억지로 보완하기보다는 새로운 기술을 발전시켜 사용자들이 새로운 기술을 접할 수 있도록 이끌어 가도록 해야한다. 그렇게 된다면, 과거 시스템으로 인해 새로운 기능을 사용하지 못했던 사용자들은 새로운 기술을 사용하기 위해 그에 맞는 시스템을 사용하게 될것이다.

CSS 의 word-wrap, word-break : 텍스트의 줄바꿈 형식을 지정하고 싶을때

Dreamload — Tue, 23 Jun 2015 21:22:31 +0900

사실 word-wrap 프로퍼티와 word-break 프로퍼티는 같은 목적으로 사용된다. 하지만, 브라우저별로 지원하는 방식이 달라서, 쓰기가 애매모호 할때가 많다. 물론 해결방법이 있긴 있지만, 앞으로 꼭 개선되어야 할 부분중 하나이다.

예제를 보여주고 싶지만, 브라우저 마다 전부 달라서, 사용가능한 방법만 소개할까 한다. 우선 word-wrap 프로퍼티 와 word-break 프로퍼티 의값으로 올 수 있는 것들을 살펴보도록 하자. 아래는 각각 프로퍼티 값으로 올 수 있는 값들과 설명이다.

word-wrap 프로퍼티

normal 브라우저에 설정된 기본값이다, 이값으로 설정하여도 한글같은 경우 줄바꿈이 자동으로 되는것같지만, 영문일경우는 스페이스바 나 탭 또는 엔터로 띄운 공간이 없을경우 줄바꿈이 되지 않는다.

break-word CSS3 표준안에는 텍스트가 넘칠경우 단어를 기준으로 자른다고 설명되어있다. 여기서 말하는 단어는 의미있는 단어가 아니라 위에서 말한 스페이스바 나 탭 또는 엔터로 띄운 단어를 말한다. 참고로 한글같은 경우 익스에서는 normal 값과 동일하게 설정된다.

break-word CSS3 표준안에는 텍스트가 넘칠경우 단어를 기준으로 자른다고 설명되어있다. 여기서 말하는 단어는 의미있는 단어가 아니라 위에서 말한 스페이스바 나 탭 또는 엔터로 띄운 단어를 말한다. 참고로 한글같은 경우 익스에서는 normal 값과 동일하게 설정된다.

initial 초기 속성값이다. 이값을 설정하면 기본값으로 제공되는 normal 값과 같은 설정이 된다. 참고로 익스에서는 이값을 지원하지 않는다.

inherit 부모로 부터 값을 물려받는다. 이 값을 지정하면 부모요소에 적용된 값으로 설정이 된다.

word-break 프로퍼티

normal word-wrap 프로퍼티 의 normal 값과 같다.

break-all 단어가 아닌 요소의 크기에 맞추어 줄바꿈을 해준다. 보통 이값을 많이 사용한다.

keep-all 이 값은 스페이스바 나 탭 또는 엔터로 띄운 단어를 기준으로 자른다. 만약 띄어쓰기가 없다면 줄바꿈이 되지 않는다. 참고로 익스에서만 지원이 된다.

initial word-wrap 프로퍼티 의 initial 값과 같다.

inherit word-wrap 프로퍼티 의 inherit 값과 같다.

위의 프로퍼티값들은 정말로 헷갈리는 것들이다. 하지만, 어려워 할 필요는 없다. 줄바꿈만 필요하다면 word-break 프로퍼티를 break-all 값으로 설정하면된다. break-all 값같은 경우 어떠한 경우가 오더라도 요소 크기에 맞추어 줄바꿈을 하기 때문에, 모든 브라우저에서 최대한 비슷하게 볼 수 있다.나같은 경우도 아래와 같이 전체영역을 break-all 값으로 설정을 해놓앗다.

*{
    word-break:break-all;
 }

CSS는 알면 알 수록 복잡한것같다. 하루 빨리 모든 브라우저가 스타일이나 요소의 속성 그리고 스크립트에 대한 적용들이 통일 되었으면 좋겟다.

PHP 의 smtp 전송을 이용한 메일 보내기 소스파일

Dreamload — Tue, 23 Jun 2015 19:30:49 +0900

2022-02-06

본 라이브러리는 2022-02-06일 https://blog.redinfo.co.kr/post/view?pid=74 에서 새롭게 구현되었습니다.

PHP 를 이용해서 메일을 보내야하는 경우, 평소 잘 쓰지 않는 메일기능은 머리속에서 구현한 기억만 남아있지, 다시 구현하기란 정말 어려운일이다. 일반적으로 PHP 에서는 메일을 보내는 방법으로 두가지를 쓰고있다. 첫번째 방법으로는 mail 함수를 이용하는 방법이 있고, 두번째 방법은 smtp 로 보내는 기능을 직접 구축하여 사용하는 방법이 있다.

mail 함수의 경우 바로 쓸 수 있는게 아니라 sendmail 이라는 별도의 데몬이 필요하다. sendmail 은 유닉스 계열 시스템에서 사용되는 메일서버중 하나이다. sendmail 같은 경우 설명해야할 부분이 많기 때문에 여기서는 생략하도록 한다.

여기서 소개할려는 메일 보내기 소스파일은 smtp 전송을 이용하여 메일을 전송하는 프로그램이다. 참고로 메일 보내기 소스파일은 직접 만든게 아닌 타 웹싸이트의 글을 참고하여, 수정한 것이다. 메일 보내기 소스파일의 다운로드는 바로 아래를 이용하도록 하자.

메일 보내기 소스파일 다운로드 (최종 수정일 : 2015-06-27)

Sendmail.php

다운로드

위의 파일을 수정하여 배포하는건 자유지만, 제작자나 수정자의 정보는 남겨두었으면 한다. 제작자 와 수정자 같은 경우 메일 소스파일 안에 주석으로 되어있으니, 자신이 소스파일 수정하여 배포할시 원본 제작자나 수정자를 지우지말고 밑쪽에 자신의 정보를 추가하여 배포했으면 하는 바램이다.

☞ Sendmail.php

사실 처음에는 코드이그나이터의 Email.php 소스파일을 뜯어서 수정해볼까 했지만, 내가 줄곧 해온 프로그래밍 방식과 달라서 그런지 해석하기가 어려웠다. 그래서 할 수 없이 구글링을 하였고, 메일 함수를 만들기 정말 좋은 소스파일을 발견했다. 솔직히 수정하지 않아도, 모든기능이 완벽하게 구현되어 있엇지만, 편하게 사용하기 위해 몇가지를 수정하였다.

우선 Sendmail.php 파일을 열어보면 클래스 안에 여러 함수들이 있을 것이다. 이 함수들은 전부 사용자가 사용하는게 아니라 몇가지만 사용하면 되기 때문에, 어려워 할필요는 없다. smtp 의 기본설정 같은경우 아래에서 설명하겠지만 클래스 안에 변수들을 이용 하거나 클래스 객체 변수 선언시 생성자의 인수로 넘겨주면 된다.

아래는 메일 보내기 소스파일에서 사용할 수 있는 함수(메소드) 에 대한 설명이다. 아래의 함수들은 클래스 내에 선언 되어있으며 클래스를 잘 모르는 경우 클래스의 객체선언과 메소드 접근 방법에 대해 알아보면 도움이 될것이다.

기본설정(Sendmail.php)

기본설정 같은 경우, 메일 전송기능을 이용하는데 있어서 설정값의 변화가 거의 없을경우 설정해 놓으면, 사용 시 마다 새로운 설정값들을 생성자로 초기화 시켜줄 필요가 없다.

기본설정은 Sendmail.php 파일 내 클래스의 변수값들을 수정하면 된다. 각각의 설명은 Sendmail.php 파일내 주석으로 되어있으니, 그부분을 참고 하길 바란다.

메일함수 객체 선언과 초기화

기본적으로 메일기능을 사용하기 위해선 클래스 파일을 추가한뒤 클래스 객체를 변수에 선언해야한다. 선언하는 방법은 아래와 같다.

<?php /* 클래스 파일 로드 */ include "Sendmail.php"; /* 클래스 객체 변수 선언 */ $sendmail = new Sendmail(); ?>

만약 설정값을 넘겨주어야 한다면 아래와같이 필요한 설정값을 배열로 넘겨주면된다. 아래의 예제에서는 전부다 넘겨주었지만, 기본적으로 생성자에서 자동적으로 설정된 값만 초기화 시키기 때문에 전부다 넘겨줄 필요없이 필요한 값만 넘겨주면 된다. 한가지 명심할점은 배열원소 첨자명은 주석에 나온 명칭처럼 반드시 일치하여야 한다.

<?php /* 클래스 파일 로드 */ include "Sendmail.php"; /* + host : smtp 호스트 주소 + smtp_id : smtp 계정 아이디 + smtp_pw : smtp 계정 비번 + debug : 디버그표시기능 [1 : 활성 0 : 비활성] + charset : 문자 인코딩 + ctype : 메일 컨텐츠의 타입 */ $config=array( 'host'=>'ssl://smtp.gmail.com', 'smtp_id'=>'example@gmail.com', 'smtp_pw'=>'password', 'debug'=>1, 'charset'=>'utf-8', 'ctype'=>'text/plain' ); $sendmail = new Sendmail($config); ?>

send_mail() - 메일보내기

이 함수는 메일을 보내는 함수로 아래와 같은 인자값을 받는다. 기본적으로 앞쪽의 4개의 인자값들은 필수로 넣어주어야한다. 옵션의 경우 설정할 옵션값이 있을 경우에만 추가해 주면 된다.

<?php /* 클래스 파일 로드 */ include "Sendmail.php"; /* 클래스 객체 변수 선언 */ $sendmail = new Sendmail(); /* + $to : 받는사람 메일주소 ( ex. $to="hong <hgd@example.com>" 으로도 가능) + $from : 보내는사람 이름 + $subject : 메일 제목 + $body : 메일 내용 + $cc_mail : Cc 메일 있을경우 (옵션값으로 생략가능) + $bcc_mail : Bcc 메일이 있을경우 (옵션값으로 생략가능) */ $to="hgd@example.com"; $from="Master"; $subject="메일 제목입니다."; $body="메일 내용입니다."; $cc_mail="cc@example.com"; $bcc_mail="bcc@example.com"; /* 메일 보내기 */ $sendmail->send_mail($to, $from, $subject, $body,$cc_mail,$bcc_mail) ?>

attach() - 첨부파일추가 하여 메일보내기

메일에 첨부파일이 있을 시 이 함수를 사용하면 된다. 첨부파일 같은경우 대용량일 경우 전송이 제대로 이루어 지지 않을 수 있다. 한가지 명심할점은 메일을 보낼시 첨부파일 메소드를 먼저 사용한뒤 메일을 보내야 한다는 점이다.

<?php /* 클래스 파일 로드 */ include "Sendmail.php"; /* 클래스 객체 변수 선언 */ $sendmail = new Sendmail(); /* + $path : 파일의 절대 경로 + $name : 파일의 이름을 설정 + $ctype : 메일 컨텐츠 타입 (옵션값으로 기본값은 application/octet-stream 이다 ) */ $path="test.txt"; $name="example.txt"; $ctype="application/octet-stream"; /* 첨부파일 추가 */ $sendmail->attach($path,$name,$ctype); $to="hgd@example.com"; $from="Master"; $subject="첨부파일이 있습니다."; $body="첨부파일이 추가되었습니다."; $cc_email="cc@example.com"; $bcc_mail="bcc@example.com"; /* 메일 보내기 */ $sendmail->send_mail($to, $from, $subject, $body,$cc_mail,$bcc_mail) ?>

Sendmail 함수의 대한 설명은 여기까지며, PHP 의 클래스까지 다룰줄 안다면 크게 어려운점이 없을것이다. smtp 메일 서버 같은 경우 많은 테스트를 거치지 못했기 때문에, 메일 전송이 되지 않는 smtp 메일 서버 도 있을것이다. 그런 경우 해결방안이 없거나 수정이 어려울 시, 다른 smtp 메일 서버를 이용하는게 정신건강에 좋을것이다. 마지막으로 에러나 궁금한점은 댓글을 이용해주길

Sendmail.php 파일 - 몇가지 수정된 사항 알림!

- msg 변수관련 Notice 에러 부분을 수정. (2015-6-23)

- ereg => preg_match 함수로 대체 , split => explode 함수로 대체 (2015-06-23)

- 다수개의 메일이 보내지도록 수정 (2015-06-23)

=> ex1) $to="hong1@example.com, hong2@example.com";

ex2) $to=array('hong1@example.com','hong2@example.com';

- Cc, Bcc 관련하여 참조된 리스트 메일주소만 보내지고, 직접적으로 메일이 보내지지 않던 부분 수정 (2015-06-24)

상세문의 : webmaster@redinfo.co.kr

코드이그나이터 - index.php 죽이기

Dreamload — Fri, 12 Jun 2015 19:27:42 +0900

☞ CI 에서 index.php 죽이기란?

사실 index.php 를 죽인다는 말은 rewrite 모듈을 접해보지 않은 사람이라면 이해가 안갈 수 있다. 나도 처음 날코딩을 하다가 코드이그나이터를 접했을 때, 이 말을 알게 되었다. 그때 당시 index.php 죽이기라는 말을 이해하는것 보다는 공유되어있는 파일을 그냥 가져다가 썻던걸로 기억한다.

본론으로 들어가서 index.php 죽이기 라는 말은 코드이그나이터의 규칙을 생각하면서 보면 이해하기 쉽다. 일반적으로 코드이그나이터의 URL 형식은 아래와 같다.

http://호스트주소/index.php/컨트롤러/함수/파라미터

위와 같이 코드이그나이터에서는 기본적으로 index.php 를 거쳐야만 application 과 system 파일들을 로드하여 CI의 라이브러리나 각종 함수들을 이용 할 수 있다. 이말은 즉 자신의 index.php 파일을 보면 몇가지 설정해주어야 하는게 있는데, 그중에 하나가 application 디렉토리 경로와 system 디렉토리 경로다. 이경로가 잘못될시 코드이그나이터는 작동이 안된다. 그렇기 때문에 URL 접근시 index.php 를 거쳐야한다.

위의 말을 이해했다면 index.php 죽이기라는 말도 이해가 될것이다. 다시말해 index.php 죽이기는 URL 접속시 index.php 가 없는 형태로 사용 한다는 말이다. 물론 URL 에 index.php 를 붙인 형태로도 사용할 수 있다. index.php 죽이기를 하면 URL 경로를 아래와 같은 형태로 사용할 수 있다.

http://호스트주소/컨트롤러/함수/파라미터

☞ CI 에서index.php 죽이기와 .htaccess 파일

CI 에서 URL 접속시 index.php 없이 사용하기 위해선 rewrite 모듈을 이용하여야 한다. rewrite 같은 경우 Apache 모듈중 하나인 mod_rewrite 모듈을 로드해 주어야 한다. 기본적으로 로드가 되어있을것이다. 만약 Apache 의 httpd.conf 환경설정파일에서 mod_rewrite 모듈이 아래과 같이 '#' 으로 주석처리 되어있다면 주석처리된 '#' 을 없애주면 된다.

#LoadModule rewrite_module modules/mod_rewrite.so

이제 .htaccess 파일에 대해 알아보기전에 Apache 의 httpd.conf 환경설정 파일에서 한가지 더 설정해 주어야 하는게 있다. 일단 환경설정 파일에서 아래와 같은 구문을 찾아 화살표로 된 부분의 구문으로 변경해주어야한다.

찾을 구문 => AllowOverride None

변경할 구문 => AllowOverride All

위의 설정과 같이 변경해 주는 이유는 앞으로 설명할 .htaccess 파일을 사용하기 위해서이다. 위와 같이 설정이 되어있지 않다면, index.php 죽이기를 할 수 없다. 그이유는 Apache 에서는 접근을 제한할 수 있는 파일이 있는데 이는 기본적으로 .htaccess 의 확장자를 가진 파일이다. 이설정을 위와같이 All 로 변경해주면 .htaccess 파일을 통해 디렉토리 접근을 개별로 설정할 수 있게된다. 물론 .htaccess 파일확장자가 아닌 다른 이름의 확장자파일을 사용할 수 있다. 만약 .htaccess 확장자를 가진 파일이 아닌 다른 확장자를 가진 파일을 원한다면 아래와 같은 구문을 추가해 주면된다.

AccessFileName .파일확장자명

참고로 .htaccess 파일은 리눅스에서 숨김파일이기 때문에 vi 명령어를 통하여 만들 수 있지만, 윈도우에서는 확장명만 가진 파일을 만들 수 없다. 만약 윈도우에서 서버를 운영한다면 CI 를 다운받아서 그안에 있는 .htaccess 파일을 사용해야한다.

위와 같이 Apache 설정을 다 끝냈다면, 지금부터 .htaccess 파일을 설정 해주어야한다. .htaccess 설정 같은 경우, Rewrite 구문과 정규식을 이용하여 작성하게 되는데 실무자들도 항상 헷갈리는 부분이다. 참고로 나도 기본적인 방식만 이해하며 쓰고 있기때문에, 구문에 대한 자세한 설명은 하지 않겠다. 먼저 index.php 를 죽이기 위해서 사용되는 Rewrite 설정은 아래와 같다.

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteCond $1 !^(index\.php|robots\.txt)
 RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

위의 설정을 그대로 써도 되지만, 공개적인 디렉토리를 접근할 시 몇가지 추가해주어야 하는 부분이 있다. 그 이유는 아래와 같이 public 디렉토리에 Images, CSS, Javascript, Font 등의 파일들이 있을 시 URL 을 통해 접근해야되는 경우다.

+ www

+ application

+ system

- public

- Images

- CSS

- Javascript

- Font

위와 같은 상황일 경우 설정해 주어야 하는 부분은 Rewrite 설정구문 중에 RewriteCond 에 설정되어있는 정규식 구문 이다. 설정하는 방법에 대한 예제는 아래와 같다. 아래의 예제는 위의 설정처럼 URL 을 통해 접근해야할 디렉토리가 public 일경우이다.

RewriteCond $1 !^(index\.php|robots\.txt|public)

설정하는 방법은 위와같이 상위 디렉토리인 public 이라는 디렉토리명만 추가해주면된다. 추가실시 한가지 명심해야할 부분은 디렉토리명 또는 파일명을 추가할 시 OR 연산자인 '|' 을 먼저 써준다음 추가해 주어야 한다는 것이다.

한가지 중요한점이 더 있다면, .htaccess 파일은 외부 URL 접근이 허용되지 않게 하는것이다. 이 설정은 기본적으로 Apache 의 httpd.conf 파일을 통해 설정할 수 있다. 대부분 Apache 를 설치시 기본적으로 .ht 로 시작되는 파일확장자명은 접근거부로 설정되어 있기때문에, 따로 설정할 필요는 없겠지만, 만약 URL 을 통해 .htaccess 파일이 접근이 된다면 아래와 같이 해주어야 한다.

<Files ".ht*">
Require all denied
</Files>

이것으로 index.php 죽이는 방법에 대한 설명을 끝내도록 하겠다. 아래는 기본설정된 .htaccess 파일과 참고 싸이트이다.

.htaccess 파일 다운로드

htaccess.zip

참고싸이트

CI 한국 사용자 포럼 강좌 게시판의 index.php 죽이기 자료

아파치 투토리얼 .htaccess 관련 자료

코드이그나이터 환경설정 - routes.php

Dreamload — Wed, 3 Jun 2015 00:32:43 +0900

☞ routes.php (CI 3.0)

routes.php 에서는 컨트롤러의 기본 설정과 URI 라우팅 설정을 추가 할 수 있다. URI 라우팅 설정 같은 경우 옵션이므로, 아래의 메뉴얼을 참고하여 설정하면 될것이다.

3.0 메뉴얼

2.1.0 한글 메뉴얼

아래는 routes.php 파일의 내용에 대한 설명이다. 설명 같은 경우 주석으로 되어있으니 주석을 참고하면 된다.

config/routes.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

/* 
 + 이 설정은 기본 컨트롤러를 설정하는 곳이다. 쉽게 말해 도메인 주소만 입력했을 시 
실행할 기본 컨트롤러를 설정하는 곳이다. 
*/
$route['default_controller'] = 'welcome';

/* 
 + 이 설정은 컨트롤러가 존재하지 않을시 보여줄 컨트롤러를 설정하는 곳이다. 기본값은 CI 의 404 페이지다
*/
$route['404_override'] = '';

/* 
 + 이 설정은 컨트롤러 그리고 메소드의 uri 문자열에 '-'(하이픈) 이 있을경우 '_'(언더바) 로 바꾸어준다. 이 기능을
사용하기 위해서는 TRUE 로 설정해주면된다. 
ex) http://test.com/index.php/main/port-folio  => http://test.com/index.php/main/port_folio
ex) http://test.com/index.php/port-folio/index => http://test.com/index.php/port_folio/index
*/
$route['translate_uri_dashes'] = FALSE;
?>

PHP 조건문 switch case

Dreamload — Tue, 2 Jun 2015 19:39:57 +0900

☞ switch case 문

swicth case 문은 else if 문처럼 다중 선택이 많을 경우 사용하게 된다. 하지만 else if 문과는 차이가 있다. switch case 문은 다중 선택시 else if 문처럼 조건식에 의해 명령문이 실행되는게 아니라, 수식값에 해당되는 값을 찾아낸다. 이러한 점을 빼면 else if 문과 차이가 없는것 같지만 그렇지만은 않다.

그 이유는 else if 문같은경우 조건식이 여러개로 되어있을 시 최악의 경우 맨 마지막 조건인 else 까지 실행되는 경우가 있다. 이럴경우 프로그램 수행시간이 늘어날 수 있는 단점을 가지고 있다. switch case 문은 else if 의 이러한 단점을 보안해 준다.

아래는 switch case 문의 기본형식과 예제이다. 기본형식을 살펴보면 else if 문과 다르게 별다른 조건식이 아닌 수식을 평가하여 case 의 상수값과 비교를 한뒤 그에 맞는 case 를 실행하게 된다. 또한 switch 수식으로 올 수 있는 값들은 정수형, 문자형, 실수형 등이 있다.

swicth case 문 기본 형식

switch(수식){
    case 상수1 : 표현식1;
    break;
    case 상수2 : 표현식2;
    break;
    case 상수3 : 표현식3;
    break;
    case 상수4 : 표현식4;
    break;
    default : 표현식5
}

switch case 문 예제

<?php
/* 기호상수 선언 값은 10 */
define('ANG',10);

$case = 10;

switch($case)
{
    case  -1 : echo $case; break;
    case  -1.521 : echo $case; break;
    case  "문자열1" : echo $case; break;
    case  314.159e-2 : echo $case; break;
    case  1.234567e5 : echo $case; break;
    case ANG : echo $case; break;
    default : echo "Fail";
}

/*
======결과=======
10
*/
?>

위의 예제를 살펴보면 상수로 사용되는 값들은 별다른 제한이 없다는것을 알 수 있다. 하지만 상수로 올 수 있는 값들 이외의 값을 집어 넣는다면, PHP 의 구문 오류는 발생하지 않겠지만, 내부적으로 에러가 발생하여 잘못된 결과를 초래할 수 있기 때문에, 이점을 주의해야 한다.

☞ switch case 문 과 else if 문의 차이

switch case 문같은경우 else if 문의 조건식과 다르게 switch 에 지정된 수식값을 확인하여, case 의 상수값과 일치할경우 해당되는 case 를 수행하게된다. 하지만 깊게 보지 않으면, 서로 다른점이 없어 보일 수도 있다. 하지만 내부적으로 보면 그렇지 않다.

쉽게 생각해 보면, else if 문은 a 라는 값과 일치하는 명령문을 실행하기 위해 계속해서 조건식을 통하여 확인하는 반면 switch case 문은 a라는 값을 먼저 확인한뒤 case 문의 상수값과 일치하는지만을 확인한다. 이러한 점도 겉으로 봐서는 잘 모를 수 있다. 이 말을 다시한번 자세히 알아 본다면, else if 문은 한번 수행할 때마다 조건식을 계속해서 평가해야하지만, switch case 문은 한번 평가된 수식에 의해 조건식 없이 case 의 상수값과 일치하는지만을 확인하므로, else if 문처럼 조건식을 계속 하여 평가하는 일이 없기때문에, 실행 속도가 훨씬 빠르다.

하지만 switch case 문 같은경우 else if 처럼 조건식을 사용할 수 없다는 단점이 있다. 물론 단점이라고 보기보단, 본래 switch case 문 의 특징으로 보는게 맞다.

위에서 설명한 switch case 문 과 else if 문의 차이점은 아래와 같은 프로그램으로 볼 수 있다. 아래의 프로그램중 첫번째는 곱셈만 해주는 소스이고, 두번째는 덧셈, 뺄셈, 나눗셈, 곱셈 등을 계산해주는 프로그램이다.

계산기 프로그램

곱샘 계산기

<?php
function program($num1,$num2)
{
    return $num1*$num2;
}

echo program(5,10);

/*
=======결과========
50
*/
?>

사칙연산 계산기

<?php
function program($num1,$num2,$op)
{
        if($op=='-') return  $num1-$num2;
   else if($op=='+') return  $num1/$num2;
   else if($op=='/') return  $num1/$num2;
   else if($op=='*') return  $num1*$num2;
   else return 0;
}

echo program(5,10,'*');

/*
========결과=========
50
*/
?>

위의 프로그램 소스에서 첫번째 곱셈 계산기 같은 경우 입력된 숫자만 곱셈연산을 하여 값을 되돌려 주는 반면, 두번째 사칙연산 계산기는 연산자까지 추가하여, 함수 내 조건문에서 연산자의 값과 일치하는 값을 비교한뒤 그에 맞는 값을 되돌려 주게 되는데, 만약 곱셈만 필요한 경우라고 생각한다면, 확실히 이해가 될것이다. 곱셈만 필요한 경우에는 사직연산 계산기를 사용하여 복잡한 과정을 거칠 필요가 없기 때문이다.

이러한 점을 switch case 문 과 else if 문 으로 생각한다면 둘의 차이가 이해가 될것이다. switch case 문 은 switch 에 지정된 수식값이 맞는지 만을 확인하기 때문에, 별다른 조건식이 필요 없는 반면에, else if 문은 조건식을 필수로 입력해주어야 하기 때문에, 똑같은 조건문을 수행하더라도 else if 문은 항상 조건식을 재평가 하게 되는것이다.

결론적으로 같은 결과를 발생시키는 프로그램이라도 내부적으로 구현된 방식이 다르다면, 속도면과 안정성면 그리고 소스 코드의 전체적인 흐름등이 다를 수 밖에 없다.

이와 같이 개발을 할 시 자주 쓰이는 함수도 특정한 상황에선 불필요하게 많은 과정을 거치는 경우가 있기때문에, 이런점을 잘 확인하여 적절한 함수로 대체를 하면서 개발을 한다면 앞으로 실력향상에 큰 도움이 될 거라고 생각한다.

PHP 조건문 if 과 삼항 연산자

Dreamload — Tue, 2 Jun 2015 17:03:18 +0900

☞ 조건문이란?

조건문이란 말 그대로 조건이 있는 문장이란 뜻이다. 간단한 예로 우리가 커피를 마실때 여러종류의 커피중 한가지를 선택하게 되는데, 이를 프로그램으로 만든다고 생각해보자. 그렇다면 제일먼저 사용자가 커피를 선택하는 부분을 만들것이고, 그다음으로 선택된 커피에 따라서 커피가 나오는 부분을 만들것이다. 이때 선택된 커피를 구분하는 부분은 조건문을 이용하여 만들것이다.

(버튼, 아이콘, 선택)

이처럼 조건문은 프로그래밍을 하는데 있어서 없어서는 안될 중요한 문법이다. 또한 어렵지 않게 배울 수 있기때문에, 기본적인 방법만 배운다면 앞으로 프로그래밍하는데 있어서 조건문을 많이 활용할 수 있다. 그렇다면 조건문에서 많이 쓰이는 것들은 무엇이 있는지 알아보도록하자.

일반적으로 조건문에서 많이 쓰이는건 if 문과 switch 문 등이 있다. 물론 그외 삼항 연산자 나 OR 연산자등이 있지만, 이러한 것들은 특수한 경우나 비교적 간단한 선택문일때 사용하기 때문에 여기서는 자주 볼 수 있는 if 문과, 간단한 비교문에서 쓸 수 있는 삼항 연산자에 대해 알아보도록 하자

☞ if 문과 if else문

if 문은 조건식에 따라서 그에 맞는 명령을 실행한다. 명령문이 여러개인 복문의 경우 괄호를 사용하여 범위를 지정해 주어야 한다. 또한 if 문이 여러개 있을경우 조건식에 맞는 첫번째 if문만 실행하는게 아니라 if문의 조건식에 맞는 모든 if 문을 실행하게 된다. 이러한 특징을 알아 두어야 하는 이유는 아래서 알아볼 else if 문과의 차이점 때문이다. 일단 if문의 기본형식과 간단한 예제를 살펴보도록 하자.

if 문

기본형식

① 단문일 떄
if(조건식) 명령문;

② 복문일 떄
if(조건식){
명령문 1;
명령문 2;
.
.
명령문 n;
}

예제

<?php
$number= 50;

/* 단문 */
if($number>10) echo "값이 10보다 큽니다. </br>";

/* 복문 */
if($number<60) {
echo "값이 60보다 작습니다. </br>";
echo "현재 값은 ".$number." 입니다"; 
}

/*
========결과==========
값이 10보다 큽니다. 
값이 60보다 작습니다. 
현재 값은 50 입니다
*/
?>

if else 문은 위에 나온 if 문에서 예외처리를 하는 부분만 추가 되었다고 생각하면 쉽게 이해 할수 있다. 즉 다시말해 if 문의 경우 조건식이 참일 경우에 실행하게 되는데 이때 조건식이 맞지 않을 경우에 처리할 수 있는 문법이 else 문이다. 한가지 주의할점은 else 문에서는 조건식이 불필요하다는것 이다. 아래는 기본 형식과 예제이다

if else 문

기본형식

if(조건식){
명령문;
}
else{
명령문
}

예제

<?php
$number= 50;

/* 값이 10보다 작을 경우 */
if($number<10) echo "값이 10보다 작습니다. </br>";

/* 그렇지 않을 경우 */
else{
echo "값이 10보다 큽니다. </br>";
echo "현재 값은 ".$number." 입니다"; 
}

/* 
========결과==========
값이 10보다 큽니다. 
현재 값은 50 입니다
*/
?>

☞ else if 문

else if 문은 위에서 알아본 if 문과 별 다를게 없다. 하지만, 중요한점은 if 문은 조건식에 맞는 즉 참인 값은 모두 실행하는 반면, else if 문은 우선적으로 적용된 조건식이 조건에 맞을 경우 그 조건식만 실행한후 종료 하게 된다. 또한 중요한점은 else if 문이라고 해서 else if 부터 시작되는게 아니라 if 부터 시작된다는걸 명심해야한다. 아래는 else if 문의 기본형식과 예제이다.

else if 문

기본형식

if(조건식){
명령문;
}
else if(조건식){
명령문
}
else if(조건식){
명령문
}
else{
명령문
}

예제

<?php
$number= 50;

if($number>10){
echo "값이 10보다 큽니다. </br>";
}

else  if($number>20){
echo "값이 20보다 큽니다. </br>";
$number-=20;
}

else  if($number>30){
echo "값이 30보다 큽니다. </br>";
$number-=30;
}

else {
echo "값이 40보다 큽니다. </br>";
$number-=40;
}

echo "현재 값은 ".$number." 입니다"; 

/* 
========결과==========
값이 10보다 큽니다. 
현재 값은 50 입니다
*/
?>

위의 else if 문 예제의 결과값을 보면 알 수 있듯이 조건문이 if 문이 아닌 else if 문으로 쓰였을 때에는 우선순위에 있는 조건식이 맞을 시 그 조건식에 맞는 명령문을 실행한 후 종료를 하게 된다. 이러한 else if 문의 특징만 잘 이해한다면, if 문과 else if 문의 사용방법을 확실히 이해 할 수 있을것이다. 일반적으로 else if 문 같은 경우 하나의 변수를 검사할때 사용하며, 위에서는 else if 문을 특징을 보여주기위해 쉬운 예제로 나왔지만, 실제로 코딩할때에는 좀더 복잡한 조건식이 들어갈 것이다.

한가지더 알아본다면 위에서 나온 else if 문의 예제를 if 문으로도 표현할 수 있다. if 문으로 표현하기 위해서는 각 조건식에 맞는 명령문에다가 return 이라는 명령어를 넣어 주면된다. 하지만 이러한 방식은 실무에서 쓰이지 않기 때문에, 배워 둘 필요는 없다. 가장 중요한건, if 문과 else if 문이 어떤 경우에 각각 쓰이게 되는지 생각해 보는것이다.

☞ 삼항 연산자

삼항 연산자는 PHP 에서 가장 특수한 연산자이며, 본 명칭은 조건 연산자 불린다. 이 연산자의 이름이 삼항인 이유는 연산자 식에 세가지 피연산자가 들어가기 때문이다. 삼항 연산자의 기본형식은 아래와 같다.

비교수식 ? 참일경우 : 거짓일경우

위에서 삼항 연산자의 기본 형식을 보면 비교적 간단한 구조로 되어있다는걸 알 수 있다. 이는 삼항 연산자가 어느경우에 쓰이는지 잘 보여주는 예라고 할 수 있다. 이 말은 아래의 예제를 살펴보면 쉽게 알 수 있다.

<?php
/* 삼항 연산자를 사용시 */
$number=50;
echo $number>10?"값이 10보다 큽니다.":"값이 10보다 작습니다.";

echo "<br>";

/* if else 문을 사용시 */
if($number > 10) 
echo "값이 10보다 큽니다.";

else
echo "값이 10보다 작습니다.";

/* 
========결과==========
값이 10보다 큽니다.
값이 10보다 큽니다.
*/
?>

위의 예제를 보면 삼항 연산자의 경우 if else 문에 비해 비교적 간단한 연산자를 이용하여 결과값을 출력할 수 있다는것을 알 수 있다. 하지만 사용자가 프로그램 소스를 해석하는데 있어서는 삼항 연산자보단 if else 문이 더 쉽게 다가 올 수 있다. 물론 삼항 연산자를 많이 사용해본 사람들이게는 별차이가 없을 것이다.

이처럼 조건 연산자 if 문은 상황에 따라서 여러 방법으로 쓰일 수 있으며, 비교적 간단한 조건문이 필요할 때는 삼항 연산자를 사용하면 간결한 코딩을 할 수 있다는것을 알 수 있다.

웹제작시 정말 유용한 CSS

Dreamload — Tue, 2 Jun 2015 14:18:29 +0900

CSS는 문서의 스타일을 따로 정의한다는 뜻을 가졌다. 이렇게 따로 정의하는것을 스타일시트라고 하며, 문서내에서 사용되는 방법을 CSS라고 한다. 사실 이러한 설명들은 CSS 책이나 인터넷에 CSS 만 검색해도 나오는것들이다. 그렇다면, "스타일시트와 CSS는 다른것일까?" 라는 의문이 생기기도 한다. 하지만 의문을 가질필요는 없다. 둘다 같은 의미를 가졌다. 일반적으로 문서에 적용되는 스타일은 CSS 방식을 사용한다. 또한 CSS 방식으로 된 스타일들을 묶어놓은것을 스타일시트라고 한다.

암튼 HTML5 에선 CSS가 문서 스타일 타입의 표준이 되었기때문에, 스타일시트와 CSS의 의미를 두고 고민할 필요는 없다. 일단 아래의 예제를 살펴보도록 하자.

CSS파일 로드

<link rel="stylesheet" media="all" href="style.css" type="text/css">

HTML 문서에 적용

<style>
body{ background-color:#336699; }
</style>

요소의 style 속성을 지정하여 적용

<div style="color:blue; font-size:12px; height:100px"> 요소안에 정의 </div>

첫번째 예제의 CSS파일 로드같은경우 문서의 전체적인 스타일을 초기화 할때 많이 사용한다. 두번째 예제같은경우는 일반적으로 head 안에서 사용된다. 물론 head 가 아닌 다른곳에서 사용하여도 적용이 된다.

세번째 예제같은 경우는 일반적으로 웹을 제작할때는 거의 사용하지 않는다. 그 이유중 하나는 문서의 유연성을 떨어트리고, 나중에 유지보수등이 힘들기 때문이다. 하지만 스크립트를 사용할땐 이런 방식을 사용하곤 한다. 그중 가장 흔한 예가 웹싸이트의 에디터를 이용할때이다. 티스토리의 에디터 또한 html 소스보기를 하면 이러한방식으로된 소스코드들을 확인할 수 있다.

iframe 을 이용하여 페이지 전체 이동없이 원하는 페이지만 로드해보자.

Dreamload — Tue, 2 Jun 2015 14:18:03 +0900

이건 너무나 간단해서 길게 설명을 않해도 될것같다. 일반적으로 iframe 은 아래와 같은 방법으로 사용한다.

<iframe width="1024" height="500" src="http://b.redinfo.co.kr"></iframe>

대충 감이 올 수 있겠지만, iframe 의 src 속성값을 변경할 수 있다면, 클릭하나로 계속 싸이트의 주소를 변경하여, 페이지의 전체적인 이동없이, iframe 안에 원하는 페이지만 변경시킬 수 있다. 예제와 관련된 소스는 아래와 같다.

전체페이지 이동없이 iframe 안의 페이지만 이동하는 예제

<!-- jquery 를 사용하기 위해 jquery 파일을 로드 -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(e) {
/* a요소를 클릭 했을 시 */
    $('a').click(function(){
/* iframe 요소의 src 속성값을 a 요소의 data-url 속성값으로 변경 */ 
        $('#iframe').attr('src',$(this).attr('data-url'));
        })
});
</script>

<a  data-url="http://naver.com">네이버</a>
<a data-url="http://daum.net">다음</a>
<a  data-url="http://nate.com">네이트</a>
<iframe id="iframe" width="1024" height="500" src="http://b.redinfo.co.kr"></iframe>

위의 예제에서는 간단하게 페이지만 로드하는 형식이지만, 자신의 도메인일 경우 GET 메소드 이용하여, 좀더 기능성이 있는 웹을 만들 수 도 있다.

pre 요소 : 입력한 HTML 소스코드의 내용을 그대로 보여주고 싶을때

Dreamload — Tue, 2 Jun 2015 14:17:11 +0900

이 요소는 HTML 의 태그의 특성도 적용이 되면서 입력한 내용 그대로 화면에 출력을 해준다. 이태그는 형식은 아래와 같다.

<pre> 내용(태그포함) </pre>

pre 태그의 본래 목적은 형태 그대로 노출시켜야될 텍스트 등을 쉽게 나타내기 위해서 사용한다. 사용 목적에 속하는 예로 아래와 같은 경우를 들 수 있다. 아래는 code 요소를 사용하여 C언어의 소스코드를 나타내었다.

<pre>

<code>#include <stdio.h>

#include <stdlib.h>

void main() {

printf("Hello World\n");

}</code>

</pre>

실행결과

위의 예제 코드를 보면 알겠지만, pre 요소안에서는 다른 요소들도 사용할 수 있다. 위의 예제에서는 code 요소를 사용하여 나타내었다. 중요한점은 pre요소 안에서 다른요소를 사용시, 처음시작부분과 끝부분도 내용과 동일한 위치에서 작성해주어야, 빈공간을 없앨 수 있다. 그이유는 pre 요소 특성상 안에 위치한 모든 요소나 텍스트는 pre 요소의 특성이 전부 적용되기 때문이다. 이 관계는 부모 요소와 자식요소의 스타일이 상속된다고 표현할 수 있다.

☞ pre 요소의 문제점

나같은 경우 오래전 웹싸이트의 에디터 기능을 만들때 너무 귀찮기도 하고, 안되는 기능도 많아서, pre 요소를 사용하여 텍스트글만 입력하도록 만든적이 있다. 처음에는 별 문제없이 잘 사용되는것같아서, 그대로 사용하였지만, 얼마않되서 문제점 하나가 발견되기 시작했다. 그 문제점은 바로 웹페이지의 본문영역이 고정이 아닐경우 아래 그림과 같이 텍스트가 본문영역을 이탈해 버리는 것이였다.

(pre 요소를 사용했을 시 텍스트가 이탈하는 현상)

텍스트가 넘치는 현상을 해결 하기 위해서 CSS 의 white-space 프로퍼티 와 word-break 프로퍼티 를 pre 요소에 적용시켜 주면된다. 아래는 pre요소에 CSS의 프로퍼티를 사용하여 줄바꿈을 적용한 예제이다.

스페이스바로 띄운 공간이나 탭으로 띄운 공간을 그대로 표현하면서 줄바꿈을 하고싶을때

pre{
white-space:pre-wrap; /*공백이나 탭공간을 그대로 둔다*/
word-break:break-all; /*텍스트가 넘칠경우 줄바꿈을 해준다*/
}

스페이스바로 띄운 공간이나 탭으로 띄운 공간을 없애고 줄바꿈을 하고싶을때

pre{
white-space:pre-line; /*공백이나 탭공간을 없앤다*/
word-break:break-all; /*텍스트가 넘칠경우 줄바꿈을 해준다*/
}

noscript 요소를 사용하여 스크립트가 무효한 브라우저를 대처해보자

Dreamload — Tue, 2 Jun 2015 13:24:50 +0900

요즘같은 시대에 스크립트가 지원 안되는 브라우저는 없을것이다. 그렇다면, 이말은 무슨 뜻인가?? 스크립트가 무효하다는 말은 사용자가 특정 싸이트 또는 모든 싸이트에 대한 스크립트 기능을 차단해 놓은 경우이다. 스크립트 차단기능은 스마트폰 기준으로 보면, 메뉴->설정->자바스크립트 를 들어가서 허용/차단 설정을 할 수 있다. 일반 PC 에서 스크립트를 차단 하는방법은 아래의 포스터 링크를 클릭하면 된다.

2015/02/04 - [정보바다/사용팁/다운로드] - IE(익스) 와 Chrome(크롬)에서 특정 싸이트의 스크립트기능을 차단해 보자

아래의 그림은 스마트폰에서 크롬브라우저를 사용하여 자바스크립트를 차단하는 모습이다.

(스마트폰 크롬 브라우저 기준)

위의 그림을 보면 붉은색으로 칠해진 부분이 스크립트를 차단/허용 설정하는 부분이다. ~~(빤듯이 그린다했는데 내 마음이 삐뚫어졌는지 엉망이다..)~~ 이부분에서 체크상자에 체크를 하면 스크립트를 사용하도록 허용하게 되고, 해제를 하게되면, 스크립트 사용을 차단시키게 된다. 나같은경우는 광고가80%를 차지하는 뉴스페이지에 대해 스크립트를 전부다 차단시켜놓았다. 그이유는 광고의 대부분 기능들이 스크립트를 통해 이루어졌기 때문에 스크립트기능을 차단해 버리면 광고는 뜨지 않는다.

역시나 서론부분은 너무 긴거같다. 그럼 지금부터는 본격적으로 스크립트가 무효한 브라우저를 대처하는 요소인 noscript 요소에 대해 알아보자. 우선 noscript 의 기본 구성을 보면 아래와 같다.

<noscript> 스크립트가 무효한 브라우저에서 대신 표시할 내용을 작성 </noscript>

아래는 noscript 요소 를 사용하여 스크립트가 무효한 브라우저에서 스크립트 대신 표시할 내용을 작성한 예제이다. noscript 요소를 사용한 구간은 굵은글씨로 된 부분이다.

noscript 요소의 사용 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>스크립트가 실행되지 않는 환경에 대한 대처방법</title>
<script>
alert('출력 스크립트 실행');
</script>
</head>

<noscript>
<p>스크립트가 차단되어, 이 싸이트의 기능을 이용할 수 없습니다.</p>
</noscript>

<body>
</body>
</html>

실행결과

하위 브라우저 에서 placeholder 사용하는 방법

Dreamload — Tue, 2 Jun 2015 13:24:31 +0900

placeholder 란 아래 그림과같이 input 태그나 textarea 에 적용 할 수 있는 속성 중 하나이다. 하지만 익스플로러 같은경우 하위 브라우저 에서는 지원이 안되고있기 때문에, Javascript 또는 JQuery를 이용하여 따로 적용시켜주어야한다.

(placeholder 속성이 적용된 모습)

이 속성은 위의 그림과 같이 input 요소나 textarea 요소에 적용시킬 수 있으며, 마우스나 포커스가 들어올 시 자동으로 사라진다. 또한, 글이 입력되지 않고 포커스를 빠져나가면, 자동으로 placeholder 속성값이 위의 그림과 같이 다시 생기게 된다. 아래는 placeholder 의 기본적인 사용 예제이다.

placeholder 기본 사용 예제

<input type="text" placeholder="아이디를 입력해 주세요" />
<input type="password" placeholder="비밀 번호를 입력해 주세요." />
<textarea placeholder="글을 입력해 주세요"></textarea>

placeholder 속성값에는 사용자에게 보여줄 글을 입력하면된다. 하지만 앞서말했다시피, 이속성은 IE같은경우 하위브라우저에서는 작동을 하지 않기 때문에, 스크립트를 이용하여 따로 적용을 시켜주어야 한다. 우선 아래의 placeholder.js 파일을 다운로드 받도록 하자.

placeholder.js 파일 다운로드

placeholder.js

위의 파일은 사용할 수 있는 적당한 경로에 업로드를 한후 사용하면 된다. 티스토리 같은경우 파일 업로드에서 업로드를 시키기 때문에 소스코드에 적용할 때는 "./images/placeholder.js" 이런식으로 해주면 된다. 아래는 placeholder.js 를 적용하는 예제이다.

placeholder 적용 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>하위 브라우저에서 placeholder 적용</title>
<script src="./images/jquery_1.11.0.min.js"></script>
<script src="./images/placeholder.js"></script>
<script>
$(document).ready(function(e) {
/*input 요소와 textarea 요소를 선택하여 적용*/
    $('input,textarea').placeholder();
});
</script>
</head>
<body>

</body>
</html>

위의 예제에서는 JQuery 가 사용되었기때문에, jquery_1.11.0.min.js 파일을 로드해 준것이다. 만약 JQuery 파일이 필요하다면 아래의 다운로드를 이용하면 된다.

jquery_1.11.0.min..js 파일 다운로드

jquery_1.11.0.min.js

og 개체를 이용하여 웹싸이트의 정보를 넣어보자

Dreamload — Tue, 2 Jun 2015 13:24:09 +0900

og 개체는 왜사용하는가?

og 개체를 이용하는 이유는 sns 를 통해 웹페이지를 공유할 시 사용자들에게 정확한 웹페이지의 정보를 알려주기 위해서 이다. 물론 og 개체를 사용하지 않아도, sns 공유하기 시스템에서 자동으로 설정이 된다. 하지만, 웹페이지의 정보가 엉뚱하게 들어 갈 수 있기때문에, og 개체를 사용하여, 웹페이지의 정보를 확실히 해주는게 좋다.

아래의 예제는 og 개체를 이용 한 예제와 sns 에 og 개체가 적용된 이미지이다.

og 개체를 이용하여 값을 설정하는 예제

<meta property="og:url" content="http://b.redinfo.co.kr/23" />
<meta property="og:site_name" content="Dreamload" />
<meta property="og:title" content="PHP에서 한글 검사와 관련된 알고리즘 소개" />
<meta property="og:description" content="요즘 웹서버의 기본언어는 대부분 유니코드(UTF-8) 를 사용하는것같다. 아마도 소수 보단 대다수가 이용해야 하기 때문인것같다. 암튼 첫멘트는 계속 쓸려다 보면 길어지니까 본론으로 들어가서, 한글 검사에 대한 알고리즘에 대해 간단히 설명할까 한다. 뭐 내가 만든 알고리즘이라서, 오류 투성일지 모른다. 하지만, 이걸 만들 당시 날을 새가면서 수천번의 테스트를 거쳤기때문에, 내가 보는 오류는 없다. 이 알고리즘을 만.." />
<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/254A373C54CF335E1A" />

위의 og 개체가 적용된 예제

위의 예제를 보면 알겠지만, og 개체를 등록하면, sns 내보내기(공유하기)시 정확한 정보를 알려줄 수 있다. 또한 이러한 og 개체를 사용하는 방법은 정말 쉽다. 위의 property 값에는 og 개체 타입을 넣어주고, content 값에는 og 개체 타입 설정값을 넣어주면된다. 아래는 og 개체의 기본형식이다.

<meta property="og 개체 타입" content="og 개체 타입 설정값">

아래의 표는 웹 싸이트에서 기본적으로 많이 쓰이는 og 개체와, 그에 대한 설명이다. 적용되는 방법을 확실 히 알고싶다면 위의 적용예제를 보면서, 아래는 og 개체타입으로 올 수 있는 값들이다.

og 개체 타입으로 올 수 있는 값 과 설명

og:title 웹 페이지의 제목을 설정 할 수 있다.

og:site_name 웹 싸이트의 이름을 설정 할 수 있다.

og:url 웹 페이지의 주소를 설정 할 수 있다.

og:image 웹 페이지의 이미지를 설정 할 수 있다.

og:description 웹 페이지에 대한 요약 내용을 설정 할 수 있다.

마지막으로 sns 로 내보내기(공유하기) 시 적용되는 이미지를 여러개 설정 하고싶다면 아래와같이 og:image 개체를 여러개 등록하여 사용하면된다. 될지 안될지는 아직 테스트 않해봐서 모르겟지만, 아마도 3개정도는 확실히 등록되는것같다..........(-_ㅡ)

og 개체로 적용되는 이미지가 여러개 일경우

<meta property="og:image" content="이미지URL1" />
<meta property="og:image" content="이미지URL2" />
<meta property="og:image" content="이미지URL3" />

HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자

Dreamload — Tue, 2 Jun 2015 13:23:55 +0900

과거에 태그의 속성을 사용해 데이터정보를 넣기위해 웹표준이 아닌 비표준 사용자정의 속성을 이용하여 웹을 제작하곤 했엇다. 물론 내가 그렇게 사용하였다. 하지만 HTML이 발전되어 지금은 웹표준 속성인 data- 속성을 사용하여 데이터정보를 넣을 수 있게되었다. 언제부터 나왔는지는 모르겟지만, 이속성은 정말 유용하게 사용할 수 있다. 사용 예제는 아래와같다.

<div data-name="dreamload" data-info="데이터 레이아웃" data-value="꿈을 다스리는 자"></div>

위의 사용 예제를 보면 data- 속성으로 name, info, value 가 설정되었다. 이 3개의 값들은 사용자 정의이기 때문에, 데이터의 정보를 알기 쉽게 이름을 정의하여 사용하는게 좋다.

이렇게 정의된 data- 속성은, 웹 개발 용도에 따라 여러가지로 사용될 수 있다. 또한 자바스크립트 또는 제이쿼리등을 이용하여,좀더 폭넓게 사용할 수 있다. 아래 예제는 사용자의 정보를 data- 속성으로 저장한 예제이다.

<span data-user_id="user1" data-user_lv="100" data-user_point="10000" data-user_time="3600">user1</span>
<span data-user_id="user2" data-user_lv="50" data-user_point="100" data-user_time="50" >user2</span>
<span data-user_id="user3" data-user_lv="30" data-user_point="5000" data-user_time="1520" >user3</span>
<span data-user_id="user4" data-user_lv="20" data-user_point="10" data-user_time="20" >user4</span>

앞서 말했다시피 이속성값을 사용하는건 본인의 개발 능력에 따라 여러가지로 사용된다. 하지만 주의할점은 보안상 위험한 정보들을 담지 않도록 해야한다. 그이유는 HTML은 클라이언트 언어이기때문에 사용자가 소스보기를 통해 확인을 할 수가있다. 즉 이말은 웹을 이용하는 사용자가 아무런 제한없이 data- 속성을 보고 그 정보들을 해석할 수 있기때문에 보안과 관련된 정보들은 담지 않는게 좋다.

meta 요소의 http-equiv 속성 : HTML 문서의 초기정보를 설정할때

Dreamload — Tue, 2 Jun 2015 13:23:37 +0900

meta 요소에서 문서의 초기정보를 나타내는 속성은 http-equiv 속성이다. 이속성을 지정하면 문서의 기본언어(content-language), MIME 타입(content-type), 기본 스타일시트(default-style), 브라우저호환성설정(X-UA-Compatible), 페이지 리로드(refresh) 등을 나타낼 수 있다. 아래는 속성값에 대한 설명이다.

우선 content-language 속성값은 기본언어를 설정할 수 있다. content 속성값에는 그에 맞는 값을 입력해야한다. 여기선 기본언어에 대한 값이 들어가야한다. 아래 예제에서는 ko(한국어) 로 설정되어 있다.

content-language 속성값

<meta http-equiv="content-language" content="ko">

두번째로 볼 속성값은 content-type 속성값이다. 이 속성값은 문서의 MIME 타입이나 문서의 문자셋을 설정할 수 있다. MIME 타입 을지정한다음 문자 인코딩을 지정하기전에 세미콜론(;) 으로 구분을 해준다는걸 명심하자.

content-type 속성값

<meta http-equiv="content-type" content="text/html ; charset=UTF-8 ">

세번째 속성값은 기본 스타일 시트를 설정하는 default-style 이다. 이 값은 기본 스타일 시트를 설정하는 부분이다. 이속성값을 지정하면 익스플로러 기준으로 본다면, 메뉴->보기->스타일 을 들어가서 설정된값을 볼 수 있다. 근데 이 속성값이 과연 쓰이는가가 의문이다. 이속성을 적용하기 위해선 스타일시트 를 지정할 때 아래처럼 title 속성을 정의 하여, 기본 스타일 시트 값을 지정해 주어야한다. 아래쪽 예제의 title 속성값은 middle 로 되어있다.

default-style 속성값

<meta http-equiv="default-style" content="middle">
<link rel="stylesheet" media="screen" href="middle.css" type="text/css"  title="middle">

다음으로 브라우저 호환 설정을 할 수 있는 X-UA-Compatible 속성값이 있다. 이속성값을 지정하면, 브라우저의 문서모드를 지정할 수 있다. 아래 같은경우 IE=edge 의 뜻은 최신버전으로 문서모드를 설정하라는 뜻이다.

X-UA-Compatible 속성값

<meta http-equiv="X-UA-Compatible" content="IE=edge">

마지막으로 페이지 리로드를 설정 하는 속성값인 refresh 가 있다. 이속성값은 페이지를 리로드 하거나 자동으로 다른 페이지를 이동시키는 기능을 한다. 아래 같은 경우 20 초 후에 티스토리 싸이트로 이동하게 되는 설정이다. 이곳에서도 세미콜론(;) 을 잘 확인하자 . 만약 content 속성값에 시간만 입력하고 이동될 페이지를 지정하지 않으면 그냥 리로드(새로고침)가 된다. 즉 웹페이지를 새로고침한 효과다.

refresh 속성값

<meta http-equiv="refresh" content="20 ; http://tistory.com">

meta 요소의 name 속성 : HTML 문서의 정보를 설정할 때

Dreamload — Tue, 2 Jun 2015 13:23:14 +0900

meta 요소는 맨 처음 오는 속성값에 따라서 여러가지 정보를 설정할 수 있다. 그중에서 문서의 정보를 설정 할 수 있는 mete name 이 있다. 아래는 meta name 의 간단한 사용 예제이다.

meta 의 name 속성 간단한 예제

<meta name="author" content="Dreamload">
<meta name="description" content="meta name 의 간단한 사용 예제">
<meta name="keywords" content="meta,html,요소,속성">

위의 예제에서는 name 속성값으로 author, description, keywords 가 적용되었다. 아래의 표는 name 속성값으로 올 수 있는 값들이 나와있다. 이러한 속성값들을 지정하면 content 속성값에 그에 맞는 값들을 설정할 수 있다.

name 속성 값으로 올 수 있는 것들

author 이 속성값을 지정하면 문서의 저자를 나타낼 수 있다.

description 이 속성값을 지정하면 문서의 개요를 설정할 수 있으며, 검색 엔진의 검색 결과로 표시가 된다. 하지만 요즘은 이 속성값보단 meta 의 property 속성을 지정하여 문서의 여러 정보들을 설정하는듯 하다.

generator 이 속성값 사용설명에는 문서 작성에 사용된 소프트웨어의 이름을 나타낸다고 나와있지만, 이 속성값이 정말 쓰이는지는 의문이다.

keywords 이 속성값을 지정하면, 검색 엔진 로봇에게 제공할 키워드를 지정 할 수 있다. 이 속성 역시 검색 로봇이 반영하는지는 잘 모르겟다.

viewport 이 속성값을 지정하면 스마트폰 기기의 화면을 설정할 수 있다. 자세한건 아래 포스팅 자료를 확인하면 된다.

application-name 문서가 웹 애플리케이션용으로 만들어진 경우 이속성값을 지정하면 웹 애플리케이션의 이름을 지정할 수 있다. 이속성 역시 한번도 사용해 본적이 없어서 실제로 사용되는지 의문이다.

name 속성값들중 viewport 는 아래의 링크를 참고 하면 된다.

2015/03/07 - [웹프로그래밍/HTML] - viewport : 모바일웹 제작시 화면의 표시 영역을 설정

viewport : 모바일웹 제작시 화면의 표시 영역을 설정

Dreamload — Tue, 2 Jun 2015 12:36:59 +0900

요즘 모바일웹 제작은 스마트폰의 사양이 많이 좋아졌기 때문에 일반 PC웹을 제작하는것과 별반 차이가 없다. 단지 모바일웹에서 아직 지원되지 않는 기능을 없애거나, 적용가능한 방법을 찾아서 제작하는 것 밖에는 다른점이 없다. 그리고 모바일웹제작시 꼭 필요한 설정이 있는데, 바로 viewport 이다.

viewport 는 스마트폰의 웹화면영역을 확대/축소 해주는 기능을 한다. 물론 웹이 모바일크기에 맞게 제작되어야 한다. 보통 모바일웹을 제작할땐 레이아웃의 크기를 % 로 맞추기 때문에, viewport 를 설정하면 확대된 화면으로 볼 수가 있다. 일반적인 설정법은 아래와 같다.

viewport 의 기본 사용 법

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

위의 소스코드는 html 에서 head 요소 안에 넣어야한다. meta 요소의 name 속성을 사용하면 문서의 정보를 나타낼 수 있다. 여기서는 name 속성값으로 viewport 를 설정하였다.

아래는 viewport 설정시 content 속성에 지정 할 수 있는 값들의 정보이다. 값이 여러개일경우 ,(콤마) 로 분류해 주면된다.

viewport 설정시 content 속성에 지정할 수 있는 값들의 정보

width 기기의 가로크기

범위 : 200~10000px
device-width : 기기의 가로폭에 맞춤
기본값 : 980px

height 기기의 세로크기

범위 : 223~10000px
device-height : 기기의 세로폭에 맞춤
기본값 : auto

initial-scale 처음 페이지를 읽을때 확대 배율

범위 : 0~10
기본값 : 1.0

minimum-scale 축소 배율 값

범위 : 0~10
기본값 : 0.25

maximum-scale 확대 배율 값

범위 : 0~10
기본값 : 1.0

user-scalable 사용자의 의한 확대/축소 설정 사용유무

범위 : yes 또는 no
yes : 사용한다.
no : 사용하지 않는다.
기본값 : yes

form 요소 에서 submit 의 return 값을 컨트롤 하기

Dreamload — Tue, 2 Jun 2015 12:36:46 +0900

보통 form 에서 내부적으로 처리해야할 데이터가 있을경우 자바스크립트 또는 제이쿼리를 이용하게 된다. 하지만 자바스크립트 같은 경우 return 값을 설정해 주어도 기본 sumit 기능을 수행하게 되서 골치가 아플때가 있다. 그럴때에는 form 요소의 속성인 onSubmit 에서 아래와 같이 return 값을 붙여주면, 제대로된 값을 받아서 처리시킬 수 있다.

자바스크립트 예제

<script>
function form_submit()
{
/* confirm 함수는 확인창 결과값으로 TRUE 와 FALSE 값을 return 하게 된다*/
var check_submit=confirm('로그인 하시겠습니까?');

return check_submit;
}
</script>

<form action="/login" onSubmit="return form_submit()" method="post">
<input type="text" name="user_id" class="user_id"/>
<input type="password" name="user_pw" class="user_pw"/>
<input type="submit" value="로그인"/>
</form>

위에서는 자바스크립트의 사용방법을 알아보았고, 아래는 JQUERY 의 사용방법이다. 제이쿼리 같은경우는 일반적으로 아래와 같은 방법으로 사용하여 쉬운 컨트롤을 할 수 있도록 코딩하는편이 좋다.

제이쿼리 예제

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){

$('form').submit(function(){

/* confirm 함수는 확인창 결과값으로 TRUE 와 FALSE 값을 return 하게 된다*/
var check_submit=confirm('로그인 하시겠습니까?');

return check_submit;

})

})
</script>

<form action="/login" method="post">
<input type="text" name="user_id" class="user_id"/>
<input type="password" name="user_pw" class="user_pw"/>
<input type="submit" value="로그인"/>
</form>

모바일 웹 에서 A 태그의 터치되는 영역의 배경색을 전체로 잡아주는 방법

Dreamload — Tue, 2 Jun 2015 12:36:21 +0900

나같은 경우 모바일웹을 따로 공부한 적이 없기 때문에, 항상 여러테스트를 거쳐서 모바일 웹을 제작하곤한다. 많은 사람들이 모바일웹은 따로 구현된 HTML 코드나 JQUERY,CSS 등을 필수적으로 이용하여 제작하는걸로 아는데, 그런건 절대 아니다. 단지 구현된 하나의 프레임워크라 해야하나? 그이상도 아니고 그이하도 아니다. 나같은 경우는 오히려 불편해서 사용을 잘 안하는 편이다.

모든건 직접 테스트 해가면서 하는게 젤 좋은 방법이다. 이런 방법은 내가 늘 공부해온 방식이니, 참고만 하길 바란다.

일단 A 태그의 기본적인 사용 예제를 살펴보자.

일반적인 a요소 사용 예제

<a href="http://b.redinfo.co.kr" title="Dreamload 블로그 이동" target="_blank" style="padding:5px;"> 아롱다옹</a>

모바일에서 위의 태그를 클릭하면 어떻게 될까? 뭐 padding 을 주었으니, 영역은 5px 만큼 넓어졌을 것이다. 하지만, 모바일은 터치를 할 시 display 값이 inline 에 속하는 요소는 터치되는 영역이 padding 으로 준 5px 이 아닌 글자의 크기 영역으로 잡혀버린다. 이말이 무슨말인가 하면 아래의 그림과 같다.

(모바일 웹에서 a 태그를 터치했을 시 영역)

위와 같이 아무리 padding 값 또는 height, width 값을 크게 잡아주어도 모바일웹에선 터치되는 영역이 글자의 크기로 잡혀버린다. 이걸 해결하기위해선 아래와 같이 display 값으로 inline-block 을 추가해 주면된다.

모바일 터치 영역에 맞게 수정한 a요소 예제

<a href="http://b.redinfo.co.kr" title="Dreamload 블로그 이동" target="_blank" style="padding:5px; display:inline-block">아롱다옹</a>

(위의 예제를 적용한 후)

CSS 에서 정말 유용하게 쓰이는 셀렉터

Dreamload — Tue, 2 Jun 2015 12:35:49 +0900

CSS에서 가장 기본적인 셀렉터 지정방법은 요소, 요소의 ID, 요소의 CLASS 등이 있다. 이런 지정 방법은 가장 이해하기쉽고, CSS를 배우기 위해선 기본적으로 알고 있어야 한다. 아래는 이런 지정방법의 사용 예제이다.

CSS 셀렉터 예제

<style>
#wrap{ background-color:black; padding:10px; width:300px;}
a{ text-decoration:none; color:#95afc9;}
.bold_font{ font-weight:900; color:white;}
</style>

<div id='wrap'>
<a href='http://tistory.com'>티스토리</a>
<b class='bold_font'>위의 링크를 클릭하시면 티스토리 홈페이지로 이동합니다.</b>
</div>

실행결과

위의 예제에서는 가장 기본적인 셀렉터의 사용방법을 보여주었다. 그렇다면, 이것말고도 평소에 자주 쓰이는 유용한 셀렉터는 어떤 것들이 있는지 알아보도록하자. 아래는 자주 사용되는 몇가지 셀렉터들의 사용예제 이다.

요소명[속성명], 요소명[속성명="속성값"]

<style>
p[title]{ color:red; }
p[class="dreamload"]{ color:blue; }
</style>
<p title='Dreamload'>요소의 속성명을 지정</p>
<p class='dreamload'>요소의 속성명의 속성값을 지정</p>

실행결과

물롬 위의 셀렉터 형식 말고도 지정할 수 있는 형식은 여러가지가 있지만, 특별한 경우가 아닌 이상, 자주 사용되지는 않는다. 아래는 유사 클래스의 지정 방법이다. 유사 클래스란 요소의 속성명 또는 속성값이 아닌 형식을 지정하는 방법을 뜻한다. 우선 아래를 보면 쉽게 이해할 수 있다.

요소명:유사 클래스

<style>
a:link{ color:blue; /* 아직 클릭하지 않은 링크의 속성 */ }
a:hover{ color:red; /* 링크에 마우스 커서를 올려놓았을 시 */ }
a:visited{ color:#999;/* 이미 클릭한 링크에 대한 속성 */}
a:active{ background-color:red; /* 링크를 클릭했을 시 */ }
a:focus{ font-weight:bold; /* 포커스가 링크로 이동했을 시 */}

p:empty{ border:solid 3px red; width:200px; /* 아무 내용도 갖지 않는 요소*/}
li:first-child{ font-weight:bold; /* 요소의 첫번째 자식 */ }
li:last-child{ font-weight:bold; /*요소의 마지막 자식 */}
li:not(:first-child){ color:blue; /*첫번째 자식요소가 아닌 요소*/}
</style>

<a href="http://b.redinfo.co.kr">Dreamload</a>
<p></p>
<ul>
<li>li 요소의 첫번째 자식</li>
<li>li 요소의 두번째 자식</li>
<li>li 요소의 세번째 자식</li>
<li>li 요소의 네번째 자식</li>
</ul>

실행결과

위에서는 언급되지 않았지만, 아래처럼 홀수와 짝수의 요소자식과, 특정 자식요소마다 스타일을 줄 수 있는 지정방식이 있다. 이러한 지정방식도 많이 사용되고 있다.

특정 자식 요소마다 스타일을 적용할때

요소명:nth-child(2n+1)

->홀수 자식요소

요소명:nth-child(2n)

->짝수 자식요소

요소명:nth-child(odd)

->홀수 자식요소

요소명:nth-child(even)

->짝수 자식요소

Jquery 를 이용하여 간단한 심리테스트 만들기

Dreamload — Tue, 2 Jun 2015 12:35:38 +0900

요즘 페이스북이나 카카오스토리를 보면 심리테스트 웹컨텐츠들이 많이 생긴걸 알 수 있다. 이러한 테스트들은 간단하게 재미로 볼 수 있는 것들이다. 믿고, 안믿고는 본인에 따라 다르고, 대부분 재미로 넘기기 때문에, 어느정도 알맞게 작성해도 그럭저럭 심리테스트가 완성된다.

아래는 간단하게 Jquery 를 이용하여 만든 심리테스트이다. 별다른 설명이 없기때문에 아래의 예제를 이용하여, 자신만의 테스트 결과를 만들어도 좋다.

jquery 를 이용한 심리테스트 프로그램 예제

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
/* 리스트 중 하나를 선택했을 시 */
$('#sel').change(function(){
/* 선택된 값을 저장 (숫자로 형변환을 해준다) */
var sel_val=Number($(this).val());
/* 선택값에 따라 작동 */
switch(sel_val)
{
      case 1: result='당신은 평소 외로움을 많이 타는 사람입니다.'; break;
    case 2: result='당신은 현재 사랑받고 싶어합니다.'; break;
    case 3: result='당신은 평소 자유로운걸 좋아하는 사람입니다.'; break;
    case 4: result='당신은 다시 태어나고 싶어합니다.'; break;
    default : result='잘못된 선택입니다.'; break;
}
    /* 결과값을 텍스트로 표시*/
$('.result').text(result);
})

})
</script>

<p>만약 다음 생에 아래의 리스트중 한가지로 환생할 수 있다면, 환생하고 싶은 리스트중 하나를 선택해주세요</p>

<b>선택 : </b>
<select id='sel'>
<option value=0 selected>-리스트-</option>
<option value=1>바퀴벌레</option>
<option value=2>개</option>
<option value=3>고양이</option>
<option value=4>사람</option>
</select>

<p class='result'>결과가 표시되는 곳입니다.</p>

실행결과

코드이그나이터 환경설정 - database.php

Dreamload — Tue, 2 Jun 2015 01:22:39 +0900

☞ database.php (CI 3.0)

database.php 에서는 데이터베이스 라이브러리를 사용과 관련된 환경설정들을 할 수 있다. 데이터베이스를 사용하지 않고 웹을 서비스한다면 상관없겠지만, 데이터 베이스를 사용하지 않는 웹은 거의 없을거라고 생각한다.

데이터베이스 설정에 앞서, CI 에서 데이터베이스 기본 설정값을 로드하는 방법은 아래와 같다.

$this->load->database();

만약 데이터베이스 의 사용이 전역적으로 빈번하게 이루어 진다면 환경설정 파일인 autoload.php 를 열어서 자동로드에 database 라이브러리를 추가해 주면된다.

아래는 database.php 파일의 내용에 대한 설명이다. 설명 같은 경우 주석으로 되어있으니 주석을 참고하면 된다.

config/database.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/*
+ 이 설정은 데이터베이스의 초기 설정들이다 

=>  $active_group = 기본으로 사용할 데이터베이스를 설정 
ex) 기본값 : default
=>  $query_builder = 쿼리빌더 클래스를 사용할지 안할지 설정
ex) TRUE 또는 FALSE
ex) 메뉴얼 : http://www.codeigniter.com/user_guide/database/query_builder.html?highlight=query_builder#CI_DB_query_builder


+ 아래의 설정들은 사용할 데이터베이스에 대한 값들을 설정하는곳이다

=>  ['dsn'] =  데이터베이스 드라이버에서 PHP 를 확장하는 경우 
데이터 베이스에 대한 정보를 문자열로 전부 설정해 주어야 할때 필요하다. 자세한 설명은
아래의 메뉴얼을 참고하면 된다.
ex) 메뉴얼 : http://www.codeigniter.com/user_guide/database/configuration.html
=>  ['hostname'] = 데이터베이스의 서버이름을 설정한다  ex) localhost,127.0.0.1
=>  ['username'] = 사용자 아이디
=>  ['password'] = 사용자 비밀번호
=>  ['database'] = 연결할 데이터베이스 이름
=>  ['dbdriver'] = 데이터베이스의 타입을 설정한다. ex) 현재지원되는 타입 : cubrid, ibase, mssql, mysql, mysqli, oci8,
odbc, pdo, postgre, sqlite, sqlite3, sqlsrv
=>  ['dbprefix'] = 이 설정은 CI 데이터베이스 클래스의 엑티브레코드 를 사용할경우
테이블명에 자동으로 접두어를 붙여준다 ex) 접두어가 test_ 이고 테이블명 : board 일경우 
이설정값에 의해 테이블명은 test_board 가된다. 
=>  ['pconnect'] = 데이터베이스가 끊기지 않고 영속적(영구적으로 지속) 연결을 사용할지 설정 
ex) 지원되는 값(활성/비활성) :  TRUE 또는 FALSE
=>  ['db_debug'] = 데이터베이스의 에러를 표시할 것인지 말것인지를 설정 ex) 지원되는 값(활성/비활성) : TRUE 또는 FALSE
=>  ['cache_on'] = 데이터베이스 쿼리를 캐시할것인지 말것인지 설정 
ex) 메뉴얼 : http://www.codeigniter.com/user_guide/database/caching.html?highlight=database%20caching%20class
ex) 한글 참고 메뉴얼 : http://www.codeigniter-kr.org/user_guide_2.1.0/database/caching.html
=>  ['cachedir'] = 데이터베이스 쿼리 캐시가 저장될 경로 ex) 사용해보진 않았지만 절대경로로 application/저장경로
이와같은 형식으로 지정해주어야 할듯하다
=>  ['char_set'] = 데이터베이스와 통신할때 사용할 문자인코딩을 설정한다 ex) utf-8
=>  ['dbcollat'] = 데이터베이스 이용시 문자들간 비교가 필요할시 사용될 대조방식을 설정
ex) 기본설정값 : utf8_general_ci  
ex) 이 설정은 mysql 과 mysqli 드라이버에서만 사용된다
=>  ['swap_pre']  = 이 값이 쓰이는 방식은 아직 정확하게 모르니 일단 패스한다. 
=>  ['encrypt']  = 데이터베이스 연결시 암호화된 연결을 사용할 지 안할지 설정
ex) TRUE 또는 FALSE 
=>  ['compress'] = 클라이언트의 압축을 사용할지 안할지 설정, (MySQL 의 경우만)
ex) TRUE 또는 FALSE
=>  ['stricton'] = sql 연결시 엄격모드를 설정할지 안할지 설정
ex) TRUE 또는 FALSE
=>  ['failover'] = 데이터베이스의 주 연결이 장애로 인해 연결될 수 없는 경우, 설정된
failover 값들로 대체된다. 이때 값들은 미리 설정되어있어야한다.
ex ) 메뉴얼 : http://www.codeigniter.com/user_guide/database/configuration.html?highlight=failover
=>  ['save_queries'] = 이값은 실행된 모든 쿼리들을 저장한다. 또한 데이터베이스 쿼리함수에서
$this->db->last_query() 를 사용할 수 있게 해준다. 기본값은 TRUE 이지만, SQL 에서 쿼리를
많이 사용하는경우 메모리에 과부하가 생길 수 있다. 그럴경우에는 FALSE 로 설정해 놓는게 좋다.
*/

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'user',
    'password' => '',
    'database' => '',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => TRUE,
    'db_debug' => TRUE,
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);
?>

피터팬증후군 과 현실

Dreamload — Sun, 31 May 2015 18:26:41 +0900

피터팬증후군이라는 말을 키워드로 검색 하면 "몸은 어른이지만 어른의 세계에 끼지 못하는 '어른아이' 가 늘어나는 사회 현상" 이라고 나와있다. 여기서 말하는 어른의 세계는 책임감을 가지고 현실에 적응하여 살아가는 세계를 일컫는 말일것이다. 하지만 이상하지 않는가? 우리가 어릴적 들었던 피터팬 동화에서는 피터팬이 이런시각으로 보여지지 않았다. 오히려 어릴적 피터팬의 모습은 우리들의 우상이자 영웅이였다.

(피터팬 애니[1953] - 출처 : Naver 영화)

피터팬증후군의 증상을 보면, 대부분 책임감 없는 사람을 일컫는 말이다. 책임감이라는 말은 여성보단 남성에게 많이 붙는 단어이기도 하며 피터팬증후군 또한 남성을 빗대어 일컫는 말이다.

현실적인 시각에서 피터팬을 본다면 피터팬은 항상 영웅처럼 행동하며, 주변 아이들을 이끌지만, 마음속은 나약하며, 웬디라는 여자아이에게 의지할려는 모습이 비추어 진다. 이러한 모습을 지금 우리들의 현실로 보면, 무엇이든 다 이룰것처럼 말은 거창하게 하지만, 결국 아무것도 못이루고, 현실을 부정하며 자신만의 이상세계에 빠져있는 사람의 모습으로 볼 수 있다.

이런 모습은 현실도피처럼 자신의 생각으로는 쉽게 될것만 같던 세상이 현실에선 아무것도 할 수 없다는 것을 알게되자 현실을 부정하며, 결국 이상세계에 빠져서 현실과는 거리가 먼 상상만 하는 사람들과도 같다.

(도망 ,태양,공포,도시)

그렇다면 왜 이런 현실도피에 빠지게 되는것일까? 아마도 그건 잘못된 판단력 때문일 것이다. 한가지 예로 자신이 실제로 할 수 있는건 작은데, 할려는 거는 과도하게 큰 경우이다. 이러한 사람들은 주변에서도 많이 볼 수 있을것이다. 자신이 할 수 있는거에 비해 꿈이 너무 거창한경우다. 현실은 꿈만 거창해서는 절대 이룰 수 없다. 그 이유는 현실적으로 생각해본다면 쉽다. 현실은 아래서부터 올라가는 것이지 위에서 부터 시작하는게 아니기 때문이다.

어찌보면, 아래서부터 시작한다는것 자체가 우리의 현실이 얼마나 고달프고 힘든지 알 수 있다. 하지만 이러한 현실을 부정하여, 매일 이상세계에 빠져있는건 자신의 분수를 모르는 경우밖에 안된다. 현실 또는 사회를 부정할려면 그만큼의 경험이 있어야하는데 아무 경험도 없이 아무 노력도 하지않고, 그저 마법처럼 이루어 지지 않는 현실만 부정한다면 결국 평생 아무것도 할 수 없을 것이다.

즉, 현실은 마법의 세계가 아니기 때문에 자신의 이상이 크다면 조금 낮추고, 거기에 맞추어 실행하고, 열심히 노력부터하는 것이 중요하다. 쉽게말해 꿈이 검사라면 자신이 검사가 되서 할 일들을 생각하는게 아닌 검사가 되기위한 준비부터 하라는 소리다. 물론 검사가 준비만 한다해서 되는게 아니다. 하지만 여기서는 쉽게 설명하기 위해서이다. 대부분의 이상세계에 빠져있는 사람들을 보면 현실은 아무것도 없으면서, 말하는건 이미 꿈을 이룬 사람들인경우가 많다.

살아가면서 아무리 현실을 부정해도, 자신이 아무것도 하지 않는다면 바뀌는건 절대 없을 것이다. 항상 노력하고, 자신의 위치를 잘 파악하는게 중요하다. 만약 계속해서 자신의 위치도 모르면서 꿈만 거창하다면, 평생 피터팬증후군에서 벗어날 수 없을것이다.

(대화, 타협, 토론)

결론적으로 피터팬증후군은 현실적인 판단이 뒤떨어진 사람을 일컫는 말이라고 할 수 있으며, 이러한것들을 고치기 위해서는 사회경험이 많은 윗사람과 대화도 자주해보고, 자신의 이상과 현실의 차이를 알고 그것을 극복하도록 노력해야한다.

코드이그나이터 환경설정 - config.php

Dreamload — Fri, 29 May 2015 19:59:55 +0900

☞ config.php (CI 3.0)

config.php 는 CI 의 기본적인 기능을 설정 하는 파일이다. 이 설정값에 따라 CI 의 작동여부가 가려지는것이 많으니 꼭 알아두어야 한다. 주된 기능은 웹의 정보를 설정하는 부분과, CI의 라이브러리, 헬퍼, 드라이버 또는 CI의 기능 들의 사용여부를 설정할 수 있다.

사용자가 CI의 라이브러리를 사용함에 있어서, config.php 에 설정된 값이 따라 실행이 안되는 경우도 있다. 이는 PHP 버전이 낮거나, config 의 환경설정 값이 FALSE 로 되어있는 경우다. 이렇듯 CI의 라이브러리를 사용할때는 제일먼저 메뉴얼을 읽어보는 습관을 길러야 한다. 즉 아무리 뛰어난 개발자도 처음 다루어 보는 프레임워크를 메뉴얼 없이는 아무것도 할 수 없기 때문이다.

아래는 autoload.php 파일 내용에 대한 설명이다. 참고로 설명에는 전문적인 해석보단 개인적인 해석이 많기 때문에, 틀린 부분이 있을 수 있다.

config/config.php

<?php
/*
+ 서버의 도메인 주소를 설정하는곳이다. 이곳을 빈칸으로 둔다면, 
서버에 설정된 주소값을 가져온다.

ex) => $config['base_url'] = 'http://b.redinfo.co.kr';
*/
$config['base_url'] = '';


/*
+ 서버의 index 페이지를 설정하는 곳이다, 만약 mod_rewrite 를 사용한다면 
이곳은 빈칸으루 두어야한다. 또한 자신의 서버설정에서 index 페이지가 index.php 가 아닐경우 
이곳에 서버설정에 맞는값을 설정 해주어야 한다.

ex) 만약 자신의 서버의 index 페이지가 home.php 이라면 아래와 같이 설정해주어야한다.
=>$config['index_page'] = 'home.php';
*/
$config['index_page'] = 'index.php';


/*
+ CI에서 사용할 uri 프로토콜을 설정하는 곳이다. 기본값은 REQUEST_URI 다.
특별한 경우가 아닌이상 이값은 기본값으로 설정해 놓는게 좋다. 그이유는
uri 라이브러리를 사용할 시 이 설정값을 이용하기 떄문이다. 

ex) 아래는 설정할수 있는 값과 설명이다.
=> REQUEST_URI :    PHP 서버 환경변수 $_SERVER['REQUEST_URI'] 와 같다.
=> QUERY_STRING :   PHP 서버 환경변수 $_SERVER['QUERY_STRING'] 와 같다.
=> PATH_INFO :      PHP 서버 환경변수 $_SERVER['PATH_INFO'] 와 같다.
*/
$config['uri_protocol'] = 'REQUEST_URI';


/*
+ url 의 접미사를 추가하는 부분이다.  이값은 url 끝부분에, '.html' 처럼 자신이 붙이 고싶은 접미사를
붙일 수 있다. 

ex) 만약 설정값이 아래와 같다면 
=> $config['url_suffix'] = '.html';
기본 링크를 만들때는 아래와 같이 형식으로 만들어주면된다.
=> <a href='http://test.com/main/pf.html'>프로필</a>
참고로 위의 기본 url 은 본래 아래와 같다
=> http://test.com/main/pf

+ 이 값을 설정함에 따라 하나의 접미사가 붙음으로 써 다양만 문서형식처럼 보일 수 있다.

+ 가이드(3.0) : http://codeigniter.com/user_guide/general/urls.html
*/
$config['url_suffix'] = '';


/*
+ 언어 라이브러리나, 헬퍼 사용시 기본적으로 사용할 언어를 설정하는곳이다.
언어파일을 작성하는 곳은 기본경로로보면 application/language 에 위치한다.
*/
$config['language'] = 'english';


/*
+ 웹서버의 문자인코딩을 설정하는곳이다. 기본값은 UTF-8 이다. 한글 같은 경우 페이지설정과 이곳설정이 잘못되있을경우 
한글이 깨질 수 있으니 될 수 있으면 모든 문자인코딩은 EUC-KR 보다는 UTF-8 을 쓰는게 좋다. 물론 한글만 사용하는 웹페이지에서는
EUC-KR 이 가장 적합하나, 다방면으로 볼때 데이터베이스 나 다른 웹페이지를 가져올때
한글이 전부 깨져서 하나하나 전부 인코딩 해줘야 하는 경우가 생길 수 있다..
*/
$config['charset'] = 'UTF-8';


/*
+ 이 설정은 후킹 이라고 하는 CI 의 기능중 하나로 기본값은 FALSE 이며 설정값은 아래와 같다.

=> FALSE : 중지
=> TRUE : 실행


+ 후킹을 간단하게 설명하자면, CI 가 실행되기 전이나 중간 또는 원하는 지점에 임의로 실행시켜야 할
기능이 있다면, 후킹을 이용하여, 추가할 수 있다.

+ 가이드(3.0) : http://www.codeigniter.com/user_guide/general/hooks.html?highlight=hooking
+ 한글 가이드(2.1.0) : http://codeigniter-kr.org/user_guide_2.1.0/general/hooks.html
*/
$config['enable_hooks'] = FALSE;


/*
+ 이 설정은 코어 클래스, 라이브러리, 헬퍼 를 확장 할 시 이름의 접두어를 설정하는곳이다. 
확장 할 시 파일명과, 클래스일경우 클래스 명은 이곳에 설정된 접두어를 사용해야한다.


+ 가이드(3.0) : http://codeigniter.com/user_guide/general/core_classes.html
+ 가이드(3.0) : http://codeigniter.com/user_guide/general/creating_libraries.html
*/
$config['subclass_prefix'] = 'MY_';


/*
+ 이 설정은 의존성 관리 도구인 컴포저가 있을경우 경로를 로드할 수 있다. 컴포저는 
사용해야할 기능들을 컴포저 도구를 이용하여 쉽게 설치한후 사용및 확장등의 유지보수등을 제공한다.

ex) 사용하지 않을 시 FALSE 값을 주면되고, 기본적으로 FALSE 값이며, 컴포저를 사용하기 위해선
아래와 같이 경로값을 넣어주면된다.

=> $config['composer_autoload'] = '/path/to/vendor/autoload.php';

+ 의존성 패키지 다운로드 LINK : https://packagist.org 

*/
$config['composer_autoload'] = FALSE;


/*
+ URL 주소값으로 올 수 있는 문자 규칙들을 셋팅한다.
*/
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';


/*
+ 이 값은 CI 의 URI 규칙을 설정하는 곳이자 각각의 설명은 아래와 같다.

=> $config['allow_get_array'] = 이값이 TRUE 일시 URL에서 GET 메소드값을 사용할 수 있다.
FALSE 값일 경우 GET 메소드는 사용할 수 없다.
=> $config['enable_query_strings'] = 이값은 CI 의 기본 URI 규칙을 일반 쿼리형식으로 변경하는지를 설정하는것이다. 
TRUE 일 경우 쿼리형식 FALSE 값일 경우 기본적인 CI URI 형식을 사용한다.

=> 아래의 3개의 값들은 enable_query_strings 값이 TURE 일 때 설정하는것으로 URL 예를 들면 
http://test.com/index.php?c=contorller&m=function 이런식으로 나타낼 수 있다.
한가지 의문은 directory_trigger 설정은 어떤형식으로 쓰이는지다. 메뉴얼을 보더라도 아직 쓰이지는 않는것같다.
- $config['controller_trigger'] = 'c';
- $config['function_trigger'] = 'm';
- $config['directory_trigger'] = 'd';
*/
$config['allow_get_array'] = TRUE;
$config['enable_query_strings'] = FALSE;
$config['controller_trigger'] = 'c';
$config['function_trigger'] = 'm';
$config['directory_trigger'] = 'd';

/*
+이 설정값은 로그값을 기록할지 않할지, 또 저장한다면  어떤것을 기록 할지 설정하는 곳이다. 각각의 설정값들은 아래와 같다.

=>  0 = 로그값을 기록하지 않는다.
=>  1 = 오류 메세지 (PHP 오류가 포함된다)
=>  2 = 디버그 메세지
=>  3 = 정보 관련 메세지
=>  4 = 모든 메세지
*/
$config['log_threshold'] = 0;



/*
+ 이 설정값은 $config['log_threshold'] 값이 0 이 아닐경우 로그가 저장될 경로를 설정해 주는 곳이다.  이곳의 기본값은 아래와 같다.

=> application/logs/

+ 로그파일이 저장될 디렉토리는 쓰기 권한이 있어야 한다.
*/
$config['log_path'] = '';


/*
+ 저장될 로그파일의 확장명이다. 공백으로 둘시 기본값은 'php' 다.
*/
$config['log_file_extension'] = '';


/*
+ 생성되는 로그파일이 권한을 설정할 수 있다. 이 값에 따라 생성되는 로그파일의 권한이 설정된다.
*/
$config['log_file_permissions'] = 0644;


/*
+ 로그를 기록할 때 날짜 형식을 포맷형으로 설정할 수 있다 기본값은 아래와 같으며, 
PHP의 날짜함수에 올수 있는 포맷 문자형을 참고 하면된다.

+ 날짜포맷 문자열 LINK : http://php.net/manual/kr/function.date.php
*/
$config['log_date_format'] = 'Y-m-d H:i:s';


/*
+ 이 설정은 에러들이 저장된 errors 디렉토리가 변경되었을 시 설정하는 곳이다. 빈칸으로 둔다면 
기본적인 경로는 application/views/errors/ 가된다.
*/
$config['error_views_path'] = '';


/*
+ 이 설정은 캐싱기능을 활성화 할시 캐시파일이 저장될 경로를 설정하는 곳이다. 빈칸으로 둘시 
기본경로는 application/cache/ 가 된다.

+ 캐시파일이 저장될 디렉토리는 쓰기 권한이 있어야한다.
*/
$config['cache_path'] = '';

/*
+ 이 설정값은 웹문서가 캐싱될때 쿼리 문자열을 캐시할치 설정 (이 기능에 대해서는 아직 확실히 분석을 못했다) 

=> FALSE : 사용않함
=> TRUE : 사용
*/
$config['cache_query_string'] = FALSE;


/*
+ 암호화와 관련된 CI 의 기능들을 사용할 시 이곳에 설정된 값을 가지고 암호화를 한다.

+ 메뉴얼(3.0) :  http://codeigniter.com/user_guide/libraries/encryption.html 
*/
$config['encryption_key'] = '';


/*
+ 이 곳은 세션에 관한 설정을 하는곳이다. 하지만 3.0 부터는 되지 않는것같다. 아마 보안때문에 그런것같다.

+ 세션같은경우 php.ini 파일에서 수정하길 바란다. 이설정은 지워도 크게 상관은없다.

+ sess_driver 값으로 올 수 있는 것들은 files, database, redis, memcached 들이 있다. 

+ 메뉴얼(3.0) : http://www.codeigniter.com/user_guide/libraries/sessions.html?highlight=sess_driver
*/

$config['sess_driver'] = 'files';
$config['sess_cookie_name'] = 'ci_session';
$config['sess_expiration'] = 7200;
$config['sess_save_path'] = NULL;
$config['sess_match_ip'] = FALSE;
$config['sess_time_to_update'] = 300;
$config['sess_regenerate_destroy'] = FALSE;



/*
+ 이곳은 쿠키를 설정하는 곳이다. 쿠키설정에 관한 값은 아래와 같다.

=> cookie_prefix   = 쿠키이름 앞에 붙을 접두어를 설정한다. 
=> cookie_domain   = 쿠키의 기본도메인을 선택 ex) www.test.com
=> cookie_path     = 쿠키의 저장 경로 기본값은 '/' 
=> cookie_secure   = 쿠키의 보안을 위해 HTTPS 연결이 존재할때만 사용할 지 설정 
=> cookie_httponly = 쿠키가 오직 HTTP(S) 를 통해서만 접속하게 할지 설정 (단 이설정시 자바스크립트나 JQUERY 등은 사용불가능하다)
*/
$config['cookie_prefix']    = '';
$config['cookie_domain']    = '';
$config['cookie_path']      = '/';
$config['cookie_secure']    = FALSE;
$config['cookie_httponly']  = FALSE;


/*
+ 이 설정은 문자열의 뉴 라인을 표준화 할지 설정 하는 곳이다. 이 설정이 필요한 이유는 유닉스 계열의 운영체제는
뉴 라인이 보통 '\n' 으로 되어있고, 윈도우 운영체제는 '\r\n' 으로 되어있기 때문에, 운영체제가 변경될 시 
이설정값을 TRUE 로 활성화 시켜주면, 일일이 수정할 필요가 없다.

=> FALSE : 비활성화
=> TRUE : 활성화
*/
$config['standardize_newlines'] = FALSE;


/*
+ GET, POST 메소드 사용시 XSS 공격 방어를 전역적으로 사용할지 설정 한다.  기본값은 FALSE 다

+ 이값을 TRUE 로 설정시 자동으로 XSS 공격을 방어가 되서 편하겠지만, 검사할 데이터가 많다면 
그만큼 과부하가 생길 수 있다

=> FALSE : 비활성화
=> TRUE : 활성화  
*/
$config['global_xss_filtering'] = FALSE;



/*
+ 이 설정은 CSRF 에 대한 설정이다. 일단 이값을 활성화 시키면, POST 값 전송시 csrf 에 대한 토큰이름과 토큰값을 넘겨주어야한다.

=> $config['csrf_protection'] = 이 기능을 활성화 할지 비활성화 할지 설정 : TRUE(활성화), FALSE(비활성화)
=> $config['csrf_token_name'] = csrf 토큰 이름을 설정
=> $config['csrf_cookie_name'] = csrf 로 사용할 쿠키의 이름을 설정;
=> $config['csrf_expire'] = 쿠키의 생존기간을 초단위로 설정 
=> $config['csrf_regenerate'] = POST 값 전송이 이루어질 시 매번 토큰값을 변경할지 설정 : TRUE(활성화), FALSE(비활성화)
=> $config['csrf_exclude_uris'] = csrf 에서 제외할 URI 를 지정  : 
ex) http://test.com/index.php/main/pf    =>     $config['csrf_exclude_uris'] = array('main/pf');
*/
$config['csrf_protection'] = FALSE;
$config['csrf_token_name'] = 'csrf_test_name';
$config['csrf_cookie_name'] = 'csrf_cookie_name';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;
$config['csrf_exclude_uris'] = array();



/*
+ Output 을 압축하여 전송할지 설정 하는 곳이다. 결론은 이 설정값에 대해 잘 모를경우 비활성화(FALSE) 로 두는게 좋다

=> TURE : 활성화
=> FALSE : 비활성화
*/
$config['compress_output'] = FALSE;

/*
+ 이 설정은 나타낼 표준 시간을 설정할 수 있다. 이설정값은 date helper 함수에서만 영향을 받는다.

=> 'gmt' =  gmt 타임스탬프 값
=> 'local' = 서버의 타임스탬프 값 (기본값)
*/
$config['time_reference'] = 'local';

/*
서버의 PHP 가 짧은 태그지원이 불가능할 때 rewrite 시 인식하게 할지 설정

=> TRUE = 활성
=> FALSE = 비활성
*/
$config['rewrite_short_tags'] = FALSE;


/*
+ 이설정은 서버가 역방향 프록시 뒤에 있는경우에 사용자들의 정확한 클라이언트 ip를 체크할 수 없는 경우가 생긴다 
이를 해결하기 위해 설정하는곳에 허용가능한 역방향 프록시 ip 주소들을 지정해 주어야한다.
 
=>  ip 설정은 ,(콤마) 로 '1.1.1.1,2.2.2.2' 이런식으로 해주거나 배열 에서 array('1.1.1.1','2.2.2.2') 이런식으로 구분해주면된다.
*/
$config['proxy_ips'] = '';
?>

코드이그나이터 환경설정 - autoload.php

Dreamload — Thu, 28 May 2015 16:44:09 +0900

☞ autoload.php (CI 3.0)

autoload.php 는 CI 에서 사용되는 패키지, 라이브러리, 드라이버, 헬퍼, 모델, 환경설정, 언어설정 파일등을 자동으로 로드하고 싶을때 사용한다. 한가지 예를 들면 사용자가 자신이 만든 라이브러리 또는 CI 의 기본라이브러리를 사용할 시 아래와 같이 CI 로드 클래스를 이용하여 사용할려는 라이브러리를 먼저 로드해주어야한다.

$this->load->library('session');

이렇게 필요할때마다 로드해 주는건 컴파일 수행시간을 단축시킬 수 있기때문에 상당히 유용하다. 하지만, 자주 쓰이는 것들은 이렇게 계속 로드해주기란 정말 귀찮은 일이다. 특히나 session 과 database 같은 경우, 전역으로 쓰이는 경우가 많기 때문에autoload 를 해주는게 좋다.

아래는 autoload.php 파일 내용에 대한 설명이다. 설명은 개인적인 해석이기 때문에, 틀린 부분이 있을 수 있으니 메뉴얼을 참고해 가면서 보는편이 좋다.

config/autoload.php

<?php
/*
+ application 폴더에 있는 libraries, drivers, helper, config, language, model 와 같이
다른 디렉토리에 존재하는 것들을 로드할때 사용한다. 패키지 설정은 파일이 아닌 디렉토리를 지정해 주어야 한다.

ex) application/third_party 디렉토리에 libraries 디렉토리를 생성후 그안에
My_libray_test 파일을 생성한다. 그후 자동로드는 아래와 같이 설정해주면된다.
=> $autoload['packages'] = array(APPPATH.'third_party');

+ 만약 패키지 디렉토리가 third_party 경로 안에 foo 디렉토리에 존재한다면, 아래와 같이 를 설정해 주면된다.
=> $autoload['packages'] = array(APPPATH.'third_party/foo');
*/

$autoload['packages'] = array();


/*
+ 자동으로 로드할 항목을 적어주면 된다. 이때 확장자는 적을 필요없다. 

ex) 만약 자동로드할 항목이 라이브러리의 session 이라면 아래와 같이 설정해주면된다
=> $autoload['libraries'] = array('session');

+ 만약 로드할 My_lib 라는 이름의 라이브러리가 foo라는 이름의 서브디렉토리안에 존재한다면 아래와 같이 설정해 주면된다.
=> $autoload['libraries'] = array('foo/my_lib');

+ 헬퍼(helper) 나 언어(language) 의 경우 기본적으로 각각 _helper 와 _lang 이라는 접미어가 붙게 되는데 이는 생략해야한다

ex) 만약 로드해야할 헬퍼가 test_helper.php 라면 아래와 같이 설정해 주면된다
=> $autoload['helper'] = array('test');
*/

$autoload['libraries'] = array();
$autoload['drivers'] = array();
$autoload['helper'] = array();
$autoload['config'] = array();
$autoload['language'] = array();
$autoload['model'] = array();
?>

코드이그나이터 환경설정 - 소개

Dreamload — Thu, 28 May 2015 14:23:18 +0900

☞ CI 의 application 과 system

코드이그나이터를 설치하면 application 폴더와 system 폴더를 볼 수 있다. 이 두개는 중요한 역활을 한다. 사용자가 수정해야할 폴더는 application 로 CI 의 규칙에 따라 코딩하면된다. system 폴더같은 경우 코드이그나이터가 동작하기 위해 필요한 기능들이 들어있기때문에 마음데로 수정하지 않는게 좋다.

☞ 코드이그나이터 환경설정

코드이그나이터를 설치하면, 끝나는게 아니라 환경설정 또한 해주어야한다. 물론, 처음 CI 를 접했다면 어떤것을 설정해 주어야할 지 모를것이다. 하지만, 어려울건 없다. CI에서는 기본적으로 파일마다 주석에 설명이 나와 있기때문에, 그것을 참고하여 설정하면된다.

환경설정의 경로는 CI 설치후 별다른 수정을 하지 않았을 시, application/config 에 위치해 있다. config 경로로 들어가서 디렉토리에 있는 파일들을 살펴보면 아래와 그림과 같이 여러개의 파일들을 볼 수 있을것이다.

(application/config 의 내용물들)

혹시나 index.html 파일이 왜 존재하는가 궁금한 사람들이 있을것이다. index.html 파일 같은경우, 불량한 사용자가 디렉토리에 존재하는 파일들을 훔쳐보는 경우를 대비하여 있는것이다. 물론 서버환경설정시 디렉토리 접근시 index 파일이 없을 경우 파일 리스트를 보여주지 않도록 설정하면 되는거지만, 설정을 못하는 경우도 있기때문에, index.html 파일은 그냥 두는게 좋다.

CI 의 같은경우 htaccess 파일에 접근제한이 설정되어있기때문에, 웹경로를 통해서는 application 폴더와 system 폴더는 접근이 불가능 하다. 이처럼 htaccess 파일같은경우 설정에 따라서 상당히 유용하게 사용할 수 있기때문에, 시간이 된다면, CI 에서 인기를 끌고 있는 index.php 죽이기와 함께 포스팅할 예정이다.

코드이그나이터 설치과정

Dreamload — Thu, 28 May 2015 00:47:12 +0900

☞ 코드이그나이터 다운로드

당연한 소리겠지만, 코드이그나이터를 먼저 다운로드하도록하자. 만약 한글 메뉴얼을 이용하고 싶으면, 2.X 버전을 받도록 하자. 2.X 버전은 코드이그나이터 한국사용자 포럼 에 한글로된 메뉴얼 2.1.0 이 있기 때문에, 처음 시작할 떄 많은 도움을 얻을 수 있다.

코드이그나이터 다운로드 Link

코드이그나이터 한글 메뉴얼 2.1.0

(Codeigniter 공식 싸이트)

여기서는 현재 기준으로 최신버전인 3.0을 다운받았다. 3.0 같은 경우 2.x 버전과 크게 다르지는 않지만, 몇가지 기능들이 변경되거나, 추가되었다. 또한 변경된 기능중 작동하지 않는 기능도 존재하는것같다.

☞ 코드이그나이터 설치

다운받은 파일을 서버에 업로드 시켜서, 압축을 풀어보자, 아래 그림은 윈도우상에서 보여지는 디렉토리 내용들이다.

(Codeigniter 데렉토리)

위의 디렉토리를 살펴보면, 서버에 불필요한 파일들이 있다. 물론 한번쯤 읽어봐야하지만, 영어와 거리가 먼사람들은 읽고 싶어도 무용지물이 되는게 아닐까 싶다.

이곳에서는 코드이그나이터가 동작하기 위해 필요한 최소설치를 할것이다. 그렇기 때문에, 아래 그림처럼 application, system, index.php 를 제외한 나머지 파일들은 모두 삭제하도록 하자.

(참고이미지)

코드이그나이터는 서버에 파일을 설치하는것만으로도 모든 설정이 끝난다. 그만큼 설치과정은 쉽다. 일단 설치가 제대로 이루어 졌는지 확인하기위해 코드이그나이터를 업로드한 서버의 도메인으로 접속을 해보자. 정상적으로 설치가 되었다면, 아래 그림과 같이 환영한다는 페이지가 뜰것이다.

(코드이그나이터 설치시 초기화면)

내가 생각하는 코드이그나이터의 기초

Dreamload — Wed, 27 May 2015 04:43:36 +0900

☞ CI의 URL 방식과 기본적인 URL 방식

많은 사람들이 웹개발도구로 공개된 프레임워크를 사용한다. 물론 프레임워크 없이 코딩을 하거나 자신들만의 프레임워크를 사용하는 곳도 있지만, 그렇지 않을 경우, 공개된 프레임워크중 하나를 사용하기 마련이다. 그중에서 사람들이 가장 쉽게 접근할 수 있는 프레임워크중 하나로 CI 를 예로 들 수 있다.

CI같은 경우 PHP를 잘몰라도, 다른 프로그래밍 언어를 잘 배웠다면, 쉽게 접근할 수 있다. 하지만, 다른 프로그래밍 언어를 잘 다루더라도 웹의 기본적인 지식이 없는 경우, CI를 통해 웹을 만들더라도, 이해할 수 없는 부분이 많을 것이다.

그이유는 CI 자체가 프레임워크중 하나일뿐 웹의 구성 방식은 크게 설명하지는 않기 때문이다. 이말이 무슨말인지 처음에는 이해하기 힘들것이다. 일단 아래같은 경우를 생각해보자. 아래는 웹의 기본적인 URL 구성방식이다.

http://test.com/search.php?subject=코드이그나이터

위의 구성방식은 가장 기본적인 URL형식으로 웹에 조금만 관심이 있어도 쉽게 해석할 수 있다. 만약 위의 URL 형식이 이해가 되지 않는다면, CI를 당장 배우기엔 다소 무리가 있지 않을까 생각해본다.

아래는 위에서 기본적인 URL 방식을 CI로 구성된 URL 방식으로 작성한 URL 이다.

http://test.com/index.php/search/subject/코드이그나이터

물론 CI 에서도 GET 메소드를 사용할 수 지만, 여기서는 비교를 위해 기본적인 URL 규칙을 보여주었다. 그렇다면 한층 더 깊게 들어가서, 위의 URL 방식들을 어떤 형식으로 처리하는지 아래의 예제를 통해 살펴보도록 하자

search.php (기본적인 URL 구성방식 사용시)

<?php
if(!isset($_GET['subject']))
{
    echo "에러";
    exit();

}
else
{
        $value=$_GET['subject'];
        
        if($value=='코드이그나이터')
        {
            echo "코드이그나이터란....";
        }
        else if($value=='그외')
        {
            echo "그밖에..";
        }
        else
        {
            echo "찾을 수 없습니다.";
        }
}
?>

위의 코드를 살펴보면 정말 쉬운 형식으로 구성되었다는걸 알 수 있다. 또한 URL 에서 값들을 제어 할때 GET 메소드를 사용한다는 것을 알 수 있다.

아래는 CI 로 구성되어진 URL 구성 방식이다. 중요한점은 프레임워크에서는 index.php 를제외한 서브 메인페이지를 컨트롤러라고 한다.

controller/Search.php (CI 의 URL 방식을 사용시)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Search extends CI_Controller {

    public function subject($value)
    {
        
        if($value=='코드이그나이터')
        {
            echo "코드이그나이터란....";
        }
        else if($value=='그외')
        {
            echo "그밖에..";
        }
        else
        {
            echo "찾을 수 없습니다.";
        }
        
    }
    
}
?>

CI에서는 부모클래스인 CI_Controller 를 상속받아 모든 URL 값들을 해당되는 컨트롤러에서 처리하게 된다. 위의 소스코드를 보면 CI_Controller 를 상속받은 Search 라는 클래스가 있고, 실행되는 함수는 subject 이며, subject 함수에는 값을 받는 파라미터값이 존재한다.

그렇다면 CI는 어떤 방식으로 URL 등을 처리할까라는 의문이 생기는데, 어려운건 없다. 우리가 PHP를 기반으로 웹서버를 처음 만들게 되면 index.php 하나만 존재하게 된다. 또한 아래의 URL 처럼 '슬래시(/)' 를 구분으로 아무리 많은 세그먼트 값을 넣어도, index.php 의 페이지가 가 뜬다는 것을 알 수 있다.

http://test.com/index.php/test/page/1

CI 에서는 이런방식을 이용하여 '슬래시(/)' 뒤에 붙은 URL 값들을 CI 의 시스템을 이용하여 해석하고 처리하기 때문에, 어떠한 페이지를 요청하더라도 index.php 를 거쳐서 처리하게 된다.

다시한번 설명하자면 위의 주소를 입력할 시 CI 처럼 프레임워크나 구성방식이 적용이 안되었다면, '슬래시(/)' 뒤에 아무리 많은 세그먼트 값들을 넣어도 index.php 의 내용이 뜨게 된다.

☞ 컨트롤러, 모델, 뷰 는 어떤역활을 하는가?

컨트롤러(Controller), 모델(Model), 뷰(View) 는 프레임워크에서 가장 중요한 부분일 지 모른다. 이러한 방식들을 줄여서 MVC 방식이라고 한다. 나같은 경우 처음M으로 시작하는게 의문이였다 그이유는 M이면 모델 부분인데 이는 순서와 상관있는지 그게 궁금하였다. 하지만 이러한 의문은 별의미없는 바보같은 의문이였다.

혹시 나와같은 의문을 가진 사람이 있다면, 절대 고민할 필요없이, 의문을 없애는게 좋다. 그이유는 CI를 계속 다루다 보면 알겠지만, 모든건 명칭일뿐 동작은 개발자에 따라서 달라진다는것을 알 수 있기때문이다.

이처럼 하나하나에 의문을 가지는건 좋지만, 너무 어렵게 생각할 필요는 없다. 찾아도 답이 안나오는 경우는 일찍 포기한 후 실력을 더 쌓은다음 생각해도 늦지 않기 때문이다. 그럼 각각의 MVC 가 CI에서는 어떤 형태로 사용이 되는지 간단히 알아보도록 하자.

먼저 컨트롤러에 대해 알아보자면, 컨트롤러는 요청에 있어서 메인역활을 한다. 즉 다시말해 URL을 통하여 들어오는 모든 요청들을 컨트롤러에서 처리하게 되는 것이다. 이것들을 우리가 물건을 살때 이용하는 마트로 비유하자면, 마트라는 건물은 CI에서 클래스 에 속하고, 계산대에서 계산을 하는 사람은 함수에 속하며, 계산해야할 물건은 세그먼트에 속하게 된다. CI로 표현한다면 아래와 같다.

기본적인 컨트롤러 구성방식

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mart extends CI_Controller {
    
    public function cashier($item,$name,$value)
    {
        echo "상품코드 : ".$item;
        echo "상품이름 : ".$name;
        echo "상품 값 : ".$value;
    }
    
}
?>

그럼 다음으로 모델에 대해 알아보도록 하자. 모델같은 경우 기본적인 구성방식은 데이터베이스의 자료를 가져오거나 삽입, 삭제, 수정등을 처리하는 함수로 구성되어있다. 모델이라고 해서 뭔가 거대하고, 중요한 역활을 할것같지만, 그런건 전혀 없다.

기본적인 모델의 구성방식

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Database extends CI_Model {

    function __construct()
    {
        parent::__construct();
        
    }
    
    function get_item()
    {
        $query=$this->db->query("SELECT item_val FROM item WHERE item_num=1");
        
        if($query->num_rows > 0)
        {
            return $query->row();
        }
        else
        {
            return false;
        }
    }
    
}
?>

마지막으로 뷰는 가공한 데이터를 보여주는 역활을 한다. 즉 모든 요청을 처리하고 나면, 마지막은 사용자에게 보여주는 역활을 해야하는데 이러한 역활을 뷰에서 담당한다. 쉽게말해 다 완성된 작품을 원하는 위치에 전시해 놓는것으로 비유할 수 있다. 뷰는 기본적으로 아래와 같은 형식으로 사용 한다.

$this->load->view('view_name');

☞ 정리하며..

솔직히 프레임워크 같은 경우, 처음 접하기가 힘들다. 그이유는 PHP를 알고 있어도, 프레임워크는 다른 개발자가 만들어놓은 라이브러리 형태를 가지고 있기때문에, 이러한 방식을 사용하기 위해선 따로 공부를 해야하기 때문이다.

웹 개발자쪽 실무자들은 여러 방식의 프로젝트를 접하면서 수많은 프레임워크등을 다루어 봤을것이다. 어떤 개발자들은 자신이 수많은 프레임워크를 접해보았고, 가장 좋은건 이거다 라고 당당하게 말하곤 하는데, 나같은 경우 솔직히 가장 좋고 가장 나쁜 기준은 없다고 생각한다.

선택의 유무는 개발자 개개인의 몫이지, 무엇이 가장 좋다고 해서 쓰는건 아니라고 생각한다. 프레임워크 같은경우 꼭 정해진 틀에서만 사용하는게 아닌 내부 작동 방식들을 변경하여 사용할 수 있기 때문에, 필요에 따라서 조금씩 수정하여, 더 나은 프레임워크를 만들 수 있다.

마지막으로 가장중요한건, CI의 메뉴얼을 한번씩 읽어 보는것이다. 메뉴얼 같은 경우 기본적으로 영어로 되어있지만, 코드이그나이터 한국사용자 포럼 싸이트를 이용하면 한글로된 메뉴얼을 이용할 수 있다. 물론 현재 기준으로 최신버전인 3.0 은 아직 한글화 된 문서가 없지만, 기본적으로 쓰이는 것들은 똑같기 때문에, 버전이 달라도 사용방법을 이해하는데 있어서 큰 어려움은 없을 것이다.

코드이그나이터 한국 사용자포럼

로또 번호 자동추첨 웹프로그램 소개

Dreamload — Thu, 21 May 2015 18:41:46 +0900

Link : http://www.redinfo.co.kr/lotto

오늘 소개할 시스템은 REDINFO 싸이트에서 제공되는 로또번호 자동추첨 웹프로그램 입니다. 우리가 잘 알고 있는 로또복권! 과연 1등에 당첨될 확률은 몇%나 될까요? 로또를 자주 하시는 분이라면, 로또번호 추첨시 자동과 수동의 차이가 있을까? 라는 고민을 한번 쯤 해보셧을 겁니다.

저도 정확하게 답은 해줄 수 없지만, 제가 하고싶은말은 절대 돈을 주고, 로또번호를 추첨받지 말라는 말입니다. 오차피 로또는 운입니다. 아무리 좋은 로또번호를 추첨받더라도, 그중에서 운이 좋은 사람만이 1등에 당첨 되는 행운을 누릴 수 있습니다.

이처럼 아무리 좋은 로또번호를 추첨받더라도 1등에 당첨되기는 정말 힘듭니다. 다시한번 말하지만 구지 돈을 들여서까지 로또번호를 추첨받을 필요는 없습니다. 그 비용이 한달에 얼마 안된다고 하더라도, 절대 돈을 주고서 까지 로또번호를 추첨받을 필요는 없습니다.

본론으로 들어가 REDINFO 에서는 무료로 한번에 5개씩 추첨을 해주는 로또자동추첨 웹프로그램을 서비스하고 있습니다. 대부분 로또자동추첨은 무료이겠지만, 매주마다 이루어지는 업데이트와, 로또 1등은 아니더라도, 최대한 추첨될 수 있는 확률을 높이기 위해 많은 연구를 하고있습니다.

REDINFO 의 로또 자동추첨 웹프로그램의 기술중 하나는 사람들이 많이 이용할 수록 정보를 수집하여, 더욱더 근접한 확률에 다가서도록 만드는 기술입니다. 아직 테스트 단계에 있지만, 앞으로 더욱더 많은 사람들이 이용함으로 써 꾸준한 연구로, 로또번호의 당첨 확률을 높이는데 힘쓸겁니다.

그럼 많은 이용 부탁드립니다.

YMusic 플러그인 개발중단 안내

Dreamload — Thu, 21 May 2015 18:10:25 +0900

야심차게는 아니지만, 나름 열심히 준비한 YMusic 플러그인 개발이 중단 되었습니다. 그 이유는 테스트 기간동안 사람들의 이용수와, 홍보 인력의 부족했기 때문입니다. 무엇을 만들든 가장 중요한건 홍보와 사람들의 이용수 인것같습니다.

한달 넘게 이용수를 체크해 보았지만, 대부분 모바일 접속이 많았고, PC 접속은 거의 없었습니다. 물론 모바일도 이용이 가능하지만, YMusic 플러그인 자체가 유튜의 동영상을 이용하는것이기 때문에, 모바일에서는 자동재생이 안되는게 흠이였습니다. 아마 모바일에서는 데이터 요금이 무제한이 아닌사람들이 많기 때문에, 막아 놓은듯 하였습니다.

아무튼 YMusic 플러그인 개발은 중지가 되었습니다. 혹시 재밌는 아이디어나, 개발에 관심있으신 분은 맨 아래 메일주소로 관심있는 분야와 설명등을 보내주세요. 실력은 상관없습니다. 웹개발에 관심있는 사람이라면 누구든지 가능합니다. 저또한 아직까지 실력이 많이 부족하기 때문에, 많은 도움을 지원받았으면 좋겠습니다.

그럼 많은 관심 부탁드립니다.

E-MAIL : webmaster@redinfo.co.kr

코드이그나이터를 사용한 CSRF 방어

Dreamload — Tue, 28 Apr 2015 23:21:06 +0900

☞ CSRF 란?

CSRF 란 Cross Site Request Forgery 의 약자로, 간단하게 설명하면, 웹싸이트의 취약점 공격의 하나이다. 자세한 뜻은 위키백과사전에 자세히 나와있기 때문에 그것을 참고하면된다. 솔직히 자기 수준에서 이해할려고 하는게 좋지 전문가의 수준에서는 이해할려고 하는건, 정신건강에 해롭다.

일반적으로 CSRF 는 사용자가 신뢰하고 있는 싸이트의 상태를 노리기 때문에 사용자의 입장에서는 정말 위험한 공격에 노출되어 있는것이다. 다시 말해, 신뢰하고 있는 A라는 싸이트에서 로그인하고, 사용자가 로그인상태에서 B라고 하는 공격자 싸이트 또는 게시물등을 이용하게됨으로 써 공격을 당하게 된다.

앞서 말했다시피 CSRF 같은경우 CSRF 이라는 키워드로 구글링을 하여도 많이 나오기 때문에, 여기서는 깊게 다루지는 않겠다.

☞ 코드이그나이터의 CSRF 방어

코드이그나이터의 메뉴얼에는 폼헬퍼 의 form_open() 함수를 사용하면 폼의 CSRF 보호를 위한 hidden 필드가 자동으로 삽입된다고 나와있다. 하지만 나같은 경우 코드이그나이터의 HTML 과 폼에 관련된 헬퍼함수들은 사용하지 않기 때문에, 문제가 발생하게 된다. 솔직히 코드이그나이터의 HTML 과 폼 헬퍼는 순수 HTML 코딩으로 하는게 편한것같다.

이곳에서는 form_open() 함수를 사용하지 않고 CSRF 방어를 적용하는 방법을 설명하겠다. 일단 아래의 경로처럼 자신의 config.php 파일 이 있는 경로로 이동하여 config.php 파일을 열어보도록 하자. 일반적으로 아래와 같은 경로에 위치해 있다.

application/config/config.php

위의 경로로 들어가 config.php 파일을 열였다면, CSRF 를 사용하기 위한 설정을 해주어야 한다. 설정은 아래와 같은 구문을 찾아 값을 변경하면된다.

<?PHP
/*  CSRF 방어를 사용할지 않할지 설정
|   TRUE : 사용
|   FALSE : 미사용
*/ 
$config['csrf_protection'] = TRUE;

/*  CSRF 토큰의 이름을 설정
|   input 요소의 속성 에서 name 에 해당되는 값이다.
*/
$config['csrf_token_name'] = 'ritn';

/*  CSRF 쿠키의 이름을 설정 */
$config['csrf_cookie_name'] = 'RITOKEN';

/*  CSRF 토큰의 생존기간이다.
|   이 값은, csrf_regenerate 속성이 FALSE 일때만 유효하다.
*/
$config['csrf_expire'] = 1200;

/*  CSRF 토큰의 갱신 설정 
|  TRUE : 사용
|  FALSE : 미사용
|  이값을 TRUE 로 사용하면, 매 요청시마다 토큰값이 변경된다.
*/
$config['csrf_regenerate'] = TRUE;

/*  CSRF 방어에서 제외할 URI 를 배열로 설정
|  ex) http://www.redinfo.co.kr/main/siteinfo
|  url 이 위와 같다면 설정에는 아래와 같이 해주면 된다
| $config['csrf_exclude_uris'] = array('main/siteinfo');
*/
$config['csrf_exclude_uris'] = array();
?>

설정값들에 대한 설명은 코드이그나이터의 메뉴얼에서 설명할려고 했지만, 아직 CI 3.0 메뉴얼을 많이 읽어보지 못했기때문에, 주석으로나마 간단히 작성해 보았다.

설정에서 보면 $config['csrf_regenerate'] 설정 부분이 있을것이다. 이 설정을 FALSE 로 해두어도 공격자가 임의 사용자의 토큰값을 알지 못하기 때문에 매 요청시 새로운 값으로 갱신이 되지 않더라도, 방어를 할 수 있다.

코드이그나이터에서는 CSRF 방어에 사용되는 토큰값을 가져오기위해 아래와 같은 보안 클래스를 재공한다. 각각 클래스들의 설명은 주석을 보면된다.

<?PHP
/* 토큰의 값을 가져온다 */
$this->security->get_csrf_hash();

/* 토큰의 이름을 가져온다 */
$this->security->get_csrf_token_name();
?>

아래의 예제는 jquery의 ajajx 를 이용한 csrf 방어 예제이다. 주제가 코드이그나이터 이기 때문에, 코드이그나이터의 라이브러리 들이 사용이 되었다. 만약 코드이그나이터를 잘 모른다면, 아래의 예제를 이해하기 힘들 수 있다.

application/views/csrf.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>코드이그나이터를 이용한 CSRF 방어 예제</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(e) {
    
    $('#form').submit(function(){

        $.ajax({
                    url:$(this).attr('action'),
                    type:$(this).attr('method'),
                    data:$(this).serialize(),
                    success: function(data){
                    
                    /* ajax 의 결과값을 처리 */
                    $('#ajax_result').html(data);
                    
                    /* csrf 갱신값을 처리 */
                    $('#csrf').val($('#token').data('value'));
                    
                    },
                    error:function(xhr, status, error){
                        
                        /* 에러 출력 */
                        alert('error');
                    }
                    });
        
        return false;
        
        })
    
});
</script>
</head>
<body>
<div id="ajax_result">
</div>
<form id="form" method="post" action="/ajax/test/">
<input type="hidden" id="csrf"  name="<?=$this->security->get_csrf_hash();?>" value="<?=$this->security->get_csrf_token_name();?>"/>
<input type="text" name="text" placeholder="테스트 값을 입력" />
<input type="submit" value="전송"/>
</body>
</html>

application/controllers/Ajax.php

<?PHP defined('BASEPATH') OR exit('No direct script access allowed');

class Ajax extends CI_Controller {

    public function test()
    {
        /* post 로 전송된 text 필드의 값을 출력 */
        echo "테스트값 : ".$this->input->post('text',true);

               /* 토큰값 갱신 설정($config['csrf_regenerate'])이 TRUE 일경우, 요청시마다, 토큰값을
               |  갱신을 해주어야 하기때문에 아래와 같이 레이아웃을 이용하여 데이터에 토큰값을 생성해준다.
               */
        echo "<span id='token' data-value=".$this->security->get_csrf_hash()."></span>";
    }
    
}
?>

위의 예제를 본인의 웹싸이트에 맞게 설정을 하였다면, 테스트시 아래와 같은 결과를 얻을 수 있다. 아래는 텍스트 입력 필드에, ajax 란값을 입력후 전송 버튼을 누른 결과이다.

(위의 예제 실행결과)

CSRF 방어 같은경우 내부적으로 처리되기때문에, 실행결과는 그렇게 중요한 화면이 아닌것같다. 여기서 중요한건 ajax 방식은 페이지 이동이 없기때문에, CSRF 방어를 위한 설정에서 $config['csrf_regenerate'] 값을 TRUE 로 설정하였다면, AJAX의 결과값을 처리할시 다음번 요청을 위해 별도로 CSRF 토큰 값을 갱신해 주어야 한다는것이다.

만약, AJAX 값을 처리할 시 CSRF 토큰값의 갱신이 이루어 지지 않는다면, 다음번 요청시에는 값을 받아볼 수 없을것이다. 하지만, CSRF 방어의 예외처리 상황도 발생할 수 있다. CSRF 방어의 예외처리같은경우 CSRF 설정중에서 $config['csrf_exclude_uris'] 부분을 아래와 같은 형식으로 설정하면된다.

$config['csrf_exclude_uris'] = array('main/siteinfo');

위의 설정에서 array 의 값을 보면, main/siteinfo 라는 값이 설정되어있다. 이값은 코드이그나이터에서 기본 URI 규칙을 사용할 시 적용되는 값들이다. 즉 위의 URI 값은 호스트명을 제외한 uri 값이라고 생각하면된다. 만약 아래와 같은 싸이트 주소가 있다고 가정하면, 예외 처리를 해줄 URI 설정은 위의 설정값과 같이 된다.

http://www.redinfo.co.kr/main/siteinfo

CSRF 설정에서 예외처리가된 URI 들은 CSRF 방어에 대한 영향을 받지 않기 때문에, 자유롭게 코딩할 수 있다. 이 설정은 상당히 유용하다. 그이유는, CSRF 방어가 필요없는 부분에서 항상 사용해야하는 불편함을 없애주기 때문이다.

PHP에서 한글 검사 99.9% 완벽한 알고리즘

Dreamload — Tue, 28 Apr 2015 10:46:08 +0900

전 포스팅에 한글만 검사하는 알고리즘을 올린적이 있다. 그때의 알고리즘은 초창기, 엉뚱한 생각으로 만든 알고리즘이였다. 솔직히, 지금 그 알고리즘을 이용하여 한글검사 알고리즘을 구축하라고 하면, 때려치고 만다. 그 이유는 고생만 하기 때문이다..

한글검사 알고리즘은 여기저기 많이 나와 있지만, 그런 알고리즘은 특문결합이 올바르지 않았다. 뭐, 여러 알고리즘들을 테스트해본건 아니다. 그냥 여기저기 굴러다니는 블로그에 있는 글들을 테스트해 보았다. 대부분 비슷하기 때문에, PHP 한글검사 키워드로 구글링해도 많이 볼 수 있다.

암튼, 결론은 전에 올린 한글검사 알고리즘 포스팅은 깔끔하게 지웠다. 나도 안쓰는걸 다른사람이 보고 쓸일은 없기 때문이다. 또한 이 한글검사 알고리즘이 훨씬 간결하기 때문이다. 여기서 중요한건 100%도 아닌 99.9% 가 된 이유다. 0.1%는 내가 테스트해보지 못해서 생겨날 오류의 확률이다.

이 알고리즘을 사용하기 위해선 아래의 한글파일모음이 필요하다. 그이유는 당연한 소리지만, 한글검사는 모든한글을 가지고 검사하기 때문이다.

아래는 한글, 영문, 숫자 인지 검사하는 알고리즘이다. 뭐 알고리즘이라기 보단 소스코드라는 말이 더 어울리는것같다. 참고로 속도는 보장 못한다!.

PHP 한글, 영문, 숫자 검사하는 소스코드

<?PHP
/* 문자열 */
$langs="사과apple입니다";
/* 모든한글 : db에 저장된 한글파일을 불러오는 구간*/
$klangs=db_klangs;
/* 문자열을 정규식함수를 통해 검사한다.
** (한글,영문,숫자) 인지 검사 
** 일치 : true
** 불일 치 : false
*/
$check_langs=preg_match("/^[".$klangs."a-zA-Z0-9]*$/",$langs); 
?>

주석으로 설명이 되있기때문에, 추가적인 설명은 하지 않겠다. 중요한건 위의 소스코드에서 붉은색으로 된 db_klangs 부분이다. 이부분은 데이터베이스에서 한글문자들이 저장된 데이터를 가져오는 구간이다. 그렇기 때문에, 아래의 포스팅을 클릭하여 모든 한글을 모아둔 파일을 다운로드 받아서 사용하여야 한다.

2015/03/07 - [정보바다/사용팁/다운로드] - 자음 모음을 제외한 모든 한글문자를 모아둔 텍스트파일 다운로드받기

시공간속의 시간에너지 와 뇌의 관계

Dreamload — Fri, 17 Apr 2015 09:27:26 +0900

사람이 시간을 감지하는건 시공간속의 시간에너지 라고 생각한다. 우리몸은 태어나는 순간 시공간속에서 흐르는 시간에너지를 얻게된다. 뇌는 이러한 시간에너지를 감지하고, 시간이 흘렀다는것을 느낄 수 있도록 알려주는 역활을 한다.

우리가 깨어있을때 뇌에서는 시간에너지를 정확하게 read 하고 print 하는 역활을 계속해서 반복하게 된다. 하지만 숙면중에는 뇌의 활동이 다른때보다 약하기 때문에, 정확한 시간을 알 수 가 없다. 즉 제대로된 시간에너지를 감지할 수 없게된다는뜻이다.

컴퓨터로 생각하면 절전모드라고 생각하면된다. 컴퓨터는 장시간 입력이 없을경우 설정에 따라 절전모드로 들어가게되고, 사용자의 입력이 있을 시 다시 정상모드로 돌아오게된다.

그렇다면 컴퓨터에서 사용자의 입력에 해당되는 부분은 무엇일까? 사람은 어느정도 잠을 자면 깨어나게 되는데, 내가 생각하기엔 숙면중에 뇌는 활동을 멈추는게 아니기 때문인것같다.

이러한 현상은 그래프에서 보면 아래의 사진과 같다. 활동중에는 곡선들이 서로 교차하여 일정하게 흐르는 반면 숙면중에는 곡선들이 서로 교차하지 않고, 일정하게 흐르지 않는다.

(시간에너지 감지 그래프)

곡선이 양쪽으로 되있는 이유는 뇌가 시간을 감지하지 못하였을경우 무한루프속에 빠지기때문에, 다음번의 시간에너지가 감지될때까지 계속해서 돌게된다. 이순간에는 사람은 시간이 흐른다는것을 느낄 수 없다.

여기서 내가 말하고싶은건 시간은 인간이 만든 시계와 눈이 감지하는게 아니라 시공간속의 시간에너지를 뇌가 감지한다는 것이다. 우리가 과거를 생각해보면 엊그제 처럼 느껴지는 일들이, 10년 또는 20년이나 된걸 경험 할 수 있다. 그이유는 시간에너지는 일정하게 한쪽으로 만 흐르기 때문이다. 그렇기 때문에, 아무리 과거가 엊그제 같아도, 뇌에서는 시간에너지를 따라 한쪽으로 흐르게 되는것이다.

하지만 실제로 10년 또는 20년의 기억을 엊그제 처럼 기억하는 사람들이 있다. 일반적인 기억력과는 다르다. 우리가 오래된 기억을 자주 말하고 생각하다보면, 그기억이 오랫동안 유지되는것과는 다르게, 모든 사건,감정 등을 전부 기억하고 있는사람들을 말한다. 이러한 사람들이 가진 병을 전문용어로는 기억과다증 이라고 한다.

기억 과다증을 가진사람들은 시간에너지를 감지하는 뇌부분이 손상이 되었을거라고 추측해본다. 즉 정상적인 사람의 경우 시간에너지를 감지할때 한쪽으로만 흐른다고 가정하면, 위의 그래프처럼 계속해서 기억이 가공되고 나아가야 정상적으로 시간이 흘렀다는것을 뇌에서는 감지하고, 불필요한, 기억들을 지우게 되는데, 시간에너지를 감지하는 뇌부분이 손상이 되었다면 뇌에서는 기억의 가공이 없이 저장만 하면서 나아가된다.

즉 뇌에서는 불필요한 정보들이 계속해서 쌓이게 되고, 30년전에 일어난 충격적인 사건을 엊그제 처럼 느껴서, 계속해서 불안감,슬픔,분노,후회,좌절 등을 반복하면서 살아갈 수 있다는 뜻이다. 이처럼 모든걸 다 기억한다는건 정말 불행한 일이다.

이렇게 시간에너지를 감지하는 뇌부분이 손상되었을 경우 기억과다증 뿐만 아니라, 데자뷰 현상, 기억상실 등 여러가지 기억장애들을 불러 일으킬 수 있다.

또한 꿈을 자주 꾸는 사람의 경우도 시간에너지와 밀접한 관계가 있다. 그이유는 인간은 숙면이 시작되면, 뇌에서는 기억들을 정리하게 되고, 이러한 기억들의 조합으로 꿈을 꾸게 된다. 대부분의 사람들은 오늘은 꿈을 안꾸었다고 말하지만, 꿈을 안꾸는게 아니라 꿈을 기억하지 못하는것이다.

그이유는 시간에너지를 감지하는 뇌부분이 숙면중에는 활동을 정상적으로 미약하게 함으로써 기억을 담당하는 뇌부분의 활동에 영향을 주지 않기 때문이다. 그렇기 때문에 꿈을 꾸더라도 기억을 담당하는 뇌부분에서는 그 내용을 지워버리게 된다.

하지만, 꿈을 자주 꾸는 사람의 경우는 이와 반대로 시간에너지를 감지하는 뇌부분이 숙면중에도 활발하게 활동하게되면서 숙면에 문제가 생긴다. 뇌에서는 이것을 방지하기위해 기억을 담당하는 뇌부분에서 우리의 몸이 시간을 감지할 수 없도록 좀더 강한 자극을 주게되는데, 이러한 자극에 기억을 담당하는 뇌부분에서는 꿈의 내용을 정상적으로 지우지 못하게 된다.

뇌는 담당하는 부분에서 문제를 일으키더라도, 자아회복을 담당하는 뇌부분이 있기때문에, 이 자아회복부분만 손상되지 않는다면, 문제될게 없다. 즉 한가지 예로, 어릴때 머리가 영리한 영재들이 나이가 먹고 오랜시간이 지나면, 평균사람과 똑같아 진다는 것이다. 머리가 좋다는건 영재가 아닌, 뇌의 역활을 담당하는 부분중 한부분이 과하게 활동을 한다는 뜻이다.

컴퓨터에서 보면 CPU 나 RAM 또는 GPU 등을 오버클럭한 형태라고 보면된다. 오버클럭한 컴퓨터들은 오랜기간 사용하게 될경우 처음 상태보다 더 느려지거나, 수명이 다해 고장나는게 대부분이다. 될 수 있으면, 오버클럭보단, 컴퓨터의 불필요한 파일을 정리하고, 디스크조각모음을 통해 항상 일정한 속도를 유지해 두는게 좋다.

컵에 담긴 물은 과하면 넘치고 너무 부족하면, 비어 보이듯이, 일정한 패턴을 유지하는게 좋다는 뜻이다.

☞ 미래의 인간

앞으로 인간은 살아가면서 지금보다 더 많은 발전을 할것이고, 더욱 많은 진화를 거듭하여, 미래에는 지금과는 다른 형태의 인간의 모습을 볼 수 있을것이다.

아마도 그게 영화에 나오는 외계인이 아닐까 싶다. 영화에서 외계인의 모습은 대부분 비슷하게 그려지고 있다. 얼굴보다 큰 뇌의 형태와, 비현실적으로 큰눈, 그리고 볼품없는 몸매등이 일반적인 외계인의 모습이다.

이러한 외계인의 모습들을 미래의 인간의 모습이라고 생각해본다면, 아마 인간이 외모와 몸매를 중요시 하여 생겨난 결과물일듯 싶다. 그이유는 먼 미래에 자신의 얼굴과 몸매를 버튼하나로 잠시동안 바꿀 수 있는 기술 이 나온다면, 인간은 얼굴과 몸매 관리를 하지 않게 될것이고 자연스럽게, 영화에 나오는 외계인 의 모습의 형태로 변하지 않을까 생각해본다.

이야기가 조금 이상한쪽으로 흘러간것같다. 암튼 마지막으로 하고싶은말은 인간은 우주에서 가장 신비한 동물이라는것이다. 시공간속에 시간에너지가 존재하고 이 에너지가 없다면, 인간은 존재하지 않게된다. 뇌는 시간에너지에 의해 움직이는데 이 시간에너지가 없다면, 뇌는 더이상 활동을 하지 않을것이고, 영원히 깊은잠에 빠질것이다.

어쩌면 우리의 뇌는 아주 먼미래에 있고, 과거를 그리워하던 미래의 후손들이 컴퓨터등을 이용하여 가상의 시공간을 만들어, 인간이 보고,듣고,말하고 느낄 수 있는 모든 감각을 형성시킨후, 수명이 다하거나, 사고로 지정된 생명이 다하게되면, 뇌에 도달해 있는 시간에너지의 값을 초기화 시키는게 아닐까라는 생각이 든다.

자신에게 주어진 시간에너지 값이 초기화 됨으로써 우리는 아무기억을 못하고 또 살아가게되는것이다. 계속해서... 무한루프에 빠지게 되는것이다.

리눅스에서 ssh 는 사용하고 sftp 는 사용중지 시키기

Dreamload — Wed, 15 Apr 2015 07:40:18 +0900

☞ ssh 는 사용하고 sftp 는 사용중지 시키기 (CENTOS 7)

사실 이방식은 sftp때문에 삽질했던 사람들이 많이 쓸거라고 생각한다. 나또한, sftp 의 chroot 라는 놈한테 굴복하고 말았다. 처음엔 성공한듯 보였으나, 무슨 설정 하나 잘못건들어서 영원히 삽질 속으로 빠지게 되었다. 며칠 고생하고, 생각해보니 굳이 sftp 를 사용할 필요가 없겟다라는 생각이 들었다. 그 이유는 vsftpd 라는 ftp 서버 데몬이 있기 때문이다.

나같은 경우 텔넷 대신 ssh 를 사용하고, ssh 에서 제공되는 sftp 대신 vsftpd 의 ftp 데몬을 사용하도록 구성하였다.

아래는 sftp 만 중지 시키고 ssh 는 사용하는 방법이다. 사실 너무 간단하기 때문에 ssh 설정파일을 많이 안건들었다면, 적용이 될거라고 믿는다. 주의할점은 ssh_config 파일이 아닌 sshd_config 파일이다.

1> /etc/ssh/sshd_config 파일열기

$ vi /etc/ssh/sshd_config

2> 아래와 같이 Subsystem 항목을 주석처리를 해준후 저장

# Subsystem      sftp    /usr/libexec/openssh/sftp-server

3> 아래와 같이 ssh 재시작

$ systemctl restart sshd

위와 같이 설정을 해놓으면 ssh 는 접속이 되지만, sftp 는 사용할 수 없게 된다. 그 이유는 sftp 를 가능하게 해주는 subsystem 항목을 위와 같은 설정으로 주석처리 했기 때문이다. 그렇기 때문에, ftp 프로그램을 이용하여 접속시 아래와 같은 오류가 뜨게된다. 참고로 오류가 뜨는게 목적이기 때문에 아래와 같은 이미지의 오류가 생겼다면 성공한것이다.

(SFTP 접속 에러)

ssh 의 경우는 기본설정을 사용하고 있다면 위의 주석처리만 해놓은 상태에서는 잘 될것이다. 만약 설정을 많이 변경하여, 데몬이 실행이 안되거나 SSH 접속이안된다면, 재설치를 해주는게 좋다. 그 이유는 대부분 삽질로 인하여 막장 설정을 해놓앗기 때문이다. 시간과 정신적인 여유가 된다면 설정을 변경해 보는것도 좋지만, 정신건강을 생각한다면 삭제후 재설치해주는게 좋다.

리눅스에서 vsftpd 사용시 상위 디렉토리 이동을 제한하는 방법

Dreamload — Wed, 15 Apr 2015 06:24:14 +0900

☞ 리눅스에서 vsftpd 사용시 상위 디렉토리 이동을 제한하는 방법 (CENTOS 7)

지금 보게될 셋팅은 CENTOS 7 을 기준으로 작성되었다.

리눅스의 경우 FTP 서버로는 vsftpd 와 sftp 를 많이 사용한다. 하지만 sftp 같은경우 많은이들의 정신건강을 괴롭히는 관계로 사용을 꺼려하는 사람들이 많다. 아직 포스팅은 않했지만, 나중에 시간이 나면 ssh 와 vsftpd 의 사용법에 대해서도 올릴 생각이다. 아래는 vsftpd 설정 방법이다.

1> /etc/vsftpd/vsftpd.conf 파일열기

$ vi /etc/vsftpd/vsftpd.conf

2> 아래와 같은 구문을 찾아서 똑같이 수정

chroot_local_user=YES
chroot_list_enable=YES
chroot_list_file=/etc/vsftpd/chroot_list

각 학목에 대한 설명

chroot_local_user : 루트 디렉토리 이동을 제한 하는 설정이다. 일반적으로 이 값만 YES 로 할 시 모든 사용자는 상위 디렉토리로 이동할 수 없다.
chroot_list_enable : 바로 위의 설정만으로 상위 디렉토리 이동을 제한 할 수 있지만, 그렇게 될경우, 관리자 조차도 상위로 갈 수 없기 때문에, 예외처리 를 하기 위한 설정을 해주어야한다. 이값을 YES 로 할경우 기본적으로 아래의 설정값을 지정해줘야 한다.
chroot_list_file : 이 값을 지정하게되면 지정된 경로의 파일에 예외처리가 될 유저아이디를 설정해 놓아야한다. 대부분 기본값으로 위와같은 경로가 설정이되어있다. 특별한 경우가 아니면 그대로 사용하는게 좋다.

3> /etc/vsftpd/chroot_list 파일 생성하기

$ vi /etc/vsftpd/chroot_list

예외처리할 유저목록 작성하기

유저1
유저2
유저3
유저4
.....

4> vsftpd 재실행

$ systemctl restart vsftpd

혹시 위의 설정 파일을 외부에서 설정하여 내부의 원본파일로 붙여넣기한다면, 조심해야한다. 그 이유는 vsftpd 데몬이 실행이 안될 수 있기때문이다. 또한 설정파일은 다른 곳에 설정된 것들을 모두 가져다가 쓰는게 아닌 필요한 부분만 변경하는 것이 좋다. 그이유는 위와 비슷하다. vsftpd 데몬이 실행이 안될 수 있다. 그러니 항상 설정파일은 bakup 본을 만들어 두고 작업하는게 정신건강에 좋다.

만약 아무이유없이 아래와 같이 vsftpd 데몬이 실행이 안된다면 bakup 파일을 덮어씌워 주거나, bakup 파일이 없을 시 다시 설치하는 수밖에 없다.

(외부에서 파일을 수정할 시 생길 수 있는 오류)

사실 리눅스 같은경우 버전도 많고, 리눅스 전문가가 아닌이상 다루기가 까다롭기 때문에 애초당시 블로그 메뉴에서 제외 시켰었다. 하지만, 앞으로 리눅스를 셋팅하면서 헤매지 않기 위해, 메뉴에 추가시키게 되었다. 뭐 나를 위한것도 있고, 많은 사람들과 삽질의 아픔을 공유하고 싶은것도 있다.

대부분 내가 오류들을 검색하면, 사람들은 나와 같은 마음으로 하소연을 한다. 하지만 그중에서 얄미운 사람이 있다. 바로, 9명이 안되는데 1명이 난 되는데? 하는것이다. 뭐 되는건 좋은데, 확실한 방법을 알려주지 않는다. 혹시나 알려주더라도 그 방법은 전부 해봤던 방법들이다.

또한 어떤 블로그는 방법을 올려놓는척 하면서 마지막에 결국실패하였다 라는 글을 마지막으로 끝낸 경우도 있다. 이럴경우 정말 화난다. 열심히 보고 셋팅했는데, 결국 안된다니?? 그럼 처음부터 방법을 올려놓지 말던가... 암튼 사람의 마음은 똑같아서, 내 글을 읽고 안되는 사람들도 똑같은 하소연을 할 것같다.

위에서도 말했지만, 리눅스는 버전도 많고, 다루기가 까다롭기 때문에, 누군 되고 누군 안되는건 리눅스 종류와 버전의 차이 일 수 있고, 기본설정의 차이 일 수 있으니 그점을 명심하는게 정신건강에 좋을것이다.