Part1. 웹의 이해
Chapter 1. 웹의 이해
인터넷
: 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자
"우리는 모두 연결되어 있다."
웹 ( = WWW, W3, Web)
: 월드 와이드 웹(World Wide Web)이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
인터넷이 있어야 웹이 있다!
웹의 시작
스위스의 유럽 입자 물리 연구소에서 연구원들의 신속한 정보교환을 위해 고안
웹의 특징
정보를 하이퍼텍스트(링크: 누르면 다른 곳으로 이동됨) 형식으로 표현하여, 하이퍼텍스트를 따라 이동하며 다양한 정보/문서들을 연결, 제공
*하이퍼 텍스트: 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트, 링크, 참조의 역할
웹 페이지 : 페이지하나하나
웹 사이트 : 웹 페이지
웹 서핑 / 웹 브라우징 : 웹 페이지 링크를 타고 다른 웹 페이지를 이동하는 것
웹 브라우저 : 어떤 것(= 웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것
Chapter 2. 웹의 구조
클라이언트와 서버
클라이언트 : 서비스를 이용하는 (요청하는) 컴퓨터
서버 : 서비스를 제공하는 컴퓨터
어떻게 주고받지? -> 프로토콜
서로 정보를 주고 받을 때에 지켜야하는 약속. 반드시 이 약속을 지켜서 통신해야 함.
우리는 어떻게 웹을 사용하고 있는거지?
인터넷으로 연결된 클라이언트와 서버는 웹프로토콜인 HTTP(HyperText Transfer Protocol)을 사용해 데이터를 주고받음
Chapter 3. 웹 개발의 직무 이해
프론트엔드
: 웹 서비스(웹 사이트)에서 사용자의 측면의 그래픽 사용자 인터페이스로, 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당
화면 개발 / 요청 전송
요청 날림(로그인 요청) ->
-> 요청 받음(로그인 승인)
존재하는 아이디 인지 찾기 / 존재하면, 비밀번호 비교 / 존재하지 않으면, 없는 사용자라고 전달 ....
백엔드
: 웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과 전달
Part2. 프론트엔드
Chapter 4. 프론트엔드 3대장
웹은 무엇으로 이루어져 있을까 ?
HTML(웹 페이지 구성 요소들의 구조)
+
CSS(웹 페이지 구성 요소들을 꾸밈)
+
Javascript(웹 페이지 구성 요소들에게 생명력을! : 같은 페이지 안에서 변화 / 사용자가 입력한 데이터 서버에 전달)
3개가 결국 하나처럼 기능
IDE (Integrated Development Environment, 통합 개발 환경)
프로그래밍을 하기 위해 존재하는 컴퓨터안의 공방!
처음부터 끝까지 개발할 수 있는 환경을 갖춤
ex. vsc(호환성, 확장성좋아 인기많음), eclipse, Intellij
Chapter 5. HTML의 이해
HTML
= 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자(Hyper Text), 웹페이지의 구조를 명시(Markup Language하는 언어
태그(<>괄호 사용) : 웹 페이지의 구성 요소 하나하나
<태그> 감싸진 글자가 그 태그의 역할을 맡음</태그>
여는 태그와 닫는 태그가 한쌍일 수도 있고, 닫는 태그없이 여는 태그 단독으로 쓰이는 경우도 있음
<!DOCYPTE html> : 이 문서의 타입은 html 입니다.
<html>
<head>
문서의 대한 정보 (언어, 탭 이름)
<meta charset = "UTF-8"> 이 문서의 언어
<title> 탭 이름 </title>
</head>
<body>
여기에 구현
</body>
</html><h1>글씨</h1> Heading 글씨
<a href ="사이트 주소"> 화면에 보일 글씨 </a>
<br> 줄바꿈<첫 실행 실습>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 첫번쨰 HTML </title>
</head>
<body>
Hello, html!
</body>
</html>title -> 탭 이름
body -> 화면
<form>
<input type ="타입"> 사용자한테 받는 모든 인풋
타입 : text / password / button
<input type="button" value="화면에 보이는 글씨"><로그인 실습>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
</head>
<body>
<h1>Login</h1>
<form>
ID : <input type="text">
<br>
PW : <input type="password">
<br>
<input type="button" value="login">
</form>
</body>
</html>
어제 체력적으로 심적으로 여러 이유때문에 많이 힘들었는데
오늘 다행히 알고 있던 내용들이었어서 큰 체력소모가 없이 수행할 수 있었다...
오늘 선택과제로 코딩테스트 풀이가 있었다. 안 푼지가 좀 된 것같아서 손도 못댈까봐 걱정했는데
좋은 코드는 아니어도 2번까지는 스무스하게 풀 수 있었다 ㅜㅜ.
너무 손을 안대서 물거품 됐을 까봐 걱정했는데 너무너무 다행이고 쉬운 문제였지만서도 뿌듯했다.
3번은 이중for문을 돌려서 런타임에러가 났다...
분명 예전에 공부했을 시절에 풀었으면 풀었을 것같은데 많이 까먹긴했구나 싶었다
겁나서 그냥 나중에 도전해볼까 싶었는데 도전도 하고 이렇게 자극도 받는 좋은 경험이었지않나 싶다!!!
이번 부캠 동안에 코테 스터디 열심히해서 백준 골드 찍어보구싶다
'Devcourse' 카테고리의 다른 글
| <프로그래머스 데브코스 풀스택> 2026-01-10 TIL (0) | 2026.01.11 |
|---|---|
| <프로그래머스 데브코스 풀스택> 2026-01-09 TIL (0) | 2026.01.09 |
| <프로그래머스 데브코스 풀스택> 2026-01-07 TIL (0) | 2026.01.07 |
| <프로그래머스 데브코스 풀스택> 2026-01-06 TIL (0) | 2026.01.06 |
| <프로그래머스 데브코스 풀스택> 2026-01-05 TIL (1) | 2026.01.05 |