패키지 매니저란 프로젝트에서 종속성을 관리하고 외부 패키지를 설치, 업데이트 제거하는 도구 1. npm node.js를 설치하면 함께 제공되는 패키지 매니저 package.json파일을 사용해서 종속성 관리 npm install (npm i)로 패키지를 설치함 2. pnpm npm을 기반으로 만들어진 패키지 매니저 npm보다 빠른 설치 속도와 적은 디스크 공간 사용을 제공함 npm과 yarn의 문제점을 해결하기 위해 개발됨 ghost dependency문제를 해결해서 예상치 못한 버그를 방지함 3. yarn npm의 단점 보완을 위해서 facebook에서 만든 패키지 매니저 npm보다 나은 캐싱 매커니즘을 제공함 4. yarn-berry yarn 2.x버전부터 도입됨 (yarn의 다음세대 버전) 플러그..
접근성을 고려한 모달을 코드를 작성해보았다. 모달을 열었을 때 tabindex 속성을 추가해서 모달열기 버튼을 탭키로 접근되지 않도록 했다. aria-hidden을 조절해서 스크린리더에 안읽히도록 조정했다. See the Pen Untitled by 이아름 (@aahreum) on CodePen. aira-modal = 'true' => 모달 대화 상자임을 나타냄 role='dialog' => 대화형 창 역할을 함을 나타냄 aria-labelledby='modal-title' => 모달 제목을 나타내는 요소의 ID를 참조함 aria-describedby='modal-desc' => 모달 내용을 나타내는 요소의 ID를 참조함 참고 https://developer.mozilla.org/en-US/docs/W..
인피니티 스크롤 (infinite scroll) 인피니티 스크롤은 웹사이트나 앱에서 사용자가 스크롤을 할 때 새로운 콘텐츠가 계속해서 로딩되는 방식 fetch API 사용하여 인피니티 스크롤 구현하기 로딩중... const dataContainer = document.getElementById('data-container') const loadingMessage = document.getElementById('loading-message') let loading = false let page = 1 function loadData() { if (loading) return loading = true loadingMessage.style.display = 'block' // fetch API를 사용하여 서..
RESTful API? RESTful은 REST의 설계 규칙에 따라 설계된 API를 말함 REST의 원리를 따르는 시스템을 RESTful이라고 함 그렇다면 REST는 무엇일까? REST? REST(Representational State Transfer)는 자원의 표현에 의한 상태 전달이라는 의미로 웹에서 사용되는 아키텍쳐 스타일 중 하나임 HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있고, 클라이언트와 서버간의 통신을 처리함 HTTP URI를 통해 리소스를 명시하고 Method(get, post, put, delete, patch)를 통해 자원에 대한 CRUD(create, read, update, delete)연산을 적용함 REST API를 사용하는 이유 - HTTP 프로토콜을 기..
HTTP Hypertext Transfer Protocol의 약어 인터넷에서 데이터를 전송하는데 사용되는 통신 프로토콜 웹 브라우저와 웹 서버 간에 통신하는 데 사용 HTTPS Hypertext Transfer Protocol Secure의 약어 인터넷에서 데이터를 보호하기 위한 보안 프로토콜 HTTP 프로토콜을 보안한 버전 데이터 전송 중에 데이터를 암호화하고 인증서를 사용하여 클라이언트와 서버 간의 안전한 통신을 보장 HTTPS는 웹 사이트의 보안과 사용자 개인정보 보호를 강화하고, 데이터 도난의 공격으로부터 보호 대부분의 인터넷 브라우저는 HTTPS를 사용하는 것을 권장하고 많은 웹 사이트들이 HTTPS를 사용하여 보안을 강화하고 있음 HTTPS 적용 방법 1. HTTPS를 적용하기 위해서는 도메인..
