본문 바로가기

전체 글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.
깊게 파고들기 - React React란? 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. HTML, CSS, JavaScript로도 충분한데 왜 리액트를 사용하는 것일까? React의 특징 1. 선언형(Declarative) 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있다는 뜻이다. HTML / CSS / JS로 나눠적기보다는, 리액트는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 2. 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기에, 기능 자체에 집중하여 개발할 수 있다. 3. 범용성(Learn Onc.. 2023. 4. 19.
React - Styled Components Styled Components CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이러한 CSS in JS 라이브러리 중에서 현재 가장 있기 있는 라이브러리가 Styled Components이다. Styled Components 문법 1. 컴포넌트 만들기 ES6의 Templete Literals 문법(백틱 `)을 사용한다. 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 컴포넌트를 선언하고 styled( )에 재활용할 컴포넌트를 전달해주면 된다. 3. Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를.. 2023. 4. 19.
JavaScript - 다양한 메서드들 Math 내장 객체 메서드 Math.floor( ) : 괄호 안의 숫자를 내림하여 반환 Math.ceil( ) : 괄호 안의 숫자를 올림하여 반환 Math.round( ) : 괄호 안의 숫자를 반올림하여 반환 Math.abs( ) : 괄호 안의 숫자의 절대값을 반환 Math.sqrt( ) : 괄호 안의 숫자의 루트값을 반환 Math.pow(2, 5) : 2의 5승인 32를 반환 문자열 주요 메서드 .toLowerCase( ) : 문자열을 소문자로 변경 .toUpperCase( ) : 문자열을 대문자로 변경 .concat( ) : 문자열 연결 연산자 +처럼 문자열을 이어 붙임 .indexOf( ) : 문자열 내에 특정 문자가 몇 번째에 위치하는지 확인. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의.. 2023. 4. 18.
CSS - Flexbox로 레이아웃 잡기 display: flex 분석하기 display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. fllexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다. flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식요소에 적용해야하는 속성들이 있다. 부모 요소에 적용해야하는 Flexbox 속성 1. flex-direction : 정렬 축 정하기 2. flex-wrap : 줄 바꿈 설정하기 - 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 3. justify-content : 축 수평 방향 정렬 - 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 4. align.. 2023. 4. 7.
Express Express Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기있는 프레임워크이다. Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 미들웨어를 추가할 수 있다. 라우터를 제공한다. 라우팅(Rountig) 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것이다. 추가적인 라이브러리를 사용하지 않고, 순수한 Node.js로 코드를 작성하면 다음과 같다. 반면에 Express는 프레임워크 자체에서 라우터 기능을 제공한다. Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다. 미들웨어(Middleware) Express의 가장 큰 장점인 미들.. 2023. 4. 5.
CSS - Selector 기본 셀렉터 * { } // 전체 셀렉터 = 문서의 모든 요소 선택 h1 { } div { } section, h1 { } // 태그 셀렉터 = 같은 태그명을 가진 모든 요소 선택. 복수로도 선택 가능. #only { } // ID 셀렉터 = #id로 입력하여 선택 .center { } // class 셀렉터 = .class로 입력하여 선택 a[href] { } p[id="only] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribute 셀렉터 = 같은 속성을 가진 요소를 선택(모두 암기할 필요 X) 자식 / 후손 / 형제 셀렉터 자식 셀렉터 자.. 2023. 4. 4.

티스토리툴바