Web개발의 이해 FE/BE

Jaho·2021년 9월 27일

boost course

목록 보기
1/9

1) 웹 프로그래밍을 위한 프로그램 언어들

✔ 학습 목표

  1. 다양한 프로그래밍 언어의 종류에 대하여 알아보자
  2. 웹 프로그래밍에 좀 더 최적화된 프로그래밍 언어의 장단점에 대하여 알아보자.

🔍저급언어

기계 중심의 언어

1) 기계가 알아들을 수 있는 프로그램 코드를 작성한다.
2) 컴퓨터는 전기로 작동하며 0과1 즉 2진수로 이뤄진 값이라고 하며 이를 기계어(Machine Language)라고 한다.
3) 숫자로만 되어 있기 때문에 유지보수가 어렵다.
4) 숫자로만 된 프로그래밍 언어는 사용이 어렵다.
5) 숫자로 된 문장과 1:1로 대응하는 기호를 만들고, 그 기호로 프로그래밍
6) 사용되는 도구를 컴파일러(Compiler),기호로 작성된 언어를 어셈블리어(Assembly Language)라고 한다.

🔍고급언어

사람 중심의 언어

1) 사람이 좀 더 이해하기 쉬운 문법으로 프로그래밍
2) 작성된 소스코드를 번역하는 과정이 필요하며 이를 컴파일한다고 말하며, 이러한 일을 수행하는 것을 컴파일러라고 한다.
3) 우리가 흔히 접하는 JAVA,Python,C... 등이 있다.

📎 웹 관련 인기 언어

Python : 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발할 수 있다.
웹사이트 개발에서도 많이 사용되고 있습니다.

PHP : 웹 개발에서 많이 사용 된다.

JavaScript : 처음 시작이 브라우저에서 동작하는 언어였으며, 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀 가고있다.
프론트 개발자라면 반드시 알아야 할 언어!

JAVA : 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용되고 있다.
지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있다.

Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나 이다.

💡 생각해보기

1.프론트 엔드부터 서버 개발까지 한 가지 프로그래밍 언어를 사용하여 개발한다면 어떤 언어를 사용하는 것이 좋을까요?
JavaScript

2.다양한 라이브러리, 쉬운 개발, 읽기 쉽고 적은 코드를 장점으로 한다면 어떤 언어를 사용하는 것이 좋을까요?
Python

3.프로그래밍 언어에게 좋은 커뮤니티가 있다는 것은 어떤 장점을 가질까요?
지속적으로 발전되어 훌륭한 구조와 설계 기법이 가춰진다.

2) 웹의 동작 (HTTP 프로토콜 이해)

✔ 학습 목표

1.HTTP프로토콜의 작동방식에 대하여 알아보자.
2.HTTP프로토콜의 요청/응답 데이터 포맷에 대하여 알아보자.

📎 인터넷 (네트워크 통신)의 이해

  • 인터넷(Internet)
    TCP / IP 기반의 네트워크가 세계적으로 확대되어 하나로 연결된 네트워크의 결합체

📎 HTTP (Hypertext Transfer Protocol)

  • 팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명
  • HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)

🔍 HTTP 작동방식

  • 서버 / 클라이언트 모델을 따른다
    클라이언트가 서버에게 요청을 보내면 서버는 클라이언트에게 응답을 보낸다.

  • 장점
    1) 불특정 다수를 대상으로 하는 서비스에는 적합
    2) 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

  • 단점
    1) 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다.
    2) 이러한 특징을 무상태(Stateless)라고 말한다.
    3) 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다.

🔍 URL (Uniform Resource Locator)

  • 인터넷 상의 자원의 위치
  • 특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

4가지 특징

🔍HTTP의 동작

  • 요청 메서드 : GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식이 온다.
  • 요청 URI : 요청하는 자원의 위치를 명시한다.
  • HTTP 프로토콜 버전 : 웹 브라우저가 사용하는 프로토콜 버전이다.

💡 생각해보기

HTTP에 S가 붙은 HTTPS 는 어떤 용도로 사용되는 건가요? HTTP와 무엇이 다른가요?

HTTP의 보안이 강화된 버전
HTTPS는 통신의 인증과 암호화를 위해 사용된다.

3) 웹 Front-End 와 웹 Back-End

✔ 학습 목표

1.웹프론트엔드에 대한 역할과 기술적 구성
2.웹백엔드에 대한 역할과 기술적 구성

📎 웹프론트엔드

사용자에게 웹을 통해 다양한 콘텐츠(문서,동영상,사진등)을 제공한다.
또한 사용자의 요청(요구사항)에 반응해서 동작한다.

📎 웹프론트엔드의 역할

  • (HTML)웹콘텐츠를 잘 보여주기 위해 구조를 만들어야한다.(신문,책 등)
  • (CSS)보기좋은 디자인을 제공해야한다.
  • (JavaScript)사용자 요청을 잘 반영해야 한다.

🔍 HTML 코드 예시

원하는 문서의 구조를 프로그래밍 언어로 표현해야 한다.
HTML은 구조를 잘 표현해 준다.

<h1> 우리집에 오신걸 환영합니다 </h1>
<section >
   <h2> 위치</h2>
    <p> 경기도 시흥시 어딘가 위치하고 있어요~</p>
   <h2> 특징</h2>
    <p>  우리집은 마루가 아주 작아요~  하지만 옹기종기 모여있기 좋은 구조에요</p>
</section>
<footer>email : crong@kdd123.com</footer>

🔍 스타일 - CSS 코드예시

웹페이지를 꾸미기 위해서는 각각의 HTML 태그를 꾸미기 위한 규칙이 필요하다.
CSS는 이를 표현할 수 있는 프로그래밍 언어이다.

.window-header-icon {
left: -28px;
position: absolute;
top: 8px
}

.window-header-inline-content {
cursor: default;
display: inline-block;
margin: 4px 6px 0 0
}

🔍 동작 - JavaScript 코드예시

HTML,CSS를 움직이고 변경할 필요가 있을 것이다.
JavaScript가 그것을 해준다.

let aCardList = [];
for (var i = 0; i < cardList.length; i++) {
let str =`${cardList[i]}번째 카드`;
let id = `list-${cardList[i]}`;
aCardList.push(<li id={id} key={i} draggable='true' onDragStart={dragStart}> {str} </li>)
}

💡 웹프론트엔드의 역할을 쉽게알아보자


출처
사이트에 직접 들어가서 움직여보길 권합니다 꽤 재밌습니다!😊

  • HTML : 정적이며 디자인하기 어려워 보인다.
  • HTML+CSS : 정적이며 디자인하기 수월해 보인다.
  • HTML+CSS+JS : 동적이며 기능을 넣거나 동작할 수 있다.

🔍 백 엔드(Back-End)란?

  • 프론트 엔드(Front-end)가 프로그램의 앞 쪽,클라이언트의 입장에서 개발이 진행 된다면
    백엔드(Back-end)는 프로그램의 뒷 부분 쪽, 즉 서버 입장에서의 개발이 진행된다.
  • 프론트 엔드를 다른 말로 클라이언트 사이드(Client side),
    백 엔드는 서버 사이드(Server sid)라고 말한다.

🔍 백 엔드 개발자가 알아야 할 것들

백엔드 개발자는 클라이언트의 요청을 처리(해결) 한다.

  • 프로그래밍 언어(JAVA, Python, PHP, Javascript 등)
  • 웹의 동작 원리
  • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
  • 운영체제, 네트워크 등에 대한 이해
  • 프레임워크에 대한 이해(예: Spring)
  • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

4) browser의 동작

✔ 학습 목표

HTML파일이 올 때 브라우저가 어떻게 렌더링과정을 거쳐서 화면에 보이게 되는지 간단히 이해한다.

🔍 browser의 동작

  • Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있다.

  • 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어이다.

  • 인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있다.

  • 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있다.

  • 브라우저마다 서로 다른 엔진을 포함한다.


사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리과정

HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만든다.

이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이다.

DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합
이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있다.

이후에 이렇게 구성된 Render Tree정보를 통해 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 된다.

참고자료

HowBrowsersWork
브라우저는 어떻게 동작하는가

5) browser에서의 웹 개발-1

✔ 학습 목표
1.HTML 요청 이후 브라우저에서 해석되는 웹페이지(HTML) 안의 내용구성과 소스코드를 어떻게 위치시키면 될지 이해한다.

📎 HTML 문서구조
1.크롬브라우저가 없다면 설치하기
2.크롬 브라우저를 열고 크롬 개발자도구 열기
3.윈도우 (Ctrl + Shift + I)
맥(Option + Command + i)
4.접속 : http://www.amazon.com

🔍 알게 된 몇 가지 특징
HTML문서는 html이라는 태그로 시작해서 html태그로 끝난다.
head는 무엇을 하는 것인가?
html의 추가적인 정보를 담고있다.
body는 무엇을 하는 것인가?
화면의 표현되야할 div등이 있다.
HTML은 계층적이다.
HTML은 tag를 사용해서 표현한다.
안녕하세요
JavaScript와 CSS가 html 안에 여기저기 존재한다.

🔍 실습코드

저를소개해요

안녕하세요

코드스쿼드 크롱이라고 합니다
HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재한다.

JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고,
css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.

css,js는 코드가 많아질 경우에 파일로 처리한다.

참고자료
http://jsbin.com/?html,output

6) 웹서버

✔ 학습 목표

1.웹 서버의 기능에 대하여 알아봅니다.
2.웹 서버의 종류에 대하여 알아봅니다.

🔍 웹 서버란?

  • 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다.
  • 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것.
  • 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있다.

💡 웹 크롤러 : 네이버,구글 등 검색 사이트에서 다른 웹사이트 정보를 읽어갈 때 사용하는 소프트웨어(Software)

📎 웹 서버 소프트웨어의 종류

  • 가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS
  • Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있다.
    Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 Apache웹 서버와 마찬가지로 오픈소스 소프트웨어다.

7) WAS

✔ 학습 목표

1.WAS가 무엇인지 알 수 있다.
2.WAS의 종류를 알아본다.
3.웹서버와 WAS의 차이점을 설명할 수 있다.

🔍 클라이언트/서버 구조

클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용


클라이언트/서버 구조

🔍 DBMS (DataBase Management System)

  • 다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어
  • 데이터베이스를 관리
  • MySQL,MariaDB 등이 있다.

    DBMS (DataBase Management System)

🔍 미들웨어 (MiddleWare)

  • 비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 한다.

    미들웨어(MiddleWare)

🔍 WAS (Web Application Server)

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다.

WAS (Web Application Server)

💡 웹 서버 vs WAS

  • WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
  • 현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없다.
  • 규모가 커질수록 웹 서버와 WAS를 분리
  • 자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리
profile
Jaho
개발 옹알이 부터
다음 포스트

HTML

0개의 댓글