Remix와 TMDB API 사용하여 영화 검색 사이트 만들기

리믹스 프레임워크, Remix Framework, TMDB API 사용, Link prefetch 기능 안녕하세요? 제가 최근에 Remix Framework을 자주 사용하게 되는데요. 사용해본 결과 진짜 빠릅니다. NextJS가 긴장해야 될 수준이고요. 참고로 개인 프로젝트에서 DB 데이터 260만 개의 Sqlite3 쿼리 써칭 결과 NextJS에서는 진짜 너무 오래 걸렸는데 Remix 프레임 워크에서는 정말 순식간에 로딩되었습니다. 그리고 Remix가 좋은 점이 HTML의 전통적인 사용 방식을 사용하고 있기 때문에 Remix를 쓰다 보면 웹 표준에 대해 더 자세히 알 수 있는 게 좋았습니다. Remix의 좋은 점은 정말 여러 가지가 있는데요, 신생 프레임워크이기 때문에 아직은 유저가 별로 없지만 저는 ..

• format_list_bulleted 코딩/React
• · 2022. 4. 16.
• textsms

Remix Framework에 TailwindCSS Dark Mode(다크모드) 적용하기

Remix Framework TailwindCSS Dark Mode, 다크 모드 안녕하세요? Remix Framework에 TailwindCSS를 적용하는 방법을 저번에 배웠는데요. https://cpro95.tistory.com/674 Remix Framework에 TailwindCSS 적용하기 안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwin.. cpro95.tistory.com 오늘은 다크 모드 적용에 대해 알아보겠습니다. TailwindCSS의 다크 모드의 작동원리는 즉, html 태그에 ..

• format_list_bulleted 코딩/React
• · 2022. 4. 8.
• textsms

Remix Framework 한 화면에 Nested Routes 구현하기

Remix Framework, 리믹스 프레임워크, 한 화면에 네스티드 라우츠 구현하기, 한 화면에 Nested Routes 구현하기 한 화면에 Nested Routes 설정하기 이제 리믹스 프레임워크의 가장 강력한 기능인 Nested Routes에 대해 알아보겠습니다. 제목 그대로 한 화면에 Nested Routes를 만들 수 있는데요. 일단 지난 시간에 배웠던 글을 참고해서 이번 글을 쓰도록 하겠습니다. https://cpro95.tistory.com/680 Remix 프레임워크 Nested Routing 파헤치기 Remix Framework File-base Routing and Nested Routing ( 리믹스 프레임워크 파일 베이스 라우팅, 네스티드 중첩 라우팅) 안녕하세요? 오늘은 지난번에 ..

• format_list_bulleted 코딩/React
• · 2022. 3. 27.
• textsms

Remix framework의 useTransition을 이용한 UI 개선하기

Remix framework useTransition, 리믹스 프레임워크 useTransition UI 개선 안녕하세요? 지난 시간에 작성한 다중 Form을 이용한 action 함수 사용하기 글에서 아쉬웠던 게 계속 생각이 나서 바로 다음 글을 쓸려고 합니다. 바로 UI 부분인데요. 노트를 생성하고 노트를 지울 때 화면에 아무것도 표시가 되지 않아 지금 제대로 작동하고 있는지 아니면 에러가 났는지 도저히 모르는 상태인데요. 리믹스에서는 useTransition 훅을 제공하고 있어 이 부분을 해결하는데 도움을 주고 있습니다. 먼저, 지난 시간에 잠깐 언급했던게 있는데 바로 아래 코드입니다. 지난 시간의 코드처럼 Form에 reloadDocument를 지정하면 input 창이 깨끗하게 비워지게 되는데요. 그..

• format_list_bulleted 코딩/React
• · 2022. 3. 26.
• textsms

Remix Framework 다중 Form의 action 함수 처리하기

Remix Framework multiple form, 리믹스 프레임워크 다중 form의 action 함수 처리하기 안녕하세요? 지난 시간에 리믹스의 서버사이드 처리 함수인 action 함수에 대해 자세히 살펴봤는데요. 오늘은 한 페이지에서 action 함수로 전달해야 할 데이터가 많을 경우에는 어떻게 하는지 알아보겠습니다. 리믹스에서는 서버사이드 함수로 데이터를 보낼 때 action 함수를 지정해서 사용한다고 했고, 그 방식은 PHP 시절 쓰던 form-submit 방식인데, 만약 보내야 할 데이터가 여러 form에 걸쳐 있을 경우 action 함수에서 어떻게 처리하는지 쉽게 생각이 나지 않는데요. 지난 시간에 배웠던 Post 생성과 관련하여 오늘은 Note라는 DB를 새로 만들어서 알아보겠습니다. 먼..

• format_list_bulleted 코딩/React
• · 2022. 3. 26.
• textsms

Remix Framework Action 함수 자세히 알아보기

Remix framework action function, 리믹스 프레임워크 action 함수 자세히 알아보기 안녕하세요? 지난 시간까지 배웠던 Remix 프레임워크의 서버사이드 담당 함수인 loader와 action 중에서 오늘은 action 함수를 좀 더 자세히 알아볼까 합니다. 지난 시간에 배웠던 loader, action 함수의 동작 방식을 복습해 보면, 1. 리액트 UI 부분의 form 엘러먼트에서 디폴트 옵션인 method="get" 상태에서 form을 submit 했고, 2. form을 submit 하면 브라우저는 자동으로 새로고침 하는데, 이때 form의 method가 "get"이기 때문에 input 엘레먼트의 name 부분이 현재 URL의 Params으로 추가되면서, 3. 새로고침 된 브..

• format_list_bulleted 코딩/React
• · 2022. 3. 26.
• textsms