[목차]
>> 1장
1. 웹 개발 알아보기
2. 웹 개발, 어디서부터 시작할까
>> 2장
1. 웹 브라우저와 웹 편집기
2. 웹 개발 환경 설정하기
1-1.웹 개발이란
웹 개발은 웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아니다.
웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 한다.
* 정적 사이트 : 미리 작성한 내용을 웹 사이트에 올려 놓으면 방문자는 그 정보를 확인하는 방식의 사이트
* 동적 사이트 : 사용자에게 제공할 기능과 서비스까지 모두 담겨있는 웹 사이트
[ 서버 vs 클라이언트 ]
- 클라이언트
- 사용자가 웹 사이트에 접근할 때 사용하는 기기
- (좁은 의미) 웹 브라우저
- 서버
- 인터넷에 연결된 컴퓨터
- 웹 요소와 사용자 정보, 상품 정보 등의 여러 정보가 저장된다.
[ 프런트엔드 개발 vs 백엔드 개발 ]
- 프런트엔드 개발
- 웹 브라우저 화면에 보이는 부분을 다룸, 웹 사이트 제작
- HTML, CSS, 자바스크립트 사용
- 백엔드 개발
- 사용자 뒤(back)에서 보이지 않는 영역, 즉 서버를 다룸
- 데이터베이스를 설계하거나 데이터 처리
- 자바, PHP, 파이썬 등 프로그래밍 언어 사용
1-2. 웹 개발, 어디서부터 시작할까
[ 웹 개발을 위해 공부해야 할 기술 ]
[ 웹 개발의 기본 ]
1. 웹 문서의 뼈대를 만드는 HTML
- 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속
- HTML에서 약속한 표기법을 사용해서 문서 작성해야 한다.
2. 웹 문서를 꾸미는 CSS
- 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법
- 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 한다.
3. 사용자 동작에 반응하는 자바스크립트
- 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술 (화면을 동적으로 만들때)
- 자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉽다.
[ 프런트엔드 개발을 위한 기술 ]
[ 표 1 - 1 자바스크립트의 라이브러리와 프레임워크 ]
| 종류 | 특징 |
제이쿼리(jQuery) |
DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구입니다. 최근에는 웹 애플리케이션 개발에 적합한 다른 라이브러리나 프레임워크에 자리를 내주고 있습니다. |
D3.js |
웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구입니다. 데이터를 시각화해 주는 자바스크립트 라이브러리는 D3.js 외에도 라파엘(Raphael), Three.js 등이 있습니다. |
부트스트랩(Bootstrap) |
웹 사이트 디자인을 쉽게 만들어 주는 라이브러리 도구입니다. CSS로 PC, 태블릿, 휴대전화 등에서 동작하는 반응형 디자인을 만들 수 있게 해준다. |
리액트(React) |
페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)이라고 한다. SPA나 복잡한 사이트를 개발할 때 프레임워크를 사용한다. 이때 가장 많이 사용하는 프레임워크가 리액트이며 페이스북에서 개발했다. |
앵귤러(Angular) |
앵귤러는 구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크이다. 프로젝트 성격에 따라 리액트나 앵귤러 중에서 선택해서 사용한다. |
뷰(Vue) |
웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크이다. 화면에 보이는 부분에만 초점을 맞추기 때문에 다른 라이브러리나 프레임워크와 함께 사용한다. |
[ 백엔드 개발을 위한 기술 ]
| 종류 | 특징 |
| 노드제이에스(Node.js), 익스프레스(Express)  |
이미 프런트엔드 개발을 해본 경험이 있거나 자바스크립트에 익숙하다면 Node.js로 실력을 발휘해 백엔드 개발에 사용할 수 있다. Npde.js는 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼이라고 생각하면 된다. 그래서 자바스크립트만 익숙하면 웹 개발의 전체를 다룰 수 있다. Node.js에서 주로 사용하는 웹 개발 프레임워크는 익스프레스입니다. |
| 자바(java), 스프링(Spring)  |
자바는 오랫동안 백엔드 개발용으로 사랑받는 언어이고, 그만큼 관련 커뮤니티가 오픈 소스가 많다. 자바를 사용하면 안드로이드 앱을 개발할 수도 있고, 셋톱 박스나 하드웨어용 애플리케이션을 만들 수도 있다. 자바의 웹 개발 프레임워크로는 스프링을 많이 사용한다. |
| 파이썬(Python), 장고(Django)  |
파이썬은 배우기도, 사용하기도 쉬워서 개발 입문자가 처음 공부할 때 선택하는 언어이다. 특히 데이터를 많이 다뤄야하는 분야에서는 파이썬이 훨씬 유리하다. 백엔드 개발을 할 때 파이썬의 프레임워크로는 장고를 사용한다. |
| PHP, 코드이그나이터(CodeIgniter)  |
PHP는 백엔드 개발에서 오랫동안 사용된 개발 언어이다. 이전 버전은 개인 웹 사이트에서 주로 사용했지만 PHP7 버전부터는 백엔드 개발을 위한 프레임워크로 탈바꿈했다. PHP의 대표적인 웹 개발 프레임워크로 코드이그나이터가 있다. |
2-1. 웹 브라우저와 웹 편집기
[ 웹 브라우저 ]
[ 웹 편집기 ]
| 윈도우용 편집기 - 노트패드++, 에디트 플러스 등 macOS용 편집기 - 덱스트메이트, 코다 등 |
| Visual Studio Code - 무료 소프트웨어 - 윈도우, 맥, 리눅스 플랫폼에 구애받지 않음 - 파이썬, node.js 도 작성 가능 ( React 배울때도 사용 ) |
2-2. 웹 개발 환경 설정하기
[ Visual Studio Code 설치 ]
https://code.visualstudio.com/
[ Visual Studio Code 기본 설정 ]
1. 확장 기능에서 한글 언어팩 설치
- Korean Language Pack for Visual Studio Code
2. 색 테마 설정
- 기본 색 테마는 다크 모드이지만 원하는 색 테마 선택 가능
3. 코딩 글꼴 설치
- 한글까지 지원하는 D2 Coding 글꼴 추천
- https://github.com/naver/d2codingfont 에서 다운로드한 후 글꼴 설치
[ 작업 폴더 추가하기 ]
1) 예제 파일 내려 받고 압축 풀기
2) 예제 폴더 추가하기
(1) [ 파일 --> '폴더 열기' 선택 ]
(2) 예제 폴더를 찾아 [ 폴더 선택 ] 클릭
3) 폴더 이름 왼쪽 > 를 클릭하면 폴더 안의 파일 확인 가능
4) 파일 이름 클릭하면 오른쪽 편집 창에 파일 소스 나타남
[ 간단한 웹 문서 만들기 ]
1) [ 메뉴 새 파일 ] 선택
2) HTML 코드 입력
* <html></html> 은 <head></head> 와 <body></body> 라는 자식태그를 가진다.
<head>와 <body> 태그의 부모태그는 <html>이다. (들여쓰기가 되어있으면 부모-자식 관계..?)
<head>가 <body>태그의 형이고 <body>가 <head>태그의 동생이다.
<head>와 <body>태그는 형제관계인것이다.
[ 꿀팁 : Extensions (Ctrl + Shift + X) > Live Preview 설치 ]
3) 02 폴더에 web.html 로 저장
* 꼭 .html 확장자까지!!
4) 웹 브라우저에서 확인하기
'Language > HTML&CSS' 카테고리의 다른 글
| 03장_HTML 기본 문서 만들기 (0) | 2023.01.09 |
|---|
