스웨거 흔히 스웨거(Swagger)라고 부르는 OpenAPI를 사용할때, 저는 누가 어떻게 보느냐를 고민합니다. 직접 인증을 구현한 경우는 로그인을 시키고, AWS를 사용하는 경우 ip로 접근을 불가하게 만들기도 했습니다. 하지만 GCP의 CloudRun을 이용하는 경우, 구체적인 자원에 접근하기 어려워 Ip로 접근을 차단하는 것은 한계가 있었습니다. 그래서 떠올린게 basic auth였습니다. 물론 brute-force 공격에는 뚫리기야 하겠지만, 비용 대비 얻는게 크다고 생각했습니다. 제가 원하는 건 아무나 보지 못하는 것이고, 보안 관리는 기본적으로 구글에서 해주기 때문에 제 목적에 딱 알맞는 것이었죠....
TL;DR 업무상 필요에 의해 컨트리 뷰션했습니다. 외부 js라이브러리를 typescript에서 쓰기 위해 래핑하였습니다. chakra ui를 사용하며, 필요를 느낀 컴포넌트를 만들었습니다. 재미있었고, 공부가 많이 되었습니다. 계기 다음 두가지 상황에서 각각 definitly typed 프로젝트와 chakra ui 프로젝트에 PR을 올리게 되었습니다. 도입한 라이브러리에서 typescript 지원을 하지 않는다. 내가 필요한 기능이 닫힌 이슈로만 올라와 있다. 도입한 라이브러리에서 typescript 지원을 안한다. scroll restoration과 관련하여, 모바일에서 계속 오류가 나는 상황이 있었습니다. 이 버그는 사용환경인 모바일에서 신경이 안쓰이진 않을 정도로 ‘가끔’ 일어났기 때문에 수정이 어려웠습니다....
이번 문서의 목적 CSS Inheritance, Cascading의 정의를 설명할 수 있다. CSS Inheritance, Cascading의 적용 과정을 설명할 수 있다. CSS의 규칙 충돌을 설명할 수 있다. CSS 규칙 충돌? CSS의 역할은 한 Markup Element, HTML에서는 HTML Element에 대해 꾸며주는 역할을 합니다. CSS 규칙 충돌은 한 HTML Element에 대해 여러가지 규칙이 적용될 수 있는 상황을 이야기 합니다. 우리는 논의 중 충돌이 발생하면 합의된 기준을 두고 점수를 매겨 우선순위를 산출합니다. 기준을 합의할 때, 각 기준은 명확하고 측정이 가능해야 합니다....
이번 문서의 목적 CSS의 정의를 설명할 수 있다. CSS? CSS의 정의 CSS는 Cascading Style Sheet의 약자입니다. CSS의 기본 문법 구조 CSS는 Rule Set(혹은 Rule)이라고 부르는 기본 단위가 있습니다. 가장 단순한 구조는 아래와 같습니다. 1 2 3 4 /* RULE SET */ selector { property: value; } selector는 우리가 작성했던 HTML Element의 요소들을 가리킵니다. 말 그대로 selector 입니다. selector의 설정은 다음을 참조해 주세요. HTML에 style을 입히는 방법 1. <style>태그를 이용한다. HTML의 HEAD 태그에서 style 태그를 열고 그 안에 CSS문법으로 rule을 작성하면 적용할 수 있습니다....
발단 바야흐로 때는 얼마전입니다. 제가 속한 회사의 내부 조직을 위한 JS번들(간단한 JS 파일)로 인해 저희 플랫폼의 초기 로딩속도가 매우 느리다는 소식을 접했습니다. 분명 거의 6개월 동안 정상적으로 서빙되던 사이트가 왜 갑자기 느려진 것일까. 두려웠습니다. 문제의 확이은 Google Analytics(이하 GA)의 사이트 분석에서 부터 시작되었습니다. 네, 마케팅 팀에서 사이트 로딩 속도가 느려 유저 이탈률이 높다라는 피드백을 주신 거였죠. PO님께서는 해당 피드백을 들으신 후에 바로 현황을 분석해 주셨습니다. 비정상적으로 큰 사이즈의 Javascript Bundle이 Fast 3G라는 특수한 환경과 만나 데스크탑 기준 환상의 8초, mobile 기준 환상의 20초가 로딩 및 실행에 소요되는 것임을 밝혀 주셨습니다....