애플리케이션 만드는 순서
_구상
무엇을 만들 것인가
_기획(계획)
구상을 바탕으로 세부적인 실행 계획을 세워가는 단계
'무엇을 만들 것인가'를 보다 분명하게 정의하고 또 어떤 기능들이 존재하고 어떤 사용성을 가져야 하는지 정의
_디자인
웹사이트를 아름답게 보이게 하는것
사용자가 편리하도록 편의성 향상시키도록 하는것
_개발(프로그래밍)
실제 서비스가 동작하도록 하는 일
_테스트
버그 찾는일
놓쳤던 부분 찾는 일
- 위 과정이 꼭 순서대로 이루어지는것은 아님
- 구상~테스트까지 과정 계속 반복
- 잘 만들기 위해서는 start small!
처음부터 작게 만들어서 끊임없이 개선하라
- 개발은 복잡하기때문에 작은 것이라도 완성하는것이 가장 중요하다
- 사용자들이 활동하는 과정에서 생겨나는 여러가지 필요들 또는 여러가지 문화들을 잘 뒷받침해주는게 좋은 접근방법이 아닐까
- 처음부터 모든 기능을 만들기보다는 최소한의 기능으로 시작해서 필요하다고 생각하는 기능은 신중하게 추가하는게 좋은 접근방법이 아닐까2
- start small하게 시작하자
- 구상 -
크크크 전략
- 기획 -
기획 단계에서 - UI 모델링 - 사용자의 입장에서 동작하는 기능을 가상으로 만들어 보는 것.
모델링을 하는 방법
1. 손그림 ( 가장 간단하고 손쉽게 할 수 있음)
2. Pencil Tool을 사용
- http://pencil.evolus.vn/ (다운로드)
- https://opentutorials.org/course/221/1416 (강좌)
3. 파워포인트 (소프트웨어 기획)
- 인터넷과 웹의 역사 -
웹(W3이라고도 부른다)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이다.
HTML이라는 언어로 작성한 문서를 이 웹에다 모아놓으면,
사용자는 링크를 통해 연결된 문서로 이동해가며 원하는 정보를 찾을 수 있다.
이러한 문서를 흔히 '웹 페이지'라고 부르며, 웹 페이지를 모아놓은 것을 ‘웹 사이트’라고 한다.
우리가 웹 브라우저 주소창에 입력하는 영어 단어(예를 들면 http://www.naver.com/)는
해당 문서가 존재하는 위치를 의미한다.
그리고 주소를 입력하고 여러 문서를 찾아 정보를 얻는 행위를 웹 서핑이라고 부른다.
인터넷 : 정보를 운반할수 있도록 깔려있는 도로같은 개념
웹 : HTML로 만들어진 웹 페이지를 주고 받을 수 있도록 도로위에서 다니는 대중교통 같은 시스템
웹브라우저 <----------------------------------> 웹서버
데이터를 주고 받음
HTTP : 이 데이터를 주고받는 규약
HTML : 웹페이지의 정보를 담고 있음
- 서버와 클라이언트 -
클라이언트 <- 웹브라우저 서버 <- 웹서버
클라이언트가 서버에게 "요청" 하면 서버는 클라이언트에게 "응답" 하는 구조를 가지고 있다.
웹서버종류 : Apache, Nginx, lls 등
- 윈도우에 웹서버 설치 -
비트나미 다운로드
https://bitnami.com/stack/wamp -> No thanks 클릭
설치할 때 PhpMyAdmin 빼고 다 체크 풀고 설치해도 됨.
- 서버와 클라이언트의 관계 -
1. 웹브라우저가 웹서버에게 '요청' 을 함
2. 그 웹서버는 웹서버에 저장되어 있는 웹 페이지를 읽어서 '응답' 함
그 응답은 'HTML' 값을 주게 됨
- HTML
HyperText Markup Language
- Hypertext
: 문서와 문서간 링크로 연결되어 있는 시스템을 하이퍼텍스트라고 함.
- ul, li 태그
: li 태그는 리스트를 나타내는 태그
: ul 태그는 리스트 그룹을 묶음
: ol 태그는 리스트에 숫자를 붙임
- <!DOCTYPE HTML>
: 표준안으로서, 작성한 태그의 형식을 나타냄
1. HTML 5
: <!DOCTYPE HTML>
2. HTML 4.01 strict
: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
3. XML 1.1
: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1/EN" "http://w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- HTML 사전
A ~ Z까지 모음
https://opentutorials.org/course/1058
- header, nav, article
용도에 맞게 태그를 묶음
- 웹브라우저
- 클라이언트 사이드 언어
: HTML, CSS, Javascript
- 웹서버
- 서버 사이드 언어
: PHP, MySQL
- CSS
: 디자인을 위한 언어, 스타일을 내기 위한 언어
- 선택자 (selector)
: h1 {color:red} 에서 "h1" 부분이 선택자
- 서술 (description)
: h1 {color:red} 에서 "color:red} 부분이 선택자
- 로그인 기능 만들기 -
- 사용자 입력값을 php 로 읽어서 비교
8-1.php
<form action="8-2.php">
<p>비밀번호를 입력해주세요.</p>
<input type="text" name="password">
<input type="submit">
</form>
8-2.php
<?php
$password = $_GET["password"]; // password 에 전에 입력한 폼의 password 값을 넣는다.
if($password == "1111") {
echo "비밀번호 맞음";
} else {
echo "비밀번호 틀림";
}
?>
- UI
: User Interface
- API
: Application Programming Interface
: 운영체제가 미리 만들어 놓은 것들을 호출하는 명령어
- 프로그래밍 접근방법 -
1. "적정" 용도의 언어를 "적정" 수준으로 배워야 한다.
언어를 공부하는 이유는 무언가를 구현하는데 생기는 문제를 해결하기 위해 공부한다.
2. API를 "탐험" 해봐야 한다.
프로그래밍 언어로 API를 조합해서 애플리케이션을 만들어본다.
3. 그것을 좋아할 관객을 찾는다. (매우 중요함)
4. 한계를 경험해본다.
한계를 충분히 경험하고 그것으로 인해서 절망감이 충분히 성숙했을때, 밑의 분야를 접했을때 박하사탕을 눈으로 먹은것처럼
시야가 뻥 뚫릴 수 있고, 막연히 둥둥둥 떠다니던 생각들 또는 가능성들이 이런 분야를 만나면서 견고하게 운집되는 경험을 할 수 있다.
(1) 알고리즘
(2) 데이터 스트럭쳐
(3) 디자인 패턴
(4) 프레임워크
(5) 컴퓨터 구조
- PHP 실습 -
- id값이 비어서 에러날 수 있는 것을 안전하게 함
<?php
if(empty($_GET['id']) == false ) {
echo file_get_contents($_GET['id'].".php");
}
?>
-> 만약 id 값이 비어 있는 것이 거짓이라면, => id 값이 있다면
id값.php 파일을 출력할것이다.
'끄적끄적' 카테고리의 다른 글
| 크롬 플러그인 데모 번역 (0) | 2017.03.24 |
|---|---|
| 크롬 플러그인 만들기 (0) | 2017.03.24 |
| 개인적인 프로그램 (0) | 2017.03.24 |
| 간단하게 프로그래머를 구분한다면 (1) | 2017.03.22 |
| 아톰에디트 세팅 (0) | 2017.03.22 |
