기술면접

1. Optimistic Update 2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점 3. 쿠키, 세션, 웹스토리지의 차이 4. 브라우저의 렌더링 과정

5. 쿼리 스트링 6. 브라우저에 URL을 입력하면 일어나는 순서

7. 정규 표현식 8. 크로스 브라우징 9. lazy-loading

10. CORS 오류가 나는 이유 11. favicon 12. babel과 같은 트랜스파일러의 역할

13. eslint같은 linter가 중요한 이유를 설명해주세요. 14. 웹팩 같은 bundler에 대해 알고 계신가요? 15. Lighthouse를 이용하여 Web Vital 진단 및 최적화를 진행할 수 있다. 16. 브라우저 호환성이란 무엇을 말하는 것인가요? ..

1. display: none 과 visibility: hidden의 차이점 2. styled-components를 써보셨나요? 사용하면서 느낀 장단점

3. px, em, rem 의 차이점 4. reset.css 또는 normal.css가 필요한 이유 5. Tailwind CSS의 장점과 주요 개념

1. 상태관리 2. Redux 3. Redux 외 상태관리

4. 버츄얼 돔과 리얼 돔 5. useRef 6. useEffect 7. var, let, const

8. Async/Await와 Promise 9. 무한스크롤

10. 호이스팅 11. 동기와 비동기

12. 브라우저의 작동 방식 13. GET, POST 차이점 14. GET, POST 개념과 데이터 흐름

15. 쿠키, 세션, 웹스토리지 16. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

17. TCP/UDP 18. http, https

19. 라이프사이클 20. 라이프사이클 메서드

21. 쓰로틀링과 디바운싱 22. 자바스크립트와 타입스크립트

23. SEO 24. 이미지 최적화

25. 개발자 도구 26. 성능최적화

27. JavaScript event loop 28. Array, LinkedList 29. AWS S3

1. 이벤트 버블링과 캡쳐링 2. 이벤트 위임

3. this 4. 프로토타입 5. 참조에 의해 복사되는 객체

6. nullish값 7. ==과 ===

12. Promise 타임아웃 기능 13. 자바스크립트의 기본 문법

14. 표현식 15. 조건문과 반복문

10. script태그 11. 비동기 함수를 동시에 병렬로 호출하기

8. 이벤트 루프와 실행 컨텍스트 9. 클로저

16. 배열과 객체 17. ES6 문법에서 새로 추가된 문법

18. 일급 객체로서의 함수 19. Map과 Set

20. 변수가 메모리에 할당되는 과정과 메모리에 대하여 21. 실행 컨텍스트와 구성요소인 Variable Environment와 Lexical Environment의 역할과 차이점 , 스코프 체인과 this

22. 콜백 함수 23. 콜백 함수의 제어권

24. 비동기 코드의 콜백지옥과 비동기 제어 기술 25. DOM

26. class 문법 27. 얕은 복사와 깊은 복사

28. 코드 불변성의 중요성 29. 이벤트 위임 30. CORS 정책

1. 리액트의 가상 돔 2. useEffect의 실행 순서 3. 리스트 렌더링에서 key 존재의 이유

4. useEffect가 2번 실행되는 경우 5. 커스텀 훅 6. React.memo

7. React.Suspense 8. 리액트에서 상태의 불변성 9. 제어 컴포넌트와 비제어 컴포넌트

flux 아키텍처 리액트의 Strick모드 SPA 10. flux 아키텍처 페이스북에서 React애플리케이션을 더 효율적으로 상태를 관리하기 위해 제안한 애플리케이션 아키텍처 패턴 애플리케이션의 데이터 흐름을 단방향으로 제어 핵심 개념 Action(행동) 상태

13. RESTful API 14. HTTP 프로토콜 15. 비동기 통신 - axios,fetch 중점

16. Virtual DOM 17. axios의 instance와 interceptor 18. React-query와 Custom Hooks

19. useQuery, useMutation 20. useInfiniteQuery

21. react 컴포넌트의 장점 22. props drilling

23. css in js vs module.css 24. hook을 조건문 안에서 사용하면 안되는 이유

End-to-End 끝에서 끝까지 테스트라는 뜻시스템의 시작부터 끝까지 실제 사용자 시나리오처럼 전체 흐름을 테스트유닛 테스트(Unit Test)가 함수 단위, 통합 테스트가(Integration Test)가 모듈 단위라면 E2E 테스트는 사용자 관점에서 앱이 진짜로

Flexible Box Layout1차원의 레이아웃 시스템주로 한 방향(가로 또는 세로)으로 아이템을 배치하고 정렬하는데 유용컨테이너 (display:flex) 안의 아이템들을 쉽게 정렬, 정렬 순서 변경, 간격 조정 가능네이게이션 바처럼 한 줄에 요소를 나란히 배치할

Lossless 압축(무손실 압축) : 품질 유지, 불필요한 메타데이터 제거 (PNG,GIF)약 40% 절감PNG나 GIF는 색상 정보 외에도 불필요한 정보(메타테이터)가 들어있음Lossless 압축도구를 사용하면 불필요한 정보는 지워지고 이미지 픽셀은 유지예시) 로고

서버 응답이 오기 전, 사용자가 예상하는 결과를 미리 화면에 반영해주는 방식서버가 성공적으로 사용자의 요청을 처리할 것이라 낙관적으로 예상하여 UI 변경빠른 반응으로인해 사용자 경험을 개선비동기 상태 관리에 사용됨실제 네트워크 응답시간을 노출하지 않기 때문에 UX 지연

처음 컴포넌트가 렌더링된 후, 화면에 실제로 DOM이 그려진 뒤 실행브라우저가 화면을 그린 뒤 "부수 효과(side effect)"를 처리할 때 호출useEffect 안에서 DOM접근, API호출 등 안전하게 처리 가능 의존성 배열에 등록된 값이 변경 되면 렌더링 이후

비동기 처리를 좀 더 편리하고 가독성 좋게 다룰 수 있도록 도와주는 객체미래의 결과를 약속하는 객체비동기 작업의 완료 또는 실패 처리네트워크 요청(fetch), 타이머(setTimeout)같은 비동기 로직에서 사용Pending : 대기 중 (아직 완료되지 않음)Fulf

둘 다 객체의 구조, 함수 시그니처, 배열, 유니온 등 타입스크립트의 핵심 도구인 "타입 정의"에 사용기본 사용법은 매우 유사둘 다 동일하게 사용 가능 type : 다른 type과 &으로 교차(Intersection)interface : extends로 상속, 선언 병