학습 키워드
- Front & Back
- Web
- HTML
- CSS
- JavaScript
프론트엔드
- 사용자가 눈으로 보고 직접 조작하는 모든 영역
프론트엔드의 영역
클라이언트는 고객을 의미합니다. 하지만 컴퓨터 세계에서는 사용자를 클라이언트라고 표현하지 않고 사용자가 직접 사용하는 웹 브라우저(크롬, 웨일)나 스마트폰 앱을 클라이언트 라고 합니다.- 프론트엔드 영역은 클라이언트에 표시되는 화면과 사용자에 긍정적인 사용 경험을 담당하여
클라이언트 사이드(client-Side)에서 일한다고 합니다. 즉, 사용자가 쓰는 프로그램(웹 브라우저, 앱) 측을 구현하고 운용하는 겁니다.프론트엔드 개발자가 하는 일
사용자 인터페이스(User Interface) 디자인
- 사용자가 편하게 볼 수 있도록 디자인하고 배치하는 시각적인 일을 합니다.
- HTML로 뼈대를 만들고, CSS로 디자인을 합니다.
사용자 경험(User Experience) 설계
- 사용자가 클라이언트에서 행하는 행동에 반응합니다.
백엔드
- 사용자 눈에는 보이지 않지만, 서비스가 실제로 동작하게 하는 핵심 로직과 데이터가 처리되는 영역입니다.
백엔드의 영역
- 프론트엔드는
클라이언트하는 프로그램 영역에서 활동한다면 백엔드는서버라는 24시간 켜져있는 컴퓨터에서 활동합니다.서버라는 컴퓨터에서 기능을 처리하고, 데이터를 관리하고, 결과를 전송합니다.백엔드 개발자가 하는 일
비즈니스 로직(Business Logic)
- 클라이언트에서 요청이 들어오면, 규칙, 조건, 절차에 따라 데이터를 처리하고, 생성하고, 저장하는 핵심기능
데이터베이스(DataBase)
- 데이터베이스에 정보를 효율적으로 저장하고, 체계적으로 관리합니다.
API 응답
- 정리된 데이터를 프론트에 응답(Response)으로 돌려줍니다.
왜 백엔드 개발자가 프론트엔드를 알아야 할까
함께 일하기 좋은 개발자가 되기 위해서!
백엔드의 직무는 서버, 데이터베이스, 로직 구현입니다. 하지만 그렇게 만들어진 데이터 및 기능은 프론트가 사용하죠.
프론트엔드가 어떻게 운용되는지 모르면, 사용자가 원하는 프로그램을 만들기 어렵습니다.
이제는 프론트엔드를 이해하고, 필요로 하는 데이터를 정확하고 효율적으로 제공하는 능력을 위한 능력이 필요합니다.
인터넷 & 웹
인터넷(Internet)은 전 세계의 수많은 컴푸터를 연결하는 거대한 그물망(물지적 네트워크)를 의미합니다.웹(Web)이란, 전세계의 컴퓨터들이 인터넷을 통해 데이터를 공유할 수 있는 거대한 데이터 공간을 의미합니다.
웹의 3요소
주소(Uniform Resource Locator)
- 웹에 존재하는 수많은 데이터(문서, 이미지, 영상 등)의 '고유 주소'입니다.
- URL 주소를 통해 전 세계에 모든 웹 서비스 정보에 접근할 수 있습니다.
- 모든 웹 주소는 전세계에서 관리되고 있습니다.
규칙(Hypertext Transfer Protocol)
- 법규와 같은 통신 규약(Protocal)이 존재하며 이를 HTTP라고 합니다.
- 웹은 주로 HTTP라는 통신 규약을 준수하여 상호간 ‘요청’과 ‘응답’을 주고받는 방식으로 통신합니다.
- 최근 발전된 형태에 통신 규칙들이 탄생하고 있지만 여전히 대표적인 통신 규칙으로 사용되고 있습니다.
HTML (Hypertext Markup Language)
- 주소와 통신 규칙 아래 전달되는 실제 콘텐츠로 웹 페이지, 데이터, 이미지, 비디오 등 여러 형태의 디지털 자원이 그 대상입니다.
- 웹에 주 콘텐츠는 웹 사이트라고 할 수 있는 웹 페이지이며 HTML이라는 언어로 구성된 문서입니다.
웹 서비스 작동 원리
클라이언트와서버간에 HTTP 통신을 통해 콘텐츠(HTML, 데이터 등)을 요청하고 응답 받으며 작동하게 됩니다.
클라이언트
클라이언트는서버에 요청(Request)하는 모든 프로그램을 말합니다.- 프론트엔드 영역에 사용되며 대표적인 클라이언트로는
웹 브라우저와모바일 앱이 있습니다.
웹 브라우저
- 웹에 접속할 수 컴퓨터 프로그램(어플리케이션)을 말합니다.
- 웹 브라우저(Web browser)를 통해 HTML를 화면으로 표시할 수 있으며 CSS, JavaScript를 통해 웹 페이지를 다채롭게할 수 있습니다.
대표적인 브라우저
- Goolge - 크롬(Chrome)
- Apple - 사파리(Safari)
- Microsoft - 엣지(Edge) 등
핵심 역할
- 프로그램 내 URL창으로 웹 서버에 HTTP 요청(Requset)을 보냅니다.
- 웹 서버로부터 받은 응답(HTML, CSS, JavaScript) 파일을 해석합니다.
- 해석한 결과물을 우리가 보는 '화면'으로 그려줍니다.
모바일 앱
- 휴대폰 혹은 테블릿에 설치된 앱(어플리케이션)으로 브라우저와 마찬가지로 웹에 접속하여 웹 서버와 통신할 수 있는 기능을 제공합니다.
- 모바일 개발자(Android, IOS 등)가 개발하여 백엔드 서버와 통신합니다.
대표적인 앱
- 카카오톡
- 배달의 민족 등
브라우저와의 공통점
- 데이터를 주고받아야하는 경우 브라우저처럼 서버에 HTTP 요청과 응답을 주고받습니다.
브라우저와의 차이점
- 브라우저처럼 HTML을 받아 표시 할 수도 있지만, 대부분의 경우 화면을 그리는 코드는 앱 자체에 포함됩니다.
클라이언트의 작동 원리
- 1단계 (요청): 웹 브라우저가 주소창에 입력된 주소를 해석하여 웹 서버에 접근을 요청합니다.
- 2단계 (HTML 수신): 웹 서버는 미리 준비된 HTML 페이지를 웹 브라우저에 먼저 전송합니다.
- 3단계 (추가 리소스 요청): 브라우저는 수신된 HTML을 한 줄씩 읽어가며 CSS(스타일시트)나 JavaScript(스크립트) 같은 추가 리소스가 필요하면 다시 서버에 요청합니다.
- 4단계 (렌더링): 모든 리소스 수신 후, 브라우저는 이를 렌더링(화면에 그리는 작업)하여 최종 웹사이트를 완성합니다
HTML
- HTML은 하이퍼링크가 가능한 구조를 표시하는 언어라는 의미를 가집니다.
- 모든 HTML 문서는 태그를 기반으로 뼈대를 만듭니다.
데이터 전송 형식 JSON
- form을 통해 수집된 데이터는 서버로 전송될 때 JSON 형태로 변환되어 전송됩니다.
- JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위해 사용되는 텍스트 기반 형식입니다.
- JSON은 Key-Value 쌍으로 이루어진 형식이며, 여러 쌍의 값들은 콤마(,)로 구분됩니다.
CSS
- HTML이 웹페이지의 뼈대라면, CSS(Cascading Style Sheet)는 이 뼈대에 옷을 입혀주는 역할을 합니다.
- CSS는 '계층적 스타일 문서'라는 의미를 가지며, 기본적인 HTML을 꾸며주는 역할을 수행합니다.
- CSS는 HTML 없이 단독으로 사용될 수 없으며, 항상 HTML과 연결되어 디자인을 설정해야 합니다.
JavaScript
- JavaScript는 클라이언트에서 실행되는 프로그래밍 언어입니다.
- 사용자의 입력값에 따라 동적으로 상호작용하는 기능을 담당합니다.
- JavaScript는 변수, 자료형, 함수, 이벤트 리스너, DOM 조작의 다섯 가지 구성 요소로 만들어집니다.
- 이 중 변수, 함수, 이벤트 리스너가 웹 동작을 만드는 3대 핵심 요소입니다.
웹 동작 3대 핵심 요소
- 변수(Variable) 선언: 값을 저장하는 공간이며, const (값 변경 불가)와 let (값 변경 가능)을 통해 선언합니다.
- 함수(Function)의 정의: 코드의 동작들을 단계별로 묶어 놓은 단위이며, 실행 시 정의된 동작들이 순서대로 실행됩니다.
- 이벤트 리스너(Event Listener)의 작동: 사용자 행동(이벤트)을 감지하여 특정 함수를 동작시키는 트리거 역할을 합니다.
주요 기능
- 이벤트 처리(Event Handling): 사용자 행동(클릭, 입력 등)에 반응하여 정의된 동작을 수행합니다.
- 문서 제어(DOM Control): Document Object Model(DOM)을 조작하여 HTML 요소를 읽고, 쓰고, 수정하고, 삭제하는 기능을 수행합니다.
- 서버 통신(Server Communication): 백엔드 서버에 데이터를 요청하고 응답을 처리하는 기능을 담당합니다.
- 사용자 동작 인식(이벤트 처리) 후, 입력 데이터를 JSON 형태로 변형하고, fetch 함수를 통해 서버에 요청을 보내고 응답을 화면에 반영하는 과정을 처리합니다.
반갑습니다!