221118 동기, 비동기와 AJAX에 대한 강의

이셀·2022년 11월 18일
0

강의의 목표?

프로세스 스레드 비동기 에 대한 기본적인 개념 잡기 >

학습구성

프로세스와 스레드는 운영체제(OS)에서 배우는 개념이고, 비동기는 CS 개념이라기 보단 개발하면 많이 접하는 개념이다.

RAM : 메모리(주기억장치)

SSD,하드디스크 : 설치한 프로그램들을 저장하는 장소

CPU : 일을 하는 주 장치


프로세스?

메모리에 적재되어 실행되고 있는 프로그램의 인스턴스

운영체제로부터 시스템 자원을 할당 받은 작업의 단위

💡 붕어빵틀(설계된 것, 클래스)어ㅣ 붕어빵(인스턴스)로 예시를 많이 듭니다.

프로세스는 독립된 메모리를 할당받는다.

프로세스가 메모리를 관리하기 위해서 이 공간을 관리하는데, 이를 프로세스 주소 공간 이라고 한다.

이 프로세스 주소 공간은 code, data, stack, heap으로 구성된다.

기본적으로 프로세스마다 최소 1개의 스레드를 갖는다(필수)

스레드?

프로세스 내에서 프로세스의 자원을 이용하는 여러 실행 흐름의 단위

스레드는 프로세스 내의 영역은 다른 스레드와 공유하고 stack영역을 할당받는다.

프로세스와 해당 프로세스 내의 다른 스레드와 자원과 공간을 공유하면서 사용한다.

멀티 프로세스

하나의 프로그램을 여러 개의 프로세스로 구성해서 각 프로세스가 하나의 작업을 처리하도록 하는 것.

장점 : 여러 개의 자식 프로세스 중에 하나가 문제가 생기면 그 자식 프로세스 만 죽고 다른 프로세스에 퍼지지 않게 영향을 주지 않는다.

그래서 안전성이 보장되어있다.

단점 : 문맥교환을 하면서 많은 시간이 소모되고 무거운 작업들이 진행된다.

💡 문맥교환

CPU는 한번에 하나의 프로세스만 처리할 수 있기 때문에 여러 프로세스를 처리해야 하는 상황이 되면 돌아가며 여러 프로세스 작업을 처리하는데, 이 과정을 ‘문맥교환’ 이라고 말한다.

변수들이 공유되지 않기 때문에 어렵고 복잡한 통신 방법을 사용해야 한다

멀티 스레드?

하나의 프로그램을 여러 개의 스레드로 구성하고 각 스레드가 하나의 작업을 처리하도록 하는 것

장점 : 프로세스에 비해서 메모리 공간과 시스템 자원 소모 부분이 줄어든다

스레드 간 통신시 방법이 비교적 간단하며, 캐시 메모리를 비울 필요가 없기 때문에 비용이 적고 빠르다

단점 : 서로 다른 스레드가 영역을 공유하기 때문에 다른 곳에서 사용하는 변수, 자료구조에 접근하여 엉뚱한 값을 읽어오거나 수정되어 문제가 발생할 수 있다.

또한 하나의 스레드에 문제가 생기면 전체 프로세스가 영향을 받는다.

스레드 세이프
멀티 스레드 환경에서 여러 스레드가 동시에 사용되어도 안전하다는 것을 말한다.(자원 공유 동기화 문제)

즉, 위에서 말한 자원 공유 동기화 문제가 보정된다.

비동기?

비동기라고 하면 항상 따라다니는 개념들을 짚고 넘어가야 비동기를 이해할 수 있다.(제어권과 동시성)

제어권 : 자신의 코드를 실행할 권리 같은 것이다. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다.

동시성 : 함수A와 함수B가 동시에 진행되어(그렇게 보이는 것)야하는 것.

그러기 위해서 함수 A가 다른 함수 B의 결과 값에 의존하는지가 중요한다.

블로킹, 논 블로킹 >> 제어권이 누구에게 있는지?

블로킹 : 함수 A가 함수 B를 호출된 뒤에 함수 B의 리턴 값이 올 때까지 기다린 후 진행되는 것

논블로킹 : 함수 A가 함수 B를 호출한 뒤, 함수 B의 작업 완료 여부와 상관 없이 진행되는 것. 즉, 제어권을 넘겨주지 않는 것

동기, 비동기 >> 함수의 작업 완료 여부를 신경 쓰는가

호출되는 함수의 리턴 값을 확인하는지, 확인하지 않는 지에 대한 여부에 따라 다르다.

자바스크립트 : 싱글 스레드는 논블로킹 모델의 환경에서 실행된다.

호출 스택 : 동기코드를 담당. 함수들이 실행되는 데이터공간

백그라운드 : 비동기 작업을 실행

테스크 큐 : 비동기 작업이 끝나서 이후 실행되야할 콜백 함수들이 대기하고 있는 공간.

이벤트 루프 : 호출 스택이 비어있는게 확인되면 이벤트 루프는 테스크 큐에서 함수를 하나씩 꺼내 호출스택으로 옮긴다.

비동기를 왜 써야하는가?

생활코딩 참고


AJAX 개념 설명, MPA/SPA의 차이

AJAX는 나왔을 때 혁신적인 기술이라고 일컬어짐

MPA의 예시 > 금결원 홈페이지 (HTML 코딩하는 것과 같은)

문제점 : 글자 하나만 바뀌어도 서버에서 다시 내려주어야 한다.

이 상황에서 AJAX가 나왔는데, AJAX(=== 비동기)는 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식이다. 최근에는 XML보단 JSON을 더 많이 사용한다.

💡 비동기식은 여러가지 일이 동시적으로 발생했단 의미로 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미다.

예시 > 검색창

전체적인 HTML을 받아오는게 아니라 당장 필요한 요소들을 끌고와서 동적으로 보여주는 것이 AJAX다.

AJAX로 인해 프론트직군이 계속적으로 발전해올 수 있었다.

UI에 해당되는 것을 맵핑해서 사용하는 것이 클라이언트 사이어드 렌더링(CSR) 이라고 한다.

렌더링을 할 때마다 서버에서 전체적으로 내려줘야 했지만 CSR을 사용할 경우 서버에서 필요한 것만큼 내려준다.

예시 > 라프텔

SPA 관련 304부분 > 304상태는 브라우저에서 캐싱 된 것을 주고 있는 상태다.

HTML에 모든 값이 들어있어 캐싱이 되어있는 것이고 요청이 있는 것처럼 보이지만 SPA가 맞다. 요청을 하지 않아 가만히 있는 상태이기 때문이다.

profile
프론트엔드 개발 과정을 기록 중입니다:)

0개의 댓글