오늘 한 일

• 커리어톤
  • 기술 면접 예상 질문 5개 작성
• 포트폴리오
  • 최종 프로젝트 절반 이상 제작 완료
• 알고리즘 코드카타
  • 배열 만들기 1

기술 면접 예상 질문

브라우저의 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)의 차이점을 설명해 주세요.
로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 반면, 세션 스토리지는 이름처럼 세션 동안만 데이터가 유지되기에 브라우저를 닫으면 데이터는 사라집니다. 저 같은 경우에는 다크 모드의 여부를 판단하기 위해 로컬 스토리지를 사용하기도 했습니다.

CORS(Cross-Origin Resource Sharing)란 무엇이며, 이를 해결하는 방법을 설명해 주세요.
CORS는 일단 서로 다른 출처 사이의 리소스 공유 정책으로, 서로 다른 도메인 간에 데이터를 주고 받을 때 발생하는 오류입니다. 브라우저의 동일 출처 정책 때문에 서로 다른 출처에서 데이터를 주고 받을 때 오류가 나는 것인데, 해결 방법이 있습니다. 일종의 화이트 리스트인 Access-Control-Allow-Origin 헤더를 설정하여 미리 지정한 출처끼리는 데이터의 공유를 허가해주는 방법입니다.

웹팩(Webpack)의 역할과 기본적인 사용법을 설명해 주세요.
웹팩은 일종의 번들러인데요, 번들러는 자바스크립트 모듈과 파일들을 하나로 합쳐주는 도구로써, 개발을 할 때 유지 보수나 가독성의 이유로 코드를 모듈이나 파일 단위로 나누게 되는데, 번들러는 이런 파일들을 하나로 묶어 최적화를 통해 코드를 압축합니다.

Link 컴포넌트를 사용하여 페이지 간 이동을 구현하는 방법을 설명해 주세요.
Link 컴포넌트의 to 속성을 통해 이동할 경로를 설정하면 간단하게 이동을 구현할 수 있습니다. 이 떄 페이지가 새로고침되지 않고 URL이 변경되고, 해당 경로에 맞는 컴포넌트가 렌더링 됩니다.

CSS z-index가 무엇이며, 어떻게 작동하나요?
값이 클 수록 앞에 나타나는 속성입니다. position 속성이 적용된 요소들끼리만 적용됩니다. 겹치는 요소들 사이의 우선순위를 정하여 화면에서 어떤 요소가 앞에 보일지를 결정하는 중요한 속성입니다.

알고리즘 코드카타

배열 만들기 1

문제

정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요.

풀이

function solution(n, k) {
  const result = [];
  for (let i = 1; i <= n; i++) {
    if (i % k === 0) {
      result.push(i);
    }
  }
  return result;
}

반복문을 통해 k의 배수인 것만 배열에 push한 다음 해당 배열을 return하여 문제를 해결했다.