하루루카
루카의 개발 일지
하루루카
전체 방문자
오늘
어제
  • 분류 전체보기 (62) N
    • React (10)
    • vue.js (5)
    • javascript (6)
    • 자격증 (5)
    • 기타 (8) N
    • 코딩테스트 (11)
    • 프론트 CS (15)
    • NodeJs (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 프론트엔드
  • vuex
  • 기술면접
  • 11655
  • CI/CD
  • 백준
  • node
  • 쿠버네티스
  • GithubActions
  • nodejs
  • vuetify
  • react
  • codedeploy
  • jest
  • AWS
  • nextjs
  • 코딩테스트
  • 자바스크립트
  • socket
  • VUE

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
하루루카

루카의 개발 일지

프론트 CS

개발자 기술면접 CS 공부-운영체제,자바스크립트

2022. 7. 7. 15:43

안녕하세요

퇴사하고 스터디 카페에서 공부를 하고 있는데 일할 때와는 느낌이 많이 다르네요 ㅎㅎ

 

오늘은 운영체제와 자바스크립트 관련하여 정리하였습니다

 

운영체제와 컴퓨터

운영체제의 역할

 1. CPU 스케쥴링과 프로세스 관리 : CPU소유권을 어떤 프로세스에 할당할지, 프로세스의 생성과 삭제, 자원 할당 및 반환을 관리합니다

 2. 메모리 관리 : 한정된 메모리를 어떤 프로세스에 얼마큼 할당해야 하는지 관리합니다.

 3. 디스크 파일 관리 : 디스크 파일을 어떠한 방법으로 보관할지 관리합니다.

 4. I/O 디바이스 관리 : I/O 디바이스들인 마우스, 키보드와 컴퓨터 간에 데이터를 주고받는 것을 관리합니다

 

운영체제 구조

  유저 프로그램 -> GUI -> 시스템 콜 -> 커널 -> 드라이버 -> 하드웨어

 

메모리

  메모리 계층

    레지스터 : CPU안에 있는 작은 메모리, 휘발성, 속도가 가장 빠르며 기억 용량이 적음

    캐시 : 휘발성이며, 속도가 빠름, 기억 용량이 레지스터보다는 느리다

    주기억장치 : RAM, 휘발성, 속도 보통, 기억 용량 보통

    보조기억장치 : 비휘발성, 속도가 가장 낮고, 기억용량이 많다

 

캐시

  데이터를 미리 복사해 놓은 임시 저장소이자 빠른 장치와 느린 장치에서 속도 차이에 따른 병목현상을 줄이기 위한 메모리

  시간 지역성 : 최근 사용한 데이터에 다시 접근하려는 특성

  공간 지역성 : 최근 접근한 데이터를 이루고 있는 공간이나 그 가까운 공간에 접근하는 특성

  캐시 히트 : 원하는 데이터를 찾았다면 캐시 히트

  캐시 미스 : 주메모리에 가서 데이터를 찾아오는 것이 캐시 미스

 

웹 브라우저 캐시

 쿠키 : 만료 기한이 있는 키-값 저장소, 4kb까지 데이터를 저장할 수 있고 만료기한을 정할 수 있다

 로컬 스토리지 : 만료기한이 없는 키-값 저장소, 10mb까지 저장할 수 있고 웹브라우저를 닫아도 유지되고 도메인 단위로 저장, 생성

 세션 스토리지 : 만료기한이 없는 키-값 저장소, 탭 단위로 세션 스토리지를 생성하여 탭을 닫을 때 해당 데이터가 삭제, 5mb까지 저장이 가능

 

메모리 관리

   가상 메모리 : 컴퓨터가 실제로 이용 가능한 메모리 자원을 추상화하여 이를 사용하는 사용자들에게 매우 큰 메모리로 보이게 만드는 것

   

   TLB : 메모리와 CPU사이에 있는 주소변환을 위한 캐시, 페이지 테이블에 있는 리스트를 보관하여 CPU가 페이지 테이블까지 가지 않도록해 속도를 향상할 수 있는 캐시 계층

 

   페이지 폴트 : 프로세스 주소 공간에는 존재하지만 지금 이컴 퓨터의 RAM에는 없는 데이터에 접근했을 경우 발생, 이때 운영체제는 다음 과정으로 해당 데이터를 메모리로 가져와서 마치 페이지 폴트가 전혀 발생하지 않은 것처럼 프로그램을 작동하게 한다

     1. CPU는 물리 메모리를 확인하여 해당 페이지가 없으면 트랩을 발생해서 운영체제에 알린다

     2. 운영체제는 CPU의 동작을 잠시 멈춥니다

     3. 운영체제는 페이지 테이블을 확인하여 가상 메모리에 페이지가 존재하는지 확인하고, 없으면 프로세스를 중단하고 현재 물리 메모리에 비어 있는 프레임이 있는지 찾습니다. 물리 메모리에도 없다면 스와핑이 발동됩니다

     4. 비어 있는 프레임에 해당 페이지를 로드하고, 페이지 테이블을 최신화합니다

     5. 중단되었던 CPU를 다시 시작합니다

 

고정 분할 방식 : 메모리를 미리 나누어 관리하는 방식, 메모리가 미리 나뉘어있기 때문에 융통성이 없고 내부 단편화가 발생한다

가변 분할 방식 : 프로그램의 크기에 맞게 동적으로 메모리를 나눠 사용, 내부 단편화가 발생하지 않고 외부 단편화는 발생할 수 있다

   최초 적합 : 위쪽이나 아래쪽부터 시작해서 홀을 찾으면 바로 할당

   최적 적합 : 프로세스 크기 이상인 공간 중 가장 작은 홀에 할당

   최악 적합 : 프로세스 크기와 가장 많이 차이가 나는 홀에 할당

 

내부 단편화 : 메모리를 나눈 크기보다 프로그램이 작아서 들어가지 못하는 공간이 많이 발생하는 현상

외부 단편화 : 메모리를 나눈 크기보다 프로그램이 커서 들어가지 못하는 공간이 많이 발생하는 현상

홀 : 할당할 수 있는 비어있는 메모리 공간

 

불연속 할당

  페이징 : 동일한 크기의 페이지 단위로 나누어 메모리의 서로 다른 위치에 프로세스를 할당, 홀의 크기가 균일하지 않은 문제가 없어지지만 주소 변환이 복잡해진다

 세그멘테이션 : 페이지 단위가 아닌 의미 단위인 세그먼트로 나누는 방식

 페이지 드 세그멘테이션 : 공유나 보안을 의미 단위로 세그먼트로 나누고, 물리적 메모리는 페이지로 나누는 것을 말합니다

 

페이지 교체 알고리즘

  FIFO : 가장 먼저 온 페이지를 교체 영역에서 가장 먼저 빼는 방법

  LRU : 참조가 가장 오래된 페이지를 바꾼다, 오래된 것을 파악하기 위해 각 페이지마다 계수기, 스택을 두어야 한다

  NUR : 0과 1를 가진 비트를 두고 1은 최근에 참조되었고 0은 참조되지 않음을 의미, 시계방향으로 돌면서 0을 찾고 0을 찾은 순간 해당 프로세스를 교체하고 해당 부분을 1로 바꾸는 알고리즘

  LFU : 가장 참조 횟수가 적은 페이지를 교체

 

PCB(Process Control Block)

프로세스에 대한 메타데이터를 저장한 데이터를 말한다. 프로세스가 생성되면 운영체제는 해당 PCB를 생성

멀리 프로세스

  여러 개의 프로세스, 즉 멀티 프로세스를 통해 동시에 두 가지 이상의 일을 수행할 수 있는 것을 말한다. 이를 통해 하나 이상의 일을 병렬로 처리할 수 있으며 특정 프로세스의 메모리, 프로세스 중 일부에 문제가 발생되더라도 다른 프로세스를 이용해서 처리할 수 있으므로 신뢰성이 높음 강점이 있다

 

웹 브라우저 멀티 프로세스

  브라우저 프로세스 : 주소표시줄, 북마크 막대, 뒤로 가기 버튼, 앞으로 가기 버튼 등을 담당

  렌더러 프로세스 : 웹사이트가 보이는 부분의 모든 것을 제어

  플러그인 프로세스 : 웹사이트에서 사용하는 플러그인을 제어

  GPU 프로세스 : GPU를 이용해서 화면을 그리는 부분을 제어

 

임계 영역

  상호 배제 : 한 프로세스가 임계 영역에 들어갔을 때 다른 프로세스는 들어갈 수 없다

  한정 대기 : 특정 프로레스가 영원히 임계 영역에 들어가지 못하면 안 된다

  융통성 : 한 프로세스가 다른 프로세스의 일을 방해해서는 안된다

 

뮤 텍스(mutext) : 공유 자원을 사용하기 전에 설정하고 사용한 후에 해제하는 잠금

세마포어(semaphore) : 일반화된 뮤 텍스, 간단한 정수 값과 두 가지 함수 wait 및 signal로 공유자원에 대한 접근을 처리

모니터 : 둘 이상의 스레드나 프로세스가 공유 자원에 안전하게 접근할 수 있도록 공유자원을 숨기고 해당 접근에 대해 인터페이스만 제공

 

교착상태 : 두 개 이상의 프로세스들이 서로 가진 자원을 기다리며 중단된 상태

원인

   상호 배제 : 한 프로세스가 자원을 독점하고 있으며 다른 프로세스들은 접근이 불가능한 상태

   점유 대기 : 특정 프로레스가 점유한 자원을 다른 프로세스가 요청하는 상태

   비선점 : 다른 프로레스의 자원을 강제적으로 가져올 수 없다

   환형 대기 : 프로세스 A는 프로세스 B의 자원을 요구하고, 프로세스 B는 프로세스 A의 자원을 요구하는 등 서로가 서로의 자원을 요구하는 상황

 

교착상태 해결 방법

   1. 자원을 할당할 때 애초에 조건이 성리 되지 않도록 설계

   2. 교착 상태 가능성이 없을 때만 자원이 할당되며, 프로세스 당 요청할 자원들의 최대치를 통해 자원 할당 가능 여부를 파악하는 '은행원 알고리즘' 사용

   3. 사이클이 있는지 찾아보고 이에 관련된 프로세스를 한 개씩 지운다

 

CPU 스케쥴링 알고리즘

  비선점형 방식 : 프로세스 스스로 CPU소유권을 포기하는 방식이며, 강제로 프로세스를 중지하지 않는다

  FCFS : 가장 먼저 온 것을 가장 먼저 처리하는 알고리즘

  SJF : 실행시간이 가장 짧은 프로세스를 가장 먼저 실행하는 알고리즘

  우선순위 : 기존 SJF 스케줄링의 경우 긴 시간을 가진 프로세스가 실행되지 않는 현상이 있다. 이는 오래된 작업일수록 우선순위를 높이는 방법을 통해 단점을 보완한 알고리즘

 

 선점 형방식 : 운영체제가 쓰는 방식으로 지금 사용하고 있는 프로세스를 알고리즘에 의해 중단시켜 버리고 강제로 다른 프로세스에 CPU 소유권을 할당하는 방식

 라운드 로빈 : 각 프로세스는 동일한 할당 시간을 주고, 그 시간 안에 끝나지 않으면 다시 준비 큐의 뒤로 가는 알고리즘

 SRF : SJF는 중간에 실행시간이 더 짧은 작업이 들어와도 기존 짧은 작업을 모두 수행하고 그다음 짧은 작업을 이어 나가는데, SRF는 중간에 더 짧은 작업이 들어오면 수행하던 프로세스를 중지하고 해당 프로세스를 수행하는 알고리즘

 다단계 큐 : 우선 순 쉬에 따른 준비 큐를 여러 개 사용하고, 큐마다 라운드 로비인 나 FCFS 등 다른 스케쥴링 알고리즘을 적용한 것을 말한다

 

 

Web/Script

브라우저 렌더링 과정

(해당 부분은 테코 톡 - 브라우저 렌더링 영상과 함께 보시면 더욱 이해가 쉽습니다(https://youtu.be/sJ14cWjrNis))

1. DOM 트리 구축을 위한 HTML 파싱

   서버로부터 전달받은 HTML 소스를 파싱 하여 DOM트리 구축

   이때 파싱 과정 중 스타일 태그를 만나면 HTML 파싱 작업을 잠시 중단하고 CSS 파싱 작업을 시작하여 CSSOM TREE 생성

   CSS 파싱 작업을 마치며 중단되었던 HTML 파싱 지점부터 다시 시작

   파싱 작업 중 스크립트 태그를 만난다면 HTML 파싱 작업을 잠시 중단하고 자바스크립트 엔진에게 제어권한을 넘깁니다

   자바스크립트 엔진은 코드를 해석하여 추상 구분 트리(AST)를 만들고 실행합니다

 

2. 렌더 트리 구축

   DOM트리와 CSSOM트리를 합쳐서 렌더 트리 생성, 여기까지의 과정을 Construction이라고 합니다

 

3. 렌더 트리 배치(Layout)

  렌더 트리 노드들을 화면의 올바른 위치에 표시합니다

 

4. 렌더 트리 페인팅

  UI백엔드가 렌더 트리에 있는 노드의 UI를 그립니다

 

5. Composition

   렌더 트리의 노드들을 순서대로 배치합니다(ex. z-index와 같은 속성으로 구분하여 배치)

 

자바스크립트 변수

변수 선언 단계 

  1. 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계

  2. 초기화 단계 : 변수 객체에 등록되어있는 변수를 위하여 메모리를 할당하는 단계 여기서 변수는 undefined로 초기화된다

  3. 할당 단계 : 변수에 실제로 값이 할당되는 단계

 

var, let, const 차이점

  var : 선언 단계와 초기화 단계가 함께 이루어지고, 할당 단계는 나중에 이루어진다

  let, const : 선언 단계만 이루어지게 된다, 이때 선언 단계와 초기화 단계의 사이를 TDZ라고 합니다

 

TDZ(Temporal Dead Zone) : 일시적 사각지대라고도 하며 스코프의 시작 시점부터 초기화 지점까지의 구간입니다

 

호이 스팅 : 호이 스팅은 코드가 실행하기 전 변수 선언/함수 선언이 해당 스코프의 최상단으로 끌어올려진 거 같은 현상을 말합니다

 

스코프(Scope) : 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에 자신이 참조될 수 있을지 없을지 결정되는 것(범위라고 생각하시면 쉽습니다)

 

스코프 체인 : 스코프가 계층적으로 연결되어있는 것입니다

 

클로져 : 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것

 

실행컨텍스트, 스코프, 스코프 체인 관련된 내용은 아래 영상 참고하시면 도움이 많이 됩니다

https://youtu.be/EWfujNzSUmw 

 

this : 다른 언어와 달리 자바스크립트에 thi는 해당 함수의 호출 방식에 따라 this에 바인딩되는 객체가 달라집니다, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다

 

Ajax : 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법, 본래는 비동기 요청을 보내는데 필요한 기술이었으나 브라우저 내에서 비동기 기능을 제공하는 모든 기법을 통칭하게 되었습니다

 

Promise : 자바스크립트에서 비동기 처리에 사용되는 객체이며 내용은 실행되었지만 결과를 아직 반환하지 않은 객체입니다

값이 참이면 resolve 참이 아닐 시에는 reject를 사용합니다

 

async / await : 가장 최근에 나온 비동기 처리 문법이며 기존 callback이나 promise의 단점을 해소하고자 만들어졌습니다

callback이나 promise 같은 경우 꼬리에 꼬리는 무는 코드가 나올 수도 있는데 async / await를 사용하면 이러한 단점을 해소할 수 있습니다

await를 사용하기 위해서는 async함수에서만 사용을 해야 하며 promise와 달리 에러를 핸들링할 수 있는 기능이 없어 try catch 문을 활용하여 에러를 핸들링해야 합니다

 

프런트 프레임워크 차이점

Vue : html 기반에 템플릿 문법을 사용하고 있어 러닝 커브가 다른 프레임워크에 비해 가장 작으며 생산성도 가장 빠릅니다 하나 다른 프레임워크에 비해 상대적으로 커뮤니티가 작습니다

React : 우선 커뮤니티는 프레임워크들 중에 가장 거대한 커뮤니티를 가지고 있으며, vue 혹은 angular에 비해 유연하게 개발자 본인이 원하는 스타일에 코딩을 할 수 있습니다. 하나 이러한 유연한 때문에 처음 배우시는 분들은 조금 리액트에 다가가기 어렵다고 느낄 수도 있습니다

Angualr : 가장 처음 릴리즈 된 프레임워크이며 큰 커뮤니티를 가지고 있으며 또한 TypeScript를 지원합니다 하지만 TypeScript를 지원함에 따라 익숙하지 않은 개발자는 학습하기 어려워 프레임워크들 중 러닝 커브가 젤 큽니다

 

 

GET

 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드

 URL 주소 끝에 파라미터로 포함되어 전송하며 이 부분이 쿼리 스트링입니다

 특징 :

  1. 캐시가 가능하다

  2. 브라우저 히스토리에 남는다

  3. 북마크를 할 수 있다

  4. 파라미터가 다 노출되기에 중용한 정보를 다루면 안 됩니다

 

POST

 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드

 전송할 데이터를 HTTP 메시지 바디 부분에 담아서 보냅니다

 데이터를 전송할 때 길이 제한이 따로 없어 용량이 큰 데이터를 보낼 때 사용하거나 get처럼 데이터가 외부적으로 드러나는 것이 아니라서 보안이 필요한 부분에 많이 사용됩니다

 

 

오늘은 운영체제, 스크립트(웹)에 관하여 정리해보았습니다

개발은.. 정말 공부하면 할수록 알아야 될게 많은 거 같습니다..

취준 혹은 이직하시는 분들 모두 파이팅 하시고 다음에는 자료구조에 대해서 정리해보도록 하겠습니다

 

 

 

'프론트 CS' 카테고리의 다른 글

이벤트 루프 와 마이크로태스크큐 와 매크로 태스크 큐  (0) 2022.11.29
자바스크립트 호이스팅  (0) 2022.11.27
브라우저 렌더링 과정  (1) 2022.11.26
개발자 기술면접 CS 공부-디자인패턴,패러다임,네트워크  (0) 2022.07.05
SSL 과 SSL Handshake  (0) 2022.05.29
    '프론트 CS' 카테고리의 다른 글
    • 자바스크립트 호이스팅
    • 브라우저 렌더링 과정
    • 개발자 기술면접 CS 공부-디자인패턴,패러다임,네트워크
    • SSL 과 SSL Handshake
    하루루카
    하루루카

    티스토리툴바