본문 바로가기

웹개발

 (60)
웹 서비스 퍼포먼스를 향상시키는 법 웹 서비스의 퍼포먼스가 좋다는 것은 페이지 로딩 속도가 빠르다는 것을 의미한다. 페이지 로딩 속도는 사용자의 경험과 직결되어 있는데 페이지가 로드되는데 한참 걸린다면 그것은 바로 사용자의 사이트 이탈을 의미하기 때문이다. 따라서 페이지의 로딩 과정에서의 최적화가 이루어져야한다. 브라우저 로딩 과정(페이지 로딩 과정) 브라우저 로딩 과정은 다운로드, 파싱, 레이아웃, 페인트, 합성으로 나뉜다. 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 다운로드한 HTML을 파싱(해석)해서 DOM 트리를 구성한다(태그들이 노드). HTML 파싱 중 script, link, img를 발견하면 각 리소스를 요청하고 다운로드한다. 그다음 CSS 파일을 파싱 하여 CSSOM 트리(선택자가 노드)를 ..
자바스크립트의 비동기 처리 기본 1 비동기란? 기본개념 일반적으로 코드는 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 준다면, 그 함수가 끝나고 값을 산출할 때까지 기다려야한다(동기). 유저 입장에서 보면 이건 마치 전체 프로그램이 멈춘것처럼 느껴진다(blocking). 이렇게 기다리지 않고 동시에 다른 작업을 수행할 수 있는 것이 비동기의 기본적인 개념이다. blocking 웹 앱이 브라우저에서 특정한 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않아 브라우저가 정지된 것처럼 보이는 현상, 즉 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 반환하지 않는 현상을 말한다. (이벤트 처리가 일어나는 동안 다음작동을 막아버림) 왜 이런 일이 일어날까? 기본적으로 자바스크립트는 싱글 스레드이기 때문이다. 스..
웹 접근성을 고려한 구성 웹 개발에 있어서 접근성이란, "사람들의 능력이 어느 정도 제한이 되어 있더라도 가능한 많은 사람들이 웹사이트를 사용할 수 있도록 하는 것이다" 라고 mdn에서 정의하고 있다. 보통 접근성이란 장애인을 돕기 위한 휠체어 접근과 같이 편의 시설을 성명하는 데에 많이 쓰이고 이러한 개념으로 웹 사이트로 확장될 수 있다. "그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." W3C - Accessibility Accessibility - W3C The power of the Web ..
URI - 리소스의 식별자 URI란? URI(identifier) = URL(Location), URN(Name)가 합쳐진 것. 리소스를 통일적일 방식으로 식별하는 ID로 URI를 사용하면 웹상에 존재하는 모든 리소스를 같은 방식으로 접속할 수 있다. URI 구문 간단한 URI URI Scheme: 사용하는 프로토콜, 웹은 HTTP, 그 뒤는 '://' 표시로 구분된다. 호스트명: DNS에서 이름을 해석할 수 있는 도메인명이나 IP 어드레스로 반드시 인터넷에서 일의성을 가지고 있다. 패스: 호스트 내에서의 리소스가 위치한 경로로 계층화를 나타낸다. 유일한 호스트명 + 패스 구조로 전 세계의 다른 리소스와 절대 중복되지 않도록 되어있다. 복잡한 URI + 간단한 URI 사용자 정보: URI Scheme 다음에 등장하고 리소스에 액세..
REST 기초 REST란? 웹의 아키텍쳐 스타일. 아키텍쳐 스타일이란? 복수의 아키텍쳐의 공통된 성질, 양식, 규정, 독특한 방식 등으로 시스템의 아키텍쳐를 결정할 때 나침반이 된다. 추상화 단위: 구현(apache, FireFox, IE 등 엔진) < 아키텍쳐(브라우저, 서버, 프록시, HTTP, URI, HTML) < 아키텍쳐 스타일(REST) 네트워크 시스템의 아키텍쳐 스타일은 클라이언트/서버(웹)이다. REST는 클라이언트/서버 구조에서 나온 아키텍쳐 스타일에서 몇 가지 제약을 더해 만들어졌다. 제약은 복수의 컴포넌트들을 조합해 협력할 수 있게 해주기 때문에 중요하다. REST에서 중요한것: 리소스 리소스란? 웹 상에 존재하는 이름이 매겨진 자원으로, 여기서 이름이 바로 URI이다. 구체적인 리소스에 접근하는 ..
[network] 라우팅 주소와 경로 경로는 MAC 주소로 다음 수신처를 지정하고 IP주소로 최종 수신처를 지정해서 만들어진다. 라우터는 경로를 결정하는 역할로 자신의 위치에서 최종 수신처까지 가기 위해 다음에 어디로 보내야할지만 결정한다. 라우터가 네트워크 경계상에 배치되어 전송받은 데이터그램을 라우팅해 다음 수신처를 결정한다. 이렇게 다음 길을 제시해 가는 방식을 홉바이홉(Hop-by-Hop)이라고 하는데 여기서 홉은 라우터를 가리킨다. 라우터가 없으면 다른 네트워크에 데이터그램을 보낼 수 없기 때문에 디폴트 게이트웨이(컴퓨터가 지정하는 라우터)를 사용하고 동일 네트워크이면 직접 통신한다. 라우터 라우팅해서 다른 네트워크에 데이터를 전송하는 인터넷 작업에 있어서 가장 중요한 장치이다. 라우팅: 데이터그램의 수신처 IP 주소를..
[network] IP 어드레싱 3계층의 역할과 개요 3계층 세그먼트(네트워크) 간에서 데이터 송수신을 하는 것 *세그먼트: 라우터와 라우터 간의 범위 3계층의 네트워크란? 세그먼트와 동의어로 라우터와 라우터로 분배된 컴퓨터 그룹을 의미한다. 3계층이 필요한 이유는? 2계층까지만 있어도 데이터 송수신은 이루어지지만 큰 네트워크를 구성할 수는 없고 스위치의 '브로드캐스트'를 제어할 수 없는 문제는 해결되지 않아 3계층에서 제어한다. 인터넷 작업(Internet)이란? 네트워크 간의 데이터 송수신이다. 인터넷 프로토콜 IP(Internet Protocol): '어드레싱'과 '라우팅'에 의해 인터넷 작업을 수행하기 위한 프로토콜이다. 어드레싱 주소를 어떻게 써서 어떻게 배당할지를 정하는 것이다. 2계층 이더넷에서는 MAC 주소를 사용했지만 ..
[network] 1계층 & 2계층 - 신호의 전송과 충돌 1 계층 통신 매체 기기와 기기 사이를 연결해 신호가 지나는 파이프 역할을 하는 것 케이블(유선)을 사용하는 방법이 일반적이고 이 케이블에는 전기신호를 사용하는 동선과 광신호를 사용하는 광파이버가 있다. 사용되고 있는 동선은 UTP(Unshielded Twist Pair cable)로 두 개가 한 쌍인 동선 네 쌍으로 이루어져 있고 광파이버에 비해 사용하기 편리하다. 인터페이스 컴퓨터가 보내고 싶은 데이터를 케이블에 맞는 신호로 변환해서 케이블로 보내고, 케이블에서 보내온 신호를 컴퓨터에서 사용하는 데이터로 변환하는 기계이다. 컴퓨터에서 사용되는 인터페이스로는 LAN용 케이블에 접속하기 위한 NIC(Network Interface Card)가 일반적이다. 최근의 가정용 PC에는 대부분 처음부터 NIC가 ..

티스토리툴바