프로그래밍/Web (20) 썸네일형 리스트형 [tauri] 테스트용 앱 기본 구성 간단한 용도로 나름 UI를 갖춘 앱 만들때 가끔 사용하기 위해 기본적인 프로젝트 설정 정리웹은 만질일이 없다보니 할때마다 기억이.... 앱 템플릿npm create tauri-app@latestfrontend : TypeScript / JavaScriptpackage manager : npmUI template : ReactUI flavor : TypeScriptnpm install tailwindcssInstall Tailwind CSS with Create React App - Tailwind CSSnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p tailwind.config.js 수정module.exports = { .. 리액트 주요 요소 JSXHTML 과 비슷한 형식으로 스크립트 작성 가능기존 HTML 형식과 비슷하지만 속성값등은 카멜 케이스 형식으로 사용해야 함변수, 객체 등 참조하는 경우 { } 사용 CSSimport MyCSS from './My.css';function App() { return ( . . );}export default App; 컴포넌트JSX내의 태그를 커스텀하게 생성function, class 가능const HelloWorld = function() { return HelloWorld}export default HelloWorld;jsx 에서 와 같이 사용 component props컴포넌트에 전달할 읽기전용 속성const defau.. [tauri] 개발환경 윈도우즈빌드 툴 설치 : Visual Studio 를 설치하거나 아래에서 빌드 툴 설치Microsoft C++ Build Tools - Visual Studio WebView2 : 윈도우 11에는 포함되어 있으며, 윈도우 10은 아래에서 에버그린 부트스트래퍼 다운로드해 설치https://developer.microsoft.com/en-us/microsoft-edge/webview2 rustInstall Rust - Rust Programming Language (rust-lang.org)curl 사용curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh winget 사용winget install --id Runstlang.Rustup wsl 에서 .. [JavaScript] Promise, async/await Promise 비동기 작업을 처리할 Promise 리턴 함수 작성function doAsyncFunction() { return new Promise( (resolve, reject) => { // 시간이 걸리는 작업 // 작업 완료 후 resolve() 를 호출해 준다. resolve( outData ); //작업이 실패한 경우 reject() 를 호출해 준다. reject( errData ); });} then() 을 사용해 처리 결과 받는 두가지 방법1. then() 호출시 두인자( resolve(), reject() ) 를 전달doAsyncFuntion().then( (outData) => { re.. WebXR + three.js XR navigator.xr 지원여부 검토 if( navigator.xr && XRSession.prototype.requestHitTest ) { // XRDevice 얻기 } else { // 미지원 브라우저 } XRDevice // XRDevice 얻기 this.device = await navigator.xr.requestDevice(); // canvas 생성하고, 출력을 위한 xr 컨텍스트를 얻는다. var outputCanvas = document.createElement('canvas'); var ctx = outputCanvas.getContext('xrpresent'); XRSession // XRSession 얻기 const session = await this.device.reque.. javascript 모듈화 패턴 prototype 을 이용한 패턴일반적인 방식으로 동일하게 사용되는 내용을 prototype에 정의해 불필요한 메모리 할당을 막게 된다. MyPackage.MyClass = function() {// 멤버 어트리뷰트this.object1 = something;this.object2 = {key1: value,key2: value,} }; MyPackage.MyClass.prototype = {constructor: MyPackage.MyClass, // 공통 멤버 정의memeber: function() {}}; 즉시실행 함수를 이용한 패턴크게 prototype 방식을 즉시실행 함수로 한번더 감싼 형태로 this를 붙이지 않은 객체들과 내부 기능처리 함수들을 캡슐화 하는 효과가 있다. MyPackage.M.. VSCode 웹 디버깅 Live ServerDebugger for Chrome Live Server 기본포트 : 5500 launch.json { // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. // 기존 특성에 대한 설명을 보려면 가리킵니다. // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "localhost에 대해 Chrome 시작", "url": "http://localhost:5500", "webRoot": "${workspaceFolder}", "source.. openssl * openssl.cnf 경고 발생하는 경우 해당 위치 지정set OPENSSL_CONF=c:\apache\conf\openssl.cnf 개인키 생성 : 일단 -des3 옵션없이 생성한다.> openssl genrsa -out server.key 2048 csr : 원하는 알고리즘으로 csr 생성기본(sha1)> openssl req -new -key server.key -out server.csr sha256> openssl req -new -sha256 -key server.key -out server.csr Common Name : 도메인 or ip 주소 입력 자체서명 인증서 생성> openssl x509 -req -days 365 -in server.csr -signkey server_rsa.ke.. 이전 1 2 3 다음