비전공자 개발일기

React, Vue 및 Svelte는 동적 사용자 인터페이스를 구축하는 데 사용되는 인기 있는 프런트 엔드 프레임워크입니다. [React] React의 장점에는 크고 활동적인 커뮤니티, 우수한 문서, 재사용성을 촉진하는 구성 요소 기반 아키텍처가 포함됩니다. 단점으로는 가파른 학습 곡선, 장황한 구문, 상태 및 라우팅을 관리하기 위한 추가 라이브러리의 필요성이 있습니다. [Vue] Vue의 장점에는 완만한 학습 곡선, 명확한 문서, 읽고 쓰기 쉬운 템플릿 기반 구문이 포함됩니다. 단점은 React보다 작은 커뮤니티와 구성 요소 기반 아키텍처의 유연성이 낮다는 것입니다. [Svelte] Svelte의 전문가는 빌드 시 코드를 컴파일하여 로드 시간을 단축하고 번들 크기를 더 작게 만들어 성능을 최적화하는 고..

목적 웹 페이지 내 Javascript의 alert event를 iOS 기기에서도 동일하게 나타내기 위함 import UIKit import WebKit class ViewController: UIViewController, WKNavigationDelegate { var webView: WKWebView! override func loadView() { let webConfiguration = WKWebViewConfiguration() webView = WKWebView(frame: .zero, configuration: webConfiguration) webView.navigationDelegate = self webView.uiDelegate = self webView.allowsBackForwa..

LOADING... @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400); html, body { height: 100%; } body { background: radial-gradient(#222922, #000500); font-family: 'Source Code Pro', monospace; font-weight: 400; overflow: hidden; padding: 30px 0 0 30px; text-align: center; } .word { bottom: 0; color: #fff; font-size: 2.5em; height: 2.5em; left: 0; line-height: 2.5em; margin: aut..

to do list Add Insert a new task @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap"); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; user-select: none; } html, body { width: 100%; height: 100%; } a { text-decoration: none; color: inherit; } body { displa..

Counter APP 0 decrement reset increment * { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 16px; color: #333; width: 400px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; background-color: #ABDCF0; } h1 { text-transform: uppercase; } .counter-preview { font-size: 8rem; font-weight: 700; color: #333; } bu..

body { background-color: #111; overflow: hidden; text-align:center; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 100%; height: 100%; visibility: hidden; cursor: pointer; } let select = (s) => document.querySelector(s), selectAll = (s) => document.querySelectorAll(s), mainSVG = select("#mainSVG"); gsap..

Choose File(s) body{ background: no-repeat center url("https://i.postimg.cc/VLTVtKwp/image.jpg"); background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .file-upload { display: flex; justify-content:center; align-items: center; font-size: 15px; } .file-upload__input { display: none; } .file-upload__button { -webkit-appearance: ..

body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Initialize the GL context var gl = canvas.getContext("webgl"); if (!gl) { console.error("Unable to initialize WebGL."); } //Time var time = 0.0; //************** Shader sources ********..