Front-End 개발: VUE

Vue3 - 가상돔 최적화

• 개념
  - 기존 Vue.js에 렌더링을 위한 가상도움 설계는 html 기반 템플릿을 제공하고 가상DOM트리로 반환한 후에 실제로 DOM에 어떤 영역이 업데이트 되어야 하는지 재귀적으로 탐색하는 방식
  - 이 작업은 불필요한 탐색이 많이 포함될 수 밖에 없었다. ⇒ 매번 전체트리를 확인해야 하는 동작은 무거울 수 밖에 없다.
• 개선점(가상돔의 정의)
  - 템플릿 구분시 정적, 동적 개념을 구분
  - 렌더링 시 객체가 여러 번 생성되는 걸 방지하기 위해 컴파일러가 미리 템플릿 구문 내에서 객체를 탐지해, 렌더링 함수 밖으로 호이스팅 ⇒ 메모리 사용 낮춤
  - 컴파일러가 동적 바인딩 내에서 미리 플래그 생성 ⇒ 렌더링 속도 향상

Vue3 - 트리쉐이킹 강화

나무를 흔들어서 잎을 떨어뜨리듯 모두를 번들링하는 동안 사용하지 않는 코드를 제거하면서 파일크기를 최적화하는 과정

⇒ Vue3에선 이를 통해 코드를 절반으로 줄일 수 있었음

Vue3 - 컴포지션 API

기존 컴포넌트의 경우 직관적이지만, 프론트의 규모가 커지고 로직이 많아지면 코드가 흩어지게 되는데, 이를 해결하기 위해 컴포지션 api가 등장

그 외 공식문서를 참고하자

공통의 고민

• 소셜로그인을 어느 정도 해야할까?
  - 로그인마스터 VS 기능구현에 대해 고민해보자
  - 기능구현이 보이는 건 더 잘 보일 수 있지만, 기술을 잘 알기 위해선 한 기능을 완벽하게 숙지하는 것도 좋다
  - 결국 선택의 영역

아키텍쳐

• 사용자 정보를 받아올 때 프론트에서 호출을 하는데 그러면 안된다. 왜?
  - 보안에 취약하기 때문.
  - 소셜로그인의 PROCESS
  - 사용자가 소셜로그인 클릭 → access 토큰까진 받을 수 있음 → 이 토큰을 프론트에서 백엔드서버로 넘겨주고, 이 토큰값을 가지고 카카오에 요청 → 사용자정보값을 넘겨받으면 갱신값을 DB에 저장 후 프론트에 넘겨줌
• 로그인을 구현한 걸 면접에 활용할 수 있는 게 별로 없다고 생각하면, SDK사용해라.
  - 소셜로그인하면 SDK 제공해준 걸로 쓰기 때문에 이렇게 진행해라
  - 이 초기화 방식은 카카오 공식 사이트에 나와있으므로 참고하자
  - 구글, 페이스북, 네이버 등도 마찬가지
  - 정석대로 하고 싶다면 백엔드 참고