기술면접준비 Part.2

프론트엔드 성능 최적화를 위한 방법

1. 이미지 최적화: 이미지 용량을 줄이고, 필요한 경우 lazy loading을 구현하여 초기 로딩 속도를 개선합니다.
2. 파일 압축과 번들링: JavaScript와 CSS 파일을 압축하고, 번들링하여 파일 크기를 줄여서 로딩 시간을 단축합니다.
3. HTTP 요청 최소화: 파일을 적절히 병합하고, CDN(Content Delivery Network)을 사용하여 요청 수를 최소화하여 로딩 속도를 개선합니다.
4. 캐싱 활용: 정적 리소스를 적절히 캐싱하여 반복적인 요청에 대한 응답 속도를 높입니다.
5. 렌더링 최적화: 렌더링 성능을 향상시키기 위해 CSS와 JavaScript를 비동기적으로 로드하고, 렌더링 블록을 최소화합니다.

Array, LinkedList

1. Array (배열)

• 의미: 연속된 메모리 공간에 동일한 데이터 타입의 요소들을 순차적으로 저장하는 자료구조입니다.
• 특징
  1. 고정된 크기: 배열은 생성할 때 크기를 지정하며, 크기를 동적으로 변경할 수 없습니다.
  2. Random Access: 인덱스를 사용하여 배열 내의 요소에 직접 액세스할 수 있습니다.
  3. 메모리 연속성: 연속된 메모리 공간에 요소들이 저장되므로 인덱스를 통한 접근이 빠릅니다.
• 사용법
  • 데이터 집합의 크기가 변하지 않고 빈번한 접근이 요구될 때 사용합니다.
  • 정렬, 검색, 접근 속도가 중요한 경우에 적합합니다.
  • 예시: 배열을 사용하여 정수, 문자열 등의 요소를 저장하고 접근하는 경우 사용합니다.

2. LinkedList (연결 리스트)

• 의미: 각 요소가 데이터와 다음 요소를 가리키는 포인터로 구성된 자료구조로, 메모리 상에서 불연속적으로 저장됩니다.
• 특징
  1. 동적 크기: 요소를 추가/제거할 때마다 동적으로 크기가 조정됩니다.
  2. 순차적 접근: 특정 요소에 접근하기 위해서는 첫 요소부터 순차적으로 접근해야 합니다.
  3. 메모리 비연속성: 각 요소는 다음 요소를 가리키는 포인터를 통해 연결되므로 메모리에 연속적으로 저장되지 않습니다.
• 사용법
  • 데이터 크기가 동적으로 변하거나 삽입/삭제 작업이 빈번한 경우에 유용합니다.
  • 순차적인 데이터 접근이 주로 요구되는 경우에 적합합니다.
  • 예시: 연결 리스트를 사용하여 큐, 스택 등을 구현하거나 데이터를 삽입/삭제하는 작업이 빈번한 상황에서 사용합니다.

RESTful API

RESTful API는 HTTP 프로토콜을 기반으로하는 웹 서비스 아키텍처입니다. 자원, 메소드, 메시지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다. 또한, RESTful API는 표준 HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 서버와 통신합니다.

웹 개발에서 널리 사용되며, 클라이언트와 서버 간의 통신을 효율적으로 관리하고 구성할 수 있는 강력한 도구로 인정받고 있습니다. 다양한 프로그래밍 언어와 프레임워크에서 RESTful API를 구현할 수 있으며, 이를 통해 서비스의 확장성과 유지보수성을 향상시킬 수 있습니다.

HTTP 메소드

• GET : 서버에서 리소스(데이터)를 요청하는 메소드입니다. 요청한 데이터를 가져와 응답합니다.

• POST : 서버에 데이터를 전송하는 메소드입니다. 데이터를 전송하여 서버에서 처리하고, 처리 결과를 응답합니다.

• PUT : 서버에 데이터를 업데이트하는 메소드입니다. 요청한 데이터를 서버에 저장하고, 처리 결과를 응답합니다.

• DELETE : 서버에서 데이터를 삭제하는 메소드입니다. 요청한 데이터를 서버에서 삭제하고, 처리 결과를 응답합니다.

이벤트 버블링

이벤트 버블링(event bubbling)은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다. 즉, 이벤트를 처리하는 핸들러 함수를 부모 요소에 등록해놓으면, 자식 요소에서 발생한 이벤트도 모두 처리할 수 있습니다.

이를 활용하면, 여러 개의 하위 요소에서 발생하는 이벤트를 하나의 이벤트 핸들러로 바인딩하는 이벤트 위임 처리를 할 수 있습니다. 버블링 및 캡쳐링을 방지하기 위해서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시키거나, 이벤트 핸들러에서 이벤트가 발생한 요소를 확인하여 처리해야 합니다.

클로저

함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 때의 모든 변수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉하기 위해서 주로 사용 합니다.