Ainsetin's Story

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 활용법에 대해 아는게 별로 없어서 우선 맨 위의 고정바를 ..

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

오늘은 스토리보드 작성을 이어서 하였다. 간단하게 메인 화면을 전에 구상하였기 때문에 그 화면을 구현하는 것을 우선으로 하고 싶었지만, 전반적인 틀을 마무리 해야 하므로 웹페이지의 개수는 얼마나 할지 먼저 생각해 보았다. 우선 index.html 파일에 메인 화면을 구성할 것이고, login과 탭에 대한 스토리보드를 작성하였다. 로그인 탭은 많은 것이 필요 없다고 생각하여 Subhack에 대한 간단한 설명과, ID와 PW를 넣는 칸의 공간을 반으로 분리하여 구상하였다. 로그인 세션 유지 체크박스와 비밀번호 찾기 등의 기능을 제공할 예정이다. 조만간 내가 원하는 도메인을 사야 할 것 같고, 그 전에 기본적인 틀은 직접 구현해서 연결해야겠다.