Philosophy
https://remix.run/docs/en/v1/pages/philosophy
우리는 신용카드 회사, 소셜 미디어 플랫폼 등 다양한 유형의 웹 사이트를 작업해옴. 개인 개발 경험과 고객의 제품을 바탕으로 웹 프로젝트의 프런트엔드와 백엔드의 역동적인 특성 모두 다룰 수 있도록 리믹스를 구축했다.
리믹스의 철학은 4가지 포인트로 요약할 수 있다
-
content/data에서 소스 코드를 분리하는 등 server/client 모델을 채택합니다.
-
누구랑싸우지않고함께일함?
웹의 기반과(Web Standards 웹 표준 - http, html, css, js 등) 싸우지 않고 함께 일해요.
웹 기반은 항상 좋았고 특히 최근 더 좋아지고잇음
웹표준과 다르다는 것? 리액트, 리액트훅폼 (ex. 김밥에서뺀햄으로쌓은탑 햄탑)
그런 건 웹표준에 없는 기능으로 편하게 만든 것임.
리믹스는 안 써도 됨. 우리는 리액트훅폼 등의 라이브러리를 쓰지 않고 폼데이터를 씀. 이건 웹 표준임!
-
사용자경험을 더 좋게만들기위해 자바스크립트를 쓰는데, 브라우저를 흉내낸다.
ex)<Form><Form/>리믹스의 특이한 폼
원래 브라우저의 폼과 비슷하게 생겻는데
axios, body stringify 이런 것들을 할 필요가 없고
loader로 데이터 불러오고
action으로
브라우저의 동작을 그대로 쓰는데, 장점을 ,, 흉내냄
spa - 페이지를 다 갈아끼우는게아니라 바뀌는 부분만 쏙쏙 바꿔줌 -
매우 추상화돼잇어서 외부에서 우리 동작을 이해하기 어려움
최대한 이해하기 쉽게 만들어서 단순하고 우리의 명령을 갖다쓰기 쉽다
Server/Client Model
네트워크를 통제할 수 없다
ssr을 왜 하냐?
cdn 전세계의 각지에 사이트캐시를 담아놓고 사용자에게 뿌려주는 것
cdn은 한계가 있음
cdn은 정적 파일을 캐시 (이미지, 폰트, html 파일)
우리는 동적 사이트를 만드는데 cdn은 동적 사이트를 퍼다나를 수 없음. 불가능
오늘날엔 정적 파일은 필요 없다. 서버가 전세계에 뿌려져잇기때문에!
첫 데이터가 전송되는 시간이
leveraged 지렛대 (먼가의 힘을 이용해서 활용해서)
우리는 엣지의 디스트리뷰트 시스템을 빌려서 => 우리는 엣지에 있는 분산 시스템을 활용해서 정적 빌드가 아니라 이 모든 걸 성취했다.
이걸 이해하려면 edge를 이해해야 함.
사용자 또는 데이터 소스의 물리적인 위치나 그 근처에서 컴퓨팅을,,,, (구글링 ㄱ)
엣지는 cdn의 서버 버전
서버가 전세계에 퍼져잇는것
그게 엣지컴퓨팅 기반의 힘
"당근마켓"을 예시루
중고거래 플랫폼 중고나라랑 당근마켓은 사용자가 매우 많음
당근마켓은 내 동네에 잇는것만 거래 가능
내가 여주에 살면 당근마켓 서버가 여주 근처에 잇을거임. 그게 엣지 컴퓨팅
서버를 전국 각지에 뿌리는 것.
그지역에서만하게되면 머가 다를까?
전국 각지의 모든 중고 물품을 보여주면 데이터가 많아지면 많아질수록
찾기도 힘들고 데이터양이 많아서 (ex. 망원경이 올라오면 검색 알람을 띄어달라고 설정 - 전국에서 11000개가 올라오면 계속 알람이 울려서 힘듦. 하지만 동내에는 두세개만 올라올거고 그럼 서버가 편해짐)
kt나 이런 통신사들에게 클라우드 서비스를 제공해서 회사는 서울에 있더라도 여주에도 서버를 제공할 수 잇다는 것.
전국 각지에 자기 서버들을 뿌려놓고 인천 서버 임대해드립니다. 하는 게 엣지서버!
엣지가 무슨 뜻이냐면 가장자리 끄트머리 모서리 꼭짓점
중앙의 어딘가에 몰려잇는게 아닌 퍼져잇다는 것. 전국 전 세계
dispersion 분산
유저에게 가까운 곳에서 컴퓨팅을 수행하는 것.
서버가 항상 돌고잇고 ssr을 해서 보내주면 ~
ssg 의 문제는 게츠비는 머든지간에 build하려면 전체(블로그의 전체 포스트)를 다 다시 그려야 함
cdn에서 캐시를 태우려면? 빌드를 해서 보내줘야함 그게 rebuilds, redeploys
우리는 매번 다 렌더링하는게아니라 몇초만에 전세계로 전파됨
vscode용량계산확장프로그램
import cost
압축 라이브러리 comprace?
라이브러리를 사용자가 직접 그 라이브러리를 번들에 포함돼서 다운받아서
번들 라이브러리로 직접 브라우저에서 렌더링햇엇음.
하지만 서버에서 써서 미리 렌더링 한다 음에 사용자에게 보내준다 브라우저에선 그리기만 함
서버에서 데이터필요한걸 가져와서 그냥 서버에서 내려주면 사용자는 서버가 그려준걸갖다 씀 (서버비용이더들겟지만 사용자들 경험이 좋아짐)
그래서 ssr을 하는 거임
사용자에게 자바스크립트를 덜 보내자!
#탐토님 경험
아이콘이 하나하나가 1kb용량인데 몇천개인데 다 import해서
1.4기가 넘어서 번들사이즈를 줄엿어야햇음
번들사이즈 분석으로까보니 아이콘용량이엄청컷음
탐토님이 아이콘들을 한땀한땀 쓰는것만 import하는걸로바꾸고..
그리고 지난 빌드한게 다음빌드에포함되게 파일 경로를 잘못설정
1+1 2+2 4+4 로 빌드가 커져서 이리저리 만져서 줄이고줄여서
80메가까지 줄임.
#리믹스는
용량을 20배나 작게 압축해 줘서 사용자를 행복하게 해준다~
앱의 스피드를 빠르게 해준다. 네트워크를 작게 보내게 서버를 잘 이용했다!
서버에서 알아서 해줘서 사용자의 경험을 좋게 만든다!
집 근처에 서버를 둬서?
현재테크기업들이하고잇는일
Web Standards, HTTP, and HTML
웹표준기반으로 만들어서 표준에 따라 이런식으로하구나 이해하면서 공부하면된다
웹표준 + 리액트를 다 공부해야햇는데 귀찮음.
폼데이터배웟는데 리액트훅폼까지ㅜ
리믹스와 웹표준도 함께 공부할 수 있다
알아서다공부하게돼잇다
Progressive Enhancement
점진적 현상
옛날 기술에서 한 번에 리액트를 갈아타는 게 아니라
원래 html, react 이런 기능을 쓰고 일부만 맞게 갈아타도 된다
옛날 레거시를 리액트로 바꿔야 할 때 편하다!
좋은 성능은 그대로 가져가면서.
옛날 html 기능을 그대로 쓴다.
리믹스가 웹 표준 기능을 정말 잘 쓰고 잇다.
Don't Over Abstract
더나은사이트를만들수잇게해주겟다.
빌드베터웹사이트,,
더 조은 웹사이트를 만들기 위해 리믹스를 이용해보세요^^
리믹스를 잘하게 될수록 뜻하지 않게 우연히 웹 개발도 잘하게 될 것이다!
리믹스가 아니라 브라우저 자바스크립트 등 웹개 발을 잘할 수 잇따
최대한 비슷하게 만들어서 편하게
원리는 비슷하기 때문에 내부의 동작원리 숨기는게아니다
리액트는 내부 동작이 보이지 않는데,
리믹스는 폼데이터를 이런 식으로 쓰는구나 원리를 알려줘서 편하게 쓸 수 잇다!
성능 최적화도 하고
cra 기본 설정 따라서 쓰는데
리믹스는 기술들도 그대로 보고 쓸 수 잇다. 너무 복잡하지 않고 표준을 잘 쓸 수 잇게 해주는 우리가 알고 있는 웹 표준을 좀 더 쓰기 쉽게 간단하게 하는 게..
리믹스의 철학,, 👍
formData
next
remix 서버두개?
백엔드가더커지고프론트는작아서분리할필요가잇겟다
작은식당 칼질 볶기 다 하는 그런 차이
