[04] 백엔드 기초 공사 - 미친대박깨달음 with SPA MPA

 

벌써 뭘 어떻게 해야할 지 감도 안 잡힙니다...

우선 현재 글은 제목은 백엔드 기초공사지만 아직 공사 시작도 안했구요

그냥 깨달음 글입니다. 결론은 맨 아래쪽에 적었으며 다음 [05] 글 부터 ㄹㅇ로 기초공사 하겠읍니다.

 

고민되는 점 

- 실제로 배포 할 건데 실제 배포하기 위해서 고려해야 하는 사항은 무엇인가 - 

 

뭐 배포하고 유저가 경험한 프로젝트가 있어야 서버비용은 어떻고

보안은 어떻게 해야하며 무엇을 제약 해야 한다... 는 것을 알죠

배포 해 본 적도 없음서 html css js django만 깔짝거린 정도로 시작 하려니 막막...합니다.

 

음 

그래서 일단... fastAPI를 사용하여 배포 한 경험을 정리해 놓은 블로그를 찾아보았습니다.

...

 

응 잘 정리 해 놓은 블로그는 없어요 당연히 ㅋ

하..........어렵습니다. 생초보가 봐도 알 만한 글은 없었습니다. 그나마

같같 점프투에서 fastAPI로 개발하기 ! 라는 글을 잘 정리해줘서

냅다 따라하기로 했습니다 ;;;;;;;;;;;;;;;;;;;;;;;;;

 

 

우선 여기서 나오는 svelte 왜 씀 부터 알아보겠습니다.

왜? 난 WWG나 토록토록 멋사홈페이지 개발 할 때는 react svelte같은 프론트api안 써도 잘 되던데 왜 쓰라캄?

이거 꼭 써야 함??????????????????????

의문이 들었습니다.

 

 

svelte나 react나 typescript나 프론트api인건 안변하니 react쓰는 이유부터 알아보겠읍니다.

Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가봅시다.
들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 

이런 사이트들을 Single Page Application 이라고 하는데 
- html 파일을 1개만 쓰고 
- 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여줍니다. 
그래서 부드럽게 동작합니다. 

쌩자바스크립트로도 만들 수는 있지만 코드가 너무 길어지는 관계로 
리액트라는 자바스크립트 라이브러리를 설치해서 사용하면 이걸 더 쉽게 만들 수 있습니다.
그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다. 



실은 리액트와 비슷한 자바스크립트 라이브러리가 많습니다. 
Vue, Svelte, SolidJS 이런게 요즘 뜨고 있긴 한데 
이 중에 리액트가 가장 틀딱이고 유저가 가장 많기 때문에 리액트를 쓰도록 합시다. 

https://codingapple.com/unit/react-0-why-use-react/

 

라고합니다. 코딩애플선생님 역시 비유를 찰떡같이 하십니다...그래서 틀딱라이브러리 react 써 보는 것을 고려 해 보려 하였으나, 역시 바닐라로 하겠습니다.

이유는 3번을 참고해주십시오.

 

 

 

1. 우선 venv하자

명령어는 항상 까먹습니다

 

 

2. 우선 fastAPI를 깔자

https://zmal.tistory.com/185

FastAPI_01_간단하게

내 글이니  대문짝하게 박아놓겠읍니다. 참고하십시오

 

3. react를 깔고 이게 뭔지 알아보자 ( 사담이 많습니다.  깨달았기 때문입니다. )

 

react공식에서 내어준 국룰 가이드 글이 있습니다.

근데 얘네 솔직히 뭔 말 하는 지 모르겠습니다.

 

but

이 글과   이 글을 보니 이해가 조금 되네요?

 

react 안 써도 될 것 같습니다. 우선 MPA와 SPA가 있습니다.

MPA 는 

MPA는 최초 접속 시 초기 페이지에 필요한 리소스만 다운 받고, 페이지를 이동할 때마다 Server에 Request를 보내서 새로운 HTML 파일을 다운받는다

입니다. 즉 url접속후 index.html만 다운받고 nav에 있는 메뉴 ( 마이페이지 ) 를 클릭하면

requset보내고... mypage.html mypage.css등등 로딩에 필요한 파일 다운받고....

해서 UX에 안 좋다고 합니다.(로딩이 길어요 길어)

장점은 초기구동이 빠르고 SEO( 검색엔진최적화)에 좋다고 하네요.

 

SPA는

SPA는 전체 페이지 구현에 필요한 정적 리소스를 `최초 접근 시 한 번에` 다운받는다. 이후 새로운 페이지로 이동할 때 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신한다. 필요한 데이터는 JSON으로 전달받기 때문에 전체적인 트래픽을 감소시킬 수 있다.

 

입니다. 즉 냅다 한번에 다운받아서 첨엔 좀 느리다만

깜빡거리지않고 부드럽게 넘어갑니다

인스타그램같은 거 보면 아이콘 클릭하고 다른거 볼 때마다 로딩 안 하잖아여?

spa한겁니다....

SEO, 보안 취약한데 유지보수 좋고... 컴포넌트 분할개발에 좋고...합니다.

 

 

VanilaJS로는 MPA로 대부분 하는 것 같습니다.

react typescript svelte같은 라이브러리 쓰면 spa가 쉽게 되는가봅니다.

 

바닐라로 하려면 ajax(!!!!!!!!) 같은 거 하는 것 같습니다.

와 ajax이거 wwg할 때( 아무래도 gps쓰고 지도 앱 느낌이니 로딩되면 구립니다.근데 저희가 개발 할 때 냅다 페이지 조각조각나누고... html엄청 쪼개놔서 로딩이 막 되는겁니다. 그때 PM님이 Ajax머시기...하셨는데 이제야 이해합니다...)나왔는데...

 

그때 ajax찾아보면서도 꽤 복잡하고 어렵길래 전 아모르겠다 하고 PM님이 뚞딲뚞딲하면서 

index.html에서 spa형식으로 얼추 되게끔 연결 해 주셨습니다.

 

 

 

와미친대박 

위 사진이 https://velog.io/@sunohvoiin/JavaScript-%EB%B0%94%EB%8B%90%EB%9D%BC-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-SPA-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[JavaScript] 바닐라 자바스크립트로 SPA 구현하기 - html 파일 합치기, CSS 분리하기

 

여기서 가지고 온 건데 저렇게 딱 PM님이 연결 해 주셨습니다.

아대박 저 지금 약간 소름돋았습니다.

이제서야 그의 의도를 모두 이해했습니다.....................

 

 

 

따라서 저희도 이번에 저렇게 만들어 보려고 합니다.

react배운 적도 없고 냅다 배포할 토이 프로젝트에 적용하기엔 어려울 것 같걸랑요 ^ v ^

 

우선 백엔드 기초공사고 뭐고 일단 저는 

디자인 만들어 놓은 거 토대로 html 통합 분리를 우째 할 지 고민을 좀 해봐야겠으니 다음글에 작성하겠습니다.

저 지금 약간많이 감동입니다...

 

 

이 글의 결론

 

고작 "react를 왜 쓰는가와 우린 vanila로 세미SPA를 적용하겠다"를 두서없이 장황하게 써놓았습니다.

하지만 ...예전에 이거 도대체 왜 일케함? 설명해줘도 모르겠던 행동을 이해하니 소름이 돋아서... 좀 신났습니다.