1. 웹 기초
Client: HTML, CSS, JavaScript, 웹브라우저
Server: 미들웨어(PHP), 데이터베이스(MySQL), 웹서버
웹 애플리케이션 만드는 순서 (반복적)
기획 > 디자인 > 개발 > 테스트(QA, 버그찾기 등)
기획
모델링: Pencil(opensource), balsamiq(유로 소스), 파워포인트(제일 많이 사용됨)
인터넷과 웹
- 인터넷 (운영체제) > 웹 (app) / FTP(파일전송) / email(이전에 이메일 시스템)
- 인터넷: 전세계 컴퓨터들이 연결되어서 파일을 주고 받을 수 있는 네트워크
- 웹: 전세계 네트워크를 활용해서 html로 된 웹페이지를 주고 받을 수 있는 서비스
- 웹브라우저 <> 웹서버 (HTTP & 이걸 담은 HTML-언어-)
2. 서버 & 클라이언트
- 클라이언트 by 웹브라우저: 요청 <<------>> 서버 응답(of 웹페이지)
- 서버: Apache(절대강자, 오픈소스), Nginx (오픈소스) IIS (microsoft)
Apache 설치
- php, mysql 등 서버 측 프로그램 설치는 꽤 복잡하다.
- 사이트에서 설치할 수 있음 (http://projects.apache.org/projects/http_server.html)
- bitnami라는 걸 통해 php, mysql, apache 한 번에 설치할 수 있다. (https://bitnami.com/stack/wamp)
- htdocs 라는 디렉토리에 index.html등 들어있음 / 웹브라우저가 이 파일 요청하면, 서버 측 htdocs에서 index.html을 응답해주는 것
- htdocs: Document Root
3. 개발 도구
버전 관리 시스템:
- 소스코드를 끊임없이 변경하기 때문에 코드 변경 역사를 기록하는 시스템임.
- 문제가 생겼을 때 어디서, 왜 생겼는지 탐색할 수 있게 해줌.
- 그리고 역사를 다른 서버에 안전하게 저장하는 역할을 하기 때문에, 만약의 사고에 대비 가능
- 여러 사람이 협업하는 경우 같은 파일 변경 시 질서를 잡아주는 역할을 하기도 함
- 툴: SVN, Mercurial, Git 등
- git 사용법: http://opentutorials.org/course/1492
코드 편집기(Editor)
- Github에서 만든 Atom을 사용할 것: https://atom.io
- Aptana, Sublime Text, Brackets 등 다른 도구들도 있음!
Atom
- 확장기능 사용하기: file > settings > install > emmet 클릭해서 install
- emmet: 코드 작성 수고 덜어줌(자동 완성 기능)
- 예를 들어 <head 치고 'tab' 눌러주면 자동으로 브라켓 생김
- multiselection: ctrl키 누르고 드래그 해주면 그 부분 한꺼번에 고칠 수 있음
'웹프로그래밍 > 기초' 카테고리의 다른 글
| 7. 라이브러리 (twitter bootstrap) (0) | 2021.06.16 |
|---|---|
| 5. 관계형 데이터베이스 (0) | 2021.06.16 |
| 4. 데이터베이스 (0) | 2021.06.16 |
| 3. PHP 실습 (0) | 2021.06.16 |
| 2. HTML, CSS, JavaScript, PHP (0) | 2021.06.16 |