본문 바로가기

Remix

(9)
[Remix] 풀 스택 컴포넌트(Full Stack Components) 컴포넌트와 백엔드 코드를 함께 두는 이유(colocate)와 방법을 알아봅니다. 원문입니다 : https://www.epicweb.dev/full-stack-components Full Stack Components There’s this pattern I’ve been using in my apps that has been really helpful to me and I’d like to share it with you all. www.epicweb.dev 백엔드와 UI 코드의 환상적인 결합 remix를 활용할 때, 페이지를 개발하는 방법은 아래와 같습니다. export async function loader({ request }: LoaderArgs) { const projects = await ge..
완벽하게 타입 안전한 웹 애플리케이션 개발[Fully Typed Web Apps] ...의 번역입니다 : https://www.epicweb.dev/fully-typed-web-apps Fully Typed Web Apps The main thing that makes end-to-end type safety difficult is simple: boundaries. The secret to fully typed web apps is typing the boundaries. www.epicweb.dev 타입스크립트는 환상적입니다. function add(a: number, b: number) { return a + b } add(1, 2) // type checks just fine add('one', 3) // does not type check 위 코드도 멋지지만, 저는 더 큰 관..
Remix로 알아보는 전역 상태 관리와 프론트엔드 개발의 미래 프론트앤드 애플리케이션의 미래, PESPA 아키텍처에는 전역 상태 관리 솔루션이 필요 없을 것입니다. js가 없어도 기본 기능이 동작해야 하기 때문이죠. 그런데 로그인 정보, 테마 정보 같은건 전역 상태로 어디선가 가져와야 하지 않을까요? 그런 정보는 어디서 가져오나요? PESPA의 구현체인 remix를 통해 해답을 찾아봅니다. PESPA의 상태 관리 솔루션 1. 웹 표준 : Form 리액트 라우터 6.4 이후 리액트 라우터에 Remix의 철학이 많이 녹아들어왔습니다. React 자체의 여러 상태관리 솔루션(useState 등)의 사용보다, 바닐라 JS와 브라우저 API, 웹 표준의 사용을 지향합니다.(#useThePlatform) 아래는 SPA에서 사용하는 솔루션인 리액트 라우터 코드지만, Remix와..
The Web’s Next Transition(웹 애플리케이션 아키텍처의 미래) 웹 애플리케이션 아키텍처의 미래를 살펴봅시다. 원문입니다 : https://www.epicweb.dev/the-webs-next-transition The Web’s Next Transition Web is made up of technologies that got started over 25 years ago. Now, we are transitioning to a new and improved architecture for building web applications. www.epicweb.dev 웹은 25년 전에 시작된 기술로 구성됩니다. HTTP, HTML, CSS, JS는 모두 90년대 중반(제가 8살 때)에 처음으로 표준화되었습니다. 그 이후로 웹은 유비쿼터스 애플리케이션 플랫폼으로 진화했습..
리믹스와 엣지 컴퓨팅[Remix and “The Edge”] 리믹스 프레임워크가 높은 퍼포먼스를 내기 위해 엣지 컴퓨팅을 사용하는 방법을 알아봅니다. 원문 주소입니다 : https://remix.run/blog/remix-and-the-edge Remix and “The Edge” “The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing. remix.run CDN과 "엣지" 주변에는 많은 것이 있습니다. 전통적으로 엣지는 정적 에셋을 빠르게 저장하고 전달하기 위한 ..
리액트 서버 컴포넌트와 리믹스[React Server Components and Remix] 리믹스와 리액트 서버 컴포넌트의 관계를 알아봅니다. 원문 링크입니다 : https://remix.run/blog/react-server-components React Server Components and Remix The current state of React Server Components their future in Remix. remix.run Remix v1 릴리스 후 한 질문이 계속 반복되었습니다. 리액트 서버 컴포넌트는요? 좋은 질문입니다! 많은 분들과 마찬가지로 우리는 2018년에 처음 발표된 이후로 React Suspense를 계속 실험해 왔습니다. 사실, 초기 버전의 Remix에서 해당 API를 사용했습니다만, 리믹스의 출시 준비가 되었을때 해당 기능이 공개되지 않을 것임을 알고나서,..
Remix의 데이터 플로우[Data Flow in Remix] Remix를 사용하면 상태관리 도구가 왜 필요 없는지 알아봅니다. TLDR : Action이 발생할 때마다 변경된 데이터를 Loader를 통해 Component에 반영해주면 되기 때문입니다. 해당 로직은 서버에서 동작하므로 동기화에 대해 걱정할 필요도 없습니다. 원문 링크입니다 : https://remix.run/blog/remix-data-flow Data Flow in Remix Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again. remix.run React가..
[React][Remix][tutorial]React-Remix를 이용하여 개발자 블로그 만들기. 공식 블로그 튜토리얼을 의역한 내용이다. 해당 튜토리얼을 따라 react-remix 프레임워크와 마크다운을 활용해 개발자 블로그를 만들어본다. Remix | Developer Blog Quickstart We're going to be short on words and quick on code in this quickstart. If you're looking to see what Remix is all about in 15 minutes, this is it. 💿 Hey I'm Derrick the Remix Compact Disc 👋 Whenever you're supposed to do something you'll s remix.run 완성된 프로젝트는 여기서 볼 수 있다. 추가로 튜토리얼과 다르..