개발자 퉁이리

WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..

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

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는 인터넷 백본과 연결된다. 인터넷 백본이란? 인터넷 백본은 인터넷에서 가장 큰 데이터 연결이다. 다음 사진은 우리나라를 중심으로 세계가 어떤 식으로 인터넷 백본이 구성되어 있는지 볼 수 있..