프론트엔드 기술면접 복기

꾸준히 업데이트 중입니다.
아직 많이 부족하니까 열심히 하자!

 

🌟내가 한 프로젝트에 대해 충분히 숙지하기!

 

1. var, let, const 의 차이

var는 함수 스코프, let/const는 블록 스코프 const는 재할당 불가능 var만 호이스팅 가능
-> 호이스팅의 개념
    - 함수 호이스팅, 함수가 스코프의 최상단으로 끌어올려지는것, 선언 전 해당 함수 호출 가능

 

2. 클로저란?

중첩함수
외부 함수의 변수에 접근할 수 있는 함수를 반환함으로써 동작하며, 외부 함수가 실행을 완료한 후에도 해당 변수에 접근할 수 있습니다

 

 

3. http 통신, 메소드

 Restful API GET,POST,DELETE,PUT, PATCH

 

4. SPA

 single page application 한 번 로드된 페이지에서 필요한 데이터와 리소스만 동적으로 로드

 

5. CSR, SSR

client side rendering : 사용자 상호작용에 용이 , 검색x
server side rendering : 빠른 로드, 검색엔진

 

6. 컴포넌트 props, state 차이

props는 "properties"의 줄임말로, 컴포넌트가 외부에서 받는 데이터를 의미합니다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. props는 읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다. 대신, 부모 컴포넌트에서 값을 변경하여 자식 컴포넌트가 새로운 값을 받게 됩니다. props는 컴포넌트 간에 데이터를 전달하는 데 사용됩니다.

반면에 state는 컴포넌트 내부에서 관리되는 데이터를 의미합니다. 즉, 컴포넌트 자체가 가지고 있는 데이터입니다. state는 컴포넌트의 상태를 변경하거나 업데이트할 때 사용됩니다. state는 읽기와 쓰기 모두 가능하며, setState() 함수를 사용하여 값이 변경됩니다. 일반적으로 사용자 입력 또는 네트워크 응답과 같은 이벤트에 응답하여 state를 업데이트합니다.

 

 

7. 가상 돔, 리얼 돔 차이

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문이다. 그래서 React에서는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리한다. 쉽게 말해서, Virtual DOM은 DOM의 요약본이라고 볼 수 있다.

 

8. 크로스 브라우징

 

9. 로컬스토리지와 세션스토리지 쿠키

localStorage는 같은 도메인에 대하여 같은 정보를 저장하며, 창을 닫거나 탭을 닫는 등 세션이 만료되어도 정보가 지워지지 않습니다. sessionStorage는 같은 도메인이더라도 탭, 창 별로 서로 다른 정보를 저장하며, 세션이 만료되면 데이터도 함께 사라집니다. Cookie는 용량이 상당히 작은 텍스트 파일로, 만료 기간을 가져 일정 시간이 지나면 만료되어 데이터가 삭제됩니다.

💡 주 사용 용도
localStorage : 자동로그인sessionStorage : 자동 임시 저장 용도cookie : 팝업창 안보게 하는 용도
sessionStorage : 자동 임시 저장 용도cookie : 팝업창 안보게 하는 용도
cookie : 팝업창 안보게 하는 용도 등

 

 

10. 자바스크립트 동작 원리

엔진은 Memory Heap(메모리 할당이 일어나는 곳), Call Stack(호출 스택이 쌓이는 곳) 두 개로 이루어져 있습니다.
싱글스레드 방식, 이벤트 루프를 이용해 비동기 처리

- Promise: 비동기 작업 처리에 사용되는 객체 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.

 

 

11. 브라우저 동작 방식

 

12. 웹 표준 w3c, 접근성

es6 문서 확인해보기

예약어

 

13. css 특성 선택자 attribute

selecter

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

 

14. refresh token, access token

- access 토큰의 만료 기간이 짧기 때문에, 리프레시 토큰을 이용해 access 토큰을 재발급받는다.

 

15. 반응형 웹 적응형 웹 차이

- 반응형 웹 디자인은 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식.

- 적응형 웹 디자인은 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형

 

16. react에선 class가 아니라 className인 이유

 

17. Webhook과 Restful Api의 차이점

 

18. table 태그

 

 

+) 프레임워크

• Express: 웹 개발 프레임워크 노드를 사용해 서버를 구성할 수 있게 만든, 쉽게 서버를 구축할 수 있고 라우팅이 편리, 미들웨어 활용, 직관적
• vite : 빠른 빌드 속도 hmr로 일부 컨텐츠만을 갱신할 수 있음/ 번들 생성 없이 ES모듈을 바로 웹 브라우저에 랜더링할 수 있도록 만든 툴
• hook: 함수형 컴포넌트에서도 상태(state)를 관리하고 리액트의 기능을 사용할 수 있도록 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태를 관리하고 라이프사이클 메서드를 사용할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었습니다.
• React-Query

 

 

https://kindjjee.tistory.com/102

props와 state의 차이점