- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
Date 15/11/17 13:49:26
Name   Toby
Subject   웹 프론트엔드(front-end)란?
저는 웹 프론트엔드 개발자입니다.
영어로는 Web front-end Developer.
HTML, CSS, Javascript 작성을 주 업무로 한다는 뜻입니다.

저는 그 중에서도 HTML, CSS를 좀 더 집중적으로 다루는 마크업 개발자인데요.
(웹퍼블리셔라는 명칭으로 알고 계시는 분들도 있을겁니다. 네. 제가 그거 하는 사람이에요.)

디자이너가 포토샵으로 만든 웹사이트 디자인을 코드로 변환하는 작업을 하는 사람이라고 생각하시면 쉽습니다.
아래 주소의 영상을 보면 제가 하는 일이 어떤 일인지 대충 살펴보실 수 있을 것 같네요.
(제가 찍은 영상은 아닙니다.)

https://www.facebook.com/remainweb/videos/726851234087867/


HTML, CSS, Javascript가 하는 역할을 각각 나누면 다음과 같습니다.

HTML : 문서의 내용을 담는다
CSS : 그 내용에 디자인을 입힌다
Javascript : 그 내용에 동작을 추가한다


예를들면 이렇습니다.

<h1>예제 코드</h1>
<p>Front-end 역할 설명을 위한 예제입니다.</p>
<button id="xxx">누를 수 있는 버튼</button>

이게 HTML입니다.
예제코드라는 제목과, 짧은 설명글과, 버튼 하나. 라는 [내용]을 담고 있는 [문서]를 만들었습니다.

여기에 CSS를 통해 스타일을 입힙니다.
CSS 코드는 다음과 같이 작성합니다.

h1 {font-size: 20px; font-weight: bold;}
p {color: green;}
button {background: #bc132b; color: #FFF;}

제목은 20px크기로 두껍게, 본문은 초록색 글씨로, 버튼은 붉은색 배경에 흰색 글씨로 보이게 하라는 뜻입니다.
위에 작성한 예제 HTML에 이 CSS를 적용하면 다음과 같은 화면이 됩니다.

예제 코드

Front-end 역할 설명을 위한 예제입니다.




Javascript는 다음과 같이 작성합니다.

document.getElementById("xxx").addEventListener("click", abc);
function abc() {alert('눌렀냐!');}

xxx라는 버튼을 클릭했을 때 '눌렀냐!'라는 메시지를 보여주는 [동작]을 하는 것이지요.
우리가 흔히 생각하는 '프로그래밍'을 하는 작업은 Javascript에서 이뤄집니다.


위의 예제는 서버와 통신하는 작업은 전혀 없습니다.
클릭하면 메시지를 띄우게끔 되어있기는 합니다만, 그건 사용자의 브라우저 상에서 이뤄지는 작업일 뿐 서버와 통신해야 할 이유가 없으니까요.
눌렀을 때 서버상에 누른 횟수를 집계 하고자 한다면 그 때 서버와의 통신이 필요하겠지요.

이렇게 서버를 통하지 않고 사용자의 브라우저에서만 동작하는 특성을 가진 언어인 HTML, CSS, Javascript를 Front-end라고 부릅니다.
Front는 앞, end는 단. 합쳐서 '앞단'이라는 뜻입니다.

앞단이 있으면 뒷단도 있겠지요.
그래서 웹개발에서는 서버 개발자를 Back-end Developer라고 부릅니다. 뒷단 개발자라는 뜻입니다.



사용자들이 보는 것은 앞단이지만 보이지 않는 뒷단에서도 많은 준비작업들이 있습니다.


원래 해보려고 했던 것은 CSS Drawing에 대한 이야기인데, 너무 길어지는 것 같아 다음에 하도록 할께요.



8


    수박이두통에게보린
    누를 수 있는 버튼
    클릭
    눌렀냐!
    그래 눌렀다!
    크크크크
    damianhwang
    곧 node.js 로 서버프로그밍을 섭렵하시고 node webkit으로 desktop deploy까지 하는 만능 자바스크립트 개발자로 전직하시겠군요 ;-)
    할 수 있다면 좋겠으나 그렇게 되지 못할거라는건 제가 잘 알고 있습니다 흐흐
    damianhwang
    간절히 바라면 온 우주의 기운이 도와준다고들 ;;;;덜덜덜;
    호... 제로보드는 html만 되는줄 알앗는데 자바스크립트도 쓸수 잇엇군요;;
    script 태그는 필터링하도록 설정이 되어있는데, 태그에 직접 붙이는 인라인 스크립트는 먹습니다.
    눈부심
    이런 건 한 석 달 배우면 되나여?
    라고 겁없이 농을 던져 보았숴요.
    석달 배우면 됩니다 흐흐

    웹서비스 만들기 작심 40시간 라이브 https://opentutorials.org/course/1029
    이런 것도 있어요.

    물론 잘 하려면 10년을 해도 모자르기도 하지요.
    전 프론트가 싫어요...
    백엔드 기획이 더 재미있습니다...(...)
    아카펠라
    저는 쿼리만 짜고 싶네요...크크
    미적 센스도 없고 해서 css만 보면 거부감이 일어남...
    가끔 연습삼아 웹페이지 하나 만들어볼까 싶어도 포기하는게 css때문이죠.
    CSS를 다루기 힘드신 분들에게는 Bootstrap을 추천합니다.
    부트스트랩 덕분에 많은 웹 개발자들이 CSS를 직접 다루지 않고도 프로토타이핑을 쉽게 할 수 있게 되었지요.
    1일3똥
    관련 일을 하고있어서인지 더 심화된 내용을 보고싶어지네요 +_+
    Beer Inside
    공간감각 및 색에 대한 감이 없으면 하면 안되는 일이 더군요.
    이 일을 열심히 하다보면 그런 감은 계발이 되기도 합니다 흐흐
    그 감이 미적감각과는 또 다른 영역이기도 해서... 기술적인 감은 충분히 계발되는 것 같습니다.
    얼그레이
    세상에나 toby님 왤케 귀여우세요 크크크
    제가 요즘 배우고 있는 것도 요것들이지용:9
    toby님께 많이 빚지고 있습니당..!!
    레코드
    HTML 이나 CSS 는 기본적인 것만 알고 깊이있게는 모르는데 웹표준 시대의 프론트엔드 개발자로 살고 있습니다.. 센차의 ExtJS 덕분에요;;
    센차를 하고 계시는군요 흐흐
    저는 ExtJS 너무 어려워 보이던데...

    언어를 가리지 않아야 한다고 다들 말은 하지만, 익숙한 곳에서 사는게 제일 좋은 것 같기도 합니다 후후
    Dr.Pepper
    지금은 백엔드 기획쪽/데이터 모델링쪽 하고 있는데
    요즘 html5/css3/jQuery 독학 중입니다.
    추천할만한 강의 같은거 있을까요?
    생활코딩 추천드립니다.
    https://opentutorials.org/course/668

    기초를 다루고 있고 쉽게 설명하고 있어서 가치가 없어 보일 수는 있으나 이만한 교육자료가 없다고 생각합니다.
    오랜기간 운영하시면서 계속해서 강의를 업데이트 하고 계셔서 내용도 좋구요.
    중요한 내용들을 빠짐없이 알차게 꾸려놓으셨거든요.
    목록
    번호 제목 이름 날짜 조회 추천
    1636 댓글잠금 IT/컴퓨터소라넷은 사라질 수 있을까? 110 Beer Inside 15/11/25 10285 0
    1622 IT/컴퓨터20만원대 LG모니터 h/w 캘리브레이션 논란 18 Toby 15/11/24 22110 0
    1606 IT/컴퓨터노트4 9 헬리제의우울 15/11/21 5507 0
    1590 IT/컴퓨터애플, 스마트폰 시장 수익 점유율 94% 달성 27 Leeka 15/11/18 6549 0
    1581 IT/컴퓨터지킬+깃허브+마크다운=블로그 18 damianhwang 15/11/18 15998 0
    1576 IT/컴퓨터웹 프론트엔드(front-end)란? 20 Toby 15/11/17 8702 8
    1556 IT/컴퓨터최근 IT관련 소식 몇 가지 소개. 13 April_fool 15/11/13 6879 0
    1493 IT/컴퓨터테슬라의 엘론 머스크, 인간들이 말이양 말이양 8 눈부심 15/11/08 9561 0
    1473 IT/컴퓨터엥? 딥러닝 그거 바보 아니냐? 38 Azurespace 15/11/05 17597 7
    1466 IT/컴퓨터트위터 홍차봇 계정을 만들었습니다. 5 Toby 15/11/05 10171 2
    1408 IT/컴퓨터리뉴얼 프로젝트 오픈을 완료했습니다! 2 쉬군 15/11/01 7284 1
    1398 IT/컴퓨터애플, 삼성, 엘지의 3분기 스마트폰 실적 7 Leeka 15/10/31 8563 0
    1364 IT/컴퓨터애플, 1년간 매출 265조. 영업이익 78조 달성 6 Leeka 15/10/28 10310 0
    1331 IT/컴퓨터아이폰6s의 예상 판매량이 4500만대~5100만대로 집계되고 있습니다. 4 Leeka 15/10/24 8920 0
    1326 IT/컴퓨터아이폰 6s가 출시 되었습니다. 11 Leeka 15/10/23 8769 0
    1323 IT/컴퓨터인공지능, 고용 없는 성장 19 kpark 15/10/23 11719 1
    1292 IT/컴퓨터너의 잘못이 아니었다 7 헬리제의우울 15/10/19 7275 0
    1272 IT/컴퓨터간략하게 살펴보는 웹디자인의 역사 18 Toby 15/10/16 11376 13
    1217 IT/컴퓨터엘지, 삼성, 애플의 패블릿 대결과 가격 6 Leeka 15/10/10 8538 0
    1210 IT/컴퓨터아이폰 6s, 6s plus의 한국발매 날짜 및 가격이 나왔습니다. 17 Tikas 15/10/09 7300 0
    1197 IT/컴퓨터[TED] 페이페이 리: 어떻게 컴퓨터가 사진을 이해하게 되었는가 2 Toby 15/10/07 9765 3
    1192 IT/컴퓨터통신비가 줄었다는 방통위의 현실 2 Leeka 15/10/07 7586 0
    1187 IT/컴퓨터태블릿 & 노트북 종결자. 마소의 서피스 북이 공개되었습니다 17 Leeka 15/10/07 10233 0
    1144 IT/컴퓨터LG전자 모바일 2분기 영업이익 2억의 진실 5 Leeka 15/10/01 8016 0
    1141 IT/컴퓨터하이 방통위~ SKT가 영업정지기간에 이벤트를 합니다. 6 Leeka 15/09/30 8123 1
    목록

    + : 최근 2시간내에 달린 댓글
    + : 최근 4시간내에 달린 댓글

    댓글