<생활 코딩 - 웹 어플리케이션 만들기>
- 웹사이트 홈페이지, 웹앱, 웹사이트
- 낮은 진입 장벽, 인터넷 , 웹
* 클라이언트
- html, css, javascript, 웹 브라우저
* 서버
- 미들웨어, 데이터베이스, 웹서버
<생활 코딩 - 수업 소개>
- 나중에 코드 분석을 다 할 수 있게 되면 끝
- 혼자 작성할 수 있다면 끝
<생활 코딩 - 웹 에플리케이션을 만드는 순서>
1. 구상
2. 기획(계획)
3. 디자인
> 웹 사이트를 아름답게 보이게 하는것. 사용자가 편리하게 사용할 수 있도록 사용자 경험을 향상 시키는것.
4. 개발
5. 테스트
> 개발이 끝나고 테스트를 한다.
6. 반복
* start small
> 처음엔 작게 만들어서 크게 키워 나가는것.
** 복잡도
<생활 코딩 - 구상>
<생활 코딩 - 기획>
- UI 모델링
- user interface의 약자.
- 사용자의 입장에서 동작하는 기능을 가상으로 만들어 보기.
- 모델링 도구
> 손으로 그리기
> Pencil
> http://pencil.evolus.vn/
> http://opentutorials.org/course/221/1416
> balsamiq
> https://balsamiq.com
> power point
<생활 코딩 - 인터넷과 웹의 역사>
- 인터넷과 웹은 다른것
- 1960년대 인터넷 등장
> 인터넷 : 전세계 있는 네트워크가 파일을 주고 받을 수 있는 가장 거대한 네트워크
> 웹 : 전 세계에 깔려있는 네트워크를 활용해서 html이라는 프로그래밍 언어로 만들어진 웹페이지를 컴퓨터와 컴퓨터가 주고 받을수 있도록 고안된것.
> 팀 버너스리 : 최초의 웹 브라우저를 만든 사람. 웹 서버도 개발함.
> HTML 웹 페이지를 만드는 문서, 언어
<생활 코딩 - 서버와 클라이언트>
* 클라이언트
- 고객
- 웹브라우저가 설치 되어있는 컴퓨터를 클라이언트
- 웹브라우저(웹클라이언트)
* 서버
- 웹 서버가 설치 되어있는 컴퓨터를 서버라고 부름
* 웹브라우저(클라이언트) -> 요청 -> 웹 서버
> 요청 : 웹 페이지를 요청.
* 웹 서버 -> 응답 -> 웹 브라우저
> 응답 : 서버 컴퓨터에 저장되어있는 (웹문서) 웹 문서를 읽어서 클라이언트에 요청에 응해주는것(쏴주는것)
* 한대의 컴퓨터에 웹브라우저와 웹서버를 둘 다 설치 하고 한대의 컴퓨터 안에서 통신하게 하면 된다.
* 웹 서버의 종류
> Apach , Nginx, IIS
* bitnami를 설치하면 아파치,php,mysql 한번에 설치 가능.
<생활 코딩 - 윈도우에 웹서버 설치>
> 여기서 윈도우 버전을 다운 받아 apach php mysql 한번에 설치
> bitnami 실행 mysql root의 비밀 번호 mysql password -> manggo( 내 계정 설정)
> localhost는 웹 서버가 설치되어있는 컴퓨터의 주소.
> htdocs안에 index.html 파일을 읽어서 화면에 표시해줌.
> htdocs는 특수 디렉토리임.
> 여기에 저장을 해야지만 웹 브라우저가 접속을 했을때 웹 서버가 찾아서 보내준다.
> root 디렉토리라고 부른다.
> 설정을 바꿔서 다른 것으로 변경 가능.
<생활 코딩 - 서버제어>
- bitnami로 제어 .
> apach, mysql 제어 가능.
<생활 코딩 - 프로그래밍언어>
- 언어 설명
<생활 코딩 - HTML 이론>
1. 웹브라우저 -> 요청 -> 웹서버
2. 웹 서버 -> 응답(html) -> 웹브라우저
3. 웹브라우저(html) 화면 표시
* HTML
> 문서와 문서가 연결 되어있다.
> 팀 버너스리가 하이퍼 텍스트를 고안했다.
> 링크로 인해서 링크로 연결된 하나이 거대한 정보 덩어리를 만든것이 웹
> html은 웹의 중심. html의 본질은 웹의 본질
> TAG
* HTML - 속성
ex) <a href="http://www.naver.com"> 네이버주소</a>
href 부분이 속성이다. 이 부분이 추가되면서 주소에 해당되어있는 문서에 연결되어있다고 알게 된다.
> href는 속성명
> = 주소는 속성값.
* HTML 정리
> Html을 처음 만든것은 팀 버너스리이다.
> 개인이 관리하는것은 한계에 도달했다.
> w3c 에서 HTML 표준을 정의 하게 됐다.
* <!DOCTYPE html>의 의미
> 이것은 DOCTYPE이다.
> 이 문서가 어떤 표준 안에 따라 작성된 것인지 기술하고 있는 내용, 이 부분이 없어도 작동은 한다.
> 하지만 어떠한 HTML로 작성했는지 명확하게 표시하는것이 좋다.
> <!DOCTYPE html> html5
이 부분이 달라지면 표준이 달라 진다.
> HTML 태그가 어떤 것이 있는지만 알아두고 나중에 적용할때 사용하면됌.
> http://dev.w3.org/html5/html-author/
최신의 사전
> opentutorials.org/course/1058
생활 코딩 -> html 한국어 사전
* 본질
> HTML의 본질은 정보
> 어떠한 정보를 사람과 컴퓨터도 이해할 수 있게 태그를 사용해서 정의 하는것.
> 이런 정보 전달을 HTML이 전념하게 하기 위해 시각적인 효과는 css가 책임 지게 한다.
> *** HTML - 정보, CSS - 디자인(시각적 효과)
'일상' 카테고리의 다른 글
| 봉천 - 효자골 감자탕 (0) | 2017.01.15 |
|---|---|
| [자격증] 리눅스 마스터 2급 합격 후기. (2) | 2016.12.16 |
| 책 ebs 다큐멘터리 동과서 (0) | 2016.12.12 |
| 2016.12.07 면접 (0) | 2016.12.08 |
| [책] SQL 첫걸음 (0) | 2016.08.17 |
댓글