접근성을 고려한 모달을 코드를 작성해보았다. 모달을 열었을 때 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..
참고 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop File drag and drop - Web APIs | MDN HTML Drag and Drop interfaces enable web ..
인피니티 스크롤 (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를 적용하기 위해서는 도메인..
모듈화란? 코드를 작성할 때 코드의 재사용성과 유지보수성을 높이기 위해 모듈 단위로 코드를 구성하는 것 모듈화를 통해 코드를 분리하고 필요한 모듈만 가져와 사용하는 것이 가능 Class 모듈화 예시 class Person { constructor(name, age) { this.name = name; this.age = age; } hello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } export default Person; 다른 파일에서 person을 사용하고 싶으면 아래처럼 작성하면 된다. import Person from './person.js'; const person = new Pers..
