개발자 퉁이리

세션 세션은 일정 시간 동안 같은 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다. 서버에서 가지고 있는 정보 각 클라이언트에게 고유 세션 ID 부여 만료 시점은 브라우저를 종료할 때까지 유지 쿠키 쿠키는 어떤 웹 사이트 방문 시, 브라우저의 정보를 로컬에 저장한 파일을 말한다. 브라우저(로컬)에서 가지고 있는 정보 고유 세션 ID를 쿠키에 저장 만료 시점은 쿠키 저장 시 설정 💦세션과 쿠키를 왜 사용할까? 현재 가장 많이 쓰이는 통신 방식인 HTTP 통신의 보안성 때문에 사용한다. tmi) 보안성은 JWT 토큰이 보다 더 우수하다. ⭕ 이미 다룬 내용이지만 잠깐 짚고 넘어가자! 자세한 내용을 원한다면? HTTP의 개념과 HTTPS와의 차이점 ❗ HTTP의..

HTTP HTTP는 HyperText Transfer Protocol의 약자로 HTML을 포함한 여러 파일 등을 전송하는 프로토콜이다. 팀 버너스리가 속한 팀이 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명 문서화된 최초의 HTTP버전은 HTTP v0.9(1991년) HTTPS HTTPS는 HyperText Transfer Protocol over Secure Socket Layer의 약자로 보안이 강화된 HTTP이다. HTTP는 암호화되지 않은 방법으로 데이터를 전송 HTTPS는 이러한 문제점을 보완 HTTP의 특징 클라이언트-서버 구조 무상태 프로토콜 비연결성 1️⃣ 클라이언트-서버 구조 클라이언트는 서버에 요청을 보내고, 서버는 요청에 응답한다. Request / Re..

웹 서버 웹 서버는 하드웨어, 소프트웨어 혹은 두 개가 같이 동작하는 것을 말하지만 보통 소프트웨어를 말한다. 🧩소프트웨어 측면 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리한다. 🧩하드웨어 측면 웹 서버의 소프트웨어와 웹 사이트의 컴포넌트 파일들을 저장하는 컴퓨터를 말한다. 웹 서버는 클라이언트-서버 모델을 적용하여 만들어져 있다. *클라이언트-서버 모델 클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답받은 결과를 사용한다. 🎭 웹 브라우저 웹 서버에게 웹 사이트를 표시하는데 필요한 파일 등을 요청하는 프로그램 위 그림을 참고하여 설명하면, 서버는 브라우저에 스스로 연결할 수 없고 브라우저에서 HTTP 요청이 들어와야 브라우저에 정보를 보내줄 수 있다. 브라우저는 서버에 H..

TOAST UI 마크다운과 위지윅 방식을 지원하는 에디터이다. 📋 TOAST UI 세팅 https://nhn.github.io/tui.editor/latest/ 위 사이트에 접속하여 좌측 메뉴바에 Examples를 누르면 여러 가지 샘플을 볼 수 있다. 마음에 드는 샘플이 있다면 자바스크립트 코드와 HTML 코드를 가져와 사용하면 된다. (오픈소스) 🛒 이제 본격적으로 TOAST UI를 어떻게 사용하는지 알아보자 🔎TOAST UI 사용법 우선 사용하고 싶은 페이지에 CSS 코드를 추가해준다. 자바스크립트 코드도 추가해주자 CSS 코드와 자바스크립트 코드를 추가해주었으면 HTML 코드도 추가해준다. 마지막으로 아래 코드만 추가해주면 된다 const Editor = toastui.Editor; const e..

EM과 REM 고정적인 값이 아닌 상대적인 값을 표현해주어서 EM과 REM을 사용한다. 🔎 REM 페이지의 최상위 요소인 HTML 요소의 폰트 크기를 기준으로 크기를 정한다. font-size: 11rem; 💨 REM 장점 상속에 상관없이 일괄된 크기를 반환해준다. 따라서 별다른 번거로움 없이 반응형 크기 사용이 가능하여 기본적으로 REM을 사용하면 된다. VS 🔎 EM 상위 요소의 폰트 크기를 기준으로 크기를 정한다. font-size: 11em; 💨 EM 장점 상속에 의하여 크기를 반환해준다. 따라서 상속을 고려하여 신중히 사용해주면 보다 디테일하게 구현 가능하다. REM과 EM을 사용하면 반응형 웹사이트를 손쉽게 구현할 수 있다. 상황에 맞게 적절히 사용해주자 좋아요는 로그인하지 않아도 누를 수 있..

CSS 박스 모델 모든 HTML 요소는 박스 모양으로 구성되고 네 영역으로 이루어진다. 박스 모델은 Chrome 기준 F12를 누르면 Element Style 부분에서 바로 만나볼 수 있다. 네 가지 영역 내용 패딩 테두리 마진 1️⃣ 내용 텍스트나 이미지 등의 내용이 표시되는 영역이다. 폭과 높이로 크기를 지정할 수 있다. width:111px; height:111px; 2️⃣ 패딩 콘텐츠 내용과 테두리 사이의 여백 영역이다. 패딩은 눈에 보이지 않고, 마이너스 값의 지정도 가능하다. padding: 11px 11px 11px 11px; padding-top:11px; padding-bottom:11px; 3️⃣ 테두리 패딩과 마진의 경계에 있는 테두리이다. 테두리의 두께와 색상 등의 설정이 가능하다...

CSS 선택자 CSS 선택자는 style을 적용하고자 하는 HTML 요소를 선택자로 특정하여 스타일을 정의하는 것을 말한다. CSS 선택자 종류 📃 전체 선택자 📃 TAG 선택자 📃 ID 선택자 📃 CLASS 선택자 📃 자손 선택자 📃 자식 선택자 📃 인접 형제 선택자 📃 동적 선택자 📃 구조 의사 클래스 선택자 📃 전체 선택자 HTML 문서 내의 모든 요소를 선택한다. * { } 📃 TAG 선택자 지정된 태그명을 가진 요소를 선택한다. element { } 📃 ID 선택자 지정된 ID를 가진 요소를 선택한다. (선택자 앞에 #를 붙인다.) #ID { } 📃 CLASS 선택자 지정된 CLASS를 가진 요소를 선택한다. (선택자 앞에 .를 붙인다.) .CLASS { } 📃 자손 선택자 A 선택자의 하위 선..

BACKBONE 백본은 다양한 네트워크를 상호 연결하는 컴퓨터 네트워크의 일부이다. 그렇다는 말은 다양한 네트워크를 가지고 있다고 볼 수 있다. 이해가 안 되어도 좋다. 아래에 예시를 통해 자세히 설명할 것이다. 백본을 알기 위해 인터넷이 어떻게 동작하는지 살펴보도록 하자! 우리는 집에서 와이파이 또는 이더넷 케이블 등을 통해 인터넷을 이용한다. 집에서 인터넷으로 신호를 보낼때 우선 modem으로 신호를 보낸다. modem은 집 밖에 신호 탑으로 신호를 전송해준다. 신호 탑은 그 신호를 ISP로 다시 전달해주고 ISP는 인터넷 백본과 연결된다. 인터넷 백본이란? 인터넷 백본은 인터넷에서 가장 큰 데이터 연결이다. 다음 사진은 우리나라를 중심으로 세계가 어떤 식으로 인터넷 백본이 구성되어 있는지 볼 수 있..

브라우저의 렌더링 과정 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받음 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더트리 생성 JS를 파싱하여 AST를 생성하고 바이트 코드로 변환하여 실행. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경 가능. 변경된 DOM과 C..

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X const set = new Set(); console.log(set); // Set(0) {} Set 객체는 Set 생성자 함수로 생성하고, 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값을 Set 객체에 요소에 저장되지 않는다. Set 객체의 요수 개수 -> Set.prototype.size 프로퍼티를 사용 Set 객체의 요수 추가 -> Set.prototype.add 메서드를 사용 Set 객체의 요수 존재 여..