[Daily Contents] Vue로 FrontEnd 개발해보기

Vue로 Front End 개발 시작해보기

* 기존 Vue.js의 렌더링을 위한 가상 DOM 설계는 HTML 기반의 템플릿을 제공하고, 이 템플릿 구문을 가상 DOM 트리로 변환하고 실제로 DOM에 어떤 영역이 업데이트 되어야 하는지 재귀적으로 탐색하는 방식.
* 불필요한 탐색이 많이 포함됨.
* 템플릿 구문에서 정적인 구문이 대부분을 차지하고 동적인 구문이 적을 경우 불필요한 부분이 더욱 발생.

렌더링 성능을 향상하고자 최적화 작업 진행. 컴파일러로 동적 요소만을 탐색하여 트리 순환. 메모리 사용량 절감.

트리쉐이킹 -> 사용하지 않는 코드를 제거하여 코드 최적화
Vue3에서는 이를 강화하여 번들 크기를 절반 이상으로 대폭 줄이는 것에 성공

대표적으로 Composition API 추가.

본래의 Vue의 코드는 직관적이지만 규모가 커지고 로직이 많아지면 결국은 사방에 흩어지게 될 것. 이 문제를 해결하기 위해 Composition API 등장.

소셜 로그인에 대하여

• 로그인 기능은 중요. 알아두길.

아키텍쳐

Q. 왜 FE에서 로그인 인증 코드 등을 다 처리하지 않고 BE에 전달하는가?
A. 보안에 취약하기 때문에.

EX) Kakao

• 카카오 Developer 사이트에 개발자 가입을 한 후 API KEY를 받아 사용. EX) Google
• Index html에 SDK를 넣거나 npm 라이브러리를 이용. EX) Facebook, naver 등등… 위와 마찬가지.

Firebase 인증

• 사용자의 기본적인 프로필 사진, 닉네임 등이 저장되는 이점이 있음.

사용자의 편의를 위해 지속적 관리, 로직 추가.

프로필 업데이트, 닉네임 변경, 아이디 기억하기, 회원 탈퇴 시 같이 탈퇴, 비밀번호 찾기, 세션 만료, 소셜 회원가입하고 비밀번호가 또 요구될 경우... 등등.

QnA

Q. 무슨 로직을 짜야 할지 생각나지 않을 떄.
A. 분위기 환기, 컨디션 재정비.

Q. React보다 Vue가 우수한 점은?
A. React의 경우 업데이트가 늦어지고 있는 등의 문제가 있으나 둘 다 우수.

Q. 로그인할 때 모달을 사용하는가? 별도 라우팅 이동을 하는가?
A. 로그인 자체는 라우팅을 이용해야 함. 로그인이 필요한 기능을 사용할 때 라우터 기능을 이용.

Q. 회원 가입된 유저의 테이블과 소셜 로그인에 사용하는 이메일 저장 테이블을 분리해서 써야 하는가?
A. 분리할 필요는 없음. 테이블 생성도 비용이기에 분리는 효과적으로 보이지 않음.