Ainsetin's Story

이번 프로젝트의 마지막 개발일지가 될듯 싶다. 1학기때는 로그인과 회원가입이 우선이었다면, 2학기때는 동적으로 작동하는 사이트 제작에 목표를 두었었다. 이번 1달 동안 드디어 CTF 카드 페이지를 동적으로 만드는데 성공하였다. 가장 먼저 수정했던 것은 "관리자만 카드를 추가할 수 있게끔 하는 것" 이었다. 그래서 DB에 관리자 리스트를 따로 만들어 로그인 직후 그 리스트 안에 자신의 ID가 있으면 관리자로 인식되게끔 하였다. SESSION의 level 값도 추가하여 1은 guest, 2는 admin으로 동작하게 하였다. 아래와 같이 코드를 작성하여 메인 header에서 나타나는 글자를 일반 유저와 관리자로 구분하였다. 카드가 나오는 find.php 페이지는 다음과 같이 로그인이 되어 있고 level이 2..

전에는 카드의 내용 9개를 전부 html에 정적으로 삽입한 다음, 단순히 불러오는 방식으로 웹페이지를 구현하였는데, 카드를 추가한 후에 동적으로 카드가 생성되도록 만들기 위해 find.php의 코드를 수정해 보았다. 처음에는 아래의 사진과 같이 9개의 카드가 코딩되어 있는 것을 알 수 있다. 각각의 id에 맞춰서 미리 저장되어 있던 내용을 팝업으로 출력시키는 방식으로 코딩을 했는데, 이번에는 DB에 저장되어 있는 idx를 이용해서 하나의 div를 여러 개 자동으로 만들어주게끔 php 코드를 작성하였다. 간단하게 말하자면, DB와 연결 후 search 파라미터가 설정되지 않았을 경우 모든 카드를 SELECT문으로 가져오고, mysqli_fetch_array로 데이터를 하나씩 가져와서 html에 출력해 주는..

1. 동적 사이트를 위한 웹 서버 이전 과정 저번까지는 localhost server를 이용하여 LAN 상에서만 사이트를 접속할 수 있었지만 사이트를 동적으로 만들겠다는 계획에 따라 개인 서버에 웹 서버를 구축하였다. 서버는 ubuntu 18.04에서 구축하였으며, 윈도우에서만 웹 서버를 설치해봐서 리눅스에서는 권한 문제나 패키지 설치 오류 등 다양한 에러에 시달렸지만, 결국 전처럼 php가 제대로 동작하게 만들었다. 내가 만든 웹 서버의 환경은 다음과 같다. nginx/1.14.0 데이터베이스 클라이언트 버전: libmysql - mysqlnd 5.0.12-dev - 20150407 - $Id: 3591daad22de08524295e1bd073aceeff11e6579 $ PHP 확장: mysql PHP..

계속 개발에 몰두하고 완벽하게 마무리하기 위해서 개발 일지를 잠시 미뤄뒀는데, 이제 지금까지 한 것을 총정리 해야 할 것 같아 작성하게 되었다. 우선 지금까지 만든 나의 사이트의 모습을 사진으로 모아봤다. 지금까지 보여준 사진은 한달간의 개발 일정을 마치고 1차 완성을 한 나의 Subhack의 모습이다. 원래는 배경이 회색이었는데, 글씨가 잘 부각이 되지 않는 것 같아 작정하고 어두운 우주를 배경으로 하고 글씨색을 밝게 하기로 마음먹었다. 원래는 채팅까지 만들 생각이었지만, 깊지 않은 나의 웹개발 관련 지식으로는 구현하기 어려워 2학기때 완성하기로 결정하였다. 자, 이제 각 페이지를 구현하기 위해 공부한 것은 무엇인지, 이를 바탕으로 구현은 어떻게 했는지, 그리고 웹 호스팅은 어떻게 했는지에 대해 설명하..

거의 한 달 만에 다시 웹 개발 일지를 쓰는 것 같다. 사실 시험기간이기도 했고 막상 개발을 하려고 하니 이것저것 찾아보면서 해야 하더라. 구글링 한 시간을 합치면 몇십 시간은 될 것 같다. 아무튼, 지금까지 완성한 사이트의 모습을 한번 끄적여보겠다. 일단, 8일차에 github student pack과 개인 도메인을 구입한 것을 바탕으로 꾸준히 github에 commit 과정을 거쳐 사이트를 만드는 중에 있다. 지금까지 구현한 화면의 파일은 index.html, login.html, 각종 css, js (and jquery)까지 포함해서 유기적으로 돌아가도록 작성하였다. github에다가는 총 26번의 commit(그날그날 한 내용을 github에 적용시켜 나의 사이트에도 적용될 수 있도록 하는 것)을..

오늘부터 최대한 빠르고, 깔끔하게 웹개발을 본격적으로 시작해 보려고 한다. 우선 내가 전에 만든 파일들을 github 무료 웹 호스팅을 통해 띄우기 위해 github desktop과 git을 설치하였다. 그리고 나의 프로젝트 폴더에 있는 내용을 clone해서 로컬 파일에서 github로 연동할 수 있도록 만들었다. 전에 vscode와 github로 나만의 블로그를 만든 적이 있어서 수월하게 웹 호스팅에 성공하였다. 웹사이트 주소가 "bww9641.github.io/프로젝트 이름"으로 연동이 잘 된 것을 볼 수 있다. 또한 지금 나의 github 저장소는 용량이 몇기가가 안되기 때문에 github에서 학생에게 제공하는 school development pack을 dimigo 학교 계정으로 신청하여 무한으로..

음... 오늘은 응프화 수업에서 HTML 태그 실습을 열심히 하는 바람에 스토리보드 작성 시간이 몇 분 없었는데, 어제 못했던 채팅 페이지를 간단하게 그려봐야겠다.. 접속자 명단에는 현재 총 접속자 수와 Beginner인지 아닌지 닉네임 옆에 표시하도록 할 것이다. 그리고 CTF나 각종 대회 검색창을 연결해주는 버튼을 반들 것이다. 채팅 내용은 모두 왼쪽 정렬로 할 것이고, 내가 적은것만 색깔이 다르게 되도록 만들 것이다. 채팅 화면은 구현할 수 있지만, 이제 서버 연결을 어떻게 할지 고민해 봐야겠다...

벌써 웹개발 일지 6일차다. 생각해보니까 4월 초부터 시작해서 지금까지 열심히 달려왔더라. 아무튼 시작해보자. 오늘은 스토리보드 작성을 다시 해보았다. 각종 대회나 open CTF 추천 페이지와 채팅 페이지가 내 웹페이지의 전부이다. 구체적인 기능은 일단 놔두고, 간단하게 그려보자. 이렇게 CTF나 대회가 처음에 등록한 순서대로 나열되어 있으면, 자신이 원하는 카드를 찾을 수 있고, 추가로 검색 필터를 채택하여 난이도별, 항상 열려있는 CTF인지 아닌지를 기준으로 삼을 것이다. 난이도를 잘 볼 수 있도록 각 카드에 추가하는 것도 생각해 봐야겠다. (근데 적고 나니까 CTF가 대표적인 해킹 관련 대회인데 굳이 저렇게 써야될까 싶다...) 그리고 "NEW"라는 버튼을 누르면, 계정이 있는 사람이 원하는 CT..

오늘은 잠시 스토리보드를 접고 직접 화면을 구현하는 시간을 가져보았다. 그런데 sublime text 3는 내가 원하는 개발 환경이 아니라서 visual studio code를 설치하여 초기 개발 환경을 구축하였다. 구글링을 통하여 열심히 기초 개발 환경에 대한 블로그나 공식 문서를 많이 보고 직접 따라해봤다. 생각보다 확장 프로그램을 많이 깔아야 해서 시간이 오래 걸렸다. 이후에 크롬에서 F12를 눌렀을 때 sources에서 본 웹페이지 형식을 그대로 따라하기 위해 css, js 폴더를 프로젝트 폴더에 배치하고 index.html을 생성하였다. index.html에는 처음에 그렸던 사이트 소개 페이지를 넣을 예정이었다. 그러나 아직까지 HTML 활용법에 대해 아는게 별로 없어서 우선 맨 위의 고정바를 ..

저번 주에 응프화가 있는 수업 시간이 어린이날이어서 오랜만에 웹개발 일지를 써본다. 선생님께 매 수업 시간마다 써야 하냐고 물어봤더니 좋은 아이디어나 공부할 수 있는 시간이 충분하다면 그때 써도 괜찮다고 하셔서 이제 열심히 써야겠다. 아무튼, 오늘은 회원가입 페이지에 대한 스토리보드 구상을 해보았다. 구상하고 나서, 생각보다 깔끔한 것 같아 좋았고 입문자와 아닌 사람을 구분하여 계정을 생성하는 것은 추후에 사이트를 운영할 때 확실히 도움이 될 것이다.