Today Hailie Learned

인증에 필요한 기본 지식 Cookie Cookie 배경 쇼핑몰에서 살 아이텀을 장바구니에 넣고 여기저기 돌아다녀도 장바구니 안의 아이템은 유지가 된다. HTTP는 stateless (무상태성)인데 어떻게 정보가 유지 될까? 바로 쿠키 Cookie 덕분이다! 🍪 Cookie 란? 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다. 그러므로 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다. 그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클..

암호화는 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록 '알고리즘'을 이용해 정보를 관리하는 과정이다. Encryption 예 const shiftBy = function(content, offset) { return content.split('').map(function(letter) { return String.fromCharCode(letter.charCodeAt() + offset); }).join(''); } shiftBy('apple',2) // 출력 'crrng' shiftBy('crrng',-2) // 출력 'apple' Hashing 이란? 어떠한 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것 ..

HTTPS 이란? (Hyper Text Transfer Protocol Secure Socket layer ) HTTP 프로토콜 내용을 암호화 (HTTP + Secure) HTTP over SSL(TLS), HTTP over Secure라고 부르기도 한다. HTTPS는 HTTP 요청을 SSL 혹은 TLS라는 알고리즘을 이용해, HTTP 통신을 하는 과정에서 데이터를 암호화하여 전송하는 방법이다. HTTPS 특징 인증서 (certificate) - 데이터 제공자 신원 보장 = 데이터를 제공한 서버가 정말로 데이터를 보내준 서버인지 인증, 확인하는 용도이다. - 도메인 종속 = 인증서 내용에 서버의 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다. 인증서의 도메인과 응답객체의 도메인을 비교할..

웹 캐시 웹 캐시를 검증할 수 있는 여러 헤더 프록시 캐시 - 캐시(cache)는 컴퓨터 과학에서 데이터난 값을 미리 복사해 놓는 임시 장소이다. - 웹에서도 동일한 요청의 경우 같은 데이터를 다시 다운로드하지 않고 이를 웹 캐시로 저장해서 빠르게 불러올 수 있다. - 개인 컴퓨터에 저장하는 프라이빗 캐시 & 여러 유저에게 공통적으로 보여지는 데이터의 경우 프록시 서버에 별도로 캐시를 저장해서 사용자 경험을 향상시킬 수 있다. HTTP 헤더 - 캐시와 관련된 if) 캐시(데이터나 값을 미리 복사해 놓는 임시 장소)가 없을 경우 { 앞의 사례처럼 동일한 이미지를 요청하는 데 네트워크를 통해 같은 데이터를 또 다운받아야한다. } 결과 ➥ 용량이 클수록 비용이 커지고 브라우저의 로딩 속도가 느려진다. ➥ 느린..

HTTP 역사 응용계층에 속하는 HTTP, 이는 웹 사이트를 이용하기 위해 사용한다. HTTP/ 1.1 ~ HTTP/2 는 TCP 기반 프로토콜, HTTP/3 는 UDP 기반 프로토콜 HTTP 특징 클라이언트 서버 구조 = 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보낸다. 무상태성 프로토콜 (stateless) = 서버가 클라이언트의 상태를 보존하지 않는다. (클라이언트가 기억해서 데이터 전송) - 장점 : 서버 확장성 높음(스케일 아웃) - 단점 : 클라이언트가 추가 데이터 전송, 로그인이 필요 없는 단순한 서비스 소개 화면 같은 경우에는 무상태로 설계할 수 있지만, 로그인이 필요한 서비스라면 유저의 상태를 유지해야 하기 때문에 브라우저 쿠키, 서버 세션, 토큰 등을 이용해 상태를 유..

OSI 7계층 모델 OSI 7계층 모델 = ISO라는 국제표준화기구에서 제정한 표준 규격. 예전에는 같은 회사에서 만든 컴퓨터만 통신이 가능했는데, 다른 회사의 시스템이라도 네트워크 유형에 관계없이 상호 통신이 가능한 규약 (프로토콜)이 필요했다. 그래서 ISO에서 제조사에 상관없이 공통으로 사용할 수 있는 네트워크 표준 규격을 정의했다. OSI 7계층 모델 목적 = 표준화를 통해 포트, 프로토콜의 호환 문제를 해결하고, 네트워크 시스템에서 일어나는 일을 해당 계층 모델을 이용해 쉽게 설명할 수 있다. 또한 네트워크 관리자가 문제가 발생했을 때 이것이 물리적인 문제인지, 응용 프로그램과 관련이 있는지 등 원인이 어디에 있는지 범위를 좁혀 문제를 쉽게 파악할 수 있다. 하드웨어와 소프트웨어가 수행하는 기능..

패킷 교환 방식 회선 교환 방식 : 송수신 단말장치 사이에서 데이터를 전송할 때마다 통신경로를 설정하여 데이터를 교환하는 방식이다. 패킷 교환 방식 : 일정한 데이터 블록인 패킷을 교환기가 수신측 주소에 따라 적당한 통신경로를 선택하여 전송하는 교환방식이다. 전송하고자 하는 정보를 일정한 크기의 데이터로 분할한 후, 송수신 주소인 헤더를 각각에 부가한 패킷단위로 전송한다. IP(인터넷 프로토콜) = 인터넷 통신의 기본 IP 주소를 컴퓨터에 부여하여 통신한다. IP는 지정한 IP주소에 패킷이라는 통신 단위로 데이터를 전달한다. 패킷에는 출발지 IP, 목적지 IP 정보가 포함되어 있다. 패킷 단위로 전송시 노드들은 목적지 IP에 도달하기 위해 서로 데이터를 전달한다. 이를 통해 복잡한 인터넷 망 사이에서도 ..

토이 프로젝트에서 더미 데이트를 작성했습니다. 더미데이터는 배열 안의 객체의 나열로 만들었습니다. 지금은 id의 숫자를 기준으로 오름차순으로 화면에 나타나는데, 저는 내림차순으로 화면에 나오게 하고 싶었습니다. 실습 const arr = [{p:1},{p:2},{p:3},{p:4},{p:5}] arr.sort((f,s) => { const idF = f.p; const idS = s.p; if(idF > idS) { return -1; } if(idF < idS) { return 1; } return 0; } ) 결과 [ { p: 5 }, { p: 4 }, { p: 3 }, { p: 2 }, { p: 1 } ] 실제 코드 function Data({ data, setData }) { // dummydat..

fontawesome 의 공식 문서를 참고했습니다. 👇리액트에서 fontawesome 사용하기👇 https://fontawesome.com/docs/web/use-with/react/ 1. 각종 패키지를 install 을 해줍니다. npm i --save @fortawesome/fontawesome-svg-core # Free icons styles npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons # Pro icons styles npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-sv..

WAI-ARIA 란? WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격, 짧게, 웹 접근성을 향상시킬 수 있는 방법 중 하나 WAI (web accessibility initiative) = 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA (accessible rich internet applications) = 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술 RIA (rich internet applications) = 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. WA..