개발자 서류 / 면접 준비 #2 - 기초CS 및 FE 예상 질문 몇 가지

SeoYng·2020년 10월 11일
6
post-thumbnail

면접 기초 cs 예상문제 및 답변

운영체제

💡   프로세스와 스레드 차이

  • 프로세스는 운영체제로부터 자원을 할당받아 실행
    스레드는 프로세스로부터 자원을 할당받아 실행
  • 하나의 프로세스 안에서 여러 스레드 생성가능
  • 각 스레드는 프로세스 안에서 개별 스택을 가지고 프로세스의 전역 메모리 공간을 공유

💡   deadlock의 개념과 해결방법

프로세스가 자원을 얻지 못해 다음 처리를 하지 못하는 상태로, ‘교착 상태’라고도 하며 시스템적으로 한정된 자원을 여러 곳에서 사용하려고 할 때 발생

  • 락을 두개 이상 획득해야 할 필요가 있다면 반드시 똑같은 순서대로 획득하고 풀어줄 때는 역순으로 풀어주는 식으로 만든다.

💡   모니터, 뮤텍스와 세마포어

동시성 프로그래밍의 가장 큰 숙제는 ‘공유자원 관리’. 공유자원을 안전하게 관리하기 위해서는 상호배제(Mutual exclusion)를 달성하는 기법

👀   모니터

  • 상호 배제 자물쇠로 보호되는 루틴의 집합
  • 한 모니터 내에서 한 스레드씩 실행
  • 자물쇠의 획득과 해제를 모두 처리해 줌

👀   뮤텍스

  • 한 쓰레드, 프로세스에 의해 소유될 수 있는 Key🔑를 기반으로 한 상호배제기법

👀   세마포어

  • 공유 자원을 보호하기 위한 자물쇠만 존재 자원을 사용하려면 이를 획득해야 함
  • 현재 공유자원에 접근할 수 있는 쓰레드, 프로세스의 수를 나타내는 값을 두어 상호배제를 달성

💡   가상메모리

  • 프로세스 전체가 메모리에 적재되지 않고도 실행이 가능 하도록 하는 기법
  • 현재 필요한 부분만 메모리에 적재 되면 실행이 가능하기 때문에 물리 메모리 용량을 초과하는 프로그램도 동작 시킬 수 있게 함

💡   Page fault

  • 사용하고자하는 데이터가 캐싱되어있지 않을 때 발생

💡   컨텍스트 스위칭

  • 동시에 사용할 수 있는 스레드 수가 제한되므로 운영체제에서 다른 스레드가 시작될 수 있도록 한 스레드를 멈추는 것

💡   Transaction

  • 데이터베이스의 상태를 변환시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위 또는 한꺼번에 모두 수행되어야 할 일련의 연산
  • 하나의 트랜잭션은 Commit되거나 Rollback된다.
  • Atomicity(원자성) : 트랜잭션의 연산은 데이터베이스에 모두 반영되든지 아니면 전혀 반영되지 않아야 한다.
  • Consistency(일관성) : 트랜잭션이 그 실행을 성공적으로 완료하면 언제나 일관성 있는 데이터베이스 상태로 변환한다
  • Isolation(독립성,격리성) : 둘 이상의 트랜잭션이 동시에 병행 실행되는 경우 어느 하나의 트랜잭션 실행중에 다른 트랜잭션의 연산이 끼어들 수 없다.
  • Durablility(영속성,지속성) : 성공적으로 완료된 트랜잭션의 결과는 시스템이 고장나더라도 영구적으로 반영되어야 한다.

네트워크

💡   TCP와 UDP의 차이점

👀   TCP

  • 연결형 프로토콜 흐름제어, 오류 제어
  • 데이터 송수신에 신뢰성을 가짐
    👀   UDP
  • 비연결형 프로토콜 흐름제어, 오류를 제어 하지않음
  • 연결설정, 흐름제어 등을 하지 않기 때문에 적은 데이터를 필요로 함

💡   HTTP와 HTTPS의 차이

👀   HTTP

  • 하이퍼텍스트를 전송하기 위한 규약

👀   HTTPS

  • 통신의 인증과 암호화를 위해 개발되었다. SSL이나 TLS 프로토콜을 통해 세션 데이터를 암호화
  • 서버: 암호화 & 클라이언트: 해독

💡   쿠키와 세션의 차이

👀   쿠키

  • 클라이언트 측(브라우저)에서 관리되는 작은 기록 정보 파일
  • HTTP 헤더에 쿠키를 포함 시켜 응답
  • 쿠키가 존재하면 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보내서 요청
  • 사용자에 대한 정보를 서버에 저장하기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지

👀   세션

  • 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리
  • 사용자에 대한 정보를 서버에 저장하기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지
  • 로그인과 같이 보안상 중요한 작업을 수행할 때 사용
  • 서버에서의 처리가 필요해 쿠키보다 요청 속도가 느림

💡   RestfulApi - Restful이란?

Rest : 자원을 URI로 표시하고 해당 자원의 상태를 주고 받는 것
자원(Resource): URI
행위(Verb): HTTP METHOD
표현(Representations)

  • RESTFUL의 목적은 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것
  • URI는 정보의 자원을 표현. 자원의 이름은 동사보다는 명사를 사용
  • 언더바 (_)를 사용하지 않고 하이픈 (-)은 URI의 가독성을 높이는데 사용
  • 상태정보를 따로 관리하지 않아도 됨
  • 클라이언트 - 서버 구조가 확실해짐
  • 들어오는 요청만 처리하면 되어 편리

#### 💡   OSI 7계층

#### 💡   TCP의 3/4-way-handshake 방식과 차이


데이터베이스

💡   인덱스를 사용하는 이유와 장단점

  • 검색과 정렬속도가 높아짐 (이유이자 장점)
  • 삽입, 변경이 수시로 일어나면 성능 저하가 일어날 수 있음

💡   Redis와 MongoDB의 차이

  • 둘다 NO SQL 방식
  • MongoDB는 document(json)형식으로 데이터 저장, Redis는 Key/Value 형태로 데이터를 저장
  • Redis는 인메모리DB로 데이터를 저장하고 관리하여 성능이 좋지만 캐쉬등과 같이 유한성과 저장기간이 있어 빠른 성능이 필요한 기능에 사용
  • MongoDB는 방대한 데이터나 가변적인 데이터 구조를 다루는데 유용함

💡   관계형 데이터베이스와 NoSQL의 차이

👀   관계형 데이터베이스

  • 쿼리 언어
  • 스키마는 데이터베이스를 구성하는 데이터 개체(Entity), 속성(Attribute), 관계(Relationship) 및 데이터 조작 시 데이터 값들이 갖는 제약 조건 등에 관해 전반적으로 정의
  • 정해져있는 데이터 스키마에 따라 데이터베이스 테이블에 저장되며, 관계를 통한 테이블간 연결을 통해 사용
  • 명확한 데이터 구조를 보장. 그리고 각 데이터에 맞게 테이블을 나누어 데이터 중복을 피해 데이터 공간을 절약
  • 시스템이 복잡해 질수록 Query문이 복잡해지고 성능이 저하

👀   NoSQL

  • 스키마와 관계라는 개념이 없고 테이블과 같은 개념으로 컬렉션이라는 형태로 데이터를 관리
  • RDBMS 보다 자유롭게 데이터를 추가가 가능
  • 데이터 업데이트시 중복되어 저장되어있는 데이터를 똑같이 관리(업데이트)해 주어야 함

💡   inner join / outer join 차이

👀   inner join

  • A와 B의 교집합을 얻을 수 있습니다.

👀   outer join

  • A와 B의 합집합을 얻을 수 있습니다.

💡   USING / ON 차이

👀   USING

  • 키 열이 결합 결과로 한번만 표시

👀   ON

  • 양쪽 테이블의 열이 결과에 모두 표시되며 전체이름으로 참조

자료구조, 알고리즘

💡   배열과 링크드 리스트의 장단점

👀   배열

  • 항목 접근 속도가 빠르다
  • 데이터 추가 / 삭제 등 삽입이 복잡하다

👀   링크드 리스트

  • 항목 접근 속도가 느리다
  • 삽입이 간단하다. 항목 생성 후 포인터 값만 변경해주면 된다.

#### 💡   BST의 최악의 시간복잡도와 케이스

💡   해쉬 테이블이란?

key와 value로 데이터를 저장하는 자료구조

  • 각각의 객체는 hash Function을 통해 이 값을 테이블에 넣어 저장하는 방식
  • 충돌해결방식 : Chaining과 ** open Addressing 방법.

** Linear probing : 버킷의 자리에 더 이상의 데이터의 삽입이 불가하다면 차례대로 검색해 비어있는 버킷에 데이터를 저장하는 방식

💡   DFS(깊이 우선탐색) vs BFS(넓이 우선탐색)

👀   DFS

  • 스택 사용
  • 자식들을 우선으로 탐색

👀   BFS

  • 큐 사용
  • 형제들을 우선으로 탐색

기타

💡   스크립트 언어와 컴파일 언어

👀   스크립트 언어

  • python, javascript 등
  • 실행 단계에서 한줄씩 기계어로 번역되어 실행이 느림
  • 전체코드에 대한 최적화가 어려움

👀   컴파일 언어

  • c, java 등
  • 기계어 상태로 실행되어 실행이 빠름
  • 기계어로 변환될 때 최적화 작업 진행

💡   동기 vs 비동기 차이점 및 장단점

👀   동기

  • 요청에 대한 응답이 끝나면 다음 요청을 처리하는 방식
  • 구성이 단순하고 순서대로 실행하므로 디버깅이 쉬움, 멀티태스킹 불가
  • 한 요청에 대한 응답이 길어지면 처리시간이 매우 길어질 수 있음

👀   비동기

  • 요청에 대한 응답을 기다리지 않고 다음 동작을 진행
  • 멀티 태스킹 가능
  • 일정 시간당 요청량이 많을 경우 부하가 발생할 수 있음
  • 순서대로 실행되지 않기 때문에 상황에 따라 추가적인 처리가 필요함

💡   런타임 에러가 발생하는 경우

프로그램 실행 도중에 발생한 오류의 총칭

  1. 논리적으로 잘못된 동작의 조합 - 버그

  2. OS가 판단하기에 어떤 프로그램이 내린 명령이 컴퓨터의 운영에 좋지 않은 영향을 미친다고 생각될 때

  3. 플랫폼(platform) 차이의 문제 등

💡   클라우드란?

타사 제공업체가 인터넷을 통해 사용자에게 제공하는 인프라, 플랫폼 또는 소프트웨어

💡   ec2란?

AWS에서 제공하는 클라우드 컴퓨팅 서비스. 쉽게 생각해서 한대의 컴퓨터를 임대해주는 것

  • 사용자가 인스턴스를 완전히 제어할 수 있다.
  • 보안 및 네트워크 구성, 스토리지 관리 효과적이다.

💡   스크립트 언어와 컴파일 언어 차이점

👀   스크립트 언어

  • JavaScript, Python, Ruby...
  • 실행될 때 바로 해석
  • 컴파일러를 통해서 한번 컴파일 된 후 실행

👀   컴파일 언어

  • 컴파일 언어 : C, C++, C#, Java...
  • 실행될 때 바로 해석

💡   Immutability

Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴

  • 변경이 불가능하다는 뜻은 메모리 영역에서의 변경이 불가능
  • 변경점 찾기 및 디버깅이 쉬움
  • mutable한 코드보다 훨씬 느림

💡   클래스와 인스턴스

- 붕어빵틀, 붕어빵

  • 메모리에 올려 인스턴스화하면 네임 스페이스(저장된 공간) 생김

💡   함수형 프로그래밍 & 객체 지향 프로그래밍

👀   함수형 프로그래밍

  • 함수의 응용을 강조, 데이터 처리를 함수의 계산으로 취급
  • 쉽게 에러추적 / 재사용성증가

👀   객체 지향 프로그래밍

  • 데이터 처리 과정 루틴을 하나의 독립된 루틴으로 바라봄으로서 재사용성을 증가

파이썬

💡   제너레이터(generator)란?

  • Iterator를 생성해주는 함수
  • next()메소드를 통해 데이터를 순차적으로 접근
  • 한번에 모든 데이터를 메모리에 적재할 필요가없고 계산 결과가 필요할 때까지 계산을 늦출 수 있어 효율적임

💡   GIL이란?

  • 한번에 하나의 스레드만 수행할 수 있도록 lock을 거는 기능
  • 객체를 참조할때마다 reference count를 변경하도록 되어있어 멀티 스레드로 실행하게 되면 성능 이슈와 deadlock과 같은 문제가 발생
  • 인터프리터 레벨에서 한 시점에서 실행하는 스레드를 1개로 제한. 따라서 스레드는 어느 시점에서나 1개의 스레드가 실행
  • multiprocessing 라이브러리를 사용하면 동시 실행 가능

C 프로그래밍

💡   C언어와 C++언어의 차이점

C++은 C언어를 확장시킨 언어이며 C는 절차지향 패턴을 따르는 반면 C++은 객체지향 패턴을 따르고 있다

** 객체지향 : 프로그램에서 필요한 행위들을 일반화 시켜서 객체로 만들고 이 객체를 사용하는 형태로 프로그래밍을 하는 것.

💡   포인터

  • 포인터란 메모리 주소를 저장하는 변수
  • *포인터를 사용할 때 주의할 점은 어떠한 주소를 가리키고 있어야 사용이 가능

Web FE, Javascript

💡   MVC 패턴이란?

디자인패턴 중 하나로 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴

  • Model : 애플리케이션의 정보, 데이터
  • View : i사용자 인터페이스 요소. 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당
  • Controller : 이벤트들을 처리하는 부분

💡   리액트 왜 사용?

1) 리액티브 성질 -> 뷰모델이 state 변화를 감지하며 UI 쉽게 제어
2) 가상돔을 사용하여 dom변화 감지 -> 돔 렌더 최소화
3) 점유율이 많고 대기업에서 많이 사용하여 개발자 풀과 리소스 등이 풍부함

  • vue와의 차이 -> 템플릿이 따로 지원되는게 아니라 js로 하나로 관리하여 편하다는 의견이 있음

💡   리액트 주의점

1) setState는 비동기로 작동
2) index를 키값으로 사용하는것은 지양. -> 성능저하, 화면갱신에 좋지 않을 수 있음

💡   Element 와 Component

  • Element: 앱을 구성하는 최소단위
  • Component: Element + 어플리케이션 로직

💡   브라우저 렌더링 과정

1) HTML 파싱 후, DOM(Document Object Model) 트리 구축
2) CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
3) Javascript 실행
4) DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
5) 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
6) 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)
7) 각각의 레이어를 픽셀화하고 다시 합성 (컴포지팅 단계)

💡   RePaint & Reflow

*Reflow: 생성된 DOM 노드의 레이아웃 변경시 영향받는 모든 노드의 수치를 다시계산하고 렌더트리를 재생성

*RePaint: Reflow과정이 끝나고 재생성된 렌더트리를 다시 레이어에 그림

<해결방법>

  • css Transform 속성 사용
  • requestAnimationFrame 함수 사용

💡   가상 DOM과 DOM의 차이

  • 가상돔은 간소화된 복사본으로 작은 단위로 쪼개서 필요한 만큼 자주 수정이 가능
  • 하나의 노드를 추가하거나 삭제할 때 웹 페이지 전체가 다시 렌더링 되는 reflow 방지
  • 비교 알고리즘을 통해 변경된 부분을 실제 돔에 반영

💡   DOM & BOM

  • BOM(browser object model): 브라우저의 기능들을 객체처럼 다루는 모델
  • window / screen / navigator / location 등
  • DOM(document object model): 노드 객체의 계층화된 트리
  • document / element / text 등

💡   SPA 개념과 장단점

단일 페이지로 구성된 웹 어플리케이션

  • 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠름

  • 초기 구동 속도가 느림

  • 검색엔진 최적화(SEO)가 어려움

  • 이를 해결하기 위해서 ** SSR (Server SIde Rendering)이라는 방식으로 사용

** 서버 사이드 렌더링이란 페이지를 서버측에서 먼저 간단하게 띄워주고, 완전하게 렌더링된 페이지를 클라이언트에게 다시 보내주는 기법

💡   시멘틱 태그가 왜중요한가

  • 브라우저와 개발자에게 element의 의미를 명확히 전달
  • 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것

💡   크로스 브라우징

  • 웹 표준에 따라 개발, 어떤 환경에서도 이상없이 작용
  • 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자경험을 줄 수 있도록 제작

💡   CORS

도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다.

  • 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면
    외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다.

💡   CSS 스프라이트(CSS Sprites)

여러 이미지를 하나의 큰 이미지로 결합

  • 이미지에 대한 HTTP 요청 수를 줄입니다

💡   Hoisting

  • 선언과 초기화, 할당을 분리하는 것
  • 함수 표현식의 경우 호이스팅 발생
  • let/const는 호이스팅 되지않는 것이 아니라 영향을 받지 않는 것, TDZ에 들어가 실제 있는 위치에 도달할 때까지 액세스 할 수 없음

💡   Null & Undefined & Undeclared

👀   Null

  • 객체 타입으로 값이 정해지지 않음

👀   Undefined

  • 타입과 값이 정해지지 않은 것을 의미

👀   Undeclared

  • lst, const 등으로 선언조차 되지 않은 것

💡   원시 래퍼 타입

  • 원시타입을 객체처럼 사용할 수 있게 함
  • 원시 타입 중 Boolean, String, Number
  • 원시타입을 객체처럼 사용하는 순간 인스턴스를 만들고 사용한 후 파괴됨 (오토박싱)

💡   스코프

  • 유효범위로 변수의 생존성과 접근 범위 제어
  • 이름이 충돌하는 문제를 덜어주고 자동으로 메모리 관리
  • 전역, 함수, 블록 스코프가 존재
  • 키워드를 사용하여 변수를 사용하지 않으면 전역변수로 인식

💡   클로저

  • 폐쇄된 공간(생명주기가 끝나 해제된 경우)에 대한 접근권한을 가진 함수
  • 비공개 데이터를 가진 객체 생성 가능
  • 외부함수 파괴시 접근 권한은 내부함수만 가지게 되므로 내부함수만을 통해 접근 가능하게 함
  • 컨텍스트A에서 선언한 변수 a를 참조하는 내부함수B를 A의 외부로 전달할 경우 A가 종료된 이후에도 a가 사라지지 않는 현상
  • 함수종료 후에도 사라지지 않는 지역변수를 만들 수 있음
  • 외부로부터 내부 변수 보호 가능(캡슐화)

💡   this

  • 실행컨텍스트가 실행될 때(함수가 실행될때) 동적으로 binding
  • 전역공간: window (browser) /global (node.js)
  • 함수 호출시: window (browser) /global (node.js)
  • 메서드 호출시: 메서드 호출주체(메서드 명 앞)
  • callback 호출시: 기본적으로 함수의 this와 같지만 제어권을 가진 함수가 콜백의 this를 지정해 둔 경우도 있음. 이경우에 this를 바인딩해서 콜백을 넘기면 그에 따르게됨
  • 생성자함수 호출시: 인스턴스

💡   실행컨텍스트

  • 코드를 실행하는 데에 필요한 배경이 되는 조건 / 환경
  • 함수를 실행할 때 필요한 환경정보를 담은 객체
  • 동일한 조건/환경을 지니는 코드뭉치
  • lexical Environment: 어떤 실행컨텍스트에 대한 환경정보가 담겨있는 사전 (내부식별자/ 외부참조 등)
  • 호이스팅: environmetRecord에 식별자를 수집하여 담는 현상

💡   일급 객체

  • 자바스크립트의 함수는 일급 객체
  • 함수를 다른 함수의 파라미터로 전달 가능
  • 반환 값으로 사용 가능

💡   고차함수, 순수함수

👀   고차함수

  • 함수가 일급 객체이기 때문에 가능
  • 다른 함수를 매개 변수로 사용하여 데이터를 처리하거나 함수를 반환하는 함수

👀   순수함수

  • 동일한 인자를 넣었을 때 항상 동일한 리턴값을 반환하고 외부에 영향을 받지 않는 함수
  • ex) random, getDate 등의 함수는 순수 함수가 아님

💡   Event Capturing

  • 이벤트 발생시 타겟 요소의 가장 최상위 객체로부터 이벤트 리스너가 등록되어 있는지 확인하며 자식요소로 전파되고 타겟요소까지 내려가는 현상

💡   Event Bubbling

  • 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트 발생
  • Event Capturing과 반대
  • event.stopPropagation()로 방지

💡   Event Delegation

Event Bubbling을 이용하여 특정 엘리먼트에 하나하나 이벤트를 등록하지 않고 하나의 부모에 등록하여 부모에게 이벤트를 위임하는 방법

  • 상위 엘리먼트에서만 이벤트 리스너를 관리하기 때문에 하위 엘리먼트는 자유롭게 추가/삭제
  • 동일한 이벤트에 대해 한 곳에서 관리하기 때문에 각각의 엘리먼트를 여러 곳에 등록하여 관리하는 것보다 관리가 수월하다.
  • 메모리 사용량이 줄어든다.

💡   npm 사용의 장점

  • 버전들의 의존관계들을 한눈에 파악할 수 있다.
  • 관리하기가 쉽다
  • 라이브러리 페이지에가서 소스링크를 찾아보지 않아도 된다.
  • 명령어로 손쉽게 최신버전을 적용시킬 수 있다.

💡   dependencies vs devDependencies

dependencies
npm install package_name

  • 화면 로직과 직접적으로 관련된 라이브러리
  • 애플리케션을 동작시키는데 필요한 라이브러리 ex) jQuery

devDependencies
npm i package_name -D

  • 개발 보조 라이브러리 ex) Webpack
  • 배포가 되지 않음

💡   바벨(babel)

  • 자바스크립트의 최신 문법들을 최대한 많은 브라우저가 호환할 수 있게 변형해주는 도구
profile
Junior Web FE Developer

0개의 댓글