Lolls React에 대한 기술 선택🐳
개시하다
안녕하세요, 저는 나침반의 전단 엔지니어입니다.
차세대 경영관리 클라우드'를 개발 중인 사아스.
이번에는 리액트가 개발한 로그 라스트의 프런트엔드에서 어떤 기술을 사용했는지, 왜 그것을 선택했는지 해설한다.
리액트는 라이브러리 수가 풍부하지만, 한편으로는 군웅할거 분야도 많아 기술 선택이 어렵다.
같은 고민을 하는 프런트 엔지니어를 위해 조금이나마 힘을 썼으면 좋겠다는 생각에 이 글을 썼다.
로그 프런트엔드
저는 유사한 서비스의 경우 특히 참고할 수 있는 경우가 많다고 생각합니다. 그래서 저는 문장의 전제 서비스를 살짝 설명합니다.
Lollas는 toB의 SaaS의 비즈니스 시스템과 같은 위치입니다.
거의 모든 페이지가 인증되었고 화면 속의 요소가 toC의 사이트보다 많다.
Next.js로 구성되어 있으며 SSG와 SSR 등을 사용하지 않으며 데이터는 고객으로부터 얻을 수 있습니다.
※ 일지는 사업을 사전에 관리하는 서비스입니다.
해석할 영역
이번에 기술 선정 분야는 다음과 같은 3개다.
상태 관리
상태 관리는 SWR 및 Context를 사용하여 상태를 관리합니다.
API의 값은 SWR에서 관리하고 다른 값은 Context에서 관리합니다.
다른 고려 옵션에서 다음과 같은 내용을 열거할 수 있다.
왜 SWR+Context
응용 프로그램에서 상태를 관리하려면 API의 데이터 + SWR이 대부분이며, 이것은 전문적인 프로그램 라이브러리이기 때문이다.
대부분의 것이 SWR로 관리되기 때문에 다른 것을 레드ux로 관리하는 것은 학습 비용에도 적합하지 않다고 생각해 컨텍스트를 사용하기로 했다.
또한 Redux를 사용하면 응용 프로그램에서 중앙 집권 관리를 해야 하기 때문에 마이크로 전단과 구성 요소 라이브러리의 커팅이 앞으로 어려워질 것이라고 판단합니다.
예를 들어 전체 응용 프로그램에서 모드(팝업) 등의 개폐 상태를 유지하려면 Redux를 사용하면 다른 상점의 정보에 의존하지만 Context의 경우 의존을 최소화할 수 있다.
SWR의 유지보수성에 관해서는 Vercel제이기 때문에 공식 문서에서도 사용을 추천하기 때문에 문제가 없다고 판단한다(v0.x에 불과하지만).
The team behind Next.js has created a React hook for data fetching called SWR. We highly recommend it if you’re fetching data on the client side. It handles caching, revalidation, focus tracking, refetching on interval, and more. And you can use it like so:
SWR 소개로 다음 기사 등도 참고할 수 있다.
스타일링
굉장히 고민되는 분야네요.오직 이곳만이 하나의 보도가 될 수 있다.
최종 로그는 emotion를 선택했습니다.
기타 고려 옵션은 다음과 같은 네 가지가 있다.
CSS Modules는 Next입니다.추천?
먼저 논란을 일으킨 건 이 이슈였다.
We should update the page to be clear about the advantages of CSS Modules over css-in-js, mainly being that you don't need JS to add the CSS as CSS Modules are concatenated into many minified and code-split .css files. Ideally users should end up thinking that CSS Modules are the preferred solution, but any CSS-in-JS library is also an option.
최적화된 관점에서 보면 Next.JS가 향후 CSS Modules를 추천하는 절차를 체감할 수 있다.
하지만 아직 OPEN 상태인 이슈여서 확정이 아닌 CSS 모더스→CSS-in-JS라는 트렌드를 완벽하게 역주행하는 이슈다.
국내에서의 자세한 답사는 다음 토론에서도 확인할 수 있다.
이러한 일련의 프로세스를 볼 때 로그에 CSS-Modules가 사용되지 않습니다.
CSS-Modules의 단점은 다음과 같습니다.
왕도의 Styled-Components
아마도 가장 많은 이용자가 Styled-Components일 것이다.
하지만 아래의 이유로 이걸 채택하지 않았다.
최종 Emotion 스타일
마지막으로 아래의 작법으로 냉정해졌다.
const Todos = () => (
<ul css=styles.list>
<li css=styles.listItem>
aaa
</li>
<li css=styles.listItem>
bbb
</li>
<li css=styles.listItem>
ccc
</li>
</ul>
);
const styles = {
list: css`
display: flex;
`,
listItem: css`
margin-left: 8px;
&:first-of-type {
margin-left: 0;
}
`,
}
창문체
다음은 표입니다.창은 다음과 같은 세 가지 선택에서 고려된다.
하지만 솔직히 리액트 훅 포름과 리액트 파이널 포름 중 하나라면 개인적인 취향의 문제라고 생각한다.
Formink은 성능 관점에서 단점이 명확하기 때문에 사용을 권장하지 않습니다.
토론의 참고로 Blitz 작성자의 표 비교 문장을 참고할 수 있다.
일본어의 요약문은 여기에 있다.
예전에 써봤는데 퍼포먼스가 안 좋아서 포미컬이 없어요.
요즘 계속 쓰고 있어서 좋아요.
나는 거의 써 본 적이 없다.
리액트 훅 포름은 처음부터 리액트 훅을 기반으로 설계됐기 때문에 형식적 논리 등을 사용자 정의 고리로 쉽게 절단할 수 있다.
use Controller 등을 사용하면 구성 요소의 분할도 간단하게 진행할 수 있어 개인이 가장 추천하는 프로그램 라이브러리입니다.
To Be Continued
이번에는 전체 기술 선정이어서 심도 있는 해설을 하지 않았다.
이번에 접한 3개 분야에서 자세한 내용을 듣고 싶으면 꼭 연락 주세요.
또 이번에 접촉하지 않은 분야는 다음과 같이 열거할 수 있다.
We're hiring!
로버러스는 너처럼 호기심이 많은 엔지니어를 찾고 있다.
관심 있으면 꼭 응모해 주세요!
Reference
이 문제에 관하여(Lolls React에 대한 기술 선택🐳), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yuitosato/articles/9db2a0fe90313e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
