개발자 퉁이리

가상 요소(의사 요소) 가상 요소 ::before, ::after는 CSS만으로 특정 부분에 스타일을 지정할 수 있게 도와주는 키워드다. 가상요소 중 ::before, ::after가 대표적이다. 해당 가상 요소(::before, ::after)를 사용하면 요소의 시작부분이나 끝 부분에 스타일을 추가할 수 있다. 티스토리 블로그 개발자 퉁이리 위의 HTML 코드를 예시로, 화면엔 위와 같이 출력된다. 😁 ::before 여기에 가상요소 ::before를 이용해 CSS를 추가해보자. 티스토리 블로그 개발자 퉁이리 위 코드와 같이 추가했다. li 앞에 "👿"가 추가되어야 한다. 화면을 보면 정상적으로 적용되었다. 😁 ::after 추가적으로 가상 요소 ::after도 추가해보자. 티스토리 블로그 개발자 퉁이..

프록시 프록시(Proxy)는 다른 사람을 대신하여 무엇인가를 하는 것으로, WEB에서는 클라이언트를 대신한다는 의미다. ❓ 클라이언트를 대신한다고? 예를 들면 서버와 클라이언트가 통신을 할 때, 그 사이에 프록시가 개입한다. 서버는 프록시를 '클라이언트'로 인식한다. 위 사진을 이해하기 더 수월하다. 프로시는 중개 서버다. 🧐 프록시 서버를 사용해야 하는 이유 개인정보 보호 속도 향상 차단된 정보에 접근 가능 1️⃣ 개인정보 보호 서버와 클라이언트가 정보를 주고받을 때, 나의 IP 주소 정보도 포함된다. 그렇지만 프록시 서버를 사용하면 IP 주소 정보를 변경한다. 즉, 개인정보가 보호된다. 2️⃣ 속도 향상 프록시 서버는 이전에 들어온 데이터들을 저장한다. 캐시를 사용한다는 뜻이다. 현재 요청이 들어온 ..

CORS CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 말한다. 브라우저는 동일 출처 정책(SOP)을 따라 자기 자신이 아닌 출처들은 전부 차단한다. 어떠한 데이터가 들어올지 모르기 때문이다. 그렇지만 우리는 여러 가지 정보를 필요로 한다. 외부의 다른 데이터들도 불러오고 싶다. ❓ 브라우저의 차단을 피하고 안전한 데이터를 불러올 수는 없을까? CORS가 서로 다른 리소스를 안전하게 받거나 내보낼 수 있게 해 준다. ✅ CORS 동작 과정 브라우저가 Origin 헤더를 요청에 추가합니다. 그리고 서버가 Origin 헤더의 값과 CORS 구성에 있는 메서드 및 출처 정보와 비교한다. 일치하는 항목이 있으면 Access-Control-Allow-Origin..

AWS AWS는 Amazon Web Services의 약자로, 다양한 클라우드 컴퓨팅 서비스를 제공하는 플랫폼을 의미한다. ❓ 클라우드 컴퓨팅이란? 클라우드 컴퓨팅은 인터넷을 기반으로 하는 컴퓨팅의 일종으로, 정보를 자신의 컴퓨터가 아닌 인터넷에 연결된 다른 컴퓨터로 처리하는 기술을 의미한다. 이 기술을 이용하여, 서버, 스토리지 등 컴퓨팅 자원에 대해 어디서나 접근이 가능하며 공유가 가능하다. AWS EC2 AWS EC2는 Amazon Elastic Computer Cloud의 줄임말로써 아마존에서 제공하는 서비스 중에서 컴퓨팅 파워의 규모를 자유자재로 변경할 수 있는 원격 웹 서비스다. 또한 사용한 시간만큼만 요금을 지불하도록 서비스가 구성되어 있어 개발자가 보다 쉽게 웹 규모의 클라우드 컴퓨팅 작업..

JWT 토큰 JWT는 Json Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 말한다. HTTP 헤더에 실어 서버로 보냄 별도의 세션 저장소가 필요 없음 메모리 관리 용이 ❓ JSON "key-value"로 이루어진 Data Object를 전달하기 위해, 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준을 말한다. 💦JWT 토큰을 왜 사용할까? 세션과 쿠키 인증방식은 세션 저장소를 사용하지만 JWT는 세션 저장소를 사용하지 않아도 된다. 이로 인해 서버와의 연결을 최소화할 수 있다. ⭕ 이미 다룬 내용이지만 잠깐 짚고 넘어가자! 자세한 내용을 원한다면? 세션과 쿠키 위 사진의 왼쪽, Encoded값을 보면 3개의 색이 있다. 3개의 색은 점(.)을 기준으로 나뉜다. 각각 빨간색은 ..

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..

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 선택자의 하위 선..