20250219 TIL

교육을 들으면서 궁금했던 점들에 대해서 셀프로 QnA를 해보자. 
'추측'은 궁금증에 대해서 내가 기존에 생각한 내용을 적었고, '새롭게 알아낸 것'에는 GPT나 구글링을 통해 맞다고 추측되는 정보를 적은 것이므로 정확하지 않을 수 있다. 
 

✅ 궁금한 점 / 복습 포인트

✔️ React를 왜 많이 사용할까?

 
추측
사람들이 많이 쓰는 라이브러리라서. 컴포넌트를 재사용할 수 있어서 쓴다고 알고 있다. 다만 의아한 것은 Vue 등에 비해서 상태관리가 까다롭다는 의견도 있는데 그럼에도 불구하고 React가 갖는 절대적인 강점이 무엇인지는 아직 잘 모르겠다. 채용 시장에서 React를 선호하게 된 이유도 정확히는 모르겠다. 
 
새롭게 알아낸 것
채용 시장에서 React를 선호하는 것은 비단 React가 Vue보다 모든 면에서 우수하다는 이유 때문은 아닌 것으로 보인다. React는 Facebook이 만든 라이브러리이고, 초기부터 여러 대기업과 스타트업이 적극적으로 사용했다고 한다. 뿐만 아니라 React Native, Next.js 등의 React와 연관된 생태계의 규모가 Vue보다 크다는 이유도 있다. 즉 React와 Vue 모두 장단이 있는 프레임워크지만 React를 사용하는 기업들이 더 많아지게 되면서 React를 채용 시장에서도 선호하게 되었다고 이해했다. 
 
React와 Vue의 공통점에 대해서도 새로 알았다. React와 Vue는 모두 Virtual DOM을 사용하고, 컴포넌트 기반으로 동작한다. 나는 이게 React만의 특성이자 장점인 줄 알았었는데 그건 아니었다. 오히려 Vue도 많이 사용했었는데, 무슨 Composition API(Vue의 feature로 보임) 등장 이후 Vue의 통일된 코드 스타일이 유지되지 않아서 React를 더 선호하게 된 것도 있다고 이해했다. 
 

✔️ git pull origin B와 git merge B 명령어의 차이점은 무엇일까?

 
추측
결과적인 차이는 없고 의미적인 차이만 있다고 생각했다. 
 
새롭게 알아낸 것
결과적인 차이가 있다. 원격의 B를 당겨오느냐 로컬 레포에 있는 B를 당겨오느냐의 차이였다. git pull origin B는 현재 원격 레포에 있는 B를 당겨오는 것이었고, git merge B는 현재 로컬 레포에 있는 B의 변경 사항을 A(현재 브랜치)와 합치는 명령어였다. 그러므로 git merge B를 하려면 로컬 레포에 B가 있어야 했다. 
 
조금 익숙하지 않았던 것은 의미였다. 보통 브랜치 B를 merge 하려면 origin에 있는 B의 상태를 당겨오고 싶어하는 것이 일반적이다. 의미상으로는 git merge B를 사용하는 것이 맞아 보이지만 실제로는 git pull origin B를 사용해야 하는 상황인 것이다. 반면 로컬에 있는 브랜치들끼리 병합할 때는 git merge B를 사용해서, 내가 생각하는 머지 상황에서는 git merge B를 쓰지 않는다는 점이 낯설었다. 
 

✔️ SPA와 MPA의 정의는 뭐고 각각의 차이는 뭘까?

 
추측 & 새롭게 알아낸 것(문서를 보고 작성한 것이라 섞여있음)
SPA는 Single Page Application, MPA는 Multi Page Application의 약자이다. Page라는 개념을 여기서는 경로로 이해했다. SPA는 단일 경로만 있는 Application, MPA는 여러 경로가 있는 Application으로 이해했다. 그러나 단순히 경로의 차이는 아니다. SPA는 Single Page인 만큼 처음 요청에서 서버로부터 필요한 자원들을 받아오고, 이후에 필요한 자원들이 생기면 그 자원들에 한해서만 응답을 받아온다. 반면 MPA는 각 페이지를 호출할 때마다 서버로부터 필요한 자원들을 받아온다. 
 
이렇게 보면 MPA가 안 좋은 거 아닌가 싶은데, 대신 SPA는 처음에 자원을 받아오는 과정에서 시간이 조금 더 걸릴 수 있다고 한다. 그리고 검색엔진 노출과 관련된 SEO(검색엔진 최적화, Search Engine Optimization)의 경우 MPA가 유리하다고 한다. SPA의 경우는 일단 기존에 갖고 있는 자원들만 먼저 로드시킨 다음 필요한 데이터를 받아오기 때문에, 검색엔진에 반영이 잘 되지 않을 수 있다고 한다. 
 
그런데 MPA 관련 설명을 읽을 때 뒤로 가기 등의 액션이 가능하다고 했는데, 그렇다면 SPA에서는 불가능한 것인지도 궁금해졌다. 또한 SPA와 MPA는 Application의 차이이고, SPA는 client side rendering, MPA는 server side rendering을 사용하는 것인지, 아니면 이들은 별개인지도 궁금해졌다. 아무래도 내가 SPA와 MPA를 100% 이해하지는 않은 것 같다.
 

✔️ SPA-MPA와 client-server side rendering은 무슨 관계가 있나? 

 
추측
client, server side rendering은 렌더링 방식의 차이이고 꼭 어떤 브라우저/엔진에서는 특정 기법이 가능하고 그런 것은 아니라고 이해했다. 그래서 SPA는 client side rendering(CSR) 방식을, MPA는 server side rendering(SSR) 방식을 사용한다고 이해했다. 
 
새롭게 알아낸 것
SPA, MPA에서 모두 CSR, SSR을 사용할 수 있다. 다만 SPA에서는 CSR이, MPA에서는 SSR이 기본값이다. React, Vue와 같은 프론트엔드 프레임워크는 기본적으로 CSR을 제공하지만 그렇다고 SSR을 할 수 없는 것은 아니다. 여러 가지 방법으로 MPA로 개발할 수 있다고 한다. 페이지별로 개별 번들을 생성하거나, next.js 등에서 특정 메소드를 사용하면 각 페이지가 개별 HTML로 생성된다고 한다. 그런데 솔직히 잘 와닿지는 않았다. 어쨌든 둘은 경향성(SPA-CSR, MPA-SSR)은 있으나, 꼭 매칭이 되는 것은 아니라고만 이해했다.