쵸코쿠키의 연습장

워크플로우 프로세스를 포함하는 Angular 타임시트 응용 프로그램을 개발하기 위한 상태 전환 기술에 대해 설명합니다. Angular는 워크플로우 프로세스 관리와 같은 복잡한 UI 애플리케이션을 개발할 수 있는 훌륭한 플랫폼을 제공합니다. 이 기사에서는 워크플로우 프로세스를 포함하는 Angular 타임시트 응용 프로그램을 개발하기 위한 상태 전환 기술에 대해 설명합니다. 타임시트 제출 및 승인 워크플로우 프로세스는 이 기법을 설명하기 위한 예로 간주됩니다. 다음과 같은 경로 구성에서 시작하여 Angular 타임시트 애플리케이션을 신속하게 개발할 수 있습니다: const appRoutes: Routes = [ { path: 'timesheet', component: TimesheetComponent }, ..

React v18의 세 가지 주요 기능인 서버의 자동 배치, 전환 및 서스펜스에 대해 설명합니다. 리액트 v18은 2021년부터 회자되어 마침내 출시되었습니다. React v18은 성능과 사용자 경험을 향상시킬 수 있는 흥미로운 새로운 기능을 제공합니다. 이 릴리스의 주요 강조점은 동시 모드, 새로운 후크, 리액트의 엄격한 모드 API의 개선점입니다. Resacton 2022 컨퍼런스에서 Shruti Kapoor가 제시한 표를 기반으로 구성되었습니다. React v18의 세 가지 주요 기능인 자동 배치, 전환 및 서버의 서스펜스를 다룹니다. 또한 동시성의 개념과 React DOM Client and Server에 도입된 새로운 API에 대해서도 다룰 것입니다. 마지막으로, useId 및 useTransi..

오늘날, 우리는 웹사이트와 애플리케이션을 구축하기 위해 끊임없이 다른 프로그래밍 언어를 배웁니다. 또한 밀려나지 않고 세계의 최신 개입에 대한 최신 정보를 유지하는 것이 중요합니다. 모든 프로그래밍 언어는 그 중요성과 차별성을 가지고 있습니다. 각각의 특성과 용도가 다르기 때문에 하나를 다른 하나와 비교하는 것은 잘못된 것입니다. 하지만 우리 모두는 여러 작업을 할 수 있는 기계 언어를 배우고 싶어합니다. 그러한 언어 중 하나가 자바스크립트인데, 자바스크립트는 그들이 크든 작든 상관없이 모든 회사에서 공간을 만들었습니다. 편리하고 가치가 있으며 고객을 위한 대화형 응용프로그램 및 웹 페이지를 만들 수 있습니다. 처음에는, 그것은 약간 제한적이었지만, 지금은 시장에서 가장 유명한 언어들에 경쟁을 주고 있습..

JavaScript에서 숫자를 통화 형식으로 지정하는 방법에 대해 설명합니다. 모든 국가는 자국의 통화와 다른 패턴 또는 화폐 금액을 표시하는 방법을 가지고 있습니다. 숫자를 적절하게 표현할 때, 독자들은 더 읽기 쉽고 이해하기 쉽습니다. API 또는 외부 리소스의 데이터를 사용하는 경우 데이터는 일반 형식으로 표시됩니다. 예를 들어 스토어를 생성하는 경우 가격과 같은 데이터가 있을 수 있습니다. JavaScript에서 숫자를 통화 형식으로 지정하는 방법에 대해 설명합니다. const Journals = [ { "id": 01, "name": "Software Development", "price": 100.80, }, { "id": 02, "name": "Introduction to Programmin..

React Native는 iOS 및 Android 플랫폼용 앱 개발을 허용하지만, 개발자가 해결해야 할 플랫폼별 차이점이 있습니다. 오늘날의 빠른 속도의 디지털 세계에서 모바일 앱 개발은 기업이 시장에서 성공하기 위한 중요한 측면이 되었습니다. 그러나 다양한 플랫폼을 사용할 수 있기 때문에 프로젝트에 적합한 플랫폼을 선택하는 것이 부담스러울 수 있습니다. 그러나 React Native는 유연성, 성능 및 비용 효율성으로 인해 앱 개발을 위한 선도적인 선택으로 부상했습니다. React Native는 개발자가 단일 코드베이스를 사용하여 iOS 및 Android 플랫폼용 네이티브 앱을 구축할 수 있는 오픈 소스 모바일 애플리케이션 개발 프레임워크입니다. 페이스북이 개발한 리액트 네이티브는 최근 몇 년 동안 엄..

이 글에서는 다양한 기능을 탐색하여 이 두 가지의 차이점을 살펴보고 응용 프로그램에 적합한 기술을 결정해 보겠습니다. 웹 애플리케이션을 만들 수 있는 최고의 플랫폼을 직접 선택하는 것은 어려운 작업입니다. 많은 사람들이 몇몇 중에서 하나를 선택하는 것에 당황했습니다. 여기에는 올바른 기술을 쉽게 식별할 수 있는 다양한 기능이 포함되어 있습니다. 우리는 다양한 앱과 해당 앱의 차이점에 대해 논의할 것입니다. Node.js Node.js는 웹 응용 프로그램을 위한 JavaScript 런타임 환경입니다. 프로그래머는 개발을 위해 Node.js를 백엔드로 사용할지 프런트엔드로 사용할지 결정해야 합니다. Node.js의 이점 응용프로그램의 신속한 실행. 앱 개발 중에는 버퍼 시간이 필요하지 않습니다. 실행 프로세..

React Native와 Kotlin을 비교하여 예제 애플리케이션을 포함하여 어떤 애플리케이션이 자신의 요구에 더 적합한지 확인할 수 있습니다. 모바일 앱은 신흥 플랫폼으로 자리 잡았고, 모바일 앱 트래픽은 매우 많아 국민들로부터 좋은 반응을 얻고 있습니다. 그래서 기업가들은 그들의 사업을 한 단계 발전시키기 위해 모바일 앱 개발 과정에 집중하고 있습니다. 모든 비즈니스 요구 사항을 충족하기 위해 많은 기술이 도입되고, 많은 개발자와 기업이 서로 다른 언어와 프레임워크로 혼동하고 있습니다. 따라서 React Native 및 Kotlin과 같은 가장 유명한 기술에 대해 논의하여 어떤 프레임워크가 귀사의 애플리케이션에 가장 적합한지 알아보겠습니다. 슬슬 출발 해야지요. 리액트 네이티브 페이스북은 모바일 애플..

독자들은 인기 있는 MEAN 스택 기술이 웹 애플리케이션을 개발하는 데 가장 적합한지 여부를 파악하는 방법을 참조하십시오. 모든 웹 또는 엔터프라이즈 애플리케이션은 고객의 필요에 따라 개발하기 위해 특정 기술(예: 프로그래밍 언어, 프레임워크, 플랫폼) 또는 기술 스택이 필요합니다. 기술 스택은 특정 애플리케이션을 구축하기 위해 여러 언어와 프레임워크를 하나의 목록으로 포함합니다. 수십억 개의 웹 사이트와 웹 앱이 사람들에 의해 호스팅되고 사용됩니다. 따라서 기술 스택의 사용 증가와 함께 웹 앱 개발에 대한 수요가 증가했습니다. 이 점에서, MEAN은 웹 애플리케이션을 구축하기 위해 강력한 개발자 커뮤니티에 의해 신뢰받는 인기 있는 기술 스택 중 하나입니다. 이 MEAN 스택이 웹 애플리케이션 개발에 어..

Java 클라이언트에서 코드를 업데이트하여 원래 기본 클러스터에 연결할 수 없는 경우 보조 페일오버 클러스터에 자동으로 연결하는 방법에 대해 알아봅니다. 페일오버는 거의 일정한 가용성에 의존하는 시스템의 중요한 기능입니다. Hazelcast에서는 클라이언트가 기본 클러스터에 연결할 수 없을 때 페일오버 클라이언트가 트래픽을 보조 클러스터로 자동 리디렉션합니다. 재해 복구 전략의 일부로 WAN 복제와 함께 페일오버 클라이언트를 사용하는 것을 고려해 보십시오. 이 튜토리얼에서는 Java 클라이언트의 코드를 업데이트하여 원래 기본 클러스터에 연결할 수 없는 경우 보조 장애 조치(failover) 클러스터에 자동으로 연결합니다. 또한 간단한 테스트를 실행하여 구성이 올바른지 확인한 다음 예외 처리를 포함하도록 ..

Node.js를 사용할 경우의 이점에 대해 설명하고 Node.js가 프런트엔드 또는 백엔드 기술인지 여부와 이 기술을 통해 해결되는 문제에 대해 설명합니다. Node.js를 사용하여 백엔드를 구축하는 것은 새로운 방식이 아니므로 위험을 감수하고 개척자가 될 필요가 없습니다. 대신에, 페이팔, 넷플릭스, 나사와 같은 큰 회사들은 그것의 효과를 증명했습니다. NAT 전문가들이 Node.js를 사용할 경우의 이점에 대해 설명하고 노드 js가 프런트엔드 기술인지 백엔드 기술인지, 어떤 문제를 해결하는지에 대해 답변합니다. 궁극적으로, 당신은 이 기술이 당신에게 적합한지를 알게 될 것입니다. Node.js란 Node.js는 JavaScript용 서버 런타임 환경입니다. 이 기술을 통해 엔지니어는 서버 및 클라이언..

다음은 키를 사용하여 배열 및 그룹을 만드는 데 사용할 수 있는 도우미 기능입니다. const groupBy = function (data, key) { return data.reduce(function (carry, el) { var group = el[key]; if (carry[group] === undefined) { carry[group] = [] } carry[group].push(el) return carry }, {}) } export { groupBy } 그룹화할 키와 함께 배열을 전달하여 배열에서 이 기능을 사용할 수 있습니다. let array = [ { name: "Name 1", value: 15 }, { name: "Name 1", value: 30 }, { name: "Name..

Google PageSpeed를 통해 웹 사이트를 실행하면 렌더링 차단 파일로 Google 웹 글꼴 스크립트가 강조 표시됩니다. WebFontLoader를 사용하여 비동기식으로 페이지에 웹 글꼴을 로드하여 이 파일에서 렌더 차단을 제거합니다.

코드 분할이라는 웹팩 기능을 살펴 보겠습니다. 코드 분할을 사용하면 기본 JavaScript 파일을 다른 파일로 분할하여 필요할 때마다 느리게 로드하여 기본 JavaScript 파일의 크기를 줄일 수 있습니다. JavaScript 파일이 매우 클 수 있으므로 단일 페이지 애플리케이션을 빌드 할 때 매우 중요한 기능입니다. 즉, 페이지를 시작하기 전에 페이지가 다운로드 될 때까지 기다려야합니다. 코드 분할을 사용하면 코드를 여러 파일로 분할하고 앱에서 페이지를 표시하는 데 필요한 파일만 다운로드 할 수 있습니다. 예를 들어 단일 페이지에서 구성 요소만 사용하는 경우 앱의 모든 페이지에서 해당 구성 요소를 로드할 필요가 없습니다. 코드 분할 Webpack을 사용하면 필요할 때만 해당 구성 요소에 로드가 지연..

jQuery와 ZeroClipboard 플래시 확장을 사용하여 복사하여 붙여 넣기 단추를 만드는 방법을 살펴 보았습니다. 이것의 문제는 플래시가 필요하다는 것입니다. 대부분의 웹은 플래시에서 멀어지고 일부 사람들은 브라우저에 플래시를 설치하지 않았으므로 다른 솔루션이 필요합니다. 플래시가 복사 및 붙여 넣기에 사용 된 이유는 주로 브라우저 호환성으로 인한 것입니다. 이제 대부분의 브라우저는 이제 API를 지원하여 웹 API document.execCommand를 사용하여 Javascript를 사용하여 직접 복사하여 붙여 넣을 수 있습니다. HTML 먼저 페이지에 HTML을 추가하여 복사 할 컨텐츠를 입력 할 텍스트 상자, 복사 프로세스를 시작하는 클릭 이벤트가있는 버튼 및 컨텐츠를 붙여 넣음으로써 복사를..

많은 웹 사이트에서 가장 인기있는 트렌드는 맨 위로 이동 버튼이며,이 버튼을 클릭하면 자동으로 페이지 맨 위로 스크롤됩니다. 이전에는 애니메이션 기능을 사용하여 jQuery를 사용하여 브라우저를 맨 위로 부드럽게 스크롤하는 방법을 설명했습니다. 맨 위로 jQuery를 사용하여 작업 한 여러 새로운 웹 사이트에서 이 스크립트를 많이 사용했지만 최근에는 웹 사이트 성능에 더 많은 노력을 기울이고 페이지 로딩 시간을 단축하는 방법에 대해 연구했습니다 . 노력한 가장 큰 것 중 하나는 jQuery를 응용 프로그램에 로드 할 필요가 없으며 순수한 JavaScript를 사용하는 것입니다. jQuery를 필요한 경우가 있다는 것을 알고 있으며 전혀 사용할 필요가 없다고 말하지는 않지만 간단한 클릭 이벤트만하면 jQu..

다음은 ucfirst에 대한 JavaScript 버전에 대한 빠른 코드 스니펫입니다. 이 코드 스니펫을 사용하면 JavaScript를 사용하여 문자열의 첫 글자를 대문자로 지정할 수 있습니다. function jsUcfirst(string) { return string.charAt(0).toUpperCase() + string.slice(1); } 이 코드 스니펫은 JavaScript 함수 charAt를 사용하여 특정 색인의 문자를 가져옵니다. var firstLetter = string.charAt(0); 다음으로 JavaScript에서 대문자 함수를 사용하여이 문자열을 대문자로 설정합니다. var uppercaseFirstLetter = string.charAt(0).toUpperCase(); 그런 ..

웹이 너무나 다양한 장치에서 사용되고 있으므로 다양한 화면 크기에 맞게 디자인을 변경할 수 있어야합니다. 화면 크기에 따라 디스플레이를 변경하는 가장 좋은 방법은 미디어 쿼리를 사용하여 화면의 크기 뷰포트를 찾고 사용중인 화면 크기에 따라 디자인을 변경하는 것입니다. 미디어 쿼리 중단 점을 정의하여 이와 같은 다른 장치의 디자인을 변경할 수 있으므로 주로 CSS 파일에서 이러한 변경을 수행합니다. /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { }..

테이블에서 jQuery UI 정렬 가능 함수를 사용하면 드래그하는 행의 너비가 축소되어 이상한 사용자 경험이 발생할 수 있습니다. 도우미 함수를 사용하여 행을 원래 너비로 끌어 오는 너비를 변경하는 방법을 살펴 보겠습니다. jQuery Sortable은 아래에서 찾을 수있는 jQuery UI 라이브러리의 일부입니다. jQuery Sortable 정렬 가능한 행을 갖도록 테이블을 정의하려면 정렬 가능한 메소드를 행의 부모 element에 적용하면됩니다. 일반적으로 테이블 자체 또는 이상적으로는 테이블 본문이 됩니다. Film Date Rating The Shawshank Redemption 1994 9.2 그런 다음 다음 jQuery 코드를 사용하여 테이블 본문 행을 정렬 가능하게 만들 수 있습니다. $(..

웹 사이트에서 타사 응용 프로그램 JWplayer를 사용하여 비디오를 표시하는 방법과 이러한 비디오를 반응형으로 만드는 방법을 쉽게 보여주는 코드를 보여줍니다. JWPlayer는 비디오를 보고있는 브라우저에 따라 플래시 또는 HTML5 비디오를 자동으로 전환하는 비디오 플레이어입니다. 즉, HTML5 비디오와 함께 제공되는 모든 브라우저 지원 문제를 처리합니다. HTML5 비디오는 IE8 이하를 제외한 모든 브라우저에서 제대로 작동합니다. JWPlayer는 사용중인 브라우저 버전을 확인하고 HTML5 또는 Flash를 사용하여 비디오를 재생합니다. 또한 JWPlayer를 사용하면 플레이어를 자신의 이미지로 사용자 정의 할 수 있으므로 웹 사이트에 맞게 쉽게 브랜딩 할 수 있습니다. 사이트에 YouTube..

최근에 다른 하이라이터와 달리 Prism.js라는 새로운 구문 하이라이터를 사용하도록 전환하였습니다. Prism.js는 기본적으로 매우 가벼우며, 추가 옵션을 추가하여 더 많은 옵션이나 새로운 테마를 라이브러리에 추가할 수 있습니다. 현재 선택할 수 있는 테마는 6가지 이며 다운로드 시 패키지에 포함할 테마를 선택할 수 있습니다. Prism.js는 매우 가볍도록 선택할 수 있습니다. Prism.js는 매우 가볍도록 설계되었으므로 추가 기능과 테마를 추가하면 패키지 크기가 늘어납니다. Prism.js는 다른 구문 하이라이터와 마찬가지로, 코드가 코드 편집기 내부에 있는 것처럼 보이는 것처럼 코드를 표시하기 위해 로드 시 코드 태그를 사전 및 코드 태그 내부에서 변경하도록 설계되었습니다. 여기서 중요한 부분..