본문 바로가기

📚

(31)

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까지 기다리지 않고 다른 코드를 처리하는 방식이다. 🔗 비동기 처리 사례 > AJAX 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. 🔗 비동기 처리 방법 ① > 콜백(Callback) 함수 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출하여 넘겨주는 방식이다. 🔗 콜백 함수 사용하는 이유 특정 로직이 끝났을 때 원하는 동작..

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하는 것일까? 바로 여기서 등장하는 개념이 이벤트 루프이다. 🔗 이벤트 기반(event-driven)이란? 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. ▪ 이벤트 루프 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다. 모든 이벤트가 종료될 때 까지 이벤트 처리를 위한 작업을 반복하므로 루프라고 불린다. 콜 스택에서 실행 중인 것이 있는지 확인하고, 콜백 큐에 작업이 있는지 확인해서 콜 스택이 비었다면 콜백 큐 내의 작업을 콜 스택으로 ..

[JavaScript] 가비지컬렉터(Garbage Collector)란? / 역할, 동작 원리 🔗 가비지컬렉터(Garbage Collector)란? 여기서 가비지란 '정리되지 않은 메모리', '유효하지 않은 메모리 주소'를 말한다. 가비지 컬렉터는 이러한 필요없는 정보들, 가비지들을 쓸어 담아 버림으로써 메모리를 관리해준다. 🔗 가비지컬렉터 동작 원리 자바스크립트에서 변수는 직접적으로 참조 값(문자열, 객체, 배열)을 담고 있지 않고, 해당 값은 메모리 상에 저장된다. 그래서 참조 값을 생성하고 나서 더이상 참조할 것이 없거나 비어졌을 때 가비지 컬렉터가 동작하여 메모리가 반환된다. (메모리를 다시 재사용 할 수 있는 상태가 된다.) 🔎 참고 자료 가비지 컬렉터가 뭐하는 건가요? 프론트엔드 개발자 면접 질문 정리 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', ..

[JavaScript] 메모라이제이션(Memoization)이란? 🔗 메모라이제이션(Memoization)이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 그것을 활용함으로써 반복 수행을 제거한다. 프로그램 실행 속도가 빨라진다. 🔎 참고 자료 자바스크립트 메모라이제이션 예제보기 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하 devjindev.tistory.com

[JavaScript] 메소드 체이닝(Method Chaining)이란? 🔗 메소드 체이닝(Method Chaining)이란? 여러 메소드를 이어서 호출하는 문법이다. 메소드가 객체(this)를 반환하여 여러 메소드를 순차적으로 선언할 수 있도록 한다. 🔗 장단점 장점 코드가 간결해져 하나의 문장처럼 읽힐 수 있다. 장기적으로 유지보수에 도움이 된다. 단점 하나의 라인에서 너무 많은 일이 일어나 디버깅에 어려움이 있을 수 있다. 오류가 났을 때 어느 부분의 메소드에서 오류가 났는지 확인하기 어렵다. 🔎 참고 자료 메소드 체이닝 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데..

[JavaScript] 이벤트 버블링, 캡처링, 위임이란? 🔗 이벤트 버블링(Event Bubbling)이란? 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다. 🔗 이벤트 캡처링(Event Capturing)이란? 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. 🔗 이벤트 위임(Event Delegation)이란? 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 방식이다. (앞에서 살펴본 이벤트 버블링과 캡처링은 이벤트 위임을 위한 선수 지식이라고 해도 과언이 아니다. 이벤트 위임은 실제 바닐라 자바스크립트로 웹과 앱을 구현할 때 자주 사용하는 코딩 패턴이다.) 장점 코드가 짧아지고 메모리가 절약된다. 무분별한 이벤트 등록으로 인한 메모리 누수를 방지할 수 ..

[Web] 웹 표준, 웹 접근성, 웹 호환성이란? 🔗 웹 표준 (Web Standards) 이란? 웹 표준이란 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 표준화 단체인 W3C가 권고한 표준안에 따라 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 🔗 웹 접근성 (Web Accessibility) 이란? 웹 접근성이란 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리를 의미한다. 웹 표준을 준수함으로써 다양한 브라우저 환경에 대응이 가능하며 휴대폰, PDA..

[Web] 반응형 웹이란? / 반응형 vs 적응형 🔗 반응형 웹 (Responsive Web) 이란? 순서대로 PC - Tablet - Mobile 화면 반응형 웹이란 각종 디바이스 또는 모니터 해상도에 따라 컨텐츠들의 사이즈, 레이아웃 등이 유동적으로 바뀌는 웹을 말한다. 일반적으로 float, flex, % 등을 사용하여 유동적으로 반응할 수 있도록 한다. 1 2 3 4 5 @media screen and (max-width: 767px){ .container{ width: 50%; } } Colored by Color Scripter cs 미디어 쿼리를 사용하여 디바이스를 지정하여 화면 크기에 따라 바뀌는 웹을 제작한다. 📌 반응형 웹 (Responsive Web) vs 적응형 웹 (Adaptive Web) 차이점 반응형 웹은 디바이스에 따라 화면..

이전 1 2 3 4 다음

티스토리툴바