3 웹 Front End와 웹 Back End - accidentlywoo/legacyVue GitHub Wiki

3 웹 Front End와 웹 Back End

  • 들어가기 전에 웹은 프론트엔드(FE)와 백엔드(BE)로 나눠집니다.우리가 인터넷을 하기 위해서 브라우저에서 웹을 탐색하곤 하는데요. 브라우저를 프론트엔드 또는 클라이언트라고도 합니다.웹 백엔드는 인터넷 사용자에게는 보이지 않는 것이죠. 각각의 역할을 기술적인 관점에서 알아보도록 하죠.

학습 목표

  1. 웹 프론트엔드에 대한 역할과 기술적 구성
  2. 웹 백엔드에 대한 역할과 기술적 구성

핵심 개념

  • HTML
  • CSS
  • JavaScript
  • 클라이언트
  • 서버

학습하기

웹프론트엔드?

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

웹프론트엔드의 역할

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

HTML 코드 예시

원하는 문서의 구조를 프로그래밍 언어로 표현해야 합니다. HTML이라는 것은 그 구조를 잘 표현해 줍니다. `

Hello World

Front - End Web Development

Front - End Web Development Tutorial

`

스타일 - 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의 역할이다.

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

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