2장 - 웹 개발 시작하기
2-1 웹 개발, 어디서부터 시작할까
웹 개발을 위해 공부해야 할 기술
| 기본 영역 | 프런트엔드 영역 | 백엔드 영역 |
|---|---|---|
| HTML | 제어쿼리, D3.js, 부트스트랩 등 | 리눅스 서버, 네트워크, 데이터베이스 구축 기술 |
| CSS | 리액트, 앵귤러, 뷰 등 | 파이썬, 자바, PHP, 닷넷 등 |
| 자바스크립트 | 노드제이에스, 스프링, 장고, 코드이그나이터 등 | |
| 깃/깃허브 |
(#) 프런트엔드
- HTML: 웹 문서의 뼈대를 만든다
- CSS: 웝 문서를 꾸며준다
- 자바스크립트: 사용자 동작에 따라 반응해준다
- 프런트엔드 개발에서 주로 사용하는 자바스크립트의 라이브러리와 프레임워크: 제어쿼리, D3.js, 부트스트랩, 리액트, 앵귤러, 뷰
(#) 백엔드
최근 백엔드 개발자에서 자주 사용하는 언어와 프레임위크
- 노드제이에스(Node.js), 익스프레스(Express)
- 자바(Java), 스프링(Spring)
- 파이썬, 장고
- PHP, 코드이그나이터 (CodeIgniter)
2-2 웹 개발 환경 설정하기
- 웹 브라우저: 웹 브라운저는 매우 많이 있지만 주로 사용하는 것은 크게 3가지 있다: (1) 구글 크롬, (2) 마이크로소프트의 엣지, (3) 모질라의 파이어폭스
- 웹 편집기: 코드를 입력하는 프로그램
(*)책에서는 웹 브라우저로 구글 크롬, 웹 편집기로 VS Code를 사용한다.
💡 <실습2.1> VS Code 설치한후, 간단한 작업 폴더 추가하는 실습을 해보자!
✅ Step 1: 자료실에서 예제 파일 내려받고 압축 풀기
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB#view
✅ Step 2: VS Code에 예제 폴더 추가하기
✅ Step 3: 작업 폴더에서 코드 파일 열고 닫기
💡 <실습2.2> 간단한 웹 문서 만들기
✅ Step 1: ‘02’폴더 안에 ‘web.html’ 문서를 생성한다.
✅ Step 2: 코드 입력하기
✅ Step 3: 작성 결과 확인하기
✅ Step 4: 마크업하기
코드를 이렇게 바꿔보자!
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>✅ Step 5: 결과 확인하기
- 웹 개발자 도구 살펴보기
웹 개발자 도구를 열려면 MacOS 환경에서 Cmd + Option + I 를 눌러야 한다.
💡 <실습2.3> VS Code의 글꼴, 글자 크기, 탭 크기 변경하기
✅ Step 1: 코딩 글꼴 설치하기
아래에 있는 깃허브 주소로 접속한후 ZIP파일을 내려받는다.
https://github.com/naver/d2codingfont
✅ Step 2: 코딩 글꼴 변경하기
‘Font Family’에서 ‘D2Coding’입력하면 글꼴 변경된다.
