[TIL] 2023.03.29 기술면접 스터디, Programmers 문제 풀기

Today I Learned

• Programmers 문제 풀기
• 기술면접 스터디

 

---

Programmers 문제 풀기

A로 B 만들기

나의 풀이

function solution(before, after) {
    return before.split("").sort().join("") === after.split("").sort().join("") ? 1 : 0;
}

처음엔 배열에 map을 돌려서 해야 하나 고민하다가 갑자기 sort가 생각나서 sort한 배열이 같은지를 비교해서 풀려고 했는데 배열에는 비교 연산자가 적용되지 않는 건지 문제가 풀리지 않았다. 그래서 sort한 후에 join 메서드로 문자열 만들었을 때 두 문자열이 동일한지를 이용해서 풀었다.

 

 

배열의 동등 비교

const a = [1, 2, 3];
const b = [1, 2, 3];

a === b; // false

JavaScript에서 === 또는 ===로 두개의 배열을 비교하면 대부분의 결과는 false가 된다. 심지어 두개의 배열이 동일한 항목을 동일한 순서로 가지고 있더라도 마찬가지인데, JavaScript에서 배열과 객체는 값을 비교하는 게 아니라 객체의 주소를 비교하기 때문이다.

 

출처 https://sisiblog.tistory.com/258

 

 

다른 사람의 풀이

function solution(before, after) {
    before = before.split('');
    after = after.split('');

    after.filter(v => {
        if (before.includes(v)) {
            before.splice(before.indexOf(v), 1);
            return true;
        } else {
            return false;
        }
    })

    return before.length === 0 ? 1 : 0;
}

내가 처음에 생각했던 방법이랑 똑같다! 원래는 map이랑 includes, splice를 이용해서 배열의 길이로 풀어보려 했는데 중복된 문자열도 처리할 수 있을지 명확하게 그려지지 않았고, map 안에서 배열을 변경하는 splice 메서드를 너무 많이 사용하게 되는 거 같아서 다른 방법을 선택했다.

 

---

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]


const str1 = 'Hello';
const str2 = 'World';

console.log(str1.concat(' ', str2));
// Expected output: "Hello World"

• concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.
• concat() 메서드는 문자열을 합칠 때에도 사용 가능하다.

---

기술면접 스터디 CS 지식

프레임워크와 라이브러리의 차이점

라이브러리

• 어떤 특정한 기능을 구현하기 위해 미리 만들어진 함수들의 집합
• 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림
• 메서드를 호출하면 사용자가 제어할 수 있음 (제어의 흐름이 개발자에게 있음)
• ex) React, jQuery, Node.js에서 npm으로 설치한 모듈

 

프레임워크

• 소프트웨어 개발에 사용되는 구조와 규칙, 패턴 등을 제공
• 코드의 구조와 실행 흐름을 결정하며, 개발자는 이를 따라야 함
• 프레임워크가 사용자를 호출하여 제어권이 역전됨 (제어의 흐름이 프레임워크에게 있음)
• ex) Next.js, Spring, Django

 

제어의 역전 (Inversion of Control)

• 프레임워크와 라이브러리의 주요 차이점
• 개발자가 해왔던 일(제어)을 프로그램. 즉, 프레임워크가 대신해준다는 의미.
• 원래 개발자가 가지고 있어야 할 객체의 제어권을 프레임워크가 대신 해준다는 의미 → "제어권이 역전되었다"
• 프레임워크가 짜놓은 틀 안에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크에게 있음
• 라이브러리는 개발자에게 전적으로 제어 흐름이 있으며 필요할 때마다 능동적으로 라이브러리를 호출하여 사용

 

• 프레임워크는 밀키트라고 생각하면 된다. 이미 주어진 재료를 가지고 정해진 레시피 대로만 하면 요리의 완성! 요리의 완성도는 어느 정도 보장되어 있지만 자유도는 떨어진다.
• 라이브러리는 팬트리라고 생각하면 된다. 요리하는 데에 정해진 규칙은 없지만 재료는 준비되어 있다. 팬트리에 있는 식재료와 식기 등을 원하는 대로 가져가 원하는 대로 요리하면 된다.

 

출처

https://velog.io/@whitecloud94/프레임워크-vs-라이브러리

https://velog.io/@nemo/framework-library-gfreqbgx

https://code-lab1.tistory.com/284

 

 

캐시의 장단점

캐시란?

• 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 저장소.
• CPU ↔ 메모리 사이의 데이터 전송 레이턴시 개선을 위해 사용되는 전략
• 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근 가능

 

캐시의 장점

1. 빠른 데이터 액세스: 데이터를 반복해서 액세스해야 하는 경우, 캐시에서 데이터를 읽으면 시간을 절약할 수 있음.
2. 대역폭 절약: 원본 데이터를 가져오는 것보다 캐시에서 데이터를 읽으면 대역폭을 절약할 수 있음. 원본 데이터에 대한 액세스는 네트워크 비용 및 I/O 비용이 들어가기 때문.
3. 성능 향상: 빠른 액세스와 대역폭 절약으로 인해 애플리케이션의 처리 속도가 빨라지며, 사용자 경험이 개선됨.
4. 비용 절감: 캐시를 사용하면 더 많은 하드웨어 리소스를 사용하지 않고도 성능을 향상시킬 수 있기 때문에 시스템 구축 및 운영 비용을 절감하는 데 도움이 됨.

 

캐시의 단점

1. 일관성 문제(캐시 코히런스): 원본 데이터가 업데이트되고 캐시에는 아직 반영되지 않은 경우, 캐시에 저장된 데이터가 원본 데이터와 일치하지 않아서 문제가 발생할 수 있음.
2. 용량 제한: 캐시의 용량은 제한되어 있기 때문에 많은 양의 데이터를 저장할 수 없음. 따라서 대규모 데이터 처리에 적합하지 않음.
3. cache miss: 캐시에서 데이터를 찾을 수 없는 경우 원본 데이터에서 데이터를 읽어오는 것을 cache miss라고 하는데, 원본 데이터에서 데이터를 읽어와야 하기 때문에 성능 저하의 원인이 될 수 있음.
4. 보안 문제: 캐시에 저장된 데이터는 노출될 위험이 있는데 이는 캐시에서 데이터를 삭제하더라도 데이터가 완전히 삭제되지 않아 데이터 유출의 위험성이 존재할 수 있다는 것을 의미함.
5. 추가 복잡성: 캐시를 사용하면 시스템이 더 복잡해짐. 캐시 관리와 일관성 문제를 처리하는 코드를 작성해야 하기 때문인데 이는 코드 작성 및 유지보수를 어렵게 만듦.

 

 

프론트엔드 캐시 활용 방법

1. 웹 브라우저 캐싱
   • 이전에 방문했던 페이지, 제목의 썸네일 등을 서버로 요청하지 않고 브라우저에 캐싱하여 빠르게 로드할 수 있다. 사용자는 바로 캐시메모리로 응답받을 수 있어 웹 서핑이 빠르다고 느끼고, 서버는 불필요한 요청을 받지 않아 과부하를 피할 수 있다.
2. proxy
   • 웹 브라우저와 서버 사이에 proxy 라는 것을 두는 방식이다. proxy는 “대리인”이라는 뜻의 영어 단어로서, 중간에서 뭔가를 대신해 주는 것을 '프록시'라고 한다. 프록시의 경우 여러 컴퓨터로부터 요청을 받고 처리하다 보니 같은 데이터가 자주 접근될 확률이 높아져서 캐시의 성능이 좋아지고, 데이터를 캐시에서 반환하는 확률이 더 높아진다. (조직 내에서 접속하는 웹 사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임)
3. CDN (Content Delivery Network) 캐시
   • CDN은 전 세계의 다양한 서버에 컨텐츠를 캐싱하여 빠른 속도로 제공한다. CDN을 이용하면 웹 사이트의 로딩 속도를 빠르게 할 수 있다.
4. localStorage 캐시
   • localStorage를 이용하여 클라이언트 측에서 데이터를 캐싱할 수 있다. 이를 이용하여 사용자가 다시 방문할 때마다 서버에서 데이터를 다시 받아오지 않고, 클라이언트 측에서 캐시된 데이터를 사용하여 로딩 속도를 빠르게 할 수 있다.

출처

https://seungjuitmemo.tistory.com/275

https://velog.io/@wjddms0501/캐시Cache

 

---

회고

할 일은 많은데 무기력한 시간을 보내고 있다. 최종프로젝트 이후로도 거의 쉬지 않고 달려서 쉬는 시간이 필요한 것일지도..? 하지만 아무리 무기력해도 매일 기술면접 스터디 참여와 TIL 작성, 알고리즘 문제 하나 이상 풀기는 절대 포기하지 않는다!🫠