Part 01 웹 프로그램 언어의 기초_04

Naver BoostCourse Full-Stack Developer Course

Part 01 웹 프로그래밍 기초

03. 웹 Front-End 와 웹 Back-End

※ Intro

- 웹은 프론트엔드(FE) 와 백엔드(BE)로 나눠짐

- 브라우저를 프론트엔드 또는 클라이언트라고 함.

- 웹 백엔드는 인터넷 사용자에게는 보이지 않는 것임

※ 학습 목표

1. 웹 프론트엔드의 역할 및 기술적 구성

2. 웹 백엔드의 역할 및 기술적 구성

※ 핵심 개념

- HTML

- CSS

- JavaScript

- 클라이언트

- 서버

※ 웹프론트엔드

- 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공함. 웹에서는 리소스라고도 함. 

- 웹 페이지가 원래는 하나의 문서. 

- 사용자의 요청 (요구사항) 에 반응해서 동작함

※ 웹 프론트엔드의 역할

- 웹의 콘텐츠를 잘 보여주기 위해 구조를 만듬 (예: 신문, 책 등과 같이) - HTML

- 적절한 배치, 일관된 디자인 등을 제공 (보기좋게) - CSS

- 사용자 요청을 잘 반영해야함 (소통하듯이) - Javascript

※ HTML 코드 예시

- 원하는 문서의 구조를 프로그래밍 언어로 표현해야함

- HTML 이라는 것은 그 구조를 잘 표현해줌

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

※ 스타일 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 }

※ 동작 - 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>) }

※ 백엔드 (Back-End)란?

- backend는 정보를 처리, 저장, 요청에 따라 정보를 내려주는 역할

- 쇼핑몰이라면 상품 정보를 가지고 있고 주문을 받아서 저장하고 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할

- 프론트 엔드(Front-end)가 프로그램의 앞 쪽, 클라이언트의 입장에서 개발이 진행된다면 백 엔드(Back-end)는 프로그램의 뒷 부분 쪽, 즉 서버 입장에서의 개발이 진행

- 프론트 엔드를 다른 말로 클라이언트 사이드(Client side)라고 말한다면, 백 엔드는 서버 사이드(Server side)라고 말함

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

- 백엔드 개발자는 문제를 해결할 수 있어야 한다. 그럴려면?

- 프로그래밍 언어(JAVA, Python, PHP, Javascript 등)

- 웹의 동작 원리

- 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식

- 운영체제, 네트워크 등에 대한 이해

- 프레임워크에 대한 이해(Ex: Spring)

- DBMS에 대한 이해와 사용방법 (Ex: MySQL, Oracle 등)