꼬마선원의 개발일지 1주차

By ccoma | August 14, 2018


7월 어느날 새벽 1시 30분, 사무실.



요즘 회사에서 내가 하는 업무는 개발이다.

문제 만들기 이런거 아니고 정말 개발을 하고 있다.

해킹보안 회사에서 뜬금포로 왜 개발을 하고 있느냐면…

Hacking on Lucy(HoL)라는 해킹 교육 플랫폼을 만들고 있기 때문이다.


사실 컴퓨터 분야에 교육 플랫폼은 다양하게 있지만, 해킹 교육과 관련된 플랫폼은 매우 적다.

나도 그렇고 주변에 물어봐도 그렇고, 해킹에 입문할 때 주로 인터넷 블로그와 워게임 사이트를 사용한다.

내 경우에는 내가 컴퓨터 지식이 전무한 상태 혹은 C언어, JAVA 언어 코딩만 겨우 할 줄 아는 상태여서 그런건지, 어지간한 워게임 사이트는 풀기 어려웠다.

쿠키가 뭔지 세션이 뭔지도 모르는데 쿠키 변조를 어떻게 할 것이며, 쿠키 변조를 하기 위한 확장 프로그램이 있다는 사실을 어떻게 알 수 있을까.

그래서 주변 선배들에게 물어보거나, 인터넷 블로그의 풀이를 찾아보며 공부할 수 밖에 없었다.

그런데 이런 공부법에는 단점이 있다.


  1. 나는 궁금한 것도 모르는 것도 많지만 선배들은 바쁘기 때문에 자유롭게 묻기가 어려웠다.

  2. 인터넷 블로그의 경우 잘못된 정보도 많고 대부분 풀이가 다 동일하다. 문제를 풀며 생기는 궁금점을 해결하기 위해서는 또 인터넷 블로그를 참조했는데, 이때도 대부분 설명이 다 똑같기 때문에 내가 가진 궁금증을 확실하게 해결할 수 없었다.

  3. 어느정도 시간이 지나면 뭘 어떻게 공부해야 하는지를 모르겠다. 정확히 말하면 내가 모르는게 무엇인지를 몰라서 내가 뭘 공부해야 실력이 늘지를 모르겠다.


이런 문제점 때문인지 해킹 공부에 흥미를 잃었었고, 몇 년 동안 실력은 제자리 걸음이었다.

(사실 지금도 실력이 늘었는지는 잘 모르겠다. 아직도 모르는거 천지인 찌랭이라…)


Hacking on Lucy(이하 HoL)는 이런 필요성에 의해서 탄생하게 되었다.

HoL을 처음 기획할 때 몇 가지 필요조건을 걸었다.


  1. 해킹/보안과 관련 해 학습 효과가 뛰어날 것
  2. 내용이 유혹적이어야 함
  3. Flexible 해야 함


정말 고민을 엄청 많이 했었다.

(일주일에 2~3번은 꼭 HoL 관련 꿈을 꿨다.ㅠㅠ)

기획 단계만 몇 달이었고, 그 사이에 까인 기획안만 몇 개인지 모르겠다.

그러다 드디어 아직 미흡한 아이디어이지만 이를 현실화 하기 위한 개발 단계로 들어갔다.

처음 큰 서비스(?)를 기획하고 만드는 만큼, 이 과정을 그냥 보내기에도 아쉽고 좀 체계적으로 관리 할 필요가 있는 것 같아 매 주 개발한 내용을 자유롭게 기록하려 한다.



개발 준비

HoL은 웹을 기반으로 제공하는 서비스로 기획했다.

때문에 일단 삐그덕 거릴지 몰라도 사용자가 사용 할 웹 어플리케이션의 프로토 타입을 먼저 만들기로 했다.

나는 디자인은 정~~~말 잼병이기 때문에 우리 회사의 만능 디자이너 cong님의 도움을 받았다.

프로토 타입 UI는 이렇게 만들어 졌다.


Prologue Page


Main Page


Challenge Page


Mypage


Admin Page


정말 디자이너님 존경합니다

디자인이 완성 되었으니 이제 내가 기능을 구현 할 차례이다.


일단 가상 머신을 구축해서 구현을 시작하였다.

개발 환경은 아래와 같다.


Ubuntu 16.04
PHP 7.0 + apache2 + Mysql (Maria DB로 이름이 바뀌었다더라)
Laravel 5.5 Framework


나는 깡 PHP 코드로 이정도 규모의 서비스를 구현하기에는 어려운 점이 많다고 판단 해 Laravel Framework 를 사용하기로 했다.

Laravel은 PHP를 기반으로 하는 웹 개발 프레임워크로, Taylor Otwell과 커뮤니티 회원에 의해 개발되었다.

많은 웹 서비스에서 사용하고 있어(op.gg도 laravel을 사용한다.) 조사를 좀 해봤는데 장점이 매우 많은데, 그 중 내가 Laravel을 선택한 이유는 3가지 이다.


  1. MVC(Model-View-Controller) Model 지원
  2. 유연한 Database 지원
  3. 보안을 고려한 설계


Laravel을 사용하기로 선택하고 나서부터 바로 개발을 시작했다.



삽질의 시작

나는 주로 라라벨 한국어 커뮤니티와 라라캐스트를 참고하고 있다. (아 플러스 구글링…)

라라벨에 Apache2를 사용하다 보니 설정해야 할 것들이 많았다.


1. 설치하기

apt-get -y install apache2  
apt-get -y install php libapache2-mod-php php-xml php-gd php-mysql php-zip php-mbstring  
apt-get -y install mysql-server mysql-client


2. Composer 설치하고 설정하기

curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin/  
sudo ln -s /usr/local/bin/composer.phar /usr/local/bin/composer  
composer create-project --prefer-dist laravel/laravel blog "5.5.*"  
chown -R www-data:www-data /var/www/html/hol  
chmod -R 755 /var/www/html/hol/storage


3. etc/apache2/sites-enabled/000-default.conf

DocumentRoot "/var/www/html/hol/public"
<Directory /var/www/html/hol/public>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>


4. service apache2 restart

이렇게 하면 이쁜 Laravel 메인 페이지가 나온다.



여기까지 며칠을 삽질했는지 모르겠다 ㅠㅠ

누가 라라벨 쉽다했냐 부들부들



본격적인 삽질 시작

프로토 타입 완성까지 해야 하는 내용은 다음과 같다.


  1. 모든 페이지 Routing
  2. 로그인/로그아웃
    > 2-1. 로그인 한 계정에 따라서 Admin / Main 페이지 띄우기
  3. 코스 및 단계 리스팅
  4. 단계 클릭 시 문제 페이지로 이동 후 정보 출력
  5. 내 정보 확인
  6. (Admin 일 경우) 내 그룹 정보 확인


간단하게만 나열하면 이정도이다.

현재는 3번까지 완성 된 상태이다.

라라벨을 처음 사용하는거라 초반에 구조를 파악하는데도 매우 오래걸렸고, 로그인이나 디비에서 값 추출하기 등은 라라벨 내에서 구현되어 있는 함수가 있는데, 그 함수를 찾기도 어려웠다.

여기까지 개발을 하며 알게된 점이 매우 많았다.


  • artisan은 잘쓰면 매우 좋다.
    • php artisan 명령어를 사용하면 데이터베이스를 마이그레이션 할 수 있는 파일이 생성되고, 마이그레이션 파일을 사용 해 테이블을 손쉽게 만들 수 있다.
    • 또한 model, controller 파일도 만들 수 있다.


  • 네이밍만 정확히 한다면 MVC + database까지 따로 설정 없이 연결된다.
    • 만약 Controller가 UserController.php라면, Model은 User.php여야 하며, 데이터베이스 마이그레이션 파일은 create_users_table.php로, table은 users로 생성해야 한다. (s 주의!)


  • 데이터베이스에서 값을 추출할 때 select * from users; 등의 쿼리문을 사용할 필요가 없다.
    • Model만 제대로 된 이름으로 생성했다면 App\User::all(); 이라는 한줄로 users 테이블의 모든 값을 추출할 수 있다.
    • 기타 다른 조건을 추가 한 쿼리도 실행할 수 있다.


  • View를 구현하기가 간편하다.
    • layout.blade.php 형태로 파일을 생성하면 include('layout') 형태로 사용할 수 있고, section을 지정해 특정 위치에 특정 레이아웃이 들어가도록 할 수 있다.
    • {{ some php code }} 형태로 php 코드를 실행할 수 있다.
    • 그래서 블로그 포스트 리스트 등 같은 레이아웃을 사용해야 하는 경우 다음과 같은 형태로 구현할 수 있다.
@foreach ($posts as $post)
    <h1> {{ $posts->title }} </h1>
    <p> {{ $posts->bosy }} </p>
@endforeach


  • 로그인, 로그아웃 처럼 보편적으로 사용하는 기능은 미리 구현되어 있다.
    • 아무런 조건이 없다고 가정한다면, 로그인, 로그아웃 소스코드가 20줄도 안되어 구현이 가능하다.
    • 물론 SQL Injection 등의 보안 기능은 기본적으로 제공한다.
public function login(Request $request) { 
	if(!auth()->attempt(request(['id', 'password']))) {
		return back();
	} else {
		return redirect("/main");
	}
}

public function logout() {
	auth()->logout();
	return redirect("/");
}


  • 사용자가 보는 페이지는 모두 web.php에 정의되어야 한다.
  • 특정 페이지에 접근하려면 라우팅을 해 주어야 한다.
  • 만약 main layout 페이지를 기본 페이지로 보여주고 싶은 경우 다음과 같은 형태로 구현할 수 있다.

  • (1) in web.php
Route::get('/', 'IndexController@index');
  • (2)in IndexController.php
public function index() {
	return view('main'));
}


  • (3) in main.blade.php
<h1> Hello World! </h1>


위에서 내가 오늘까지 개발한 내용은 3가지라고 했었다.


  1. 모든 페이지 Routing
  2. 로그인/로그아웃
    2-1. 로그인 한 계정에 따라서 Admin / Main 페이지 띄우기
  3. 코스 및 단계 리스팅


사실 Routing 부분은 쉽게 할 수 있었다.

프로토 타입이기 때문에 페이지가 많지도 않았고 코드가 굉장히 명확했기 때문에 알아보기 쉬웠다.

다만, 커스터마이징 한 css와 js 파일을 어디에 넣어야 사용할 수 있는지가 알기 어려웠다.
라라벨을 처음 설치하고 보면 css 파일이 여기저기에 있다.

그래서 나도 여기에도 넣어보고, 저기에도 넣어보고 하며 디렉토리를 찾을 수 있었다.


URL을 통해 직접 접근해야 하는 파일은 public 디렉토리에 넣으면 된다.

그러면 public 디렉토리를 최상위 디렉토리로 하여 파일에 접근할 수 있다.

근데 다 찾고나니 처음에 설정파일에서 DocumentRoot "/var/www/html/hol/public" 라고 적은게 기억났다…

다시 한 번 나는 바보임을 깨달을 수 있었다.

역시 머리가 나쁘면 몸이 고생함…


진짜 문제는 로그인/로그아웃 부터였다.


  1. user 데이터베이스가 필요한데 이를 어떻게 만들어야 하는가
  2. 데이터베이스에 접근하기 위해서 어떻게 해야 하는가
  3. 인자는 어떻게 받아야 하는가
  4. admin인지 아닌지 검사하는 함수가 필요한데, 로그인 뿐만 아니라 다른 곳에서도 사용해야 하는데 어디에 구현해야 하는가


…

글로 써놓으니 진짜 별거 아닌데…

왜 이딴걸 고민하나 싶을 정도임ㅋㅋㅋㅋㅋ

개발 시작했는데 여기에서 막혀서 진짜 자괴감 쩔었었다.

나름 컴퓨터공학과 졸업생인데… 나 공학인증 심화과정 졸업생인데…

로그인 기능 하나 구현하지 못하다니…

회사에서 일하다가 뛰쳐나가서 대낮부터 술마시고 싶었다.


탈출하고 싶은 마음을 부여잡고 또 부여잡아서 어찌어찌 해결은 했다.

1, 2, 3의 문제점은 라라캐스트의 강의를 들으며 해결할 수 있었다.

4번은 구글링을 했는데, Trait을 사용했다.

Helper라는 이름으로 Trait라는걸 만들고, 그 안에 관리자인지 검사하는 is_admin 함수처럼 여러 컨트롤러에서 사용해야 하는 함수를 구현했다.

그후, Helper를 컨트롤러에서 호출하면 Helper 내에 구현 한 함수는 자유롭게 사용할 수 있다.


이렇게 로그인/로그아웃은 해결할 수 있었다.

그 다음은 코스 및 단계 리스팅였는데, 여기에서도 너무 오랜 시간 삽질을 했다.

여기서 고민했던 것들은 다음과 같다.


  1. 데이터베이스에서 모든 값을 어떻게 추출 할 것인가
  2. 컨트롤러에서 데이터베이스의 값을 추출하고, 그 값을 view로 어떻게 전달 해야 하는가


진짜 다시봐도 하찮은 내용으로 고민했다.

근데 더 화나는건 지금도 저런 수준의 하찮은 내용으로 고민하고 있음…


사실 데이터베이스에서 모든 값을 어떻게 추출하는지는 또 다시 라라캐스트에서 찾을 수 있었다.

무려 여기까지 와서야 파일들의 네이밍 규칙이 있어, 이 규칙대로 해야 서로 제대로 연결(?) 된다는 것을 알았다.

문제는 두 번째 였다.

코스와 단계를 출력하는 부분은 view에서 하는데 view에서 디비에서 값을 추출하는 코드를 짜버리면 MVC로 짜는 의미가 없다.

따라서 Controller에서 값을 추출하고, 그 추출한 값을 view로 전달 해 주어야 한다.

근데 view는 html로만 이루어져 있어서 뭐 인자를 받고 자시고 할 수가 없다.

변수가 있으면 $variable->name 이런식으로 호출은 할 수 있지만, 뭐 함수를 호출하고 하기는 어렵다.


찾아보니 compact라는 게 있었다.

컨트롤러에서 view를 호출 할 때, 아래와 같이 변수를 선언하고 인자로 전달 해 주면 그 변수를 view에서 사용할 수 있다.


Controller

$post = App\Post::all();
return view('main', compact('post'));


View

@foreach ($post as $b)
<h1> $b->name </h1>
<p> $b->body</p>
@endforeach


적어놓고 보니 며칠을 고민한 거 같은데 내용이 정말 없는 것 같다.

사실 처음에 이 내용 짜야한다고 했을때 이틀이면 짜겠지 뭐 생각했다.

이틀이라고 잡은 것도 중간에 다른 업무가 있어서 그렇게 잡은건데 여기까지 밖에 못할줄이야… ㅎㅎ

덕분에 라라캐스트 강의 열심히 듣느라 영어 듣기 실력이 늘고 있다.

이거 끝나면 토익 성적 만료일 것 같은데 토익 시험이나 보러 가야겠다.

그런데 다시 첨으로 돌아가도 내가 지금 짠 코드 없으면 다시 구현 못할것같다. ㅎㅎㅎㅎ

누가 라라벨 쉽고 이해하기 쉽다고 했냐



삽질일기 1편의 끝

개발 일지는 쓰긴 해야겠는데, 무슨 내용을 써야 할지는 모르겠어서 그냥 편하게 일기 쓰듯 적어 내려갔다.

(정작 일기는 초등학교 이후로 안씀)

내가 고민 한 내용, 이것저것 시도 해 본것, 알게 된 것을 적어보려 했는데, 시도해 본 것은 적지 못했다.

그래서 그런가 별로 고민을 안한 것 같다.

뻘짓 같아 보이는 삽질에 대해 변명을 해 보자면 자아성찰 시간을 너무 오래 가졌다 라라벨은 php 언어 기반이라 언어 측면에서는 크게 어렵지는 않다.

다만 프레임워크이다 보니 이미 구현되어 있는 기능들을 활용하고 싶은데, 이를 어떻게 찾아야 할지도 모르겠고 공개되어 있는 예시 코드가 별로 없다.

그래서 참고할 자료가 적고, 자세한 설명을 들으려면 동영상 강의가 제일 좋은데 얘는 시간을 너무 오래 잡아먹었다.

방법을 찾고 나니 진짜 별로 어렵지는 않다 이딴걸로 고민한 내가 한심할 뿐…

아마 저 남은 기능은 여태까지 삽질 한 내용에서 크게 벗어나지 않아 오래 걸릴 것 같지는 않지만 그 다음 기능부터 구현하려면 시간을 넉넉하게 투자해야 할 것 같다.

화이팅…

comments powered by Disqus

Search

Categories

Tags