[TIL] IT 잡학사전 : Day 06 of 14 ( #16 ~ #20 )

오늘 TIL 3줄 요약

• 브라우저 엔진은 웹 개발에 필요한 브라우저의 핵심 기능이다.

• 브라우저에 저장하는 쿠키(사용자 정보 데이터)를 통해 사용자 편의성을 높였다.

• 웹 개발 직무로는 크게 프론트엔드(클라이언트 단)과 백엔드(서버 단)으로 나눌 수 이 둘을 합쳐서 풀스택 개발자라고 한다.

TIL (Today I Learned) 날짜

• 2023. 08. 30. (수요일)

오늘 읽은 범위

• 02 마당 코딩별 안내서 ━ 웹 기술 편

  • 에피소드 16 인터넷 익스플로러가 사라진 이유와 브라우저 엔진

  • 에피소드 17 아, 쿠키가 먹는 게 아니라고요?

  • 에피소드 18 프런트엔드, 백엔드?

  • 에피소드 19 서버가 뭔지 아직도 모른다고?

  • 에피소드 20 슈퍼 개발자만 할 수 있다, 풀스택?

책에서 기억하고 싶은 내용을 써보세요.

[ 인터넷 브라우저 ]

인터넷 익스플로러

• 과거

  • CSS 기술 최초 지원한 웹 브라우저

  • Ajax 기술 최초 지원

    • Ajax : 유튜브에서 영상을 클릭하면 새로고침 없이 해당 페이지 확인

  • 시장 독점

• 현재

  • 느린 업데이트 / 보안 취약점 ( 해킹 사례 증가 )

    • IE6 => IE7 : 5년 이상 걸림

  • [결과]

    • 몰락 : Internet Exploer ( 인터넷 익스플로러 )

    • 대체 : Edge ( 엣지 ) - 크롬 엔진의 Blank 기반

브라우저 엔진

• 브라우저 엔진의 주된 역할은 HTML, CSS, JavaScript를 이해한 후 specification ( 규격 ) 메뉴얼 문서에 맞춰 사용자의 장치에 상호작용 적인 시각 표현으로 변환시키는 것이다.

  • 브라우저 엔진은 C, C++, Rust 등으로 만들어진다.

• 브라우저 엔진은 브라우저의 핵심 기능이다.

  • 엔진이 최신 표준안, 최신 기술을 지원한다면 최신 웹 브라우저가 되는 것이다.

  • 즉, 엔진의 성능이 브라우저의 성능을 결정한다.

  • (ex) 크롬에서 새롭게 블루투스 API를 지원하다면, 다른 구식 브라우저에는 그 기능을 지원하지 않을 수도 있는 것이다.

• 브라우저는 여러 엔진들로 구성되어 있다.

  • 브라우저의 엔진은 렌더링 엔진을 보통 의미하지만, 검색 엔진, 자바스크립트 엔진 등 여러 엔진들이 최근에 추가로 사용되고 있다.( 그래서 브라우저 엔진이라고 하면 정확히 무엇을 의미하는지 파악해야 한다. )

  • (ex) 브라우저 엔진 Chromium, 렌더링(레이아웃) 엔진 Blink, JS 런타임(JS 엔진) V8

[ 쿠키 ]

웹 사이트를 방문할 때 브라우저를 통해 내 컴퓨터에 보관하는 기록물(사용자 정보)을 말한다.

웹사이트 이용에 편의를 위해 사용되는 정보 조각이다.

• 사용

  • 서버는 나의 브라우저에 데이터를 넣을 수 있다. ( 나에 대해 기록하기 위해서 이다. 관심사, 방문빈도, 인증, 여러정보 등 )

  • 첫 방문시 서버는 브라우저에 쿠키를 전달한다.

  • 재방문 요청 시 브라우저는 서버에 쿠키를 전달한다.

  • 서버는 요청 때 받은 쿠키의 정보를 가지고 페이지를 보여준다.

  • [ 주의사항 ]

    • 개인정보를 담은 내용이나 보안상 민감한 정보를 저장하는 데는 적합하지 않다.

    • 탈취되거나 사용자에 의해 조작되어도 크게 문제가 되지 않을 정보를 브라우저에 저장한다.

• 규칙

  편의와 보안 등의 이유로 몇 가지 규칙을 가지고 있다.

  • 규칙 1 : 도메인 1개에만 한정 한다.

    • 쿠키는 만들어 진 도메인에서만 사용해야 한다.

    • [예외] 도메인에 상관 없이 사용할 수 있는 쿠키도 있긴 하다.

  • 규칙 2 : 쿠키는 자동으로 보낸다. ( 대부분 자동 )

  • 규칙 3 : 쿠키는 컴퓨터 브라우저에 자동으로 저장된다.

    • 쿠키는 허가 없이 컴퓨터와 왕래할 수 있다.

    • 웹사이트 방문 시 자동으로 저장된다.

  • 규칙 4 : 쿠키는 유효기간이 있다.

• 쿠키 조회 및 정보 수집

  • 쿠키는 제3자가 조회하는 것도 가능하다.

  • 예를들어, 페이스북은 좋아요 버튼을 투를 경우 "쿠키123을 가진 사용자 철수가 민수의 블로그에 좋아요 버튼을 눌렀다."

[ 클라이언트 / 서버 ]

클라이언트

• 요청을 하는 쪽이다. ( 데이터를 받는다. )

• 정보를 서버 컴퓨터로부터 받아오는 역할을 한다.

서버

• 응답을 하는 쪽이다. ( 데이터를 준다. )

• 정보나 서비스를 저장하고 있다가 요청이 올 때 네트워크를 이용해 사용자의 컴퓨터로 응답(전달)해 준다.

• 특징

  • 24시간

    • 24시간 항상 인터넷이 연결되어 있다.

    • 24시간 대기 중이다가 요청이 오면 응답한다.

  • 저장소와 메모리 크기가 모두 어마어마하다.

  • 웹 사이트 주소를 입력되면 그에 맞는 웹 페이지 데이터를 꺼내서 보여 주는 코드다.

  • 주로, 오픈소스인 리눅스로 되어 있다.

• [참고] 개발자 사이에서 '컴퓨터에게 서버 역할을 시키는 소프트웨어'를 지칭하는 단어로도 쓰인다.

  • 아파치 HTTP 서버와 같이 컴퓨터의 특정 폴더에 담길 HTML 파일로 웹사이트를 띄울 수 있도록 하는 프로그램을 웹서버라 부른다.

  • 웹 서버(소프트웨어)를 설치해 놓고 실행하는 컴퓨터(하드웨어) 또한 '웹 서버'라고 부른다.

[ 프런트엔드 / 백엔드 / 풀스택 ]

프런트엔드

• 역할

  • 웹 환경의 실제 화면을 구현한다.

  • 웹 퍼블리셔 역할은 물론 자바스크립트로 프로그래밍 요소를 개발한다.

  • 사용자의 인터페이스가 상호 작용하는 기능을 구현한다. ( 클라이언트 개발자라 불리기도 한다. )

  • 필요한 데이터를 서버에 요청하고 반환 된 정보를 활용해서 화면에 구성하고 사용자에게 보여주는 역할을 한다.

  • 구현 기능 (예시) : 버튼, 입력란, 애니메이션, 반응형 디자인 등

• 개발 특징

  • 발전 속도 - 기술의 발전이 매우 빠른 편으로 자바스크립트 피로( JavaScript fatigue )라는 단어가 있을 정도다.

  • 피드백 ( 성취감 ) - 코드를 입력하면 시각으로 피드백을 받을 수 있다. ( 성취감이 높다. )

  • 웹 환경 ( 브라우저 ) - 웹 환경 브라우저의 발전에 큰 영향을 받는다.

• 기술 스택

  • 기술의 선택지가 거의 없다. ( Only HTML, CSS, JavaScript, TypeScript )

  • 자바스크립트를 주로 사용하지만 최근에는 이를 보완한 언어인 타입스크립트를 많이 사용하고 있다.

  • (ex) HTML, CSS, JavaScript, Rect, JQuerty, Vue, TypeScript 등

백엔드

• 역할

  • 사용자가 눈으로 볼 수 없지만 실제로 사용하는 기능을 구현한다.

  • 클라이언트에서 요청하는 부분을 처리하는 역할을 한다.

    • 클라이언트 부분의 기능을 제외 거의 모든 기능을 담당한다.

  • 24시간 켜져 있는 컴퓨터를 관리하고 자동화 시킨다고 생각하면 된다. ( 서버 개발자라 불리기도 한다.)

    • 백엔드는 서버를 기반으로 어플리케이션을 구현하고 데이터베이스를 다룬다.

    • 웹이나 앱 뒤에 있는 데이터베이스와 라우터 같은 것을 관리한다.

  • 구현 기능 (예시)

    • 계정 생성, 동영상 업로드, 댓글 저장 기능, 데이터베이스 처리 등

    • 백엔드에서 발급한 세션 아이디를 프론트엔드에서 요청마다 함께 전송하고, 백엔드에서는 세션을 확인해서 사용자의 로그인 여부를 식별하고 접근을 허가한다.

• 개발 특징

  • 발전 속도

    • 프론트엔드에 비하면 기술의 변화가 빠른 편은 아니다.

    • 아무리 백엔드에서 기술의 변화가 빠른 프레임워크(ex. node.js)라 해도 프레임워크에 비하면 느린편이다.

  • 피드백 ( 흥미 감소 ) - 코드를 입력하더라도 시각적으로 피드백을 받을 수 없어 흥미가 떨어질 수 있다.

  • 안정적 개발 - 프론트엔드와 비교할 때 안정적인 개발 환경(프레임워크)을 가지고 있다.

• 기술 스택

  • [구성요소] Server, Application, Database

  • 기술의 선택지가 다양하다.

  • 자바, 루비, 파이썬, C#, JavaScript 등

    • Spring, 루비 온 레일즈, Django, ASP.NET, Node.js 등

데브옵스

• 역할

  • 서버를 선택, 설정, 설치하며 데이터베이스와 보안도 함께 관리한다.

  • 개발과 운영의 합성어이다. 개발자와 정보 기술 전문가 사이에 소통, 협업, 통합을 강조하는 개발 환경이나 문화를 말하기도 한다.

풀스택 개발자

• 프런트엔드, 백엔드, 데브옵스 등의 지식들을 고루 갖추고 있는 개발자를 뜻한다.

• 서비스를 분담하는 대기업보다 소기업이나 스타트업에서 필요로 하는 개발자이다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

다양한 웹 개발 직무들을 알아볼 수 있는 시간이었습니다.

서버에 관한 개념을 조금 더 깊이 이해할 수 있었고, 브라우저 엔진에 대해서도 알 수 있는 시간이었습니다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

브라우저 엔진을 찾아보니 파트가 크게 3가지로 나뉘는 데 이 부분에 대해 좀 더 깊이 이해하고 싶네요.

오늘 읽은 다른사람의 TIL

다양한 블로그 글