9) 웹 Front-End 와 웹 Back-End

* 이 글은 부스트코스 웹 백엔드 강의 수강 바탕으로 작성되었습니다.

 

1. 웹프론트엔드?

사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

 

2. 웹프론트엔드의 역할

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

 

3. HTML 코드 예시

원하는 문서의 구조를 프로그래밍 언어로 표현해야 합니다.

HTML이라는 것은 그 구조를 잘 표현해 줍니다.

<h1> 우리집에 오신걸 환영합니다 </h1> 
<section > 
  <h2> 위치</h2> 
  <p> 경기도 시흥시 어딘가 위치하고 있어요~</p> 
  <h2> 특징</h2> 
  <p> 우리집은 마루가 아주 작아요~ 하지만 옹기종기 모여있기 좋은 구조에요</p> 
</section> 
<footer>email : crong@kdd123.com</footer>

 

4. 스타일 - CSS 코드예시

웹페이지를 꾸미기 위해서는 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위)를 꾸미기 위한 규칙이 필요합니다

CSS는 이를 표현할 수 있는 프로그래밍 언어입니다.

.window-header-icon { left: -28px; position: absolute; top: 8px } 
.window-header-inline-content { cursor: default; display: inline-block; margin: 4px 6px 0 0 }

 

5. 동작 - JavaScript 코드예시

HTML,CSS를 이리저리 움직이고 변경할 필요가 있을 거예요.

JavaScript가 그걸 해줍니다.

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>) 
}

---

6. 백 엔드(Back-End)란?

backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할이다

 

7. 백 엔드 개발자가 알아야 할 것들

• 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)
• 웹의 동작 원리
• 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
• 운영체제, 네트워크 등에 대한 이해
• 프레임워크에 대한 이해(예: Spring)
• DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)