웹 애플리케이션 만들기 [라이브러리]

라이브러리 ( Library )

지역에 있는 모든 사람이 A라는 책이 있다고 가정하자.

그럼 같은 책을 모두가 들고 있는 것이 모두를 위한 것일까?

아니다. 인간은 그렇기에 도서관 (Library)라는 것을 만들었다.

도서관은 내가 책이 없어도 그 도서관을 가면 책을 읽을 수 있고 수많은 책을 읽을 수도 있다.

코드에 있어서 라이브러리도 위의 상황과 같다.

중복해서 사용되는 로직을
재사용 할 수 있도록
부품화(모듈화) 시킨 것이다.

그럼 간단한 라이브러리를 한번 만들어 보도록 하자.

 

현재 만들고 있는 JavaScript의 php 파일 중 중복되는 코드가 있다.

그건 바로 DataBase에 접속을 하는 코드인 $conn부분이다.

해당 코드는 index.php , write.php , process.php 3가지 파일에서 중복적으로 쓰이는 코드이다.

그럼 중복을 해결할 파일을 lib폴더를 생성해 db.php라는 파일을 생성해주도록 하자.

db.php에 들어갈 부분은 다음과 같다.

  $conn = mysqli_connect('localhost','root','111111');
  mysqli_select_db($conn, 'opentutorials');

이렇게 각 파일에 중복되는 부분만 lib폴더의 db.php에 php코드로 가져왔다.

그리고 원래 코드가 있던 부분에는 require을 사용해서 db.php 파일을 가져와야 한다.

require("lib/db.php");
$result = mysqli_query($conn, "SELECT*FROM topic");

이렇게 require로 가져온 파일은 그 파일 안의 내용이 마치 require이 있는 위치에 있는 것처럼 실행된다.

하지만 이것을 두고, 라이브러리라고 하기는 민망하다.

이것은 그냥 코드의 중복을 해결한 것이지, 라이브러리가 될 수는 없다.

그렇다면, 저기 db.php 파일의 두줄의 코드를 한 줄의 함수로 만들어보자.

function db_init(){
  $conn = mysqli_connect('localhost','root','111111');
  mysqli_select_db($conn, 'opentutorials');
  return $conn;
}

이렇게 db_init이라는 함수로 원래 코드를 감싸주고, 출력 값으로 $conn을 출력하게 한다.

require("lib/db.php");
$conn = db_init();
$result = mysqli_query($conn, "SELECT*FROM topic");

그리고 기존에 코드에 이렇게 $conn = db_init();을 하게 되면,

우리는 db.php을 하나의 php 파일에서 db_init을 통해 여러 번 DataBase 들어가는 코드를 사용할 수 있다.

또한 함수의 코드가 만약 2줄이 아닌, 100줄 1000줄이 될 때는 그 효과를 더욱더 볼 수 있다.

하지만, DataBase에 접속하는 아이디와 패스워드가 꼭 root나 111111이라는 보장은 없다.

그렇기에 아이디와 패스워드가 함수안 정적으로 저렇게 있을 경우,

재활용성이 매우 떨어지는 코드가 될 수도 있다.

그렇기에 변수를 사용해 바뀔 수 있도록 만들어야 한다.

function db_init($host,$duser,$dpw,$dname){
  $conn = mysqli_connect($host,$duser,$dpw);
  mysqli_select_db($conn, $dname);
  return $conn;
}

이렇게 매개변수로 만들고, db_init을 호출할 때 인자 값으로 원하는 값을 입력하면 된다.

하지만 이렇게 코드를 변경 시, 또 골치 아픈 중복이 발생한다.

index.php, write.php, process.php에서 db_init을 호출할 때 똑같은 아이디와 비밀번호로 로그인을 하면서,

계속 호스트 이름, 아이디 이름, 비밀번호 이름, DB이름이 있다는 것이다.

그렇기에, 이런 중복 또한 제거해줄 필요가 있다.

config라는 폴더를 만들어, conpig.php 파일을 만들어 주도록 하자.

conpig.php 파일의 내용은 다음과 같다.

<?php 
$config = array(
  "host" => "localhost",
  "duser" => "root",
  "dpw" => "111111",
  "dname" => "opentutorials"
);
 ?>

이렇게 $config라는 변수에 배열의 형태로 호스트, 아이디, 비밀번호, DB이름을 담아주었다.

그리고 index.php, write.php, process.php에서 config를 requir 해주면 된다.

<?php
require("config/config.php")
require("lib/db.php");
$conn = db_init($config["host"],$config["duser"],$config["dpw"],$config["dname"]);
$result = mysqli_query($conn, "SELECT*FROM topic");
 ?>

그리고 db_init의 인자 값으로 config안의 key들을 넣어주면 된다.

이렇게 만들어 주게 되면, 단 한 번의 변경으로 모든 php 파일에서 적용이 된다.

이렇게 requir을 통해 파일을 분리하고 적용하며,

분리한 파일 안에 함수를 만들어 보다 편리하게 사용하는 것을 알게 되었다.

 

TwitterBootstrap

위에서는 직접 라이브러리를 간단하게 만들었다면,

다른 사람이 만든 라이브러리를 사용하는 것이 더 중요하다고 볼 수 있다.

twitterbootstrap의 홈페이지는 다음과 같다.

Bootstrap

이 bootstraop 웹사이트를 창모드로 해서 천천히 줄이다 보면 카테고리가 사라지고,

점 3개가 나오면서 UI가 변경되는 부분이 있다는 걸 확인할 수 있다.

 

왼쪽은 전체화면, 오른쪽은 창모드 작게 했을때

이렇게 웹 페이지 안의 내용이나 카테고리 등이 사용자의 환경에 맞게 변경이 된다.

이러한 것을 TwitterBootstrap을 통해 현재 만들고 있는 JavaScript에도 적용을 해보자.

TwitterBootstrap의 사용법이 아닌, 라이브러리의 중요성을 알기 위함이므로,

생활코딩에 있는 구버전(3.3.4v)을 다운로드하였다.

다운로드한 bootstrap을 htdocs폴더에 압출을 해제한다.

그리고 bootstrap의 Gettin started의 Basic template을 확인한다.

위 로직은 TwitterBootstrap의 기본적인 골격이다.

위 기본 골격과 여러 가지 TwitterBootstrap의 라이브러리를 사용하여 변경된 것은 다음과 같다.

기존 JavaScript 메인 페이지 (index.php) , 기존 JavaScript 글 쓰기 페이지 (write.php)

변경 JavaScript 메인 페이지 (index.php) , 변경 JavaScript 글 쓰기 페이지 (write.php)

이렇게 TwitterBootstrap을 사용하여 얼마나 혁신적으로 레이아웃과 디자인이 바뀐 지 확인할 수 있다.

여기서 중요한 것은 Library가 얼마나 중요한지를 TwitterBootstrap을 통해 느껴야 하는 것이다.

---

출처: [생활코딩]웹 애플리케이션 만들기