2. 웹 Front-End와 웹 Back-End

웹 Front-End와 웹 Back-End

웹 Front-End (Client-Side)

1. 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공한다.
2. 사용자의 요청(요구사항)에 반응해서 동작한다.

웹 Front-End의 역할

• 웹 콘텐츠를 잘 보여주기 위해 신문, 책 등과 같이 구조를 잘 만들어야 함(HTML)
• 적절한 배치와 일관된 디자인 등을 보기좋게 제공해야 함(CSS)
• 사용자 요청을 소통하듯 잘 반영해야 함(JavaScript)

---

HTML 코드 예시 : HTML은 원하는 문서의 구조를 표현

<h1>Welcome to My house</h1>
<section>
	<h2>Location</h2>
	<p>Somewhere in Seoul</p>
	<h2>Features</h2>
	<p>have two rooms, one bathroom</p>
</section>
<footer>contact: 010-XXXX-XXXX</footer>

CSS 코드 예시 : HTML 태그를 꾸미기 위한 규칙을 표현

.window-header-icon{
	left:-28px;
	position:absolute;
	top:8px;
}

.window-header-inline-content{
	cursor:default;
	display:inline-block;
	margin:4px 6px 0 0
}

JavaScript 코드 예시 : HTML, CSS를 움직이고, 변경하는 등의 기능을 수행

let aCardList = [];
for (var i = 0 ; i < cardList.length ; i++){
	let str = `${cardList[i]}번째 카드`;
	let id = `list-${cardList[i]}`;
	aCardList.push(<li id={id} key={i} draggable='true' 
					onDragStart={dragStart}> {str} </li>)
}

---

웹 Back-End (Server-Side)

: 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할 수행 ex) 쇼핑몰에서의 back-end : 상품 정보를 가지고 있고 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할을 수행

Back-End 개발자가 알아야 할 것들

• 프로그래밍 언어(Java, Python, PHP, JavaScript)
• 웹의 동작 원리
• 알고리즘, 자료구조 등 프로그래밍 기반 지식
• 운영체제와 네트워크에 대한 이해
• Framework에 대한 이해(ex: Spring)
• DBMS에 대한 이해(ex: MySQL, Oracle)

cf. 웹 개발 시에는 크롬의 개발자 도구라는 편리한 기능을 사용하기 위해 크롬 브라우져를 사용하는 것이 권장됨