잡서칭 1일차(2021-12-22)

1️⃣ Pair Coding & Skill Interview

Pair Coding

🗣 페어 분께서 선정한 코딩 문제를 받아 모의 면접을 진행했습니다📹
출제 문제 링크

문제 풀이 코드

function solution(array, commands) {
    
    // 🗣 코딩 전
    // (1) 문제 input, output값 설명
      // input 값으로 array, commands가 주어졌고,
      // output 값은 빈 배열로 초기화되어있는 주어진 변수 answer를 리턴해야 합니다.
  
    // (2) 문제 플로우 분석
      // 0. 리턴할 연산 결과들을 담을 배열 선언 및 빈 배열 초기화
    var answer = [];
      // 1. array 자르기(i, j)
      // 2. 오름차순 정렬하기
      // 3. k 번째 수 구하기
      // 4. 리턴할 배열 answer에 k 번째 수 추가
      // 5. commands 배열의 길이만큼 1~4을 반복하기
	
    // (3) 시간 복잡도 
      // 5. 이 문제 풀이의 시간 복잡도는 O(N)이 됩니다. 
      // commands의 배열의 길이만큼 for 반복문 실행 횟수가 늘어나기 때문입니다.
  
    // 🗣 코딩 중
      // 0. 주어진 배열 commands의 길이를 새로 선언 변수 n에 할당
    const n = commands.length;
    for(let m = 0; m < n; m++){
      // 0. commands의 m번째 요소인 배열을 변수 command 선언 후 할당
      let command = commands[m];
      let i = command[0];
      let j = command[1];
      let k = command[2];
      // 1. slice 메소드 이용
      let modifiedArray = array.slice(i - 1, j);
      // 2. sort 메소드 사용
      let sortedArray = modifiedArray.sort((a, b) => a - b);
      // 3. sortedArray의 k - 1번째 index
      let value = sortedArray[k - 1];
      // 4. push 메소드 이용
      answer.push(value);
    }; 
  	// answer 반환
    return answer;
}

🗣 이 문제 풀이의 시간 복잡도는 O(N)이 됩니다. 왜냐하면, commands의 배열의 길이만큼 for 반복문 실행 횟수가 늘어나기 때문입니다.

Skill Interview

🗣 페어 분께서 선정한 기술 면접 질문을 받아 모의 면접을 진행했습니다📹

👨🏼‍🏫 예상 문제 1

Node.js에서 비동기의 개념은 어떻게 되나요?

답안

동기와 비동기의 차이
동기와 비동기의 차이를 통해 비동기의 개념을 설명해보겠습니다.
2-tier-acrhitecture를 생각해보면 Client와 Server의 요청과 응답이 있을텐데, Client에서 Server로 특정 데이터 요청을 보냈다고 가정했을 때, server로부터 응답이 오지 않더라도 Client가 다음 작업을 진행할 수 있으면 비동기, 응답이 올 때까지 다음 작업을 진행할 수 없으면 동기적이라고 말할 수 있습니다.
스타벅스 같은 카페의 사이렌 오더 서비스로 예를 들어보겠습니다. 손님 5명이 사이렌 오더로 동시에 음료를 주문했다고 가정했을 때, 직원 분의 인원 수가 부족하지 않다면, 요청의 결과와는 별개로 음료 제조 작업이 동시에 이루어질 겁니다. 그리고, 제조 과정이 간단한 음료일수록 먼저 나올 겁니다. 따라서,카페에서의 주문 처리는 비동기적으로 진행된다고 말 할 수 있습니다.
즉, 비동기란 '어떤 한 작업이 끝나는 시점과 다른 작업의 시작 시점이 일치하지 않는 자바스크립트의 성질을 의미'합니다.
웹에서 비동기 사례
웹에서 비동기의 사례를 말씀드려보면, react에서는 onClick, onkeyDown 같은 이벤트 핸들러, 그리고 페이지 로딩 또한, 로딩중일 때, 다른 작업을 할 수 없지 않기 때문에 비동기의 사례가 됩니다. setTimeout 같은 타이머 API도 해당이 되고, 서버에 자원 요청을 하고 응답을 받는 fetch, axios 같은 AJAX도 비동기라 말씀드릴 수 있습니다.

👨🏼‍🏫 예상 문제 2 🖍

React 라이브러리에서 제공하는 기본 내장 API 함수에 대해서 설명해주세요. (ex. useEffect, useCallback)

저는 리액트의 기본 내장 API 함수 중 useEffect에 대해서 설명해보겠습니다.
정의
useEffect는 side-effect를 다룰 수 있게 하는 Hook 입니다.
side-effect란 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말합니다. 이 side-effect의 반대되는 개념이 바로 순수함수입니다. 순수함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말합니다.
React의 함수 컴포넌트는 props가 입력으로, JSX Element가 출력으로 나갑니다
따라서 여기에는 어떤 Side Effect도 없고, 순수 함수로 작동합니다.
하지만 React 애플리케이션을 실행할 때는, 외부 API에 데이터를 받아오는 AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용해야 하는 경우가 생깁니다. 이는 React의 입장에서는 전부 Side Effect이기 때문에, 이것을 다루기 위해서 useEffect hook을 사용합니다.

첫 번째 인자
첫 번째 인자는 '함수'가 들어가는데, 이 함수 안에서 side effect를 실행하면 됩니다
이 함수는 세 가지 조건에서 실행됩니다. 컴포넌트 생성 후 처음 화면에 렌더링(표시)될 때, 컴포넌트에 새로운 props가 전달되며 렌더링될 때, 그리고 컴포넌트에 상태(state)가 바뀌며 렌더링될 때 함수가 실행됩니다. 이처럼 매번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행됩니다.

두 번째 인자
두 번째 인자에는 '종속성 배열(dependency array)'이 들어갑니다.
이 배열은 조건을 담고 있습니다. 여기서 조건은 '어떤 값의 변경이 일어날 때'를 의미합니다.
예를 들면, 특정 state를 배열 안에 넣어주면, state가 변경될 때마다 useEffect가 실행됩니다. 따라서, 해당 배열엔 어떤 값들의 목록이 들어갑니다.
useEffect(() => {})
두 번째 자체를 넣어주지 않으면, 앞서 언급한 함수 실행 조건 세 가지인, 컴포넌트가 생성될 때, props가 업데이트될 때, state가 업데이트 될 때 useEffect가 실행됩니다.
useEffect(() => {}, [])
반면에, 두 번째 인자에 빈 배열을 입력하면, 컴포넌트가 처음 생성될때만 useEffect 함수가 실행됩니다. 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있습니다.

피드백

👤 기본 내장 API 함수가 무엇인지, 다른 api 내장 함수 하나정도 더 얘기하면 좋을 것 같습니다. 중간에 말이 뚝뚝 끊기는 경우가 있었습니다.

2️⃣ 이력서 & 자기소개서 세션