분류 전체보기73 React - Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM객체를 활용한다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀어보면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우.. 2023. 5. 22. 네트워크 기초 복습 프로토콜 통신규약, 서버에 요청을 하기위해서 꼭 지켜야하는 약속. 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 대화를 나눈다. 주요 프로토콜 OSI 7 Layers 프로토콜 이름 설명 7.응용계층 HTTP 웹에서 HTML, JSON 등의 정보를 주고 받는 프로토콜 7.응용계층 HTTPS HTTP에서 보안이 강화된 프로토콜 7.응용계층 FTP 파일 전송 프로토콜 7.응용계층 SMTP 메일을 전송하기 위한 프로토콜 7.응용계층 SSH CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 RDP Windows 계열의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 WebSocket 실시간 통신, Push 등을 지원하는 프로토콜 6.표현계층 5.세션계층 4.. 2023. 5. 3. WAI-ARIA WAI-ARIA WAI(Web Accessibility Initiative) 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA(Accessible Rich Internet Applications) 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 해주는 즉, 웹 접근성을 갖추기 위한 기술 RIA(Rich Internet Applications) 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것 처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다. WAI-ARIA의 필요성 HTML요소에 의미를 부여한 시멘틱 요소를 사용하는 것만으로도 웹 접근성을 .. 2023. 4. 27. 웹 접근성 웹 접근성의 목적 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것 웹 접근성의 실태 우리나라는 높은 정보화 수준에도 불구하고 웹 접근성의 수준은 높지 않다. 2021년 기준, 일반 국민의 정보화 수준을 100점이라고 할 때, 장애인/고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이었고, 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었다. 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 하는 법이 있음에도 불구하고, 다양한 장애 상황으 ㄹ모두 고려하여 웹 접근성을 확보한 경우는 찾아보기 어렵다. 특히 규모가 작은 웹 사이트에서 웹 접근성을 갖춘 사례는 더욱 찾기 힘들다. 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층.. 2023. 4. 27. DOM(Document Object Model) DOM(Document Object Model) DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있다면, DOM을 이용하여 HTML을 조작할 수 있는 것이다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있으며, 소셜미디어 등에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있다. CRUD(Create, Read, Update and Delete) 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도, 당장 모든 속성과 메서드를 바로 외울 수는 없다. 그러므로 가장 중요한 CRUD를 먼저 이해하는 것이 새로운 언어.. 2023. 4. 26. Redux - 기초 Redux는 컴포넌트에서 상태를 분리하여 따로 관리할 수 있게해주는 상태 관리 라이브러리이다. 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수 있게된다. Redux의 상태관리 메커니즘 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다. 2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다. 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다. 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다. 5. 상태가 변경되면, React는 화면을 다시 렌더링 한다. Store Store는 상태가 .. 2023. 4. 24. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음
