Search

프론트엔드 면접

CI/CD

지속적인 통합(Continous Intergration)은 개발자가 작업한 코드를 자동으로 테스트 하고 테스트에 통과하면 통합하여 저장합니다.
지속적인 배포(Continous Deployment)은 작업한 코드 및 변경사항들을 테스트를 거쳐 리포지토리로 업로드 되고 실 서비스 배포로 릴리즈까지 자동화 하는 것을 말합니다

프로젝트

어떻게 프로젝트에서 대용량 데이터를 처리하였나요?

•
비동기 작업 병렬 처리 : 데이터를 가져와 여러개의 비동기 작업을 순차적으로 실행하였기에 많은 작업을 조회할 때 속도가 느렸습니다. 하지만 저희는 순차적으로 수행하지 않아도 되었기 때문에 Promise.all 메서드를 사용하여 병렬로 실행해 시간을 줄였습니다.
◦
이 작업을 진행하며 for loop 기반 비동기 처리, all, allSettled 메서드에 대해 고민을 해보았는데 저희는 작업이 모두 성공적으로 이루어져야 했기에 all메서드를 사용하였습니다.
◦
이 처리 과정을 통해 순서의 보장이 필요한 경우 for loop를 사용, 성공이 보장되려면 all, 실패가 되더라도 진행시켜야 한다면 allSettled - 성공유무와는 상관없이 무조건 resolve를 보내기 때문
•
비동기 코드 최적화 : 이도 초기에는 트랜젝션 데이터를 조회할 때 조회하고 싶은 해당 트랜젝션과 관련있는 모든 데이터를 조회해야 했기에 속도가 느렸습니다. 이에 저희 팀은 데이터를 부분 조회하게끔 요청을 날려, 코어 서버에 전달해 주었고, 자주 쓰여지는 값들은 따로 mongo에서 캐싱 처리를 해주어 속도를 향상시켰습니다.

RESTful API란?

•
표준 HTTP 메소드(GET, POST, PUT, DELETE + PATCH)를 사용하여 서버와 통신하는 것
•
REST가 표준 (API 아키텍처)이고 CRUD가 함수

HTTP 메소드란?

•
리소스를 조회하는 메서드 POST뺴곤 멱등성 존재 하지만 PATCH는 보장되지 않는다.
◦
멱등성 : 연산을 여러 번 적용해도 결과가 달라지지않는것
•
GET
◦
쿼리스트링(?name=)을 통해 데이터 전달
◦
브라우저 히스토리에도 기록이 남는다.
•
POST
◦
새로운 리소스 생성 201 - 데이터를 바디에 쿼리 파라미터(Key-Value)형식으로 전달
◦
데이터가 외부로 노출되지 않음
◦
속도는 GET - 캐싱 사용, 보안은 POST
•
PUT
◦
덮어쓰기 - 리소스 완전 대체
◦
부분 수정 불가
•
PATCH
◦
리소스 수정
◦
부분 수정 가능
•
DELETE
◦
리소스 제거

React

•
Virtual DOM이 존재하기 때문. 기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM 전체를 바꾸게 되는데 Virtual DOM은 DOM과 비교해서 달라진 부분만 찾아 바꾸기 때문 - DOM보다 빠르진 않지만 DOM 관리를 자동화하고 추상화하여 직접 할 필요가 없게 해주기에 사용

TypeScript

타입스크립트를 사용해 본 경험이 있는지? 어떤지?

•
정적 타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고, ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있습니다. 명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 할 수 있다는 장점이 있었습니다.

타입스크립트의 특징

•
첫번째로 언어의 패러다임입니다. TypeScript도 JavaScript에 속합니다. 하지만 TypeScript는 클래스와 인터페이스 그리고 정적 타이핑을 제공하는 Java와 같은 객체 지향 프로그래밍 언어이기도 합니다.
•
두번째로 타이핑 방법입니다. JavaScript는 기본적으로 변수에 값이 할당될 때 변수의 자료형이 결정되는 동적 타이핑 언어입니다. 반면 TypeScript는 선언할 때 타입을 지정해줘야 하는 정적 타이핑 언어입니다.

Type Narrowing / Assertion

•
Narrowing - 타입 가드
•
Assertion - as - union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할

null / undefined

•
null = 값이 없음, 변수에 할당 되었지만 값이 없을 경우
•
undefined = 변수가 초기화 없이 선언됐을 경우

주소창에 google.com을 입력하면 일어나는 일

1. 웹 브라우저에 URL을 입력하고 Enter 키를 누릅니다.
2. 웹 브라우저가 도메인의 IP 주소를 조회합니다. (먼저 캐시를 찾고, 그다음 DNS를 검색합니다.)
3. 웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결을 시작합니다.
4. 웹 브라우저가 HTTP 요청을 서버로 전송합니다. (필요한 경우, HTTPS 보안 통신이 진행됩니다.)
5. 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송합니다.
6. 웹 브라우저가 전송 받은 콘텐츠를 렌더링합니다.

브라우저 렌더링 과정

1.
HTML 변환, 토큰화, 렉싱 과정을 거쳐 DOM을 생성
2.
CSS도 마찬가지로 CSSOM을 생성
3.
위 과정을 거쳐 생성된 TREE를 결합하여 렌더링 트리를 생성 - 이때 페이지를 렌더링하는데 필요한 노드만 포함
4.
레이아웃 단계 - 뷰포트내에 각 노드의 정확한 위치와 크기를 계산
5.
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.
6.
레이어를 합성하여 실제 화면에 출력