Today Hailie Learned

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

웹 접근성(Web Accessibility)이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다. 시력이 좋지 않은 경우, 텍스트를 음성으로 읽어주는 스크린 리더를 사용한다. 그런데 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다. 국내 온라인 쇼핑몰 사이트를 보면 상세 정보가 이미지로 올라와 있는 경우가 많다. 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점..! 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되고, 매출 증가..