[기술면접] DOM, REACT

nevermind·2022년 11월 14일
0

기술면접

목록 보기
2/25
post-custom-banner

* DOM이란

  • Document Object Model의 약자
  • <html>이나 <body> 같은 html 문서의 태그들을 js가 이용할 수 있는 객체(object)로 만드는 모델
    • 브라우저가 html 웹 페이지를 인식하는 방식을 계층화시켜서 트리구조로 만든 객체 모델
  • 브라우저가 만든 객체
  • js로 문서객체를 생성한다는 의미 ?
    •  웹 브라우저가 html 페이지에 적혀있는 태그들을 읽으며 생성(정적으로 문서 객체 생성)
    • 원래 html 페이지에 없던 문서객체를 js를 이용해서 생성(동적으로 문서 객체 생성) 

* React

  • 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐

  • Component 기반의 구조 -> 재사용성이 높고 유지보수, 관리가 용이

    • Virtual DOM :
      가상의 DOM, 이벤트가 발생할 때마다 Virtual DOM 을 만들고 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교하여 최소한의 변경 사항만 실제 DOM에 반영하여 앱의 효율성과 속도를 개선
  • JSX :

    • javascript를 확장한 문법, 
    • 브라우저에서 실행하기 전에 바벨을 사용하여 일반 javascript 형태의 코드로 변환
    • 하나의 파일에 javascript와 html을 동시에 작성하여 편리함

* promise

  • 결과를 아직 반환하지 않은 객체
  • 생성되면 기본적으로 pending 상태, 이후 비동기 처리 결과에 따라 resolve나 reject 함수를 호출
  • 처리에 성공했다면 프로미스를 fulfilled 상태로 변경, 실패했다면 rejected 상태로 변경
  • then,catch,finally라는 후속 처리 메서드가 존재
  • 콜백지옥이 일어날 수 있음

* async/awati

  • promise를 더욱 쉽고 직관적으로 사용할 수 있음
  • promise의 간결성, 에러핸들링, 에러위치확인과 같은 불편한 점을 해결해주기 위함
  • try-catch로 예외처리 할 수 있음

출처: https://velog.io/@solmii/TIL-DOM%EC%9D%B4%EB%9E%80
https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
https://m.blog.naver.com/magnking/220972680805

profile
winwin
post-custom-banner

0개의 댓글