Front End Develop Front End Develop

아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. 이번에는 카트에 물건을 추가하는 기능을 만들어 보도록 하겠습니다. cart_products라는 새로운 상태 필드에서 장바구니에 추가 된 모든 제품을 추적합니다. 카트에 담기라는 버튼을 만들어서 각 product에 렌더링해주도록 하겠습니다. cart_products라는 버튼을 클릭하면 state로직을 업데이트 해주도록 하겠습니다. home.rs 파일을 다음과 같이 수정합니다. // src/pages/home.rs use yew::prelude::*; #[derive(Clone)] struct Product { id: i32, name: String, description: String, image: String, price: f64 } struct C..

아래의 예제는 출처에 포함된 내용을 번역 한 것입니다. WebAssembly(wasm)를 사용하면 JavaScript 이외의 언어로 작성된 코드를 브라우저에서 실행할 수 있습니다. 주요 브라우저들은 wasm을 지원하고 전 세계적으로 90% 이상의 사용자가 wasm을 실행할 수있는 브라우저를 사용하고 있습니다. Rust를 사용하면 WebAssembly로 컴파일 되기 때문에 순수하게 Rust로 SPA를 빌드할 수 있고 자바스크립트를 한줄도 사용하지 않고도 만들 수 있습니다. https://rustmart-yew.netlify.app/ RustMart rustmart-yew.netlify.app 위의 데모 사이트를 한번 방문해보세요 설치 https://www.rust-lang.org/tools/install ..

javascript를 통해서 가장 가까운 요소를 찾는 방법 중에 closest()라는 메서드가 있습니다. DOM 노드의 부모를 찾는데 어려움을 겪은 적이 있나요? Click data-id 값을 한번 가져와볼까요? const button = document.querySelector("button"); button.addEventListener("click", (event) => { console.log(event.target.parentNode.dataset.id); // normal }); 이런 케이스의 경우에는 parentNode API로도 충분합니다. 하지만 HTML 구조가 조금 더 중첩이 되면 어떨까요? 반복문으로 parentNode를 계속 돌면서 찾는 것은 매우 비효율적일 수도 있습니다. 물론 c..

스크롤 영역 자체를 보여주는 것이 디자인을 침해하는 상황이 잦습니다. 그래서 요즘 디자인에서 스크롤 영역을 가리는 부분들이 많은데요. 이를 대체하기 위한 방법들에 대해서 소개합니다. 특히 macOS같은 경우는 스크롤 시에만 스크롤을 노출 시켜줍니다. 아래의 코드들을 보시면 예시1은 스크롤에 대한 대책이 없어서 문제인 상황이고 2부터는 문제해결 상황입니다. 예시 2같은 경우는 스크립트가 별도로 필요없고, 3,4,5 같은 경우는 스크립트가 일부 필요합니다. 유용한 정보이길 바랍니다. 감사합니다. See the Pen Indicating Scrollable Content by YoungMinKim (@oinochoe) on CodePen. 출처 : https://css-tricks.com/thats-just-..

SEO를 고려한 시멘틱 마크업을 하기에 있어 strong 태그와 em 태그를 문맥상 강조할 때 많이 사용하실텐데요. 차이점은 다음과 같습니다. strong em 중요성, 긴급성, 심각성을 알리는 경우 그 부분을 강조하는 데 사용 문장 내에서 특정 문맥의 강조할 때 사용 이 중에서 중요성이라는 항목이 가장 모호할텐데요. 강조의 정도에 있어서는 em은 strong보다는 덜 강합니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#%3Cem%3E_vs._%3Cstrong%3E : The Strong Importance element - HTML: HyperText Markup Language | MDN The HTML element indi..

위와 같이 mac이나 윈도우에 푸쉬 알람오는 것을 간단하게 node.js로 만들어보겠습니다. 1. 터미널에서 push_notification이라는 폴더를 생성합니다. mkdir push_notification 2. npm init -y로 package.json을 생성해주시고 다음 패키지들을 설치해주세요. npm i web-push express body-parser 3. 설치되셨다면 index.js파일을 만들어서 다음과 같이 작성해보세요. const express = require("express"); const webpush = require("web-push"); const bodyParser = require("body-parser"); const path = require("path"); cons..

TypeScript는 Javascript에 Type을 추가하여 Compile이 필요하게 되는 언어입니다. 한번 시작해보도록 하시죠! 1. 새 프로젝트 설정 만약, 여기에서 npm도 설치되어있지 않고 Node도 설치되어 있지 않다면 Node를 설치해주시길 바랍니다. nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 현재(2021-04-26) LTS 버전인 14버전으로 설치해주시면 좋을 것 같아요. 그러면 cmd창에서 npm -v, node -v를 입력하시면 버전이 출력되는 것을 보실 수 있으실거에요. 그러면 설치가 된 것입니다. VS Code를 열어 새로운 프로젝트를..

css border를 많이들 사용하실텐데요. dashed 형태라던지 dotted 라던지.. 등등 See the Pen Dashed Border Generator by Amit Sheen (@amit_sheen) on CodePen. 위의 Trick 예시를 보시면 조금 더 다양한 일들을 할 수 있음을 알 수 있으실겁니다. 이 트릭은 4개의 백그라운드를 사용하는 것입니다. background 속성은 쉼표로 구분된 값을 사용하므로 4개의 배경(상단, 오른쪽, 하단 및 왼쪽에 하나씩)을 설정하고 테두리처럼 보이도록 크기를 조정하면 됩니다. .box { background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px,..