프론트엔드 기술 면접 준비

콩주희·2025년 2월 28일
면접연합동아리프론트엔드
0

프론트엔드

목록 보기
3/3

자바스크립트

  • 웹 브라우저에서 동작하는 동적 프로그래밍 언어입니다.
  1. 변수 선언, 초기화, 할당
  • 선언: 변수 생성 과정
  • 초기화: 메모리 할당 및 기본값 설정
  • 할당: 실제 값을 저장하는 과정
  1. 데이터 타입
  • 원시 타입: boolean, string, number 과 같은 타입
  • 객체 타입: Object, Array, Date와 같은 타입

  1. 생성자: 객체를 초기화하기 위한 함수 new 키워드와 함께 사용됨

  2. this: 함수가 실행될 때 결정되는 객체 가리킴

  • 호출 방식: this 값
  • 일반 함수 호출: window
  • 객체 메서드 호출: 해당 객체
  • 생성자 함수 호출: 새로 생성된 객체
  • 화살표 함수 호출: 부모 스코프 this
  1. call(), apply(), bind(): 함수를 호출할 때 this를 변경하는 역할
  • call(): this를 변경하고 인자를 개별 전달
  • apply(): this를 변경하고 인자를 배열 전달
  • bind(): this를 변경한 새로운 함수 반환

  1. 콜백 함수: 다른 함수의 인자로 전달되어 실행되는 함수

  2. Promise란?

  • 비동기 작업을 더 쉽게 처리할 수 있도록 도와주는 객체
  • Promise의 상태
    - pending: 대기
    - fulfilled: 작업 완료
    - rejected: 실패
  1. Async, Await이란?
  • 비동기 코드를 동기 코드처럼 작성
  • async를 붙이면 항상 Promise 반환
  • await는 반드시 async 함수 안에서만 사용 가능
    - await는 비동기 코드가 완료될 때까지 기다리는 역할
    -> Promise를 더 쉽게 다룰 수 있는 문법
  • 둘 다 비동기처리를 하지만 코드 가독성, 예외 처리 방식이 다름
  1. 스코프: 변수가 어디까지 접근할 수 있는지를 결정하는 규칙
  • 현재 스코프 찾음
  1. map(), forEach(), reduce() 비교
  • map: 새로운 배열 반환 -> 새로운 배열
  • forEach: 반복만 수행 -> 없음
  • reduce: 값을 누적하여 반환 -> 하나의 값

타입스크립트

  1. 타입 스크립트를 사용할 때의 이점
  • 컴파일 단계에서 오류를 잡아줘서 런타임 오류 감소
  • 가독성 및 요지보수성이 향상
  1. 커스텀 훅을 TypeScript로 작성 시 고려해야할 상황
  • 훅이 반환하는 타입을 명확하게 정의
  • 초기값이 null일 수 있다면 null값을 명시
  1. closer란 무엇이고 활용하는 방법
  • 클로저는 함수가 생성될 떄 외부 함수의 변수를 기억하는 기능
  • 한번 실행을 했을 때 outer 함수는 실행이 끝나지만 inner 함수가 클로져를 통해 외부 변수를 계속 사용할 수 있음
  1. this 동작 방식
  • 함수 호출 방식에 따라 동적으로 결정되는 객체를 가리키는 키워드-> 코드가 실행될 때 객체 결정
  • 화살표 함수와 일반 함수의 this 차이
    - 화살표 함수는 부모 스코프의 this를 사용 vs 일반 함수는 호출 방식에 따라 바뀜

Emotion

  1. 전통적인 CSS와의 차이점
  • props를 사용하여 동적 스타일을 적용할 수 있음
  • JS에 포함 -> CSS 로드 불필요

React

React

  • UI 만들기 위한 JavaScript 라이브러리
  • 컴포넌트 기반, Virtual DOM, 단방향 데이터, 상태 관리
  1. Vue.js와 React의 차이점
  • React가 자유도가 높으며 JSX기반 Vue는 직관적 템플릿, 반응형 시스템을 사용하며 HTML 기반
  1. 원리
  • Virtual DOM 사용 -> 성능 최적화
  • 컴포넌트 기반 개발 -> 코드 재사용성 증가
  • JSX 사용 -> HTML과 JS 결합하여 가독성 높음

  1. Virtual DOM: 브라우저의 실제 DOM이 아닌 가상의 DOM을 메모리에 만들어 사용
    -> 작동 원리: UI 변경시 새로운 virtual DOM 생성 -> 기존 virtual DOM과 비교하여 변경된 부분 찾음 -> 변경된 부분만 실제 DOM에 최소한 반영

  2. JSX: javaScript에서 HTML을 작성하도록 도와주는 문법

  3. React Hooks: 컴포넌트 없이도 상태와 라이프사이클 기능을 사용할 수 있도록 도와주는 함수

  • useState: 컴포넌트 상태 관리,
  • useEffect: 사이드 이펙트 관리,
  • useContext: Context 이용해 전역 상태 관리,
  • useReducer: 복잡한 상태 관리 수행,
  • useRef: DOM 요소 접근,
  • useMemo: 캆이 캐싱을 통해 성능 최적화,
  • useCallback: 함수의 캐싱 성능 최적화
  1. State: React 컴포넌트 내부 관리 값
  • 컴포넌트 UI마다 업데이트 되는 데이터
    - 컴포넌트 내부에서 관리 (useState)
    - 값이 변경되면 컴포넌트 다시 랜더링
    - Props 부모가 아닌 자기 자신이 직접 변경
    => 동적으로 변경되는 데이터를 다룰 때 사용

  1. React State 관리: -> 위의 Hooks와 전역 외부 라이브러리

  2. Props

  • 부모 컴포넌트가 자식 컴포넌트 데이터 전달 사용 속성
  • 부모 -> 자식 방향 데이터 전달 (단방향 데이터 흐름)
  • 읽기 전용
  1. Props Driling 문제
  • 깊은 컴포넌트 트리에서 Props 계속 전달하는 문제
  • 전역 상태 관리 컴포넌트를 사용해서 해결
    - ex) jotai, redux, recoil 등...

  1. Jotai: 상태 관리가 단순하면서 직관적으로 사용할 수 있음 -> Redux 가벼움

  2. useState 사용 이유: state를 직접 변경 시 React가 상태 변경을 감지하지 못함

  3. React의 상태 변화: 불변성과 Virtual DOM을 비교

  • setState가 감지 되면 새로운 virtualDOM을 만들고 이전 DOM과 비교

  1. React State 불변 상태 유지 : 기존 객체 업데이트 하지않고 새로운 상태 생성

  2. setState 비동기적 동작

  • 성능 최적화를 위해 여러 개의 상태 업데이트 batch 처리
  • 렌더링 최적화, 불필요한 리렌더링 방지, 최적 타이밍 리렌더링
    => prev를 사용하면 해결!
  1. Key Props를 사용하는 이유
  • 리스트 렌더링 시 효율적 업데이트
  • 각 항목을 고유하게 식별, 예측 가능한 동작을 보장
  1. Ref의 용도
  • DOM 요소에 직접 접근 하거나 컴포넌트 내부에서 값이 유지
  1. event: 이벤트는 사용자의 입력에 의해 발생하는 동작

React-Router

  • React 어플리케이션에서 페이지 간 이동을 관리하는 라이브러리
  • 주소를 기반으로 렌더링할 컴포넌트를 동적으로 결정
  • 페이지를 새로고침하지 않고도 경로를 변경
  1. React Router를 사용하여 동적 라우팅을 구현하는 방법
  • useParams와 :(변수)를 사용하여 동적으로 다른 페이지를 보여줌
  1. SPA에서 React Router 역할
  • index.html만 로드 후 페이지 이동 시 javascript로 동적으로 화면을 변경
  • 하나의 페이지 안에서 여러 개의 화면을 관리 가능
  • SPA에서 페이지 전환을 부드럽게 하고 효율적으로 처리
    - URL 변경 감지, 새로고침 없이 이동, 동적 라우팅, 중첩라우트
  1. 중첩된 라우트를 활용하는 방법
  • 부모 경로와 자식 경로를 함께 관리할 수 있음 ->> 서브 페이지

상태 관리

  1. 상태 관리가 이루어지는 방법
  • useState: 가장 기본적인 상태 관리, useReducer: 복잡한 상태 로직 관리, useContext: 전역 상태 공유
  • 다른 전역 상태 관리 라이브러리들이 많음

HTML/CSS

  1. HTML5의 새로운 기능
  • 시멘틱 태그 <header>, <nav>, <section>...등,멀티미디어 태그, Input 입력 타입 추가, 로컬 저장소 및 웹소켓 지원
  1. Flex와 Grid의 차이점
  • Flex는 1차원(수평 또는 수직) Grid는 2차원(행과 열)
  1. 반응형 웹디자인 구현 방법
  • 미디어 쿼리, width, max-width에 가변적 크기 사용
  1. px, em, rem의 차이
  • px: 고정된 크기(절대값)
  • em: 부모 요소의 font-size 기준 배율
  • rem: root의 font-size 기준 배율 -> 반응형에서 주로 사용 (상대적인 크기를 쉽게 조정)
  1. vw,vh란?
  • 1vw: 화면 너비의 1%
  • 1vh: 화면 높이의 1%
  1. 반응형 브레이크 포인트
  • 모바일: max-width:768px
  • 태블릿: 768px-1024px
  • 데스크탑: min-width:1024px
  1. CSS 우선 순위 (캐스캐이딩 이라고도 함)
  • div, p < className < id < inline-style < !important
  • 스타일 내부에서는 나중에 선언된 스타일이 우선
  1. 페이지 크기가 변해도 같은 비율을 유지하는 요소
  • aspect-ratio: 가로 비율/ 세로 비율

  1. flexbox: css 요소를 정렬할 때 사용하는 강력한 레이아웃

  2. float: 요소를 좌우 정렬할 때 사용되는 속성

  3. position: 요소의 위치를 조정하는 방법

  • static: 기본값
  • relative: 원래 위치 기준 이동
  • absolute: 가장 가까운 relative 부모 기준으로 이동
  • fixed: 화면 기준 고정
  • sticky: 스크롤 시 특정 위치 고정
  1. HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유
  • 브라우저는 HTML을 파싱하며 DOM을 생성 -> script문을 만나면 JavaScript 실행을 위해 파싱 중단 ->실행 후 파싱 재게
  1. Box Model
  • 모든 HTML요소를 박스로 취급하는 개념
  • margin > border > padding > content
  1. Attribute 와 Property 차이
  • Attribute: HTML문서에 설정한 값 getAttribute("value")
  • Property: JavaScript에서 다룰 수 있는 객체 값 .(property 이름)을 통해 변경
  1. display 속성의 종류
  • block: 새로운 줄에서 시작 (ex)div)
  • inline: 한 줄에 나란히 배치 (ex)a)
  • inline-block: 한 줄에 배치되지만 block처럼 크기 조절 가능
  • none: 요소를 화면에서 숨김
  • flex, grid: 플렉스박스와 그리드 레이아웃
  1. CSS 애니메이션 VS JS 애니메이션
  • CSS: 속도가 빠르지만 복잡하고 이벤트 기반 애니메이션에 어려움
  • JavaScript: 속도가 느릴 수 있지만 세밀한 조작이 가능하고 이벤트 기반 애니메이션을 사용할 수 있음
  1. Async vs Defer 차이
  • Async: HTML 파싱과 동시에 JS 다운로드 후 즉시 실행 -> 먼저 다운로드 된 스크립트부터 실행
  • Defer: HTML 파싱과 동시에 JS 다운로드 후 HTML 파싱이 끝난 후 실행 -> HTML 파싱 완료 후 실행
  1. 시맨틱 마크업
  • HTML 요소를 의미에 맞게 사용하는 것
  • 시맨틱 태그를 사용하면 검색 엔진 최적화 및 접근성이 향상됨
  1. 가상 클래스
  • CSS에서 가상 클래스는 특정 상태에서만 적용되는 스타일을 지정하는 기능
  • ex) :hover, :focus 등...

웹 프로토콜

  • 웹 프로토콜을 웹에서 데이터가 어떻게 교환되는지를 정의하는 규칙
  • HTTP/HTTPS 웹 브라우저와 서버 간 데이터를 주고받는 프로토콜
  1. HTTP의 특징
  • 비연결성: 요청 후 응답을 받으면 연결 종료
  • 무상태성: 각 요청은 이전 요청과 독립적
  • 클라이언트 - 서버 모델: 클라이언트와 서버 간 요청/응답 구조
  • 텍스트 기반: 사람이 읽을 수 있는 형식으로 요청/응답
  1. HTTP의 PUT, POST, PATCH
  • POST: 새 데이터 생성, 새로운 데이터 전송, 멱등성 X(여러번 보내면 데이터 여러개 생성)
  • PUT: 리소스가 존재하면 업데이트 없으면 새로 생성, 전체 리소스 덮어쓰기, 멱등성 O
  • PATCH: 리소스 존재 시 수정 없으면 실패, 변경할 필드만 포함, 멱등성 X
  1. HTTP의 상태 코드
  • 서버 응답의 결과를 나타내는 숫자 코드
  • 다섯가지 범주 (1xx 요청 받고 처리, 2xx 요청 성공, 3xx 리소스 이동, 4xx 클라이언트 오류, 5xx 서버 내부 오류)
  1. HTTP와 HTTPS의 차이
  • HTTP 데이터가 암호화되지 않음
  • HTTPS 데이터가 암호화됨 -> 암호화 때문에 조금 느림
  1. HTTPS 동작 방식
  • SSL/TLS를 사용하여 데이터를 암호화하고 보안을 강화함
profile
콩주희
쉬고 싶은 콩쥐
이전 포스트

[프론트엔드] CI/CD와 GitHub에 관하여

0개의 댓글

관련 채용 정보