Web 개발을 위한 기본적인 프론트엔드, 백엔드 영역 정의.

개발자 영역에서 영역을 분리하자면 기본적으로 프론트엔드 영역 백엔드 영역이 나뉘어져있다.

Frontend

위에서 보는대로 프론트엔드는 앞단에서 클라이언트가 웹서버에 요청하는 부분이다. 인터넷을 사용할때 사용자는 웹브라우저를 통해 URL로 요청을 하고 웹서버는 그 데이터를 화면에 출력해주는데 그 앞에서 이뤄지는부분이 프론트 엔드 영역이다.

사실 쉬워보일수도있지만 영역이 좁지않고 모바일 환경까지 나오는 추세에서 꽤나 다양한 역할을 맡아야하기 때문에 뭘 하던 전문가영역까지 들어간다면 어렵다…(내가 멍청..)

프론트엔드 영역에서의 역할을 wiki에서 보여주는걸 가져왔다.

HTML , CSS , JavaScript 및 Sass 또는 JQuery 와 같은 언어에서 일반적으로 사용되는 보조 라이브러리와 같은 마크 업 및 웹 언어
비동기식 요청 처리 및 AJAX
단일 페이지 애플리케이션 ( React , AngularJS 또는 Vue.js 와 같은 프레임 워크 포함 )
웹 성능 (첫 번째 의미있는 페인트, 인터랙티브 한 시간, 60 FPS 애니메이션 및 상호 작용, 메모리 사용량 등)
반응 형 웹 디자인
브라우저 간 호환성 문제 및 해결 방법
헤드리스 브라우저를 사용한 엔드 투 엔드 테스트
Webpack 또는 Gulp.js 와 같은 도구를 사용하여 JavaScript 파일을 변환 및 번들링하고 이미지 크기를 줄이는 자동화 를 구축하십시오.
검색 엔진 최적화
접근성 문제
김프 또는 Photoshop 과 같은 이미지 편집 도구의 기본 사용법
사용자 인터페이스

그래서 이 프론트 영역에서의 구성을 어떻게하느냐에 따라 깔끔해보이고, 지저분해보이고 할 수 있기때문에 많은 공을 들이는부분이 아닐까 싶다.

백엔드는 화면에 출력해주는 부분이 아닌 그 뒤에서 이루어지는 전체적인 데이터 처리,전달,가공등을 담당하고있다. 예를들어 사용자가 naver.com을 통해 로그인을 한다고하면. 로그인 화면까지 보여지는 부분은 프론트엔드 영역이다.

그리고 그 UI에 ID와 PW를 입력하고 로그인을 누르는 순간 그 ID와 PW에 대해서 검증,확인을 담당하는 부분이 백엔드이다.

간단하게 ID/PW 요청 -> backend 부분에서 id가 있는지, pw가 맞는지, 이상한점(보안적인측면)은 없는지에 대한 검증을 마치고 정상적이라고 판단되면 다시 그 데이터를 프론트엔드부분으로 넘겨줘서 로그인이 완료됐다고 알려준다. 라고 보면 될거같다.

아무튼 프론트엔드와 백엔드 모두 서로 뗄래야 뗄수없는 영역이기 때문에 전체적인 흐름을 알고있다면 어떤부분을 하던지 많은 도움이 될거라고 생각한다.

아래는 Wiki에서 backend 역할로 작성해놓은걸 예시를 위해 가져왔다.

JavaScript , Node.js , PHP , Python , Ruby 또는 Perl 과 같은 스크립팅 언어 또는 C # , Java 또는 Go 와 같은 컴파일 된 언어
사용되는 언어에 대한 자동화 된 테스트 프레임 워크
응용 프로그램 데이터 액세스
응용 프로그램 비즈니스 로직
데이터베이스 관리
확장 성
고 가용성
보안 문제, 인증 및 권한
소프트웨어 아키텍처
데이터 변환
백업 방법 및 소프트웨어

아무튼 이러한 프론트엔드와 백엔드에 개념에서 기본적인 Web개발을 한번 해보려고한다.(취미의 영역에서 간단하게..)