웹 풀사이클 데브코스 TIL 6일차

웹의 이해

인터넷

• 전 세계의 모든 컴퓨터를 하나의 통신망에서 연결한다.
• International Network 의 약자
• 웹과는 다른 의미

웹

• 월드 와이드 웹(World Wide Web)
• 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
• 인터넷이 있기에 웹이 존재한다

웹의 시작

1980년대 CERN에서 컴퓨터과학자인 팀 버너스 리에 의해 탄생. 연구원들 간 신속한 정보교환을 위해 만들었다.

최초의 웹사이트

• http://info.cern.ch
• 세계 최초의 웹

웹의 특징

정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공한다.

웹 페이지와 웹 사이트

• 웹 페이지는 페이지 하나하나
• 웹 페이지 하나하나를 엮어서 만든것이 웹 사이트
• 웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것을 '웹 서핑을 한다', '웹 브라우징을 한다'고 표현한다.

웹 브라우저

• Web browser
• 웹 페이지 또는 웹 상의 데이터를 찾거나 읽을 때 사용하는 것
• Safari, IE, Chrome 등등

웹의 구조

클라이언트와 서버

웹의 구조는 클라이언트와 서버 두가지로 이루어져있다.

• 클라이언트: 서비스를 이용하는(요청하는) 컴퓨터
• 서버: 서비스를 제공하는 컴퓨터

프로토콜

서로 정보를 주고받을 때 지켜야 하는 약속
클라이언트와 서버는 이 약속을 지켜서 통신해야한다.

HTTP

• 웹 프로토콜
• HyperText Transfer Protocol

웹 개발 직무

웹 개발자는 클라이언트와 서버 두가지를 개발하게 된다

프론트엔드

웹에서 클라이언트 측을 개발한다. 사용자와 상호작용을 담당. 사용자가 사용하는 화면을 구현한다.

벡엔드

웹에서 사용자의 눈에 보이지 않는 서버 측을 개발. 클라이언트에서 받은 데이터와 요청을 처리하고 결과를 전달.

풀스택

프론트엔드와 백엔드를 모두 할 줄 아는 개발자를 풀스택 개발자라 한다.

프론트엔드

웹은 HTML, CSS, Javascript 로 이루어져 있다.

• HTML: 웹 페이지 구성요소의 구조
• CSS: 웹 페이지의 디자인을 꾸밈
• Javascript: 웹 페이지의 action을 할 수 있게 함

IDE

• Integrated Development Environment (통합 개발 환경)
• 프로그래밍을 하기 위한 일종의 공방. 하나의 프로그램 안에서 서비스를 완성할 수 있음.

HTML

• HyperText Markup Language
• <> 라는 태그를 사용
• <태그></태그> 열고 닫는 태그가 있고 여는 태그만 쓰일 때가 있음

HTML 단축키

• ! + enter 를 누르면 기본 html 코드를 생성해준다.
• open in browser 익스텐션을 설치하고 option + B 를 누르면 해당 html을 웹 브라우저에서 열어준다.

태그

• <h1> ~ <h6> 제목 태그
• <a> 링크 태그
• <br> 한줄 띄우기
• <form> 폼 태그
• <input> 인풋 태그, 다양한 종류(text, password, button)가 있다.

후기

웹에 대한 기본 지식과 HTML에 대해서 알아보았다. 데브코스 수강생분들이 학습정보 슬랙에 비주얼 스튜디오를 편하게 사용할 수 있도록 하는 팁들을 많이 알려주셔서 좋았다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프