React

당신이 저처럼 단축키를 사랑한다면, 몇 개의 키를 눌러 마법이 일어나는 것을 보는 것이 얼마나 만족스러운지 알 것입니다. 개발자들이 LLM과 코드 페이지에서 “코드를 빌리는” 데 사용하는 익숙한 Ctrl+C – Ctrl+V든, 우리가 좋아하는 도구에서 설정하는 개인화된 단축키든, 키보드 단축키는 시간을 절약해주고 우리를 컴퓨터 마법사처럼 느끼게 합니다. 걱정하지 마세요! 저는 키보드 단축키를 트리거하고 응답하는 컴포넌트를 구축하는 방법을 알아냈습니다. 이 기사에서는 React, Tailwind CSS, Framer Motion을 사용하여 이를 만드는 방법을 가르쳐 드리겠습니다. 목차 우리가 다룰 내용은 다음과 같습니다: 필수 조건 키보드 단축키 리스너(KSL) 컴포넌트란?…

현대 소프트웨어 응용 프로그램은 종종 사용자와 소통하기 위해 이메일 통신에 의존합니다. 예를 들어, 로그인 시도 중에 인증 코드를 보내거나, 마케팅 이메일이나 뉴스레터를 보낼 수 있습니다. 이는 이메일 통지가 일반적으로 사용자와의 가장 흔한 소통 수단임을 의미합니다. 이 자습서에서는 React Email를 사용하여 멋진 이메일 템플릿을 디자인하고, 강력한 이메일 API 플랫폼인 Resend을 사용하여 해당 템플릿을 보내는 방법을 배우게 됩니다. 필수 준비물 이 자습서를 최대한 활용하려면 React 또는 Next.js에 대한 기본적인 이해가 있어야 합니다. 또한 다음 도구들을 사용할 것입니다: React Email: React 컴포넌트를 사용하여…

최근에 다국어로 전환할 수 있는 웹사이트를 만들어 광범위한 관객을 대상으로 하는 흥미로운 프로젝트를 수행했습니다. 이를 통해 전통적으로 다른 언어 및 지역의 사용자들을 위해 콘텐츠를 적합하고 접근 가능하며 관련성 있게 적응하는 “로컬라이제이션” 개념을 더 잘 이해하게 되었습니다. 로컬라이제이션은 단순히 단어를 번역하는 것이 아니라 사용자들이 어떤 언어를 사용하더라도 편안함을 느끼게 하는 경험을 만드는 것입니다. 예를 들어, 아마존과 같은 글로벌 플랫폼은 언어 전환을 매우 원활하게 만들어 마법 같은 느낌을 줍니다. 사용자 경험을 향상시키는 것을 넘어, 이 기능은 더 넓은 관객에 도달하고 전 세계…

React를 배우는 것은 처음에는 어려울 수 있습니다, 특히 시작하는 방법을 모르거나 비어 있는 코드 편집기를 바라보고 있는 경우에는 더욱 그렇습니다. 그러나 적절한 코스를 통해 핵심 개념을 이해하고 실전 경험을 쌓을 수 있습니다. 이를 통해 실제 프로젝트를 개발하면서 실력을 향상시킬 수 있습니다. 우리는 freeCodeCamp.org YouTube 채널에 현대적인 React를 가장 매력적이고 실전적인 방식으로 가르치는 코스를 방금 출시했습니다. Scrimba의 Bob Ziroll이 제작한 이 코스에는 170개 이상의 코딩 도전 과제와 6개의 흥미로운 프로젝트가 포함되어 있습니다. 이 코스를 마치면 실제 문제를 해결하는 React 애플리케이션을 개발할…

최근, 제 아이 🧒🏻가 태블릿에서 무료 메모리 게임을 하는 모습을 보면서 그녀가 압도적인 광고와 성가신 팝업 배너로 어려움을 겪고 있는 것을 발견했습니다. 이것은 그녀를 위해 비슷한 게임을 만들고 싶다는 영감을 주었습니다. 현재 그녀가 애니메이션에 관심이 많기 때문에 귀여운 애니메이션 스타일의 이미지를 사용하여 게임을 만들기로 결정했습니다. 이 기사에서는 여러분이나 여러분의 아이들을 위해 게임을 만드는 과정을 안내하겠습니다 🎮. 먼저 게임 기능을 살펴본 다음, 기술 스택과 프로젝트 구조를 간단히 설명하겠습니다. 마지막으로 최적화와 모바일 기기에서 부드러운 게임 플레이를 보장하는 방법에 대해 논의하겠습니다 📱. 읽기를…

소개 이 튜토리얼에서는 Refine Framework를 사용하여 HR 관리 애플리케이션을 구축하고 DigitalOcean App Platform에 배포할 것입니다. 이 튜토리얼의 끝에는 다음이 포함 된 HR 관리 애플리케이션이 생성됩니다: 로그인 페이지: 사용자가 관리자 또는 직원으로 로그인할 수 있습니다. 관리자는 휴가 및 요청 페이지에 액세스 할 수 있으며, 직원은 휴가 페이지에만 액세스 할 수 있습니다. 휴가 페이지: 직원이 휴가를 요청, 보기 및 취소할 수 있습니다. 또한 관리자는 새로운 휴가를 할당할 수 있습니다. 요청 페이지: HR 관리자만이 휴가 요청을 승인 또는 거부할 수 있습니다. 참고: 이…

CRUD 操作은 모든 응용 프로그램의 기반입니다. 따라서 새로운 기술을 배우는 과정에서 이를 훌륭하게 manipalize 할 수 있는 것은 필수입니다. 이 튜토리얼에서는 React와 Convex를 사용하여 CRUD 응용 프로그램을 만들어 보실 수 있습니다. 이 작업을 위해 Book Collections라는 프로젝트를 빌딩하고 있습니다. 이 프로젝트에서는 사용자는 도서를 추가하고 도서를 완료 시켰다면 그 상태를 更新할 수 있습니다. 목차 Convex이란 무엇인가? 프로젝트를 설정하는 방법 스키마를 만드는 방법 UI를 만드는 방법 CRUD 함수를 만드는 방법 스타일링 요약 Convex이란 무엇인가? Convex은 Baas 플랫폼으로, 백 엔드 開発을 간단하게 해줍니다.…

非同期 데이터 변경과 처리는 현代의 웹 应用程序에서 필요한 任务입니다. 데이터를 데이터 저장소에 저장하고, 이메일을 发送하고, PDF를 다운로드하고, 이미지를 처리하는 것과 같은 任务을 서버上调用 独立的非同期 函数가 필요할 수 있습니다. Next.js는 Server Actions를 제공합니다. 이러한 非同期 함수는 서버上调用되며, 서버 이벤트를 사용하여 데이터 변경을 처리할 수 있습니다. Server Actions는 서버와 클라이언트 컴포넌트로부터 호출되며, 데이터 수정을 처리할 수 있습니다. Server Actions은 폼 제출 이벤트에 대응하여 해당 이벤트가 발생할 때 동작할 수 있는 것을 제공합니다. 이 articl에서는 Next.js Server Actions를 사용하여 추가적인 인자를 처리하는 실제…

STOMP은 rabbitMQ, ActiveMQ, Apollo 과 같은 인기 있는 서버에서 구현되어 있る 简単하고 강력한 메시지 보내는 protocol입니다. WebSocket를 통해 STOMP을 사용하면 간단한 protocol을 사용하여 web browser에서 메시지를 보내는 것이 인기 있습니다. AMQP과 같은 protocol은 브라우저가 TCP 연결을 허용하지 않기 때문에 제한이 있습니다. WebSocket를 통해 STOMP을 사용하려면 @stomp/stompjs를 사용할 수 있지만, 어려운 callback과 복잡한 API가 더 specialized use case에 대응되는 것입니다. 幸运的是, 더 적은 사용자들이 知られている @stompjs/rx-stomp가 있습니다. 이는 RxJS observable를 통해 좋은 interface를 제공합니다. Observable은 Angular에서만 사용되는 것이 아니며, React가 어떻게…