[기술 면접 준비] Mockterview_React_50제_1~10번

1. 시간복잡도와 공간복잡도가 무엇인지 설명해 주실 수 있을까요?

✔️ 요약 답변
시간복잡도(Time Complexity)란 'n개의 입력 데이터에 대하여 알고리즘이 문제를 해결하는 데에 얼마 큼의 시간이 걸리는지?'를 뜻한다. 절대적인 시간(분, 초)을 측정하는 것이 아니라 알고리즘이 실행될 때 동작하는 모든 연산의 횟수가 몇 번인지 세는 것이다. 알고리즘의 실행 시간을 알고리즘 수행에 필요한 스텝(step)의 수로 정의하고, 실행 시간을 점근적 표기법으로 단순하게 표현한다. 공간복잡도(Space Complexity)란 프로그램을 실행시킨 후 완료하는 데 필요로 하는 자원 공간의 양을 뜻한다. 총 공간 요구 = 고정 공간 요구 + 가변 공간 요구이다. 고정 공간 (알고리즘과 무관한 공간): 코드 저장 공간, 단순 변수 및 상수. 가변 공간 (알고리즘 실행과 관련 있는 공간): 실행 중 동적으로 필요한 공간인데, 고정 공간은 상수이므로 공간 복잡도는 가변 공간예 좌우된다. 시간 복잡도는 얼마나 빠르게 실행되느냐?, 공간 복잡도는 얼마나 많은 자원이 필요한가?이다.
 
✔️ 상세 답변
시간복잡도(Time Complexity)란 'n개의 입력 데이터에 대하여 알고리즘이 문제를 해결하는 데에 얼마큼의 시간이 걸리는지?'를 뜻한다. 절대적인 시간(분, 초)을 측정하는 것이 아니라 알고리즘이 실행될 때 동작하는 모든 연산의 횟수가 몇 번인지 세는 것이다. 알고리즘의 실행 시간을 알고리즘 수행에 필요한 스텝(step)의 수로 정의하고, 실행 시간을 점근적 표기법으로 단순하게 표현한다.
점근적 표기법(Asymptotic Notation)이란 알고리즘 수행 시간을 표기하기 위해, 필수적인 부분(가장 큰 영향을 주는 항)에 집중하고 불필요한 상세들은 무시하는 표기법을 뜻한다. 시간복잡도를 나타낼 때는 최상, 평균, 최악 3가지 점근적 표기법을 사용한다. 그중 프로그램이 실행되는 과정에서 소요되는 최악의 경우인 빅오(Big-O) 표기법으로 알고리즘 성능을 평가한다. 알고리즘이 복잡해질수록  평균 성능을 구하기 어렵고, 나머지 경우 모두 최악의 경우보다는 빠르므로 최악의 경우가 앞선 경우들을 모두 포함할 수 있기 때문이다.
공간복잡도(Space Complexity)란 프로그램을 실행시킨 후 완료하는 데 필요로 하는 자원 공간의 양을 뜻한다. 배열의 크기가 몇인지, 얼마만큼의 동적 할당인지, 몇 번의 호출을 하는 재귀 함수인지 등이 공간 복잡도에 영향을 끼칩니다. 고정 공간은 입력과 출력의 횟수나 크기와 관계없는 공간의 요구(코드 저장 공간, 단순 변수, 고정 크기의 구조 변수, 상수), 가변 공간은 해결하려는 문제의 특정 인스턴스에 의존하는 크기를 가진 구조화 변수들을 위해서 필요로 하는 공간, 함수가 순환 호출을 할 경우 요구되는 추가 공간, 그러니까 동적으로 필요한 공간을 의미한다.
시간 복잡도는 얼마나 빠르게 실행되느냐?, 공간 복잡도는 얼마나 많은 자원이 필요한가?이다. 하지만, 시간과 공간은 반비례적인 경향이 있기 때문에 알고리즘의 척도는 시간 복잡도를 위주로 판단한다. 요즘과 같은 대용량 시대에는 시간 복잡도만 괜찮다면 공간 복잡도는 어느 정도 이해를 해주는 것으로 알고 있습니다.

Q. 효율적인 알고리즘이란?
알고리즘이 수행을 시작하여 결과가 도출될 때까지 실행에 걸리는 시간이 짧고 연산하는 컴퓨터 내의 메모리와 같은 자원을 덜 사용하는 것.
즉, “시간도 적게 걸리고 자원의 사용도 적어야 하는 것”

*출처
https://madplay.github.io/post/time-complexity-space-complexity

시간복잡도와 공간복잡도(Time Complexity Space Complexity)

 
https://velog.io/@wlwl99/%EC%8B%9C%EA%B0%84%EB%B3%B5%EC%9E%A1%EB%8F%84-Time-Complexity

시간복잡도 (Time Complexity)

https://cheris8.github.io/python/AL-Time-Complexity/

[알고리즘] 시간 복잡도 (Time Complexity) - 빅오 표기법 (Big-O Notation)

https://ontheway.tistory.com/47#%E-%--%BC%C-%A-%--%EC%A-%--%EC%--%--%C-%A-%--%EC%-B%-C%EA%B-%--%--%-F%--%ED%--%A-%EC%--%--%--%-A%--O--%E-%--%BF-

2. 스택, 큐에 대해 설명해 주실 수 있을까요?

✔️ 요약 답변
스택(stack)은 선형 메모리 공간에 데이터를 저장하면서 후입선출(LIFO)의 시멘틱을 따르는 자료 구조. 가장 나중에 저장된(push) 데이터가 가장 먼저 인출(pop)됨. 데이터의 삽입 연산을 push, 삭제 연산을 pop, 삽입과 삭제가 일어나는 위치는 top이라 함. pop의 경우 현재 스택에 데이터가 비어있는지 여부를 먼저 확인한 후 실행됨. peek은 스택의 가장 위에 있는 항목을 반환, isEmpty는 스택이 비어 있을 때에 true를 반환하는 메서드임. 큐(queue)는 선형 메모리 공간에 데이터를 저장하면서 선입선출(FIFO)의 시멘틱을 따르는 자료 구조. 가장 먼저 저장된(push) 데이터가 가장 먼저 인출(pop)됨. 데이터는 Rear(뒷부분)로 들어와서 Front(앞부분)로 나감. enqueue는 삽입, dequeue는 삭제(가장 먼저 삽입한 데이터를 빼서 사용)하는 메서드임. peek은 Front 위치에 있는 데이터를 꺼내지 않고 어떤 값이지 return 함.
✔️ queue 
isEmpty는 현재 queue가 비어있는지 확인하는 메서드. 큐는 은행 창구에서 뽑은 번호표 순서대로 업무를 보는 것처럼 입력된 순서대로 작업을 수행해야 할 때 활용할 수 있음.

https://somjang.tistory.com/entry/%ED%8C%8C%EC%9D%B4%EC%8D%AC%EC%9C%BC%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-%ED%81%90-Queue

파이썬으로 구현하는 자료구조! - 큐 ( Queue )

https://gmlwjd9405.github.io/2018/08/02/data-structure-queue.html

[자료구조] 큐(Queue)란 - Heee's Development Blog

https://brightwon.tistory.com/8

[자료구조] 스택(Stack)과 큐(Queue) 이해하기

http://www.tcpschool.com/java/java_collectionFramework_stackQueue

코딩교육 티씨피스쿨

3. 배열, 링크드리스트를 비교하여 설명해 주실 수 있을까요?

✔️ 요약 답변
배열(Array)은 입력된 데이터들이 메모리 공간에서 연속적으로 저장되어 있는 자료구조. index를 기반으로 데이터에 액세스 하는 것이 매우 효율적임. 그러나 배열의 크기가 고정되어 있어 데이터의 추가 및 제거가 어려움. 배열의 크기는 처음 생성할 때 정하며 이후에는 변경할 수 없음. 링크드리스트(Linked List)는 여러 개의 노드들이 순차적으로 연결된 형태를 갖는 자료구조. 첫 번째 노드를 head, 마지막 노드를 tail이라고 함. 각 노드는 인접한 메모리 공간이 아닌 다른 메모리 공간에 저장됨. 데이터 추가 및 제거는 매우 용이하지만 incex를 기반으로 데이터에 액세스 하는 속도가 느리고 메모리를 많이 사용함. 배열은 Stack 영역에 메모리가 할당됨. 링크드리스트는 Heap 영역에 할당됨. 배열은 데이터 접근성이 높지만 데이터를 추가하고 제거하기가 어렵고 링크드리스트는 데이터를 추가하고 삭제하기는 쉽지만 데이터 접근성은 낮음.
✔️ 보충
Array에서, Memory는 Array 가 선언되자마자 Compile time에 할당되는데 이를 정적 메모리 할당 Static Memory Allocation이라 함. Stack section에 memory가 할당됨
LinkedList에서, Memory는 새로운 node 가 추가될 때 runtime에 할당되는데 이를 동적 메모리 할당 Dynamic Memory Allocation이라 함. Heap section에 memory가 할당됨
*Static Memory Allocation : 프로그램이 수행되기 전에 미리 메모리를 할당하는 것
*Dynamic Memory Allocation : 입력되는 데이터에 맞게 기억공간을 확보하는 것
*Heap : 우선순위 큐(Priority Queue, 들어간 순서에 상관없이 우선순위가 높은 데이터가 먼저 나오는 것)를 위해 만들어진 자료구조
 
https://wooono.tistory.com/281

[자료구조] Linked List(연결 리스트) 와 Array(배열)의 차이

https://medium.com/@audrl1010/linked-list-%EC%99%80-array-%EC%B0%A8%EC%9D%B4%EC%A0%90-4ba873c2e5f5

Linked List 와 Array

https://velog.io/@xxhaileypark/%EC%9E%90%EB%A3%8C-%EA%B5%AC%EC%A1%B0-%EB%B0%B0%EC%97%B4-%EC%97%B0%EA%B2%B0-%EB%A6%AC%EC%8A%A4%ED%8A%B8-Array-LinkedList

[자료 구조] 배열 & 연결 리스트 (Array & LinkedList)

https://kimmeh1.tistory.com/473

[자료구조] Array와 Linked List의 차이는 무엇일까?

4. CORS란 무엇이고 어떻게 허용할 수 있나요?

✔️ 요약 답변
CORS(Cross-Origin Resource Sharing)란 웹 페이지를 서비스하는 도메인과 다른 도메인에 요청하는 웹 페이지의 기능을 제한하는 웹 브라우저에 의해 구현된 보안 기능임. 다른 도메인에 무단으로 요청하는 악의적인 웹 페이지를 만들고 중요한 데이터를 검색하는 공격을 방지하는 데 사용됨. CORS를 구현함으로써 웹 개발자들은 자신들의 API에 대한 요청을 허용하는 도메인을 제어하고 신뢰할 수 있는 소스에 의해서만 데이터에 접근하도록 보장할 수 있음. API endpoint를 host 하는 서버는 응답에 "Access-Control-Allow-Origin" 헤더를 추가하고 endpoint에 요청할 수 있는 도메인을 지정해야 함. Access-Control-Allow-Origin  단일 출처를 지정하여 브라우저가 해당 출처가 리소스에 접근하도록 허용함. "*"를 지정하면 모든 도메인의 요청이 허용됨. 보안상의 이유로 프로덕션에서 특정 도메인의 요청만 허용하는 것이 좋음.
✔️ 보충
endpoint : API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL

It's one end of a communication channel, so often this would be represented as the URL of a server or service.

https://stackoverflow.com/questions/2122604/what-is-an-endpoint

What is an Endpoint?

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

5. 사용자 패스워드를 전송하고 보관하는 방법을 설명해 주실 수 있을까요?

✔️ 요약 답변
유저의 패스워드를 받은 클라이언트는 암호화하지 않은 평문으로 서버로 전송함. 평문을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관함. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 뜻함. 원본 데이터로는 다이제스트를 구할 수 있지만 다이제스트로는 원본데이터를 구할 수 없어야 하는데, 이를 단방향이라 함. 단방향 해시함수는 BruteForce 공격으로 쉽게 당할 수 있기 때문에, 이를 보완하기 위해 입력된 다이제스트를 N번 반복해서 생성하는 것인 key stretching과 원문 패스워드에 임의의 문자열을 추가하여 해싱하는 것인 salting을 이용해 보안의 강도를 높일 수 있음.
✔️ 보충
*BruteForce 공격 : 인증 정보(사용자 이름과 비밀번호)를 알아내기 위해 해커가 반복적으로, 체계적으로 매번 다른 사용자 이름과 비밀번호를 입력하는 방식의 공격
*Hashing : 키(Key) 값을 해시 함수(Hash Function)라는 수식에 대입시켜 계산한 후 나온 결과를 주소로 사용하여 바로 값(Value)에 접근하게 하는 방법

6. var, let, const에 대해 설명해 주실 수 있을까요?

✔️ 요약 답변
var 재선 언, 재할당 모두 가능하고, 함수 스코프로 함수내에서 모든 변수에 접근이 가능함. 변수가 선언되기 전에 코드에서 참조될 수 있음. 반면 let, const는 블록 스코프로 블록 외부에서 접근이 불가능하며 초기화가 되기 전에는 코드를 참조할 수 없음. 또한 let은 재선언은 불가능하지만, 재할당이 가능하고, const는 재선언, 재할당 모두 불가함. 요즘에는 var 대신에 let과 const를 주로 사용함. var의 경우에는 중복된 이름을 선언했을 경우에 오류사항이 나지 않으므로, 배포 시에 위험성이 있기 때문. var, let, const 모두 호이스팅이 되지만 let과 const는 TDZ 현상이 일어남. 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋음. let을 사용하는 경우 변수의 스코프는 최대한 좁게 만듦. 재할당이 필요 없는 상수와 객체에는 const를 사용함.
✔️ 보충
함수표현식을 사용하거나 let 또는const로변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것임.
*TDZ(Temporal Dead Zone) 현상 : 변수가 선언돼서 초기화 전까지 변수를 읽거나 쓸 수 없는 시점을

7. Promise란 무엇인지 설명해 주실 수 있을까요?

비동기 함수 호출 또는 비동기 연산이 완료된 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈. 싱글스레드인 자바스크립트에서 비동기 처리를 위해 사용한 콜백함수의 에러/예외처리의 어려움, 중첩으로 인한 복잡도 증가라는 단점을 해결하기 위해 프로미스 객체를 ES6에서 언어적 차원으로 지원함. 기본적으로 callback이 하는 일과 같지만 Promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 Promise 자체 메서드인. then()을 호출함. then()은 생성한 프로미스 객체에서 인수로 전달한 resolve가 호출되면 실행되고, catch()는 생성한 프로미스 객체에서 인수로 전달한 reject가 호출되면 실행됨. fulfilled 혹은 rejected가 발생하면 바로 핸들러가 호출되지 않고 then에 의해 관련 핸들러들이 콜백 큐로 삽입되고, 콜스택이 비었을 때 콜백큐에서 콜스택으로 push 되고, 콜스택에 올라간 콜백함수는 나중에 pop 되어 실행됨

8. Hoisting이란 무엇인지 설명해 주실 수 있을까요?

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화함. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음. 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것. 호이스팅이 발생하는 이유는 자바스크립트 엔진은 코드를 실행하기 전 실행콘텍스트가 생성되는데 이 실행콘텍스트는 코드를 원활하게 실행될 수 있도록 환경을 만들어주는 역할임. 실행컨텍스트는 생성단계와 실행단계가 있음. 그중 코드를 읽기 전 생성단계에서 자신의 스코프 내에 선언된 변수와 함수들을 미리 스코프 내에 등록시키는 작업이 진행됨. 이 원리 때문에 호이스팅이라는 현상이 발생함. var랑 함수와는 다르게 let과 const가 호이스팅 된 것 같지 않은 이유는 초기화 단계 이전인 선언단계까지만 진행된 상태이므로 선언문을 만나기 전까지 변수를 사용할 수 없기 때문
*실행콘텍스트(execution context) : 실행 가능한 코드가 실행되기 위해 필요한 환경. 자바스크립트 코드가 실행되고 연산되는 범위

9. async/await 이란 무엇인지 설명해 주실 수 있을까요?

async & await는 비동기식 코드를 동기식으로 표현하여 간단하게 나타내는 것. async함수는 함수 앞에 위치시켜 사용하며 해당 함수는 항상 promise를 반환함. promise가 아닌 값을 반환하여도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 함. await는 promise가 처리될 때까지 기다림. 함수를 호출하고 함수가 실행되는 동안 await을 만나면 잠시 중단되었다가 promise가 처리되면 그다음 실행하게 됨. 따라서 일반적인 동기 코드 처리와 동일한 흐름으로 (함수 호출 후 결괏값을 변수에 할당하는 식으로) 코드를 작성할 수 있음. await는 항상 async 안에서 사용해야 함. async awat을 사용하면 읽고 쓰기 편한 비동기 코드를 작성할 수 있는 장점이 있음. 일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 promise를 반환하는 api 호출 함수임.
 
2022.12.08 - [🐬 React] - [React-redux] callback, promise, async/await
 
*10. 개발자로서 본인의 장단점과 근거가 되는 경험을 말씀해주실 수 있을까요?(협업 능력 제외)