이전에도 많이 들어본 말이지만 요즘 백엔드 프론트엔드 말을 정말 많이 합니다. 프론트엔드(Front-End)는 흔히 말해서 사용자가 보는 화면을 말합니다.
실제 기술적으로 사람 눈에 보이진 않지만 코드적으로 조작을 하고 동작을 하는 경우가 많긴 하지만 대체로 이용자가 보고 눌리는 기능 모두를 뜻하게 됩니다.
서버에서 하는 일이 아니라 사용자가 볼 수 있는 화면을 일컫습니다.
프론트엔드에서 사용하는 기술은 자바스크립트, html, css정도가 있습니다. 이 3개의 셋트는 한 셋트라고 보시면 됩니다.
html은 화면의 ui나 레이아웃을 구상을 하며 css는 이렇게 구상된 레이아웃의 색을 입히고 위치, 마진, 패딩등의 여백을 주며 꾸며줄 수 있는 기능을 제공을 합니다.
자바스크립트는 여기에 동작을 넣어줍니다. 이를 테면 입력창에 숫자나 문자를 입력을 하면 결과를 나타내 주게 되는 부분등을 말하게 됩니다.
물론 숫자나 문자를 입력을 했을 때 연산을 해야 할 경우가 생겨 서버에서 데이터를 받아오면 데이터를 보내는거까지가 프론트엔드의 영역이고 받은 데이터를 서버에서 연산이나 디비 조회를 통해서 보내주게 되는데 이는 백엔드에 해당합니다.
프론트엔드는 요즘에 좋은 강의가 많이 있으므로 처음에 잘 모르더라도 따라해 보고 실서비스 수준의 프로젝트를 진행을 몇번 해보고 잔버그등을 고치며 완성도를 높인다면 충분히 익숙해 질 수 있습니다.
더 나아가서는 프론트엔드 직군으로 취업을 할 수도 있습니다.
참고로 디자이너가 디자인한 파일을 실제 화면에 html과 css를 활용을 하여 만드는것을 퍼블리셔라고 합니다.
회사에 따라 규모에 따라 자바스크립트를 하거나 프론트엔드가 맡기도 하고 3가지를 모두 프론트엔드가 하기도 합니다.
간단하게 백엔드는 사람이 보이지 않는 영역에서 처리가 되는 일을 말하며 서버단에서 처리를 하고 그 결과를 다시 백엔드에 보내주게 됩니다.
이 때 들어가는 기술이 ajax나 화면 리프레쉬등이 되겠습니다. 이렇게 받은 데이터를 자바스크립트로 처리를 해서 꾸며진 html화면의 공간에 알맞게 배치를 시켜줍니다.
사용자 입장에서 볼 때는 값의 변화나 화면 일부분의 변화가 되겠습니다.
자바스크립트의 사용빈도는 갈수록 높아지며 여기에 좀 더 다양한 언어와 라이브러리들이 많이 등장을 했습니다.
프론트엔드를 할 때 이전만큼은 아니지만 그래도 브라우저마다의 약간은 다른 처리로 인해서 html이나 css 혹은 javascript를 조절을 해줘야 할 때가 있습니다.
예를 들면 크롬 브라우저에서는 깨지지 않지만 파이어폭스나 엣지에서는 깨진다던지 하는 부분입니다. 서비스를 하는 입장에서는 시중에 나온 브라우저를 대부분 지원하길 바라기 때문에 이러한 부분을 구별을 하여 처리를 해야 하는 경우가 다반사입니다.
이를 크로스브라우징 대응이라고 합니다.아주 오래전에 익스플로러는 난이도가 정말 높았습니다만 지금은 아주 오래된 버전은 지원을 안하는 경우가 많으므로 주로 많이 사용하는 크롬, 사파리, 파이어폭스, 엣지, 웨일등에 맞추는 추세입니다.
작업의 편의성을 위해서 미리 와이어 프레임이나 목업등으로 구성을 해보기도 하고 이와 비슷한 기능을 하는 프로그램을 활용하여 디자인을 해서 그대로 html/css 코드로 뽑아주는 툴도 많이 있습니다.
