지수의 블로그

3 분 소요

TIL

면접 대비 공부

면접 대비

  • 간단한 자기소개

    프론트엔드 개발자로 지원한 유지수 입니다.

    꾸준함을 무기로 기술 스택 학습과 협업 역량을 키워왔습니다.

    React 팀 프로젝트를 진행하며 React와 디자이너와 백엔드 개발자와 소통 역량을 길렀고, 원티드 프론트엔드 코스를 진행하며 팀 프로젝트에서 마이크로 단위 개발 및 git을 통해 협업 역량을 길러왔습니다.

    이러한 역량을 기반으로 프론트엔드 개발자로서 맡은 기능을 구현하며 협업하기 좋은 개발자로서 역량을 발휘하겠습니다.

  • 직무 변환 이유

    제너럴한 질문은 미리 짧게 해둘것 (너무 시간 많이 쓰지 않기)

    설비 엔지니어 업무를 하며 SW의 중요성 및 영향력을 알게 되어 직무를 변환하게 되었습니다.

    설비 엔지니어로서 HW 작업과는 다르게 SW는 물리적인 제약없이 역량을 발휘할 수 있었고, 개발에 대해 공부하며 웹 개발에 대해 알게 되었습니다. 이후 범용성과 확장성이 뛰어나 영향력을 실감하게 되어 프론트엔드 개발을 시작하게 되었고 지금까지 개발을 지속하며 성장하고 있습니다.

질문

쓰로틀과 디바운스 (이벤트 핸들링 관련)

DOM 이벤트 실행을 제어하는 방법이다.

보통 이럴 때 사용한다.

input 작성하는 도중 계속 이벤트가 발생할 때
무한 스크롤 구현할 때(스크롤 이벤트)
요소 드래그 성능 높일 때

디바운스는 이벤트를 발생시키는 동안 이벤트를 무시하다가 정해둔 일정 시간이 지나면 이벤트 하나만 발생시키도록 하는 기술이다.

input에서 사용자가 텍스트를 입력하다가 입력이 멈추면 그 때 마지막으로 발생한 이벤트를 하나만 발생시키는 식이다.

쓰로틀은 일정 주기마다 이벤트를 발생시키는 것이다.

https://webclub.tistory.com/607

가비지 컬렉터 - 클로저 연관성

가비지 컬렉터는 참조가 되고 있지 않은 메모리를 삭제하는 기능이다.

따라서 클로저를 사용하면 메모리가 참조되고 있기 때문에 가비지 컬렉터의 대상이 되지 않아 함수가 종료가 되었음에도 렉시컬 환경에 변수가 저장이 되어 있고 메모리에도 값이 존재하게 된다. 따라서 다시 함수를 호출했을 때 해당 값을 참조할 수 있게 되는 것이다.

메모리 누수라고 할 수도 있지만, 의도적으로 사용하는 것이므로 누수라고 하기보다 메모리 사용이 더 맞을 수도 있겠다.

사용을 하고 싶지 않다면 메모리를 해제해 줄 수 있다.

https://velog.io/@yujo/JS%ED%81%B4%EB%A1%9C%EC%A0%80Closure%EC%99%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC

코드 스플리팅

코드 스플리팅은 페이지 로딩 속도를 개선하기 위해 코드를 분리하는 것이다.

javascript 로 개발을 하거나 특히 SPA 라이브러리 및 프레임워크로 개발을 하게 되면 한 파일에 로직이 많아질 수 있다.

이렇게 되면 용량이 커질뿐더러 페이지 로딩 속도 또한 느려진다.

그래서 로직 중 당장 필요한 코드가 아니라면 따로 분리시켜 놓은 후 나중에 필요할 때 그 코드가 들어있는 파일을 import 하여 사용할 수 있도록 해서 페이지 로딩 속도를 개선하는 것이 코드 스플리팅이다.

webpack에서 import 라는 함수를 사용하여 분리된 chunk 파일, 원하는 파일을 비동기적으로 불러온다.

https://velog.io/@velopert/react-code-splitting

보안 관련 질문

ci/cd

전반적인 cs

과제 회고

오드컨셉 과제

cache 처리

한 번 요청했던 데이터를 캐시에 저장하여 처리하는 것

다양한 캐싱 방법이 존재한다.

웹 서버 기준 캐싱 처리
응답 캐싱
메모이제이션
HTTP 헤더를 통한 브라우저 캐싱
  1. 웹 서버 기준 캐싱 처리

클라이언트에서 서버로 파일을 요청했을 때,

첫 요청 시 하드 디스크는 캐시를 확인, “캐시 미스”를 발생 시켜 추후 다시 요청을 받을 수 있다고 하면 캐시를 하드 디스크에 저장한다.

이후 요청부터는 캐시를 사용할 수 있는 경우 “캐시 히트”를 발생시켜 캐시 미스가 발생하기 전까지 버퍼에서 캐시가 제공된다.

  1. 응답 캐싱

웹 서버의 응답은 메모리에 캐싱, 어플리케이션 캐시는 로컬 매에 저장하거나 캐시 서버(ex. redis)에 저장할 수 있다.

  1. 함수 메모이제이션

시간이 오래걸리는 연산을 가진 함수가 있을 때 동일한 연산이라면 (변수의 값이 변하지 않아 결과값이 어차피 같다면) 연산을 반복 수행하지 않도록 이전 계산값을 메모리에 저장하는 것.

프로그램의 성능을 높이는 데 효과적이지만, 함수가 드물게 사용되거나 연산이 빠른 함수라면 굳이 메모리를 써가면서 메모이제이션을 사용할 필요는 없어서 고려하여 사용하여야 한다.

  1. HTTP 헤더를 통한 브라우저 캐싱

모든 브라우저는 HTML 페이지, JS 파일 및 이미지와 같은 웹 문서들을 저장하기 위해 HTTP 캐시 구현을 제공하고 있다.

HTTP 헤더에 지시문을 넣어 브라우저가 응답을 캐싱할 수 있는 시기와 지속 시간을 설정할 수 있다.

브라우저에서 처리하는 것이므로 서버에 부담이 가지 않는다.

  • 코드

    const fetchData = useCallback(async () => {
  try {
    const res = await fetch(requestUrl, {
      cache: "default",
      headers: {
        "Cache-Control": "max-age=" + maxAge,
      },
    });
    const jsonRes = await res.json();
    setData(jsonRes);
  } catch (error) {
    setError(error);
  }
  setLoading(false);
}, [requestUrl, maxAge]);

    위와 같이 header에 cache: ‘default’로 두면 캐시를 사용한다는 의미이다.

    max-age는 캐시 유효 기간을 의미

  • 적용 결과 비교

    첫 데이터 요청 non-cache

    캐시된 데이터 cache

    속도에서 굉장한 차이를 보인다.

    다른 프로젝트에도 이것을 적용하면 너무 좋을 것 같다고 생각한다.

    [출처 및 참고] https://goddaehee.tistory.com/171

댓글남기기

참고