오늘 TIL 3줄 요약

• 쿠키란 어떤 웹 사이트에 방문했을 때 브라우저를 통해 컴퓨터에 보관하는 기록물을 말한다.

• 프런트엔드는 사용자와 가까운 사용하는 화면을, 백엔드는 프로그램의 가장뒤 데이터베이스등을 뜻함

• 서버란 항상 켜져 있는 컴퓨터이면서 인터넷에 연결되어 있고 접속 요청에 응답하는 컴퓨터이다.

TIL (Today I Learned) 날짜

2023.01.18

오늘 읽은 범위

[ Ep16 ] 인터넷 익스플로러가 사라진 이유와 브라우저 엔진

[ Ep 17 ] 아, 쿠키가 먹는 게 아니라고요?

[ Ep 18 ] 프런트엔드, 백엔드?

[ Ep 19 ] 서버가 뭔지 아직도 모른다고?

[ Ep 20 ] 슈퍼 개발자만 할 수 있다, 풀스택?

[ Ep 21 ] 서버리스는 서버가 없다는 뜻?

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

• 프런트엔드 기술을 ‘지원’하는 브라우저 엔진

  • 개발한 웹 브라우저의 핵심 프로그램을 ‘브라우저 엔진’ 또는 ‘렌더링 엔진’ 이라고 한다. 엔진이 웹 브라우저의 성능을 결정한다.

    • 게코(gecko) → 파이어폭스

    • 웹킷(webkit) → 사파리

    • 블링크(blink) → 크롬

• 쿠키는 웹 사이트에 방문했을 때 브라우저를 통해 컴퓨터에 보관하는 기록물을 말한다.

• HTTP(HyperText Tranfer Protocol)란 인터넷에서 정보를 주고받기 위한 일종의 규칙이다.

• HTTP에서는 우리와 서버는 항상 연결되어 있지 않기 때문에 쿠키를 활용한다.

• 쿠키의 규칙

  • 쿠키는 도메인 1개에만 한정한다.

  • 쿠키는 자동으로 보낸다.

  • 쿠키는 컴퓨터에 자동으로 저장된다.

• 프런트엔드(front - end)

  • 모든 프로그램의 가장 앞을 말하며 애플리케이션이나 웹 사이트에서 실제 사용하는 화면등 사용자가 보는 화면의 인터페이스를 의미한다.

  • 기술의 변화 속도가 엄청 빠르다.

  • 입력한 내용을 바로 볼 수 있다.

  • HTML, CSS, 자바스크립트 필수(그외 리액트, 제이쿼리, Vue.js등)

• 백엔드(back - end)

  • 모든 프로그램의 가장 뒤를 말하며 애플리케이션이나 웹 사이트에서 뒤쪽 데이터베이스, 라우터등 사용자가 눈으로 볼 수 없지만 실제로 사용해야 하는 기능을 의미한다.

  • 개발 환경이 안정적이다 프런트엔드보다 변화 속도 느림

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

  • PHP, 자바, 파이썬, 자바스크립트, C#등 필요

• 풀스택(full stack)

  • 프런트엔드, 백엔드, 데브옵스를 포함한다. (데브옵스: 소프트웨어의 개발과 운영의 합성어)

  • 프런트엔드, 백엔드 개발을 마치고 나서도 서버 설정, 소프트웨어 설치, 데이터베이스 설정, 보안등 데브옵스 과정도 할 줄 알아야 한다.

• 서버

  • 24시간 항상 켜져 있고 인터넷에 연결되어 있어 접속 요청에 응답해주는 시스템

• 서버리스

  • 직접 관리하지 않는 서버를 뜻하며 아마존, 구글, 마이크로소프트 등 최신 서버를 정전이나 각종 사고 없이 안전하게 관리해주는 서비스를 제공해준다.

  • 하드웨어를 제공, 관리해 줄 뿐 서버의 소프트웨어 관리는 자신이 해야한다.

  • 사이드 프로젝트, 프로토타입을 최대한 빠르게 출시하고 싶은 기업등 서버 관리, 설정에서 시간을 아끼고싶다면 추천.

  • 서버리스 프레임워크 사이트 : serverless.com, AWS 람다, 구글 클라우드 펑션, 아펙스, 테라폼

• 웹 브라우저 익스텐션(웹 브라우저에 추가로 장착할 수 있는 도구)추천

  • ColorZilla : 웹 페이지의 색상을 스포이드 기능으로 뽑아 낼 수 있다.

  • Momentum : 부라우저 창을 멋진 풍경이나 그림이 배경으로 나타내주는 서비스

  • CSSViewer : 특정 페이지의 CSS 엘리먼트를 확인할 수 있게 도와준다.

  • JSON Viewer : 웹 브라우저에서 JSON 파일을 정리해서 보여준다.

  • React Developer Tools : 리액트 개발을 공부한다면 필수 state와 prop등 리액트 관련 정보를 모두 볼 수 있게 해준다.

  • WhatFont : 웹 사이트에서 폰트 이름을 알아낼 수 있다.

  • Grid Ruler : 웹 사이트에서 줄자를 사용할 수 있게 해준다.

  • BuiltWith Technology Profiler : 웹 사이트가 어떤 기술로 만들어졌는지 알려준다.

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

• 기본적인 개념들을 쉽게 잡고 갈 수 있어서 유익하다.

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

오늘 읽은 다른사람의 TIL

[IT 5분 잡학사전] ITL 작성하기 - 에피소드 16 ~ 21까지! - 노마드 코더 Nomad Coders

깔끔한 정리

[노마드코더] 개발자 북클럽 - IT 5분 잡학사전 DAY6 - 노마드 코더 Nomad Coders

깔끔한 요약

TIL Ep16-21 - 노마드 코더 Nomad Coders

깔끔한 정리