하참이의 아이디어노트

프로그래머스 데브코스 TIL 2일차 본문

프로그래머스 데브코스/TIL

프로그래머스 데브코스 TIL 2일차

하참이 2025. 4. 7. 18:41

프로그래머스 데브코스 TIL 2일차이다.

 

아직 프로그래밍 보단 이론에 대한 수업 위주로 진행하시는 것 같다. 이는 지금 이론을 다듬지 않으면 프로젝트때 상당히 고생할 수 있다는 뜻이기도 할 것이다.

 

오늘도 화이팅 하자!!

 

 

Front-end란?

 

Front-end는 사용자가 앞에 보이는 영역으로, 웹 브라우저 화면에 보이는 것을 다룸.

 

스마트폰, 태블릿, 데스크탑에 관계없이 모두 사용할 수 있는 반응형 웹사이트를 만들기 위해서는 프런트엔드 개발에 대한 이해가 있어아 하며, 다양한 웹 브라우저의 종류와 버전에 따라 작동 가능하게 만드는 것이 중요.

 

프런트엔드 개발에는 HTML과 CSS, 자바스크립트를 사용하고, 리액트나 뷰 같은 개발도구를 더하면 규모가 크고 복잡한 사이트 개발도 가능해진다.

 

 

 

 

클라이언트와 서버

클라이언트(Client)와 서버(Server)란?

인터넷이나 앱에서 우리가 어떤 정보를 주고받을 때,
'클라이언트’와 ‘서버’는 꼭 필요한 두 존재이다.

클라이언트(Client)

요청하는 쪽

  • 사용자가 직접 이용하는 기기 또는 프로그램
    (예: 웹 브라우저, 모바일 앱)
  • 서버에 데이터를 요청(request) 하고,
    서버가 보내준 데이터를 받아 화면에 보여줌(response)

예시

  • 크롬으로 유튜브에 접속 → 클라이언트가 "동영상 보여줘!" 요청

 서버(Server)

응답하는 쪽

  • 클라이언트의 요청을 받아서 처리하고,
    그 결과를 돌려주는 프로그램이나 컴퓨터
  • 웹 서버, 데이터베이스 서버, API 서버 등 다양한 역할 가능

예시

  • 유튜브 서버가 요청받은 동영상을 찾아서 사용자에게 전송

 

 

 

IP 주소 (Internet Protocol address)

인터넷 환경에서 각 기기가 서로를 구분하기 위해 사용하는 인터넷 주소

컴퓨터나 스마트폰 등 네트워크에 연결된 장치가 인터넷 상에서 어디에 있는지 나타내는 숫자로 이루어진 고유한 번호

 

도메인 (domain)

인터넷 상에서 특정 웹사이트를 찾기 쉽게 만든 이름 (예: naver.com)

 

 DNS 서버 (Domain Name Server)

도메인을 IP 주소로 바꿔주는 역할

DNS 서버는 등록된 도메인 정보를 가지고 있다가 도메인이 입력되었을 때 IP 주소로 변환해서 원하는 사이트로 연결될 수 있도록 함

 

 

 

 

HTTP vs HTTPS – 무엇이 다를까?

웹사이트 주소 앞에 붙는 http:// 또는 https://
둘 다 웹에서 정보를 주고받기 위한 통신 규칙이지만, 보안에서 큰 차이가 있다.

HTTP (HyperText Transfer Protocol)

보안이 없는 기본 웹 통신 방식

  • 웹에서 문서, 이미지, 동영상 등의 정보를 주고받는 규칙
  • 암호화되지 않은 통신 → 중간에서 누군가가 내용을 볼 수 있음
  • 예전에는 많이 쓰였지만, 보안 이슈로 HTTPS로 전환하는 추세

예시

http://example.com

HTTPS (HTTP + Secure)

보안이 강화된 HTTP

  • HTTP에 SSL/TLS 암호화 기술이 추가된 버전
  • 클라이언트와 서버 사이의 데이터가 암호화되어 전송
  • 개인 정보, 로그인 정보, 카드 결제 등 보안이 중요한 서비스에 필수

예시

https://example.com

 

보안성 ❌ 없음 ✅ 암호화됨
사용 용도 공개된 정보 로그인, 결제 등 민감 정보
주소 시작 http:// https://
브라우저 표시 "주의 요함" 자물쇠 아이콘 🔒

왜 HTTPS를 써야 할까?

  • 사용자 정보 보호
  • 검색엔진(예: 구글)에서 신뢰 사이트로 우선 노출
  • 요즘은 모든 웹사이트에서 HTTPS가 기본!

 

 

 WWW

 WWW (World Wide Web)이란?

우리가 인터넷에서 보는 웹사이트들의 집합
텍스트, 이미지, 영상 등을 링크로 연결해서 보여주는 시스템

  • 1989년, 팀 버너스리(Tim Berners-Lee)가 개발
  • 웹 브라우저를 통해 웹 페이지에 접속 가능
  • https://www.example.com

 WWW는 인터넷이랑 뭐가 다른가?

 

정의 전 세계 컴퓨터가 연결된 네트워크 그 위에서 웹 페이지를 보여주는 서비스
포함 여부 WWW 포함, 이메일, FTP 등도 포함 인터넷의 일부
예시 이메일, 메신저, 클라우드 블로그, 뉴스 사이트, 유튜브

즉, 인터넷은 도로, WWW는 도로 위를 달리는 자동차 같다

 

WWW가 작동하는 원리

  1. 사용자가 웹 브라우저에 주소 입력
  2. 브라우저가 서버에 요청 (HTTP/HTTPS)
  3. 서버가 웹 페이지를 전송
  4. 브라우저가 페이지를 화면에 표시

 관련 개념도 함께 기억해요!

  • URL: 웹 주소 (ex. https://www.example.com)
  • 웹 브라우저: 크롬, 사파리, 엣지 등 웹을 보여주는 프로그램
  • HTML: 웹 페이지를 구성하는 언어

한 줄 요약

WWW는 웹사이트들이 모여 있는 공간,
그걸 보기 위해 사용하는 창구는 ‘웹 브라우저’입니다!

 

 

 

 

 

 HTML이란?

웹 페이지의 뼈대를 만드는 언어
HTML은 HyperText Markup Language의 약자

  • 웹 페이지의 구조와 내용을 정의해주는 마크업 언어
  • 텍스트, 이미지, 영상, 링크 등을 어떻게 보여줄지 알려준다.
  • 우리가 웹 브라우저에서 보는 모든 웹사이트는 HTML을 기반으로 만들어진다.

 HTML의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML로 만든 문단입니다.</p>
  </body>
</html>

 간단 설명

  • <html>: HTML 문서의 시작
  • <head>: 문서 정보(제목, 메타데이터 등)
  • <title>: 브라우저 탭에 표시되는 제목
  • <body>: 사용자에게 보여지는 실제 내용
  • <h1> ~ <h6>: 제목 태그 (숫자가 클수록 글자가 작아짐)
  • <p>: 문단(Paragraph)

 마크업(Markup) 언어란?

텍스트에 '태그(tag)'를 붙여 의미를 부여하는 언어.
예: <p>는 “이건 문단이다”!

 

HTML은 CSS와 JavaScript와 함께 자주 쓰인다

역할 설명

HTML 웹 페이지의 구조
CSS 디자인, 스타일 (색상, 폰트, 배치 등)
JavaScript 동작, 인터랙션 (버튼 클릭, 애니메이션 등)

 한 줄 요약

HTML은 웹 페이지의 뼈대를 만드는 언어
브라우저가 읽어서 우리 눈에 웹사이트가 보이게 해준다.

 

 

 

 

 

 

 HTML 자주 사용하는 태그

태그 설명 예시

<html> HTML 문서의 시작과 끝 <html lang="ko">...</html>
<head> 문서 정보 (메타데이터, 스타일, 스크립트) <head><title>My Page</title></head>
<title> 브라우저 탭 제목 <title>내 웹사이트</title>
<body> 실제 화면에 보이는 콘텐츠 영역 <body>내용</body>
<h1> ~ <h6> 제목 태그 (숫자가 클수록 작음) <h1>제목</h1>
<p> 문단 (paragraph) <p>여기는 문단입니다.</p>
<a> 하이퍼링크 클릭
<img> 이미지 삽입 <img src="image.jpg" alt="설명">
<ul>, <ol>, <li> 리스트 (순서없는/순서있는) <ul><li>항목</li></ul>
<div> 구역 나누기 (레이아웃용) <div class="box">내용</div>
<span> 인라인 요소 그룹핑 <span class="highlight">강조</span>
<table>, <tr>, <td>, <th> 표 만들기 <table><tr><th>이름</th><td>홍길동</td></tr></table>
<form>, <input>, <button> 사용자 입력 폼 <form><input type="text"><button>전송</button></form>
<br> 줄 바꿈 (빈 태그) 안녕하세요<br>환영합니다
<hr> 수평선 (구분선) <hr>

 

CSS 자주 사용하는 속성

속성 설명 예시

color 글자 색 color: red;
background-color 배경 색 background-color: #f0f0f0;
font-size 글자 크기 font-size: 16px;
font-family 글꼴 font-family: 'Arial', sans-serif;
text-align 정렬 방식 text-align: center;
margin 외부 여백 margin: 10px;
padding 내부 여백 padding: 10px;
border 테두리 border: 1px solid gray;
width / height 요소의 너비/높이 width: 100px; height: 200px;
display 박스 유형 (block, inline 등) display: flex;
position 위치 지정 (static, relative 등) position: absolute;
top, left, right, bottom 위치 조절 top: 20px; left: 10px;
float 요소 띄우기 float: left;
box-shadow 그림자 효과 box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
border-radius 모서리 둥글게 border-radius: 10px;
overflow 넘치는 콘텐츠 처리 overflow: hidden;
z-index 요소 쌓이는 순서 z-index: 10;

 

 

 

네임 카드 실습

 

 

 

 

 

그래프 실습

 

 

 

 

 

 

 

 

 

2일차 수업이 완료되었다.

 

아직 HTML과 CSS의 기초이다. 코치님께서는 부트캠프 이름 대로 GPT를 사용하여서 완료할 수 있는 내용임을 강조하고 싶으신것 같지만.. GPT를 사용하지 않는 것을 추천하시는 것 같다. 이정도도 직접 처리 하지 못하면 문제가 생겼을 때 트러블슈팅에서 시간을 잡아먹거나 2차적인 트러블을 생성하기 쉽기 때문인 것 같다.

 

내일도 화이팅!!

 

 

저작자표시 비영리 동일조건

'프로그래머스 데브코스 > TIL' 카테고리의 다른 글

프로그래머스 데브코스 TIL 6일차  (0) 2025.04.14
프로그래머스 데브코스 TIL 5일차  (2) 2025.04.14
프로그래머스 데브코스 TIL 4일차  (1) 2025.04.09
프로그래머스 데브코스 TIL 3일차  (0) 2025.04.08
프로그래머스 데브코스 TIL 1일차  (2) 2025.04.07
'프로그래머스 데브코스/TIL' Related Articles more