이 포스팅에서는 ES14 (ECMAScript 2023, 에크마스크립트 2023)의 새 기능과 개량된 점들을 알아보겠습니다. 1. Record와 Tuple 타입 ES14에서는 새로운 두 가지 타입을 선보입니다. Record와 Tuple 타입인데요, 복잡한 데이터 구조를 간단히 이용하게 도와줍니다. Record 타입은 object 타입과 비슷하지만, 각 값마다 정해진 키와 데이터 타입이 쓰입니다. Tuple은 정렬된 데이터 컬렉션입니다, 그리고 각각 데이터 타입이 다를 수 있죠. 아래는 ES14에 선보이는 record와 tuple 타입의 예제입니다: type Person = { name: string; age: number; address: [string, string, number]; }; const j..

개발 (Development & Coding)/한글본 (Korean) 2023. 5. 10. 06:00

PWA (Progressive Web Applications) has been around us for a while. It makes an web app look like a native application, with configurable push notifications and offline functions. More and more browsers are supporting this technology now. You can even add the application to Google Play Store and Apple App Store. SPA (Single Page Applications) already include PWA functions or you can easily swtich..

개발 (Development & Coding)/영문본 (English) 2023. 4. 30. 06:00

Detecting page change event in all devices is a difficult job because of different ecosystem. Especially iOS has its own browser ecosystem that are different and sometimes incompatible with other systems, even with macOS within the same company. The iOS browser ecosystem is applied to ALL different browsers in iOS, so if you use Chrome in iOS, it is NOT the same Chrome you use on other systems. ..

개발 (Development & Coding)/영문본 (English) 2023. 3. 13. 06:00

With one block of codes, you can create a modal Alert and Confirm dialog box with callbacks. It has the following functions: Alert Dialog Box (without a callback) Alert Dialog Box (with a callback) Confirm Dialog Box (with callbacks - yes and no) The reason I created this code was that the alert and confirm windows in a browser is not customizable and their design is from the stone age. The code..

개발 (Development & Coding)/영문본 (English) 2023. 3. 1. 06:00

Creating a versatile and stable popup window in a web app is a difficult task because browsers and OS's behave differently. After some research and trial-and-error, I have found that the method below makes is possible to be compatible on all browsers in any OS environments (Windows, Android, macOS and iOS). The biggest hurdle was the Safari browser in iOS and macOS. In iOS, you have to enable Po..

개발 (Development & Coding)/영문본 (English) 2023. 2. 18. 15:30

This article describes how to comunicate with a gRPC-Web proxy server with the Protobuf compilation files we created from the Part 1. Part 1: https://ranku.tistory.com/161 React & gRPC-Web : PART 1 - How To Compile Protobuf in Windows Environment This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. Thi is only front-..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 16:31

This article discusses how to compile gRPC-Web's Protobuf file for React (or other JavaScript-based web app) in Windows environment. Thi is only front-end side. The backend must be setup as gRPC-Web server using .NET gRPC service with gRPC-Web or Envoy proxy. In order for gRPC-Web clients to communicate with the backend gRPC-Web servers, the fontend apps must have Protobuf compilation files. The..

개발 (Development & Coding)/영문본 (English) 2023. 1. 29. 15:59

하나의 코드로 Confirm과 Alert 기능을 다 쓸 수 있는 다이얼로그 박스 (또는 모달 창) Dialog Box입니다. 하나의 코드로 다음의 세 가지 기능을 구현할 수 있습니다: Alert 창 콜백이 있는 Alert 창 콜백이 있는 Confirm 창 이 코드를 만든 이유는 브라우저의 alert와 confirm 창이 디자인 적으로 아주 구리(?)다라는 생각이었고 bootstrap modal로 어떻게 하면 콜백을 첨가하여 브라우저의 창 같은 기능을 원하는 디자인으로 재구현 할 수 있을까였습니다. 우선 아래의 HTML 코드를 넣어줍니다. 아래의 코드는 Bootstrap의 모달 창 (Modal Dialog)을 변형 한 코드입니다. 디자인을 하기 위한 CSS 클래스는 각자 알아서 쓰시기 바랍니다 ^^; 닫기..

개발 (Development & Coding)/한글본 (Korean) 2023. 1. 23. 06:00