부스트코스/Day03 :: 웹 Front-End 와 웹 Back-End

 

웹 프론트엔드?

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

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

 

웹 프론트엔드의 역할

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

 

HTML 코드 예시

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

HTML이라는 것은 그 구조를 표현

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

 

 

스타일 - CSS 코드예시

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

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

 

동작 - JavaScript 코드예시

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

JavaScript가 그걸 해줍니다.

 

---

백 엔드(Back-End)란?

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

 

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

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

※ 본 글은 '부스트코스' 홍보 목적으로 작성한 글이 아님을 밝힙니다.

단순히 교육의 목적으로 작성했고, 글 내용은 '부스트코스'의 내용을 토대로 수정하여 작성한 글입니다.

 

내용 출처

https://www.edwith.org/boostcourse-web/lecture/16662/

 

참고 사이트

http://html-css-js.com/