웹(56)
-
SPA(Single Page Application)
SPA(Single Page Application) 한개의 페이지로 이루어진 애플리케이션 필요한 데이터를 서버사이드에서 HTML으로 전달하지 않고, 필요한 데이터만 서버로부터 JSON 형식으로 전달받아 동적으로 렌더링 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줌 전통적인 웹 페이지 기존에는 사용자가 다른 페이지를 이동할 떄 마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌 사용자에게 보여지는 화면은 서버 측에서 준비 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용 요즘에는 웹에..
2020.06.30 -
IntersectionObserver 활용한 스크롤 구현
IntersectionObserver MDN 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있게 도와주는 API IntersectionObserver 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있음. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있음 IntersectionObserver.IntersectionObserver() IntersectionObserver 객체를 생성 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수..
2020.06.26 -
React 개념과 특징
React 오직 View 만 신경쓰는 라이브러리 초기 렌더링과 리렌더링 과정을 통해 데이터가 변할 때마다 새롭게 랜더링하면서 성능을 아끼고 최적의 사용자 경험을 제공(Virtual DOM) ※ 라이브러리 다른 웹 프레임워크의 경우 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하는 반면, 리엑트는 뷰만 신경 쓰는 라이브러리이기 때문에 직접 필요한 기능은 구현해서 사용 이미 제공되는 라이브러리가 많음 초기 렌더링 Render 함수 사용 Render 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 가진 객체를 반환 Render 함수 실행 시 내부에 존재하는 컴포넌트들은 재귀적으로 렌더링 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사..
2020.06.26 -
Scroll 이벤트를 활용한 스크롤 구현
스크롤 이벤트 발생 시 데이터르 조회 하기 참조되는 객체 HTML Element 객체 offset offsetHeight/offsetWidth : 해당 엘리먼트의 너비와 높이(border, padding, scroll 포함, margin 제외) offsetParent : offsetLeft, offsetTop의 기준이 되는 부모 엘리먼트 offsetLeft/offsetTop : offsetParent 기준으로 한 엘리먼트 위치 좌표 scroll scrollWidth/scrollHeight : 해당 엘리먼트의 넓이와 높이 (overflow: scroll 인 경우 화면에 보이지 않는 스크롤영역까지 포함되기 때문에 offsetWidth/offsetHieght 값보다 scoll의 값이 더 크게 됨) scroll..
2020.06.25 -
DNS(Domain Name System)
DNS TCP/IP 네트워크상에서 기억하기 쉽게 문자로 만들어진 도메인을 컴퓨터가 처리할 수 있는 숫자로된 인터넷 주소(IP)로 바꾸는 시스템 네트워크 상에서 컴퓨터들은 IP주소를 이용하여 서로를 구별하고 통신. 사람들이 네트워크를 통해 원격의 컴퓨터에 접속하기 위해서는 IP주소를 이용하여야 하지만, 숫자의 연속인 IP주소를 일일이 외울 수 없기 때문에 쉽게 기억할 수 있는 도메인 주소 체계가 만들어짐 DNS Server IP 주소와 Domain 이름을 기억하는 기능 Client 가 이름을 물어보면 IP를 알려주는 기능 수천대의 서버가 협력 도메인 질의 계층 구조 맨 뒤의 .은 생략 각각의 부분들은 부분들을 담당하는 독자적인 Server Computer가 존재 root는 top-level을 담당하는 Se..
2020.06.24 -
비동기 처리 - async & aswait
문법 async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수, 암시적으로 Promise를 사용하여 결과를 반환 (Promise : async 함수에 의해 반환 된 값으로 해결되거나 async 함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값) await 연산자는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환 await 연산자는 async function 내부에서만 사용 가능 async function 함수명() { await 비동기 메서드명(); } 예제) function fetchData() { r..
2020.06.17