전체 글

📅 Day.js란Day.js 라이브러리는 최신 브라우저에서 날짜와 시간에 대해 구문 분석, 유효성 검사, 조작, 출력과 같은 기능을 간편하게 처리하는 2KB의 아주 가벼운 자바스크립트 라이브러리입니다.- 공식 깃허브 설명(한국어)날짜 및 시간(이하 날짜)을 다루는 라이브러리에는 'moment.js'도 존재합니다.day.js보다 훨씬 많은 날짜 연산을 지원하지만, 235KB이라는 큰 용량과 사용되는 연산보다 그렇지 않은 연산이 더 많다는 문제점이 있습니다.(큰 용량의 단점: 다운로드 시간! 네트워크 비용! 렌더링 시간! 모두 증가) 따라서 공식 문서에서도 moment.js을 대체할 수 있는 라이브러리를 소개하고 있고, 그중 하나가 바로 day.js입니다.현재 공식적으로 moment.js는 더이상 업데이트..

🔐 OAuth(Open Authorization)OAuth(open authorizaiton)란 우리말로 '개방형 접근 권한 표준'라고 하며,민감한 정보는 제공하지 않으면서 제3자의 보호된 리소스에 접근할 수 있게 해주는 프로토콜입니다.다양한 플랫폼에 저장된 사용자의 데이터에 접근하기 위해, 현재 사용자가 접속한 사이트가 다른 플랫폼이 가지고 있는 접근 권한을 위임받는 것입니다. 🔐 OIDC(OpenID Connection)OIDC(openID connection)란 단순히 접근 권한을 넘겨받는 것에서 더 나아가 인증까지 한번에 하고 싶은 경우에 사용하는 프로토콜입니다.앞서 살펴본 OAuth(인가)에 + 인증이 더해진 개념으로, OAuth 2.0 프로토콜을 기반으로 상위 계층에서 편리하게 인증을 수행..

🔑 인증(authentication)과 인가(authorization)인증(authentication)이란 리소스에 대한 접근을 요청하는 주체의 신원을 검증하기 위한 활동입니다. 비밀번호나 생체인식 등을 활용하여 자격이 있는 주체인지 확인합니다.인증의 방법에는기본 인증(basic authentication)사용자의 아이디와 비밀번호를 base64로 인코딩인코딩 된 아이디와 비밀번호를 'Authorization' 헤더에 포함시켜 서버로 전송하는 방법가장 단순한 인증 방법 중 하나세션 기반 인증(session based authentication)서버가 사용자를 식별할 수 있는 세션을 생성해당 세션 id를 클라이언트에 전달하여 인증을 유지하는 방법토큰 기반 인증(token based authenticati..

🐌 CORS란'교차 출처 리소스 공유'라고 불리는 CORS(cross-origin resource sharing)는 웹 브라우저가 자신의 출처가 아닌 다른 출처(도메인, 포트 등)로부터 리소스를 얻는 것을 서버가 제어하는 보안 메커니즘(정책)입니다.- MDN Web Docs기본적으로 웹 브라우저는 보안을 위해 동일한 출처의 리소스에만 접근할 수 있는 동일 출처 정책(same-origin policy)을 따릅니다.이때 CORS는 동일 출처 정책을 완화하여, 서버가 허용한 경우라면 A라는 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근할 수 있도록 해줍니다.이를 위해 서버는 반환할 응답에 특정한 http 헤더를 포함하여 웹 브라우저의 요청을 허용할지 결정합니다.만약 다른 출처의 리소스에 대한 요청이..

🐝 검색 엔진 최적화란SEO란 'Search Engine Optimization'의 약자로, 한국어로는 '검색 엔진 최적화'라고 합니다. 이는 웹 사이트가 구글이나 네이버 같은 검색 엔진의 결과 페이지에서 더 높은 순위를 갖도록 최적화하는 과정을 의미합니다.검색 엔진에서 노출되는 검색 결과는일반적인 자연 검색(organic search)광고로 노출되는 PPC(pay-per-click)두 가지가 존재합니다.따라서 검색 엔진 최적화는 광고가 아닌 자연 검색 결과에서 나의 웹 사이트가 상위에 노출되도록 하는 작업입니다. 검색 엔진 최적화가 중요한 이유는 웹 사이트의 트래픽이 증가할 때 얻게 되는 이점들 때문입니다.상단에 위치한 사이트일수록 사용자가 방문할 가능성이 높아지고, 다른 웹 사이트과의 경쟁에서 우위..

문제 해결글로 작성하기엔 너무 사소한..실수 목록글로 정리해두고 같은 실수를 반복하지 않기 위해나중에 보고 웃으려고(과연..?)24.05.25 부터 정리 커맨드 창에서 단축키 사용 시 현재 입력 소스가 영문 키보드인지 확인하자커맨드 창에서 단축키 연습 중이었는데 갑자기 단축키가 먹히지 않음명령어가 작성되지 않아 키보드가 한글로 바뀌었는지도 몰랐음영문 키보드여야 단축키가 동작함 display: inline, block, inline-block은 속성을 적용하고 싶은 주체 요소에 직접 쓰자css에서 display: flex, grid 쓰다가 오랜만에 block 쓰려니까 부모 요소 안에 써버림그러고는 왜 태그에 너비랑 높이값이 적용되지 않는지 30분 고민함  justify-content는 여백이 있어야 잘 ..