Front End. Day01 프론트엔드 첫걸음

소프트웨어는 요구에 맞게 컴퓨터 프로그래밍과 시스템설계를 합니다.

그러한 개발을 하는 사람들을 프로그래머, 즉 개발자라고 하는데요,

개발자는 어떤 분야를 하냐에 따라 많은 분야의 개발자로 나뉩니다.

그 중 웹개발에 대해 코딩하는 부분은 프론트엔드와 백엔드로 나누어지는데

 

프론트 엔드란?

 사용자 입장에서 불편함이 없도록 눈에 보이는 화면을 설계하고 백엔드에서 받아온 데이터를 어떻게 화면에 표출할지 고민하는 과정입니다.

 

백 엔드란?

 회원정보, 상품정보와 같은 데이터들을 어떻게 저장하고 관리할지와 어떤 로직을 구성해야 사용자들에게 보다 빠른 속도로 데이터 전달이 가능할지 표현하는 과정입니다.

 

이로 인해 프론트엔드 개발자와 백엔드 개발자는 개발하는 분야가 다른데요,

이 두가지를 전부 할 수 있는 개발자는 풀스택 개발자라고 합니다. (저의 목표죠)

 

저는 먼저 프론트엔드쪽부터 공부를 시작했습니다.

 

프론트엔드는 먼저 홈페이지의 외형에 대해 표출하는 개발을 합니다.

예시) 네이버 홈페이지 

화면의 버튼이나 검색창 메뉴 등 하나하나를 전부 프론트엔드 개발자가 꾸민겁니다.

이러한 디자인을 꾸미는건 두 가지로 나뉘는데

 

UI(User Interface)

 : 사용자 레이아웃(화면)

  사용자가 제품을 사용할 때 마주하게 되는 면(폰트, 컬러, 레이아웃)

UX(User Experience)

 : 사용자 경험(행위)

  사용자가 제품을 직간접적으로 사용하면서 얻는 만족감

 ==> 검색창을 예시로 하면, 검색창 입력, 버튼은 UI 검색 버튼을 누르는 행위는 UX

       즉, UI/UX를 고려하여 웹사이트를 만드는 것은 사용자가 웹 화면을 보고 이용할 때

       불편함이나 제약사항이 없는지 고려하여 만든다는 것 입니다.

 

-----------------------------------------------------------------------------------------------------------------------------------

프론트 엔드 구성입니다

 - 웹 기획자

   : 스토리 보드라고 하는 문서 자료로 화면을 구성하고 작성하는 사람입니다.

 - 웹 디자이너

   : 완성된 스토리 보드를 기반으로 명확하게 로고, 이미지, 색상, 컨셉 등 디자인을 구성하는 사람입니다.

 - 웹 퍼블리셔

   : 완성된 스토리보드와 디자인을 가지고 직접 html, css를 이용해 웹사이트를 구현합니다.

   : 간단한 js를 통한 이벤트도 구현합니다.

 - 프론트엔드 개발자

   : JS를 통한 비동기 통신 구현을 하며, JS 심화 과정을 통한 자바스크립트의 실행 과정 및 순서를 파악하여 능숙하게 다룰 수 있어야 합니다.

   : 또한 다양한 라이브러리(도구)를 활용해 적재 적소에 이벤트를 구현해야 하며, 백엔드 서버와 통신하여 얻은 데이터를 어떻게 보여줄 것인가 고민해야합니다.

 

개발자에도 다 직위와 포지션이 정해져 있습니다

 

개발 프로젝트의 포지션

 CTO : 기술 이사 (최고 경력자)

 PMO : 해당 프로젝트의 최고 관리자, 전체 프로젝트를 관리하는 포지션

 PM : 프로젝트를 지휘하는 책임자 (일정을 조율하고 주도)

 PL : 각 파트별 리더, 실질적으로 설계와 구현과 같은 실무적인 부분을 담당

 PA : 프로젝트 산출물 담당장이며 실무자 (개발자)  <-- 신입 개발자가 들어가는 위치

       주어진 시간과 비용에 맞게 프로젝트를 완료할 수 있도록 산출

 

밑에서부터 꾸준히 시작하여 올라가는거죠 

-----------------------------------------------------------------------------------------------------------------------------------

프론트엔드의 기초는 HTML입니다

 

HTML이란?

HyperText(웹 페이지에서 다른 페이지로 이동하거나 페이지 내 다른 데이터에 접근할 수 있도록 하는것)

Markup Language(웹 페이지 내 컨텐츠를 어떻게 표현해야 하는지 명령하는 언어)를 합친 용어입니다.

 

HTML은 웹페이지와 웹페이지 내 컨텐츠를 제작하기 위해 사용하는 언어이며 태그 형태를 띄고 있다는게 특징입니다.

--> HTML에선 해당 코드가 어떤 정보를 담고 있는지 알려주기 위한 것이며

--> 형태는 <명령어>...</명령어>

 

프론트엔드는 백엔드와 서로 협업하여 진행하는데

이 부분을 Request(요청)과 Response(응답)이라고 합니다.

 

나(프론트엔드)는 이런 URL을 줄 테니까 그에 맞는 화면과 데이터를 전달해달라

 

(요청) --------------------------------------------------> (응답)

 

예를 들면 무신사 홈페이지에 접속했을 때 상품마다 URL 끝에 코드가 달라지는데,

프론트 엔드 개발자는 해당 URL로 화면 레이아웃을 요청한 뒤 코드를 백엔드 서버에 전달해

해당 코드에 맞는 데이터를 받아와 화면에 표출합니다.

HTTP request

HTTP response

 

HTTP란?

HyperText Transfer Protocol의 약자이며 인터넷에서 데이터를 주고받을 때 사용하는 규약입니다(규칙, 약속).

따라서 주소에 http, https가 붙으면 해당 규약을 사용해 데이터를 주고 받겠다는 뜻입니다.

 

Q) 여기서 HTTP와 HTTPS의 차이는 뭔가요?

 s는 HTTP에 보안적인 기능과 요소가 추가된 것을 https로 지정했습니다.

 무슨뜻이냐,

 

먼저 HTTP는 통신 상대를 확인하지 않습니다

  - HTTP통신에선 상대방이 누구인지 확인하려는 처리가 없어 누구든지 요청을 보낼 수 있습니다.

  - 즉, 의미없는 요청도 수신하기 때문에 디도스공격에도 취약해집니다.

이 외에도 HTTP는 암호화하지 않은 통신이기 때문에 도청도 가능하고, 완정성을 보장할 수 없기 때문에 변조가 가능합니다.

그래서 이와 같은 문제들을 방지하기 위해 HTTPS라는 기술이 나오게 됩니다.

 

HTTPS는 HyperText Transfer Protocol Secure의 약자이며 HTTP에 보안기능을 추가하기 위해 나왔습니다.

기본적으론 HTTP의 프로토콜을 따라가는데 SSL인증서를 사용해 데이터를 보호하기 때문에 보안 기능이 향상됩니다.

 

SSL(Secure Sockets Layer) : 보안 소켓 계층을 이르는 말로, 인터넷에서 데이터를 안전하게 전송하기 위한 인터넷 통신규약 프로토콜입니다.

 

이러한 것으로 기업들이나 중요 홈페이지들은 전부 보안기능이 있는 HTTPS 를 사용합니다.

 

 

프론트엔드 수업의 첫날은 이렇게 끝났습니다

첫 수업이라 기초적인 정의를 배웠는데 하나씩 배워가는게 흥미가 많이 생기는 거 같습니다

다음 수업은 기본적인 HTML에 대해 설명하겠습니다