로그인 바로가기 하위 메뉴 바로가기 본문 바로가기
난이도
심화

웹 프로그래밍(풀스택)

임시 이미지 [코스설계] Front-End 윤지수
http://www.boostcourse.org/web316/notice/2465
좋아요 4729 수강생 47513
아래의 글은 BOOSTER 서포터즈로 활동하고 진오(jin***))님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크:https://blog.naver.com/jinn_o/221787625415
2)작성 날짜: 20/01/28
 
(본문 내용)

웹 프론트엔드란?

프론트 엔드 웹 개발은 HTML, CSS 및 JavaScripts를 사용하여 데이터를 그래픽 인터페이스로 변환하여 사용자가 해당 데이터를 보고 상호 작용할 수 있는 방법을 말한다. (출처 : 위키백과)

웹 백엔드란?

백엔드 웹 개발은 프론트엔드 사용자로부터 다양한 형태의 입력을 받아, 해당 입력을 사용할 수 있는 규격을 따라 처리할 책임을 진다. (출처 : 위키백과)

.......이렇게 웹의 개념을 접근하면 어렵게 느껴지는 것은 당연하다!

좀 더 쉽게 웹 프론트엔드와 백엔드의 개념을 풀어보자.

프론트엔드

웹 세계에서 "보이는 부분"을 가리킨다. 웹 디자인이라고 생각하면 쉽다!

비유하자면, ex. 음식점의 카운터, 홀

엔드

웹 세계에서 "안보이는 부분"을 가리킨다. 웹 서버라고 생각하면 쉽다!

비유하자면, ex. 음식점의 주방, 창고

프론트엔드란?

위 사진을 보면 프론트엔드 쪽은 상당히 컬러풀하고 예쁘고 귀여운, 아름다운 것을 알 수 있다.

"사용자(즉, 클라이언트)"들에게 "보여지는 부분"이기 때문이다. !!

사용자들에게 아름다운 웹 페이지를 보여주기 위함 뿐만이 아니라,

사용자들의 요구사항(요청)을 제대로 정확하게 받고 백엔드에서 처리하기 위해서는,

웹페이지의 버튼이나 설명이 알기쉽고 보기쉽게 되어있어야 할 것이다.

(웹 콘텐츠(문서, 사진 동영상 등)들 또한 잘 보여주어야 한다.)

그런 것들을 위한 것이 바로, 프론트엔드이다 !

웹 프론트엔드를 대표하는 세가지의 언어를 소개하겠다.

HTML

(HyperText Markup Language)

웹 콘텐츠(문서, 사진 동영상 등)를 잘 보여주기 위한 뼈대, 구조

CSS

(Cascading Style Sheet)

적절한 배치와 일관된 디자인 등을 "보기좋게" 제공

Javascript

사용자의 요청을 소통하듯이 잘 반영하는 역할

아래의 페이지로 들어가면 html, css, javascript 를 체험하면서 좀 더 잘 이해할 수 있다.

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

HTML CSS JavaScript - Tools and Resources

HTML, CSS and JavaScript are the parts of all websites that users directly interact with. Our free online tool collection...

html-css-js.com

백엔드란?

위 사진을 보면 백엔드 쪽은 프론트에 비해...다소 징그러울정도로 복잡해 보이는 것을 알 수 있다.

백엔드는 사용자에게 보여지는 부분이 아니기 때문에, 아름답지는 않을 수 있다.

(그러나 개발자들끼리는 알아보기 쉽게 코드를 작성해야 하는 것은 중요한 요소이다.)

백엔드는, 말하자면 보이지 않는 뒷세계이다.

프론트, 즉 보이는 부분이 잘 동작하게 하기 위해서 작업을 하는 부분인 것이다.

백엔드는 "정보"를 가지고 있다. 프론트에서 요청한 것들을 수행하기 위한 정보이다.

해당 정보는 DB(데이터베이스)라고 불리며,

DBMS(데이터베이스를 쉽게 관리하기 위한 것)를 이용하여 데이터, 즉 정보들을 저장하고 관리한다.

해당 정보들과 사용자의 요청을 조합하여, 사용자에게 적절한 "응답"을 하는 것이 백엔드의 주 업무이다.

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

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

웹의 동작 원리

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

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

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

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


웹 프론트엔드의 중요성은?

간혹, 웹 서핑을 하다보면 위 사진과 같이 화면이 제대로 뜨지 않을 때가 있다.

하지만 기능들은 제대로 작동한다.

이럴 때가 바로 프론트엔드가 제대로 작동하지 않았기 때문에 이런 현상이 나타나는 것이다.

항상 보던 이쁜 네이버 화면이 아니다.

버튼들도 배치가 보기 좋지 않게 배열되어 있고, 맘에 드는 링크를 알아보기 힘들다.

이것이 바로 프론트엔드가 필요한 이유이다.


그러면 이제 위키백과의 설명을 이해해보자.

웹 프론트엔드란?

프론트 엔드 웹 개발은 HTML, CSS 및 JavaScripts를 사용하여

데이터를 그래픽 인터페이스로 변환하여

(데이터, 즉 웹 콘텐츠인 문서, 사진, 동영상 등을 사용자가 잘 인식할 수 있도록 이쁘게 변환하여)

사용자가 해당 데이터를 보고 상호 작용할 수 있는 방법을 말한다.

(사용자가 잘 꾸며진 웹 페이지를 보고 해당 사이트를 잘 사용할 수 있도록 하는 것을 말한다.)

(출처 : 위키백과)

웹 백엔드란?

백엔드 웹 개발은

프론트엔드 사용자로부터 다양한 형태의 입력을 받아,

(웹페이지를 사용하는 사용자가 요청을 하면,) (여기서 요청 = 버튼을 클릭하는 등의 행동)

해당 입력을 사용할 수 있는 규격을 따라 처리할 책임을 진다.

(해당 요청(버튼 클릭 등)을 알맞게 처리해야 된다.)

(출처 : 위키백과)

 

 ******************************************