상위 경로와 일치하는 하위 경로를 렌더링한다.import { Outlet } from "@remix-run/react";export default function SomeParent() { return ( Parent Content );} Propscontextoutlet 아래의 엘리먼트 트리에 컨텍스트 값을 전달한다. 상위 경로가 하위 경로에 값을 제공해야 할 때 사용한다. 하위 컴포넌트에서 전달받은 컨텍스트를 가져올 때는 useOutletContext를 사용한다. useLoaderData에서 액세스한 지연된 로더 promise를 해결하는 역할을 한다.import { Await } from "@remix-run/react";Loading...}> {(..
💛 .client modules 흔하지는 않지만 브라우저에서 모듈 부작용을 사용하는 파일이나 종속성이 있을 수 있다. 서버 번들에서 강제로 제외하기 위해 파일 이름에 *.client.ts를 사용하거나 .client 디렉토리 내에 파일을 중첩할 수 있다. // feature-check.client.ts export const supportsVibrationAPI = "vibrate" in window.navigator; 이 모듈에서 내보낸 값은 서버에 있으므로 모두 undefined가 될 것이기 때문에 이를 사용할 수 있는 유일한 장소는 useEffect와 클릭 핸들러와 같은 유저 이벤트이다. import { supportsVibrationAPI } from "./feature-check.client.ts..
💛 Form vs fetcher Remix에서 개발하면 때로는 기능성에서 중복되어 신규 사용자에게 모호함을 줄 수 있는 풍부한 도구 세트가 제공된다. Remix의 효과적인 개발의 핵심은 각 도구의 뉘앙스와 적절한 사용 사례를 이해하는 것이다. - 중점을 두고 있는 API ▪︎ fetch를 통해 action에 데이터를 제출하고, 기본 HTML 형식 이상의 향상된 유저 인터페이스를 활성화하는 useNavigation에서 보류 상태를 활성화하는 점직적으로 향상된 HTML이다. form의 action이 완료된후, 페이지의 모든 데이터는 데이터와의 동기화에서 UI를 유지하기 위해 서버에서 자동으로 재검증된다. API로부터 HTML을 사용하기 때문에, 서버는 javaScript가 로드되기 전에 기본 수준에서 대화식..
[Remix]Remix 공식문서 파헤치기 2탄 - 데이터의 흐름과 상태 관리
💛 풀스택 데이터 흐름 Remix의 주요 기능 중 하나는 UI를 영구 서버 상태와 자동으로 동기화하는 방식이다. 이는 세 단계로 진행된다. Route loader는 UI에 데이터를 제공한다. 지속 상태를 업데이트하는 작업을 라우팅하기 위해 post 데이터를 형성한다. 페이지의 loader 데이터가 자동으로 재검증된다. - Route 모듈 내보내기 사용자 계정 편집 경로를 예시로 들어보자. 경로 모듈에는 작성하고 설명할 세 가지 내보내기가 있다. // routes/account.tsx export async function loader() { // provides data to the component } export default function Component() { // renders the UI ..
⇩ (주절주절) 더보기 작년 첫 번째 팀 프로젝트 이후 개인 프로젝트만 줄곧 해왔던 내가 두 번째 팀 프로젝트에 참여하게 되었다...! 첫 대면 회의에서 어떤 프레임워크를 사용할지에 얘기하다가 팀원분이 추천한 Remix!! React, Next만 알던 내게 Remix의 등장이라... Remix를 파헤져보자!! 🩵 Remix SSR만을 지원하는 풀스택 웹 개발 프레임워크 Web Fetch API를 기반으로 구축되어 Node.js가 아닌 환경에서도 실행할 수 있다. 1. Remix 주요기능 React Router를 기반으로 구축된 Remix는 네 가지 기능을 제공한다. 컴파일러 서버 사이드 HTTP 핸들러 서버 프레임워크 브라우저 프레임워크 - 컴파일러 Remix의 모든 것은 컴파일러로 시작된다! remix..
[Web Socket] 웹 소켓으로 채팅 구현하기 (+ MongoDB 사용하기)
유투브를 보다가 코딩알려주는누나의 웹소켓 강의를 발견!! 마침 서버에 관심을 갖고 있던터라 바로 강의를 듣고 구현을 완료했다 👏👏👏👏👏 처음 node.js와 mongodb를 "제대로" 사용하는거라 중간에 node.js기초 강의도 듣고 mongodb를 사용하는 방법(예전에 배운것과 너무 달랐다..ㄷㄷ)도 제대로 알게된것 같다. https://www.youtube.com/watch?v=uE9Ncr6qInQ&t=0s 강의가 node.js에 대한 기초 지식을 어느정도 갖고있는 사람들을 위한 느낌이라 내가 구현하면서 추가로 진행한 부분을 정리하도록 하겠다. 🚀 웹 소켓 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 기술 웹 소켓 API를 통해 서버로 메세지를 보내고 서버의 응답을 위..
💚 Context 컴포넌트 트리를 통해 컴포넌트에 곧바로 데이터를 전달하는 방식 props를 사용하지 않아도 곧바로 데이터를 전달할 수 있어 코드가 깔끔해지고 데이터를 한곳에서 관리하므로 디버깅에 유리하다. 💡 언제 context를 사용하는게 좋을까? 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우 사용하는 것이 좋다. Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 context의 데이터를 읽을 수 있어 props를 사용하지 않고도 데이터에 접근할 수 있다. context를 사용하기 전에 고려할 점 context는 다양한 레벨에 걸쳐진 많은 컴포넌트에게 데이터를 전달하기 위한 용도로 컴포넌트와 context가 연동되면 재사용성이 떨어지게 된다. (컴포넌..
🪝 HOOK 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수가 실행되도록 정해진 함수 hook의 규칙 1. 무조건 최상위 레벨에서만 호출해야 한다. 반복문이나 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안된다. 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출되어야 하기 때문에 함수의 최상위 레벨에서 호출해야 한다. 이는 컴포넌트의 state를 올바르게 관리할 수 있어야 하기 때문! 2. 리액트 함수 컴포넌트에서만 hook을 호출해야 한다. hook은 리액트 함수 컴포넌트 또는 직접 만든 커스텀 훅에서만 호출이 가능하다. ☝️ hook의 이름은 모두 use로 시작한다. 커스텀훅의 경우 개발자 마음대로 이름을 지을 수 있지만 규칙에 따라 앞에 use를 ..
💜 React 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA 방식을 사용해 복잡한 사이트를 쉽고 빠르게 만들고 관리할 수 있다. 더보기 라이브러리 vs 프레임워크 - 라이브러리 : 특정 프로그래밍 언어어세 자주 사용되는 기능을 모아 정리해 놓은 것 -> 제어 권한이 개발자에게 있음 - 프레임워크 : 애플리케이션의 구조를 정의하고 사용자 관리 등의 기능을 빠르고 쉽게 구현할 수 있도록 환경을 제공해 주는 것 -> 제어 권한이 프레임워크에 존재 React의 장점 1. 빠른 업데이트와 렌더링 속도 Virtual DOM을 사용해 DOM을 직접 수정하지 않고 업데이트해야할 최소한의 부분만 업데이트 한 후 렌더링한다. 따라서 변경된 내용을 빠르게 사용자에게 보여줄 수 있다. - Virtual DOM..