Spring & Java
[1주차] [1일차] 나만의 스토리 설계 웹 페이지 설계 (1) 본문
강의 목록
웹 페이지 기초 (1 ~ 4 주차)
● 웹 서비스의 기본 구조와 동작 원리 이해
● Firebase 등 외부 API 연동 실습
● Git, Githud 실습하기 등
내가 6개월 뒤에 어떤 사람이 될까? : 개발자 무조건 된다.
● 신입 개발자로 바로 투입될 수 있는 실무 역량 ★ ★ ★ ★ ★
● 기초부터 탄탄하게 쌓은 개발 지식 ★ ★ ★ ★ ★
● AI와의 융합으로 차별화된 역량 ★ ★ ★ ★
● 합격률 높이는 이력서와 포트폴리오 ★ ★ ★ ★ ★
● 개발자 업계의 인적 네트워크 ★ ★ ★ ★ ★
나의 실력이 어디까지 설장 할 수 있는지 꼭 매일매일 메모 하기
제1강 웹 페이지 기초
- 각 구간 ★ 별을 달아서 이해가 안가는만큼 난이도를 맞춰 복습 여부 남기기
- 내가 아는걸 설명 해보는데 이걸 정말 아는가 ? 질의응답을 계속 연습하기
- 구현 / 실패 즐겨 보자!
웹 개발 기초 배우기
CH 1. 오리엔테이션
웹 개발
챕터1. 웹 개발의 첫걸음
1-1 프론트 엔드와 백엔드
1-2 웹 : 웹과 클라이언트가 무엇인지 알아 본다.
1-3 HTML : 웹 페이지의 뼈대 어떻게 구상하는지 알아 보기
1-4 CSS : 웹 페이지를 어떻게 인테리 하는지 보기
1-5 JavaScript : 웹에 생명(기능)을 불어 넣는 방법
1-1프론트 엔드와 백엔드
개념과 역할을 설명할 수 있다.
각각 어떤 영역에서 무슨 일 하는지 구분할 수 있다.
왜 분리 되어 관리 하는지 알수 있어야 된다.
<레스토랑>
손님 공간 ( 프론트 엔드 ) ㅡ> 주방 (백엔드)
프론트 엔드 : 눈으로 보고 '직접 조작하는' 모든 영역
클라이언트 : 웹 부라우저(크롬,사파리) 스마트 폰 앱을 클라이언트 라고 한다.
● 예쁜 메뉴판 (UI) 만들기 (HTML, CSS)
- 손님이 편하게 볼 수 있도록 메뉴판을 디자인하고 배치하는 시각적인 일을 한다.
- HTML로 메뉴판의 '뼈대' (메뉴,이름,가격)를 만들고 CSS로 '디자인' (글씨체,색상,이미지 배치)을 합니다.
● 테이블에서 주문 (UX) 받기 ( JavaScript )
- 사용자가 클라이언트에서 행하는 '행동'에 반응 합니다.
- JavaScript로 "손님이 '주문' 버튼을 클릭하면 팝업창을 띄워라", " 메뉴판 이미지를 5초마다 넘겨라" 등의 화면을 다채롭게 사용하는것.
백엔드 : 사용자 눈에는 보이지 않지만 서비스가 실제로 동작하게 하는 '핵심 로직' 과 '데이터'가 처리 되는 영역
● 클라이언트는 프로그램 영역에서 활동한다면 백엔드 서버는 24간 커져 있는 강력한 컴퓨터에서 활동 한다.
● 백엔드는 주방에서 요리를 하고, 재료를 보관하고, 음식을 서빙하 듯 서버 라는 컴퓨터에서 기능을 처리하고, 데이터를 관리하고 결과를 서빙 한다.
● 주문 처리 ( 비즈니스 로직 )
● 재료 관리 (데이터베이스 )
● 음식 전달 (AIP 응답 )
1-2 웹 이란?
웹과 인터넷 차이
웹(WEB) 이란, 전세계 컴퓨터들이 인터넷을 통해 데이터를 공유하는 거대한 대이터 공간을 의미한다.
- 인터넷 환경이 조성 되면서 여러 방식에 데이터 전송 방식이 탄생 했다.
- 이메일, 게임, 파일 등 수많은 인터넷이란 도로를 주행하는 서비스
< 웹 페이지 3요소 >
● 주소 RUL - 웹에 존재하는 수많은 (문서,이미지,영상 등) 의 '고유 주소
● 규칙 HTTP - HTTP라는 통신 규약을 준수하여 상호간 '요청'과 '응답'을 주고 받는 통식으로 통신
( 서버와 클라이언트의 데이터를 주고 받는 규칙 )
● 콘텐츠 HTML - 실제 웹페이지, 데이터, 이미지, 비디오 등 여러 형태의 디지털 자원
인터넷 : 전세계 수많은 컴퓨터 (서버, 노트북, 스마트폰 등) 를 연결하는 거대한 그물망( 물리적 네트워크 )
- 마치 도시의 도로망 처럼 데이터를 실어 나르는 '길'
클라이언트란? : 서버에 요청하는 모든 프로그램
클라이언트(Client)의 작동 원리
http://www.naver.com1. 주소 해석 (DNS 조회 )
2. 서버 접속
3. 메인 페이지 수신 (HTML)
4. 추가 리소스 요청 (CSS, JS Image)
웹 부라우저 ( Web Browser )
- 웹에 접속할 수 있는 프로그램 ( 어플리케이션 )을 말한다.
모바일 앱 (Mobile app)
- 휴대폰 혹은 테블릿에 설치된 앱 (어플리 케이션)으로 부라우저와 마찬가지로 웹에 접속하여 웹서버와 통신할 수 있는 기능을 제공
1 - 3 HTML이란?
HTML은 Hyper Text Languaged의 약자로 부라우저 내에서 웹페이지의 구조를 정의하는 언어.
● Hyper Text (하이퍼 텍스트 )
● Markup Language ( 마크업 언어 )
모든 html은 태그를 기반으로 뼈대 구조를 구성한다.
<!DOCTYPE html> // 문서 형식이 html이다 라고 선언
<html lang="ko">
<head> // 헤드는 인코딩 어떻게 할 것인지, 제목을 뭐라고 할 것인지.
<meta charset="UTF-8">
<title>🛍️ 나만의 멋진 찜 목록</title>
<link rel="stylesheet" href="./css/style.css"> // css 관련
<script src="./js/app.js"></script> // 자바 스크립트 경로
</head>
<body> // ★ 실제 보이는 경로
<header>
<h1>나만의 찜 목록</h1>
</header>
<main>
<section class="add-item-section card">
<form id="item-form"> ... </form>
</section>
<section class="wishlist-section card">
<ul id="item-list"> ... </ul>
</section>
</main>
</body>
</html>
태그 : 무넛의 특징 부분을 마크업 하는데 사용되는 기본적인 단위로 괄호 (<>)로 감싸인 HTML 명령어 라고 한다.
<input type="text" id="username" placeholder="아이디 입력"></input> // 하나의 요소
백엔드 개발자가 알아야 하는 HTML
- HTML에서 백엔드 개발자가 꼭 알아야하는 태그는 바로 from 태그 입니다.
JSON이란?
- 데이트를 저장하고 전송하기 위해 사용되는 텍스트 기반 형식을 의미 한다.
" 사람과 컴퓨터 모두 일고 쓰기 쉬우며, 클라이언트와 서버 간에 데이터를 주고받는 데 주로 사용됩니다.
<form id="item-form"> // 내부의 input, select, textarea
<div class="input-group">
<label for="item-name">상품명</label>
<input type="text" id="item-name" placeholder="예: 무선 헤드폰" required>
</div>
<div class="input-group">
<label for="item-price">가격</label>
<input type="number" id="item-price" placeholder="예: 120000" required min="0">
</div>
<div class="input-group">
<label for="item-category">카테고리</label>
<select id="item-category" required>
<option value="">카테고리 선택</option>
<option value="electronics">💻 전자제품</option>
...
</select>
</div>
<div class="input-group">
<label for="item-description">상품 설명 (선택)</label>
<textarea id="item-description" rows="3" placeholder="..."></textarea>
</div>
... (링크, 이미지 URL input) ...
<button type="submit" class="primary-btn">찜 목록에 추가</button>
</form>
textarea : 긴 텍스트를 입력 할 수 있음.
1- 4 CSS이란?
● CSS는 Cascading Style Sheets의 약자
● HTML의 '뼈대'와 '구조'를 정의 한다면 CSS는 '디자인'과 '배치'를 담당한다.
백엔드가 알아야 되는 속성
레이아웃
display : block, inline, flex, grud, none
pisition : static, relative, absoute, fixed
박스 모델
1-5 JavaScript란?
- 클라이언트(브라우저, 모바일 등)만 실행되는 '프로그래밍 언어' 입니다.
- HTML/CSS가 작성된 설정 값을 그대로 출력되는 '정적'인 문서인 반면 JavaScript는 사용자의 활동과 입력값에 따라 '동적'으로 동작하는 기능을 담당 함
학습 목표
● JavaScript가 무엇인지 설명 할 수 있다.
● JavaScript의 기본 구조와 주요 기능을 설명할 수 있다.
자바 스크립트 기본 구조
외부에서 자바스크립트 연결
- 외부에서 불러 오는 방법 ( /script )
내부에서 자바스크립트 연결
- 실제로 자바 스크립트 코드를 짜는거
변수 ( Variables ) - 값 저장 상자
- HTML 요소 등을 저장하기 위한 '이름 표가 붙은 상자'
● const (상수) : 한 번 저장하면 값을 바꿀 수 없는 변수
● let (변수) : 나중에 값을 바꿀수 있는 변수
● app.js 파일의 맨 윗부분이 모두 변수를 선언하는 부분이다.
// 'API_URL'이라는 변수에 Mock Server 주소(문자열)를 저장
const API_URL = 'https://[...].mock.pstmn.io/items';
// 'itemForm'이라는 변수에 HTML에서 id="item-form"인 요소를 찾아서 저장
const itemForm = document.getElementById('item-form');
// 'itemNameInput' 변수에 id="item-name"인 input 요소를 저장
const itemNameInput = document.getElementById('item-name');
함수 ( function ) - 기능 꾸러미
- 여러 개의 명령어를 하나로 묶어 '이름표'를 붙인 여러번 재사용 가능한 기능 꾸러미
● 함수를 실행시켜 함수에 구현되 기능을 실행 시킴
● function 이름 (매개변수) {...} 형태로 만든다.
● add.js에서는 addItemToDOM이나 fetchItems가 함수다.
// "item(데이터)을 받아서 화면(DOM)에 추가한다"는 기능을 하는 함수
function addItemToDOM(item) {
// 플레이스홀더 제거 (명령1)
const placeholderItem = document.querySelector('.placeholder-item');
if (placeholderItem) {
placeholderItem.remove();
}
// li 요소 생성 (명령2)
const li = document.createElement('li');
// ... (li에 내용물 채우기) ...
// 목록에 li 추가 (명령3)
itemList.appendChild(li);
}
이벤트 리스너 ( Event Listeners ) - 행동 감지기
- JavaScript가 HTML/ CSS와 구별되는 가장 큰 특징이다.
- 사용자의 행동 ( 이벤트 )을 감지하고, 특정 이벤트가 발생했을 때 지정된 함수를 실행하도록 연결해 줍니다.
● " 사용자가 (무엇을) 하면, (어떤 함수를) 실행해라"는 구조
● 요소.addEventListener ( '이벤트 종류' , 함수 ); 형태로 사용
● app.js의 폼(Form) 제출 (POST)과 삭제 (DELETE) 로직이 대표적인 예시
// 1. 폼 제출(submit) 이벤트 감지
// "만약 'itemForm'에서 'submit'(제출) 이벤트가 발생하면,
// 이 함수( async (e) => { ... } )를 실행시켜라!"
itemForm.addEventListener('submit', async (e) => {
e.preventDefault(); // (명령) 폼의 기본 동작(새로고침)을 막아라
// ... (새 아이템을 추가하는 나머지 로직) ...
});
// 2. 클릭(click) 이벤트 감지
// "만약 'itemList' 영역에서 'click' 이벤트가 발생하면,
// 이 함수( async (e) => { ... } )를 실행시켜라!"
itemList.addEventListener('click', async (e) => {
// (조건) 만약 클릭한 대상이 .delete-btn 클래스를 가졌다면,
if (e.target.classList.contains('delete-btn')) {
// ... (삭제를 처리하는 로직) ...
}
});
이벤트 처리 ( Event Handling )
- JavaScript는 addEventListener는 '귀'를 HTML에 달아 놓고, 사용자의 행동을 '듣고(Listen)' 있습니다.
● 찜 목록에 추가 버튼 (form) 이벤트 감지
// 'item-form'이라는 id를 가진 <form> 태그를 선택
const itemForm = document.getElementById('item-form');
// itemForm에서 'submit' 이벤트가 발생하는지 감시
itemForm.addEventListener('submit', async (e) => {
// ... (버튼이 눌리면 이 안의 코드가 실행됨) ...
});◎ index.html의 id = "item-form" 인 sype = "sumbit " 버튼이 눌리면, 이 코드가 sumbit 이벤트를 감지하여 이벤트가 발생했을 때 수행하기 위해 작성 코드대로 동작한다.
● '삭제' 버튼 이벤트 감지
// 'item-list'라는 id를 가진 <ul> 태그를 선택
const itemList = document.getElementById('item-list');
// itemList 또는 그 자식들에서 'click' 이벤트가 발생하는지 감시
itemList.addEventListener('click', async (e) => {
// 만약 클릭된 요소가 'delete-btn' 클래스를 가졌다면
if (e.target.classList.contains('delete-btn')) {
// ... (삭제 버튼이 눌리면 이 안의 코드가 실행됨) ...
}
});◎ id = "item-form" 인 <ul> 영역에서 발생하는 모든 클릭을 감시하다가, class = "delete-btn " 이라는 '삭제 버튼'일 때만 반응합니다.
문서 제어 ( DOM Comtrol )
- HTML의 값을 '읽어오거나' HTML을 '새로 써서' 화면을 변경할 수 있음
여기서 화면은 태그로 구성된 HTML이며 이를 문서 (Document) - DOM이라고 한다.
DOM은 HTML자체를 의미 한다.
JavaScript는 이 DOM을 제어 (읽고,쓰기) 할 수 있다.HTML 값 '읽기' (Read)
● '찜 목록에 추가' 번튼이 눌렸을때 ( sumbit 이벤트 )
● JavaScript <form>안의 <input> 값을 읽어 옴
const itemNameInput = document.getElementById('item-name');
// (submit 이벤트 핸들러 내부)
const newItem = {
name: itemNameInput.value, // <input id="item-name">의 값을 읽음
price: parseInt(itemPriceInput.value), // <input id="item-price">의 값을 읽음
category: itemCategoryInput.value, // <select>의 값을 읽음
description: itemDescriptionInput.value, // <textarea>의 값을 읽음
// ... (이하 생략) ...
};◎ itemNameInput은 document.getElementById 으로 미리 선택해둔 HTML 태그
◎ .value 속성이 바로 사용자가 입력한 실제 찜 상품을 가져오는 핵심 명령어
◎ JavaScript로 읽어온 값들을 모아 newItem 이라는 Json 객체라는 형태에 데이터로 구성
<< 현재 HTML 쓰기는 서버와의 통신이 이루어지지 않은 상태로 JavaScript만을 이용하여 동작 하는것 >>
HTML '쓰기' ( Create/Write/Delete )
● 사용자 입력값이 구성된 JSON객체가 완성된 후 addItemToDOM 함수가 실행되어 찜 목록 <ul>에 새로운 찜상품 <li>를 추가 상품 값에 맞게 HTML 태그로 작성합니다.
// (addItemToDOM 함수)
function addItemToDOM(item) {
// 1. (Create) <li> 태그를 메모리에 새로 생성
const li = document.createElement('li');
// 2. (Write/Modify) 생성한 <li>에 HTML 내용을 삽입
li.innerHTML = `
<img src="${item.image}" ...>
<h3>${item.name}</h3>
<p>${item.price.toLocaleString()}원</p>
`;
// 3. (Write/Append) 완성된 <li>를 <ul id="item-list">에 부착
itemList.appendChild(li);
}
// (delete 이벤트 핸들러 내부)
if (isDeleteSuccessful) {
// 4. (Delete) 클릭된 버튼의 부모 <li>를 화면에서 제거
liToRemove.remove();
}자바스크립트 ( JavaScript ) 주요기능
● 이벤트 처리 : 사용자의 행동 ( 클릭, 입력)에 반응
● 문서 제어 ( DOM Control ) : HTML 요소를 '읽고','생성','수정','삭제'
● 서버와 통신 (HTTP Communication ) : 백엔드 서버에 데이터를 '요청'하고 '응답'을 처리
서버와 통신 ( HTTP Communication )
- 백엔드 개발자와 가장 밀접한 관계가 있는 기능은 서버와의 통신 기능 입니다.
- 이벤트 처리로 사용자의 클리을 감지하고 문서 제어로 사용자가 입력한 데이터를 newItem Json 객체로 만드는 것까지 성공 했습니다.
- 이 newItem은 사용자 컴퓨터의 브라우저 안에만 있습니다. 이 상태로 새로고침을 누르면 모든 데이터가 사라진다.
- 이 데이터를 영구적으로 저장하고 다른 사람과 공유하려면, 이 newItem을 어딘가 '전송'해야 합니다.
- 그 '전송'대상이 바로 백엔드 서버 입니다.
● JavaScript의 역할 : newItem 객체를 JSON이라는 형태에 담아, HTTP라는 '규칙'을 통해 백엔드 서버로 '요청(Request)' 보냅니다.
● 백엔드 서버의 역할 : Json 택배를 받아 담긴 내용물 ( newItem )을 서버에 저장하고, 성공한 결과를 JavaScript에게 '응답(Response)' 하여 보내준다.
newItem객체를 만듬 > JSON 상자에 넣음 > 요청 > 백엔드 > 상자를 받음 > newItem 내용물을 저장함 > 결과 > JavaScript 응답 > Response 보내줌
app.js 파일에 있는 fetch() 가 서버에 데이터를 전송하는 함수 이다.
fetch() 란?
'가져오다' 라는 뜻 그대로 서버에 데이터를 요청하고 응답을 받아오기 위해 사용하는 최신 함수
itemForm.addEventListener('submit', async (e) => {
...
if (isApiConnected) {
// --- 1. API 연결 모드 ---
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newItem)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const addedItem = await response.json();
addItemToDOM(addedItem);
} catch (error) {
console.error("상품 추가 중 오류 발생:", error);
alert("상품을 추가하지 못했습니다. Mock Server URL 또는 응답 형식을 확인해주세요.");
}
} else {
// --- 2. Demo (Offline) 모드 ---
console.log("Demo Mode: Adding item to local view only.");
// Demo 모드에서는 삭제 기능을 위해 임시 ID를 생성 (현재 시간을 ID로 사용)
const tempItem = { ...newItem, id: String(Date.now()) };
addItemToDOM(tempItem);
}
...
});
'HTML & 웹페이지' 카테고리의 다른 글
| [1주차] [4일차] 나만의 퀴즈 만들고 해석하고 풀기 (0) | 2025.11.27 |
|---|---|
| [1주차] [3일차] api 트러블 슈팅 및 나만의 퀴즈 만들고 해석하고 풀기 (0) | 2025.11.26 |
| [1주차] [2일차] 나만의 스토리 설계 웹 페이지 설계 (3) (0) | 2025.11.25 |
| [1주차] [1일차] 나만의 스토리 설계 웹 페이지 설계 (2) (0) | 2025.11.24 |
