프론트엔드 개발자의 기록 공간

Web Components웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.웹 표준 기술로 모든 브라우저에서 동작하고 플랫폼 간 호환성을 높여줍니다. (미지원 브라우저 제외 및 구버전 브라우저에서는 polyfill을 사용하여 지원 가능)다양한 프레임워크나 라이브러리에서 Web Components를 사용할 수 있기 때문에, 기술 스택에 구애받지 않고 사용할 수 있습니다.특징Custom elementshtml tag 자체를 커스텀하게 만들고 browser 사용할 수 있도록 만들어 줍니다.customElements.define 메소드를 이용Shadow DOM다른 DOM과의 분리를 통해 DOM을 캡슐화합니..

CSS Architecture CSS는 자유도가 높은만큼 까다롭고 어렵습니다. 이러한 특성 때문에 종종 기대했던 결과가 나오지 않는 경우가 많습니다. CSS를 계획적으로 구축되지 않았다면 프로젝트가 확장될 때 깨지거나 무너질 가능성이 매우 높습니다. 따라서 견고한 CSS 아키텍처의 기반은 프로젝트가 확장될 때 가장 중요한 요소가 됩니다. 대표적인 예 협업 시 사람마다 다른 코드 구조 및 정의 서로 다른 네이밍 규칙 CSS 우선순위 문제 복잡해지는 선택자 등 CSS Architecture 종류 OOCSS(객체 지향 CSS) BEM(블록 요소 수정자) SMACSS(Scalable and Modular Architecture for CSS) OOCSS (Object Oriented CSS) 객체 지향에 따라서..

Package Managers 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. npm npm(node package manager)은 자바스크립트 패키지 매니저입니다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다. Node.js 생태계의 앱스토어나 플레이스토어 같은 역할을 합니다. npm 레지스트리에는 640,000개가 넘는 패키지가 포함되어 있으며, 패키지는 의존성(dependencies) 및 버전을 추적할 수 있도록 구성됩니다. package.json package.json은 프로젝트 정..

HTTPS 월드 와이드 웹에서 정보를 주고 받을 수 있는 프로토콜 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜 HTTP는 암호화하지 않은 평문 데이터 전송이므로,데이터 노출 및 변조의 위험이 있다. HTTPS HTTPS는 TLS/SSL인터넷 암호화 통신 프로토콜을 사용하여 암호화를 통해 평문 데이터 문제 해결한다. (무결성 보장) TLS 는 SSL의 업데이트 버전이라고 이해 서버에서 HTTPS 프로토콜 사용을 위해 SSL 인증서를 CA기관으로부터 발급 받는다. 80번 port를 사용하는 http와 달리 https는 443번 port를 사용한다. HTTPS 동작 과정 클라이언트(브라우저)가 서버로 최초 연결 시도를 함 서버는 SSL 인증서를 브라우저에게 넘겨줌 브..