FE 위클리 페이퍼

보리·2024년 10월 17일

면접 준비

목록 보기

1/1

✅CSS의 Cascading에 대해 설명해 주세요.

CSS의 Cascading은 스타일 적용 시 우선순위에 따라 스타일이 결정되며, 중요도, 명시도, 소스 순서가 영향을 미칩니다.

✅시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 태그는 코드의 가독성을 높이고, SEO와 웹 접근성을 향상시킵니다.

✅사용자가 브라우저 font-size를 변경하였을 때, 이에 대응해서 웹 화면의 요소가 크거나 작아지도록 하려면 어떻게 스타일링 하면 좋을까요?

rem 또는 em 단위를 사용해 브라우저 폰트 크기에 따라 요소 크기를 유동적으로 조정할 수 있습니다.

rem 은 항상 루트 폰트 사이즈를 참조합니다. 일반적인 브라우저 기본 폰트 크기가 16px이고 이를 이용하면 사용자가 브라우저 폰트 크기 설정을 변경하지 않는 일반적인 경우, 1rem 은 16px 크기라 보고 스타일링 하면 됩니다.

✅position의 속성들과 각각의 특징을 설명해 주세요.

static: 기본 값으로 위치 지정 없음.
relative: 요소의 원래 위치를 기준으로 이동.
absolute: 부모 요소를 기준으로 이동.
fixed: 뷰포트를 기준으로 고정.
sticky: 스크롤에 따라 상대적 또는 고정 위치가 적용됩니다.

✅Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요.

merge: 일반적으로 많이 사용하는 merge 방법이며, 커밋 이력을 모두 남길 때 사용합니다. 장점이자 단점은 모든 커밋과 분기했던 branch 히스토리가 남는다는 점입니다.
Squash & Merge: 분기했던 branch에 있던 내용 a, b, c 커밋을 모두 합쳐 하나의 새로운 커밋을 만듭니다. 지저분한 커밋 히스토리들을 하나로 합쳐서, 기능상 의미있는 하나의 커밋만 남길 때 사용합니다.
Rebase & Merge: 분기했던 branch의 기준을 최신 Base로 설정하고, merge하는 방법. 머지 커밋을 남길 필요가 없는 merge의 경우 사용하면 좋습니다. 커밋 그래프가 하나의 라인으로 그려져 가독성에 좋습니다.

✅Git Flow 브랜치 전략에 대해 설명해 주세요.

master는 프로덕션 릴리즈 브랜치, develop은 개발 브랜치로, feature, release, hotfix 브랜치로 기능 개발과 버그 수정을 관리하는 전략입니다.

안정적인 배포를 위한 구조가 갖춰져 있습니다.

긴 개발 주기에 적합하며, 복잡한 기능 개발과 버그 수정에 유용합니다.

배포 전 마무리 작업과 테스트를 위한 release 브랜치를 사용할 수 있습니다.

브랜치가 많아지고 관리해야 할 작업이 증가할 수 있습니다. 이를 보완하기 위한 git flow 도구가 있을 정도죠.

작은 규모의 프로젝트에서는 비효율적일 수 있습니다.

✅자바스크립트에서 ==와 ===가 어떻게 다른지 설명해 주세요.

==는 타입 변환을 허용한 비교, ===는 타입과 값 모두를 엄격하게 비교합니다.

== 는 암묵적 형변환이이 일어나는데, 암묵적 형변환이 일어날 것을 모두 기억하거나 예측하는 것이 어렵기 때문에, 의도하지 않은 결과를 얻게 될 가능성이 크고 이로 인해 오류 가능성이 커집니다. 따라서 동등함을 비교하기 위해서 === 를 사용하는 것이 좋습니다.

✅자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.

얕은 복사는 객체의 참조만 복사해 원본과 복사본이 같은 객체를 가리키는 방식입니다. 반면, 깊은 복사는 객체의 모든 속성을 새로 복사해 독립적인 객체를 생성하는 방식입니다.

✅var, let, const를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

중복 선언: var는 중복 선언이 가능하지만, let과 const는 불가능합니다.
스코프: var는 함수 스코프를 따르고, let과 const는 블록 스코프를 따릅니다.
호이스팅: var는 선언과 초기화가 동시에 호이스팅되고, let과 const는 선언만 호이스팅되어 초기화 전에 접근하면 에러가 발생합니다.

✅브라우저가 어떻게 동작하는지 설명해 주세요.

브라우저는 URL을 입력하면 해당 서버에 HTTP 요청을 보내고, 서버로부터 HTML, CSS, JavaScript 파일을 받아 해석하여 DOM 트리와 렌더 트리를 생성하고 화면에 렌더링합니다.

DOM(Document Object Model), CSSOM(CSS Object Model) 생성

Render Tree 생성

Layout

Paint

✅이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.

이벤트 버블링: 이벤트가 하위 요소에서 상위 요소로 전파됩니다.
이벤트 캡쳐링: 이벤트가 상위 요소에서 하위 요소로 전파됩니다.
이벤트 위임: 상위 요소에 이벤트 리스너를 설정해 하위 요소들의 이벤트를 처리하는 방식입니다.

✅자바스크립트에서 this에 대해 설명해 주세요.

this는 함수가 호출될 때의 실행 문맥에 따라 값이 결정됩니다. 일반 함수에서는 전역 객체를 가리키고, 메서드에서는 해당 객체를 가리키며, 화살표 함수에서는 상위 스코프의 this를 가리킵니다.

✅렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.

렉시컬 스코프는 함수가 정의될 때의 스코프 체인을 기준으로 변수의 유효 범위가 결정되는 것을 의미합니다. 즉, 함수 호출 위치가 아닌 정의 위치에 따라 변수를 참조합니다.

✅HTTP 메소드에 대해 설명해 주세요.

GET: 서버에서 데이터를 요청할 때 사용합니다.
POST: 서버에 데이터를 제출할 때 사용합니다.
PUT: 서버의 데이터를 업데이트할 때 사용합니다.
DELETE: 서버의 데이터를 삭제할 때 사용합니다.

PATCH: 기존 리소스의 부분적인 수정을 위한 메소드

HEAD: 특정 리소스를 GET 메소드로 요청했을 때 돌아올 헤더를 받기 위한 메소드

OPTIONS: 주어진 URL 또는 서버에 대해 허용된 통신 옵션을 받기 위한 메소드

CONNECT: 요청한 리소스에 대해 양방향 연결을 시작하는 메소드

✅예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요.

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

자바스크립트는 싱글 스레드 기반의 언어입니다. 여기서 스레드란 작은 단위의 실행 흐름을 말합니다. 자바스크립트 엔진을 간단히 살펴보면 위와 같이 Memory Heap과 Call Stack(자료구조에서 배우게 될 stack처럼 구현된 저장소)으로 구성되어 있는데요. 하나의 스레드에서 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고, 다음에 어떤 함수가 호출되어야 하는지 등을 제어합니다.

1번 실행으로 num 에 1이 할당됩니다.
2번 실행으로 setTimeout 을 Web API(NodeJS의 경우 Timers 모듈)가 처리하도록 넘깁니다. 이때 중요한 건, 즉시 setTimeout 에 있는 callback을 실행할지 판단하지 않습니다. 따라서 num 은 여전히 1인 상태입니다.
한편, Web API에서는 setTimeout 작업이 완료되면 setTimeout callback 함수를 Callback Queue에 등록합니다.
3번 실행으로 num 에 3이 재할당됩니다.
4번 실행으로 화면에 3이 출력됩니다.
이렇게 모든 실행을 마치면, 그 후에 Event Loop를 돌아 Callback Queue에 있는 callback 함수를 Call Stack으로 가져와 실행하고 num 은 2가 재할당됩니다.

✅프로토타입 체인에 대해 설명해 주세요.

프로토타입 체인은 객체가 다른 객체의 속성이나 메서드를 상속받을 수 있도록 연결된 구조입니다. 자바스크립트는 프로토타입을 통해 객체 간 상속을 구현하며, 객체가 다른 객체의 프로토타입을 참조할 수 있습니다.

✅AJAX에 대해 설명해 주세요.

AJAX는 비동기적으로 서버와 통신해 전체 페이지를 새로고침하지 않고도 데이터 일부를 업데이트할 수 있는 기술입니다. 주로 XML, JSON 형식의 데이터를 서버에서 받아와 웹페이지에 적용합니다.

✅시간복잡도와 공간복잡도에 대해 설명해 주세요.

시간복잡도: 알고리즘의 실행 시간이 입력 크기에 따라 어떻게 변하는지 분석합니다.
공간복잡도: 알고리즘이 사용하는 메모리 양을 입력 크기에 따라 분석합니다.

✅자바스크립트 실행 컨텍스트(Execution context)에 대해 설명해 주세요.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하며, 변수, 함수 선언, this 등의 정보를 포함합니다. 실행 컨텍스트는 콜 스택에 쌓여서 실행됩니다.

✅해시 테이블과 해시 함수에 대해 설명해 주세요.

해시 테이블은 데이터를 키-값 쌍으로 저장하는 자료구조로, 해시 함수를 사용해 키를 해시값으로 변환하여 저장 위치를 결정합니다. 이를 통해 빠른 데이터 검색이 가능합니다.

✅정적 배열과 동적 배열을 비교해 설명해 주세요.

정적 배열: 크기가 고정되어 있으며, 선언 시 메모리가 미리 할당됩니다.
동적 배열: 크기가 가변적이며, 필요에 따라 메모리가 동적으로 할당됩니다.

✅리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

Virtual DOM은 실제 DOM을 가상으로 표현한 객체로, 변경 사항을 최소화하여 효율적인 업데이트를 위해 사용합니다. 가상 DOM 생성 후 이전 가상 DOM과 비교 후 바뀐 부분만 DOM에 업데이트한다.

리액트는 Virtual DOM을 활용해 UI의 이상적인 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화 합니다. 이 과정을 재조정(Reconciliation)이라고 합니다.
이렇게 연산이 끝난 뒤 최종적인 변화를 실제 DOM에 반영해서 여러 번 reflow, repaint가 발생할 수 있는 작업을 한번으로 줄여줍니다. 또한, Virtual DOM은 변화에 대한 관리를 자동화하고 추상화해서 작업의 편의성을 제공합니다.

✅리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

key는 배열의 요소를 고유하게 식별해, 리액트가 변화를 효율적으로 감지하고 렌더링 성능을 최적화할 수 있게 합니다.

리액트는 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, 리액트는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다.
key 는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key 는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
key 는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 가장 좋습니다. 대부분의 경우 데이터의 id를 key 로 사용합니다. key는 배열의 항목들 사이(형제 사이)에서 고유하면 되고, 전역에서 고유할 필요는 없습니다.

✅리액트 생명주기(life cycle)에 대해 설명해 주세요.

리액트 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 나타내며, 주요 단계로는 Mounting, Updating, Unmounting이 있습니다.

✅웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

CSR: 클라이언트에서 렌더링, 초기 로딩은 느리지만 이후 빠름. SPA에 적합.
SSR: 서버에서 렌더링, 초기 로딩이 빠르고 SEO에 유리. 자주 변하는 콘텐츠에 적합.
SSG: 정적 페이지를 생성, 속도가 매우 빠르고 CDN에 적합. 자주 변하지 않는 콘텐츠에 유리.

✅본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

장점: 컴포넌트 단위로 스타일을 관리해 유지보수가 쉽고, 동적 스타일 적용에 유리합니다.
단점: 런타임에서 스타일을 처리하므로 성능 저하가 있을 수 있고, 파일 크기가 커질 수 있습니다.

✅Presentational & Container 디자인 패턴에 대해 설명해 주세요.

Presentational 컴포넌트는 UI에만 집중하고, Container 컴포넌트는 상태 관리와 로직을 처리하는 패턴으로, 관심사의 분리를 통해 유지보수성과 재사용성을 높입니다.

✅JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.

TypeScript는 정적 타입을 지원해 코드의 안정성과 가독성을 높이고, 개발 중 오류를 사전에 방지할 수 있습니다.

이런 TypeScript의 특징을 통해 컴파일 단계에서 오류를 포착할 수 있고, 코드를 통해 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드의 흐름을 이해하기 쉽고 협업에 도움이 됩니다.

이 밖에도 vscode와 같은 IDE를 통해 인텔리센스 활용이 가능해지고, 인터페이스, 제네릭 등을 지원해 객체지향 프로그래밍에 도움을 줍니다.

✅TypeScript의 동작 원리에 대해 설명해 주세요.

TypeScript는 정적 타입 검사 기능을 제공하는 JavaScript의 상위 집합 언어입니다. 코드를 컴파일할 때 타입 오류를 감지하고, 이 과정에서 JavaScript로 변환되어 브라우저에서 실행됩니다. 런타임에 타입이 제거되므로 브라우저에서는 일반적인 JavaScript로 동작합니다.

✅리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

React는 클라이언트 사이드 렌더링(CSR)을 주로 처리하지만, Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅 기능을 내장하여 SEO와 초기 로딩 성능을 개선할 수 있습니다. 이 외에도 API 라우팅, 이미지 최적화 같은 추가 기능을 제공합니다.

기본적으로 순수 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 합니다. 웹 사이트를 요청할 때 현재 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩합니다. 이로 인해 앱의 첫 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO(Search Engine Optimization)에 취약 하다는 단점이 있습니다.

프리렌더링
- 기본적으로 프리렌더링을 지원합니다. 데이터의 성격에 따라 getStaticProps를 활용해 빌드 단계에서 데이터를 받아 정적 생성 또는 SSR(Server Side Rendering)할 수 있습니다. 이를 통해 이미 렌더링된 html 문서를 가져올 수 있어서 첫 로딩이 빨라져 유저 경험에 좋고, SEO에도 강점이 있습니다.
이미지 최적화
- Image 컴포넌트를 통해 필요한 크기에 맞는 이미지를 제공하고, lazy-loading을 통해 필요한 순간 이미지를 가져와 최적화 합니다.
Client side navigation
- Link 컴포넌트를 통해 페이지 이동할 때 페이 전체를 불러오는 것이 아니라 필요한 데이터만 가져오기 때문에 이동 속도도 빨라지고, 넘어가는 동작도 부드럽습니다.
코드 스플리팅
- Webpack과 같은 번들러 설정과 import() 문법, lazy, Suspense 사용없이도 빌드 과정에서 페이지 단위로 자동으로 코드 스플리팅을 지원합니다.
개발자 경험
- 파일 시스템 라우팅, 리다이렉트, 스타일링을 위한 환경 설정(Sass, CSS Modules, Tailwind 등)등을 제공해 좋은 개발자 경험을 제공합니다.

✅Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

SSR에서는 서버가 요청을 받으면 React 컴포넌트를 서버에서 렌더링해 HTML을 클라이언트로 전송합니다. 클라이언트는 이 HTML을 초기 화면으로 사용하고, 그 이후에 React가 클라이언트에서 해당 HTML을 재사용하며 인터랙티브 기능을 활성화하는 과정을 hydration이라고 합니다.

✅CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

CORS(Cross-Origin Resource Sharing) 에러는 클라이언트가 다른 도메인으로 요청할 때 서버가 해당 도메인에서 오는 요청을 허용하지 않아 발생합니다. 이를 해결하려면 서버에서 응답 헤더에 Access-Control-Allow-Origin을 설정해 허용할 도메인을 명시해야 합니다.

먼저 백엔드 서버 개발자에게 에러가 발생하는 출처를 허용하도록 Access-Control-Allow-Origin 설정을 요청하는 방법이 있습니다.

CORS 허용을 위한 설정 요청을 할 수 없는 경우, 동일 출처 정책을 강제하지 않는 proxy 서버를 활용해 우회하는 방법이 있습니다. Next.js의 경우 rewrites 를 활용할 수 있습니다

✅SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.

SEO(Search Engine Optimization)는 검색 엔진에서 웹사이트의 가시성을 높이기 위한 작업입니다. SEO 개선을 위해 메타 태그 작성, 시맨틱한 HTML 사용, 페이지 로딩 속도 최적화, 서버 사이드 렌더링(SSR) 등을 활용할 수 있습니다.

✅클로저가 무엇인지 그리고 JavaScript에서 어떤 경우에 활용하면 좋을지 예시와 함께 설명해 주세요.

클로저는 함수가 생성될 때 자신의 스코프 외부에 있는 변수를 기억하고, 그 변수를 함수가 종료된 후에도 접근할 수 있는 개념입니다. 예를 들어, 함수 내부에서 변수를 캡처하여 반환하는 패턴으로, 비공개 데이터를 저장하거나 함수 상태를 유지할 때 유용합니다.

function makeCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

✅세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요.

세션 기반 인증: 서버가 사용자 로그인 정보를 서버에 저장하고 세션 ID를 브라우저 쿠키로 전달해 인증합니다. 서버 측 부담이 큽니다.
토큰 기반 인증: 로그인 시 서버가 JWT 같은 토큰을 발급하고, 클라이언트가 이후 요청에 이 토큰을 보내 인증합니다. 서버는 상태를 저장하지 않아 확장성이 좋습니다.

✅Authorization Code를 활용하는 구글 소셜 로그인을 실행하기까지 유저, 프론트엔드, 백엔드, OpenID Connect 프로바이더 사이에 어떤 과정을 거치는지 설명해 주세요.

유저가 프론트엔드에서 구글 로그인 버튼을 클릭합니다.
프론트엔드가 구글의 OpenID Connect 프로바이더에 인증 코드를 요청합니다.
유저는 구글 로그인 페이지에서 인증을 완료하고, 구글이 프론트엔드에 Authorization Code를 반환합니다.
프론트엔드는 이 코드를 백엔드로 전송하고, 백엔드는 구글에 이 코드를 제출해 액세스 토큰과 ID 토큰을 받습니다.
백엔드는 받은 토큰을 통해 유저 정보를 확인하고, 로그인 처리를 완료합니다.

✅React Query가 만들어진 이유와 React Query를 사용할 때 얻게 되는 이점에 대해 설명해 주세요.

React Query는 서버 상태 관리의 복잡성을 줄이기 위해 만들어졌습니다. 서버 데이터의 캐싱, 동기화, 업데이트를 자동으로 처리하며, 비동기 요청의 로딩, 에러 처리, 데이터 패칭을 쉽게 관리할 수 있습니다. 이를 통해 코드의 복잡성이 줄고 성능이 향상됩니다.

✅서버 상태와 클라이언트 상태의 차이에 대해 설명해 주세요.

서버 상태: 서버에 저장된 데이터로, 클라이언트에서 요청을 통해 가져와야 하는 상태입니다. 변경 사항은 서버와 동기화가 필요합니다.
클라이언트 상태: 사용자 인터페이스와 관련된 데이터로, 서버와 상관없이 클라이언트에서만 관리하는 상태입니다.

✅Storybook을 사용할 때 기대할 수 있는 장점에 대해 설명해 주세요.

Storybook을 사용하면 컴포넌트를 독립적으로 개발하고 테스트할 수 있으며, 팀원과 컴포넌트 라이브러리를 공유하기 쉽습니다. 또한, 각 컴포넌트의 다양한 상태를 미리보기로 확인할 수 있어 개발 효율성과 협업이 개선됩니다.

✅테스트 코드를 작성하면서 개발할 때 장점과 단점에 대해 설명해 주세요.

장점: 코드의 안정성이 높아지고, 리팩토링 시 오류를 미리 방지할 수 있으며, 유지보수가 쉬워집니다.
단점: 초기 개발 속도가 느려질 수 있으며, 테스트 코드 유지에도 시간이 필요합니다.

보리

정신차려 이 각박한 세상속에서