잡서칭 2일차(2021-12-23)
1️⃣ Pair Coding & Skill Interview 02
Pair Coding
🗣 페어 분께서 선정한 코딩 문제를 받아 모의 면접을 진행했습니다📹
출제 문제 링크
문제 풀이 코드
function solution(a, b) {
// 🗣 코딩 전
// input: a월 b일 어떤 요일?
// 1/1 => 'FRI'
// 1. 요일이 반복되기 때문에, 'FRI' ~ 'THU' 담을 배열을 만든다.
// 2. 2016년의 열 두 달이 각각 말일을 담은 배열을 만든다.
// 3. a-1월까지 일수의 합을 구한다.
// 4. 일수의 합에 b일을 더해준다.
// 5. 반환할 변수 answer에 days 배열의 인덱스를 할당한다. 이때 인덱스는 1/1 부터 a/b까지 일수의 합에서 1을 뺀 값이다.
//
// 6. 이 문제 풀이의 시간 복잡도는 O(N)이 됩니다.
// a월의 직전월의 수만큼 for 반복문 실행되기 때문입니다.
// 1.
const days = ["FRI", "SAT", "SUN", "MON", "TUE", "WED", "THU"];
// 2. 2월은 윤달이기 때문에 29일이 말일이다.
const lastDays = [ 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// 3. 합을 담을 변수 sum을 선언 후 0 할당, for 반복문 사용
let sum = 0;
for(let i = 0; i < a - 1; i++){
sum += lastDays[i];
}
// 4.
sum += b;
var answer = '';
// 5. 1/1부터 세었기 때문에, 1을 빼준다.
answer = days[(sum % 7) - 1];
return answer;
}🗣 이 문제 풀이의 시간 복잡도는 O(N)이 됩니다. 왜냐하면, commands의 배열의 길이만큼 for 반복문 실행 횟수가 늘어나기 때문입니다.
⛔️ 에러 핸들링
sum += b;
answer = days[(sum % 7) - 1];
//이렇게 코드를 입력하면 실패하게 되고,
sum += b -1;
answer = days[sum % 7];
// 이렇게 수정해야 테스트가 통과된다.🗣 이유를 모르겠네?
Skill Interview 01
🗣 페어 분께서 선정한 기술 면접 질문을 받아 모의 면접을 진행했습니다📹
👨🏼🏫 예상 문제 1
promise(프로미스)의 개념에 대해서 설명하고, 콜백 함수 방식과 차이점을 설명해주세요.
답안
정의
Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 비동기 함수가 반환하는 Promise 객체는 최종 결과가 아닙니다. Promise 객체는 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 의미합니다.
'비동기'란 어떤 한 작업이 끝나는 시점과 다른 작업의 시작 시점이 일치하지 않는 자바스크립트의 성질을 의미합니다. [출처] - 잡서칭 1일차
Promise 객체 사용하는 이유
따라서, Promise 객체를 사용하는 이유는 비동기 작업을 미리 시켜두고, 비동기 작업의 결과를 나중에 확인할 것을 '약속'하기 위해섭니다.
세 가지 상태
promise 객체는 대기(pending), 이행(fulfilled), 거부(rejected) 이렇게 3가지 상태를 가집니다. pending은 이행하지도, 거부하지도 않은 초기 상태입니다. fulfilled는 연산이 성공적으로 완료된 상태입니다. rejected는 연산을 실패한 상태를 말합니다.
프로미스가 대기 상태에서 벗어나서 이행되거다 거부된다면 프로미스가 처리(settled)됐다고 말합니다.
resolve, reject
new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있습니다. 콜백 함수의 인자는 resolve, reject 두 개입니다. 여기서 콜백 함수의 인자 resolve를 실행하면 이행(Fulfilled) 상태가 됩니다. 이행 상태가 되면 then 메소드를 이용하여 처리 결과 값을 받을 수 있습니다.
then/catch 메서드
promise 객체를 반환하는 함수는 태스크가 완료되면, then 메소드를 사용해서 다음 태스크를 진행할 수 있습니다. catch 메소드를 마지막 프로미스-체인에서 한 번만 사용하면모든 에러에 대한 핸들링이 가능합니다.
반면에, 콜백함수의 두 번째 인자인 reject 호출하면 실패(Rejected) 상태가 됩니다. 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch 메소드로 받을 수 있습니다.
vs 콜백함수
비동기 처리에 있어서, 프로미스와 콜백 함수 방식의 차이점은 한 마디로 '코드의 가독성'입니다.
콜백 함수란, 비동기 작업이 완료되면 실행되는 함수입니다. 콜백 함수를 사용하면, 처리하는 작업의 수가 많아질수록 함수의 깊이가 깊어지고, 코드의 가독성은 현저히 떨어집니다. callback을 사용하면 callback안에서만 비동기 처리를 할 수 있기 때문입니다. 콜백 밖에서는 비동기에서 온 값을 다룰 수 없습니다.
에러 처리 역시 마찬가지입니다. 콜백함수 실행 중 발생하는 에러를 처리하기 위해서는 모든 콜백함수에 에러 처리를 해줘야 합니다. 반면, promise의 경우, 체이닝 과정에서 어디에서 에러가 나더라도 마지막에만 .catch로 에러 핸들링을 해줄 수 있습니다.
promise-Chaining
물론, promise도 코드 가독성 관점에서, 다음 비동기 작업을 다루는 함수 return처리를 해주지 않으면, callback-hell과 같은 promise-hell이 발생할 수 있습니다. promise를 처리할 때, 다음 태스크에 대한 return 처리를 해줘, promise-hell이 발생하지 않도록 할 수 있습니다. 이것을 promise-chaining이라 합니다.
async-await
또한, async-await 키워드를 사용하여, promise를 보다 더 간단하게 반환할 수 있습니다.
// promise.js
const printString = (string) => {
return new Promise((resolve, reject) => {
setTimeout(
() => {
console.log(string);
resolve();
},
Math.floor(Math.random() * 100) + 1
)
})
}
const printAll = () => {
printString("A")
.then(() => {
return printString("B")
})
.then( () => {
return printString("C")
})
}
printAll(); // now, what do you expect?👨🏼🏫 예상 문제 2 🖍
CSR과 SSR의 개념적 차이와 동작 방식을 구분하여 설명해주세요.
SSR
SSR은 서버 사이드 렌더링의 약자로, 서버에서 웹 페이지를 구성하는 전통적인 방식입니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냅니다.
장·단점
사용자가 브라우저에서 다른 경로로 이동할 때마다 서버에서 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링됩니다. 따라서 SSR은 서버 부하 문제를 일으킬 수 있다는 단점이 있습니다.
CSR
반면에, Client-Side-Rendering은 SSR과 비교하여 페이지가 렌더링되는 위치가 다릅니다. CSR은 클라이언트에서 웹 페이지를 렌더링(rendering)하는 방식이고, react와 같은 Single Page Application에서 주로 쓰입니다. 브라우저가 서버로 요청을 보내면, 서버는 웹 페이지의 골격이 될 단일 웹페이지와 JavaScript 파일을 응답으로 보냅니다. 웹 페이지와 함께 전달된 이 JS 파일은 데이터를 제외한 화면을 그리는 코드들로 구성됩니다.
웹 페이지가 데이터베이스에 저장된 데이터를 필요로하는 경우엔 브라우저가 데이터베이스에 저장된 데이터를 백엔드 서버에 API요청을 하고 서버의 응답을 통해 받아옵니다. 이로서 웹 페이지 구성이 완료됩니다.
장·단점
필요한 데이터만 백엔드에서 가져오기 때문에 서버 부하가 덜합니다. 그러나 브라우저에서 js파일을 다운로드해야 하기 때문에, 초기 진입속도가 느려질 수 있다는 단점이 있습니다.
사용처
SSR은 검색엔진최적화, 즉 SEO(Search Engine Optimization) 가 우선순위인 경우에 사용합니다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다. 또한, 웹 페이지가 사용자와 상호작용이 적은 경우 SSR을 사용합니다.
반면에, CSR은 SEO가 우선순위가 아닌 경우에 사용합니다. 또한 빠른 라우팅으로 강력한 사용자 경험을 제공하기 때문에, 사이트에 풍부한 상호 작용이 있는 경우에 CSR이 사용됩니다. CSR을 이용해 빠른 동적 렌더링 등의 더 나은 사용자 경험을 제공할 수 있습니다.
피드백
👤 콜백함수와, promise 객체를 사용하는 이유, 개념에 대해 짚고 시작해도 좋을 것 같습니다. 둘다 비동기를 동기적으로 실행시키기 위하여 사용하는 것도 포함
기술 면접
코딩 테스트 플랫폼에 익숙해지자
레벨2까지는 다 풀자.
3는 도전1
(프론트)유명 웹 사이트 프로토타입 시안 똑같이 만들어보기
내가 가고 싶은 회사 프로덕트 만들어보기
기술면접 보는 이유 = 이력서 내용이 진짜인지 확인하기 위해
이력서에는 질문에 대한 답변이 가능한 것만 쓰세요
핵심 라이브러리 말고는 적시하지 말자.
프로젝트 문제해결 과정을 블로그에 만들자
일반 면접
- 지원하는 직무 관련, 가장 감명 깊게 본 책은 무엇입니까?
- 당신이 그리는 이상적인 회사는?
References
