본문 바로가기

웹개발/front-end38

웹어셈블리(WebAssembly) 웹 어셈블리 (WebAssembly, 간단히 Wasm) 2015년 4월, 웹 어셈블리 커뮤니티 그룹(WebAssembly Community Group)에서 처음 발표한 이 기술은 웹 브라우저에서 실행되는 고성능 바이너리 코드 형식입니다. 웹어셈블리를 사용하면 C/C++ 및 Rust와 같은 언어로 작성된 모듈을 웹에서 실행할 수 있습니다. 웹어셈블리는 JavaScript API를 통해 웹 브라우저와 상호 작용할 수 있습니다. 웹어셈블리의 등장 배경  1. 2015년부터 JavaScript의 느린 속도를 보완 및 대체하기 위해 개발되었습니다.  2. 2019년부터 웹브라우저 밖 다양한 환경에서 활용하는 (런타임, WASI 등) 연구가 진행되고 있습니다.  웹어셈블리의 특징  최신 웹 브라우저에서 실행할 수 .. 2024. 6. 20.
[Node.js]EJS(Embedded JavaScript Templating) EJS는 Node.js에서 사용되는 템플릿 엔진으로, HTML 문법을 그대로 사용할 수 있는 특징이 있습니다. EJS를 사용하면 정적인 HTML에 동적인 기능을 추가할 수 있으며, 자바스크립트 문법을 사용할 수 있습니다. EJS의 주요 특징  * 동적 페이지 생성: EJS를 사용하면 서버에서 보낸 변수를 가져와 동적으로 페이지를 생성할 수 있습니다.  * 자바스크립트 코드 삽입: EJS의 기본 문법에는 주석, JS 코드, 변수 출력, 파일 분할 등이 포함되어 있습니다.  * 레이아웃 기능 지원: EJS는 Pug와 달리 레이아웃 기능을 지원하지 않지만, 부분 템플릿 기능을 제공합니다.  EJS 사용 방법  1. Node.js 프로젝트에 'ejs' 패키지를 설치합니다.  2. 뷰 엔진을 설정하여 EJS를 사.. 2024. 6. 20.
[CSS]bakcground-position background-position 속성은 CSS에서 배경 이미지의 위치를 지정하는 데 사용됩니다. 이 속성을 통해 배경 이미지의 시작 위치를 설정할 수 있습니다. background-position 속성은 다음과 같은 값을 가질 수 있습니다.  * 키워드: top, right, bottom, left, center   * 길이 값: px, em, % 등의 단위를 사용하여 배경 이미지의 위치를 지정   * 혼합 값: 키워드와 길이 값을 함께 사용하여 배경 이미지의 위치를 지정 예를 들어, background-position: center center;는 배경 이미지를 수평, 수직 중앙에 배치하는 것을 의미합니다. background-position 속성은 다음과 같은 경우에 유용하게 사용될 수 있습니다:.. 2024. 5. 18.
[React]useState 보통 html에서 값을 변경하면 웹페이지에서 새로고침을 해야 변경 된 값이 보이는데 리액트에서는 useState를 사용하면 페이지의 새로고침 없이 데이터 변경이 이루어 집니다. useState 개요 useState는 리액트 16.8 버전에 도입되었으며, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 클래스 컴포넌트에서 사용했던 state와 setState 기능을 대체할 수 있습니다. 상태 값을 쉽게 생성하고 업데이트할 수 있어 컴포넌트의 상태 관리가 간편해집니다. useState 사용법 1. useState를 import하여 사용합니다. 2. useState 함수를 호출하면 상태 값과 상태 업데이트 함수를 반환합니다. 3. 상태 값과 상태 업데이트 함수를 구조 분해 할당하여 사용합니다. 4. 상태.. 2024. 4. 22.

티스토리툴바