<!DOCTYPE html>
앞서 설명한 사용자 인터페이스의 기본 레이아웃은 왼쪽 영역은 제어 요소 표시를 위해 할당되고 오른쪽 영역은 출력 표시를 위해 예약된 사용자 인터페이스의 기본 레이아웃을 설명합니다. 그 다음에는 main.js 파일에 액세스하여 그 안에 있는 기존 콘텐츠를 모두 삭제하고 스타일.css를 가져오기 위해 한 줄의 코드를 통합해야 합니다.
import './style.css'
로렘 파일 가져오기 및 전역 변수 정의하기
지정된 GitHub 리포지토리에서 “lorem.js” 파일의 콘텐츠를 가져와 개인 버전의 “lorem.js” 파일에 복제하시기 바랍니다. “lorem.js” 파일의 목적은 다양한 JavaScript 파일에서 활용할 수 있는 확장된 로렘 입섬 텍스트 시퀀스를 제공하기 위한 것입니다.
main.js 파일의 JavaScript 코드는 lorem.js 파일에서 로렘 입섬 문자열을 가져와 애플리케이션의 기능에 필요한 변수를 선언합니다.
import { lorem } from './lorem';
본 코드는 로렘 텍스트에서 모든 구두점을 제거하기 위해 규정된 패턴을 사용합니다. 텍스트 변수는 단어와 문장의 생성을 용이하게 하기 위해 로렘 텍스트의 처리된 변형을 첨부하는 데 사용됩니다.
생성기 함수 만들기
무작위로 생성된 문장이나 단락이 진짜처럼 보이도록 하려면 적절한 구두점을 포함해야 합니다. 이를 위해 필요한 전역 변수를 설정한 후 ‘generateRandomPunctuation()`이라는 함수를 개발할 수 있으며, 이 함수에는 ‘문자’라고 하는 배열이 포함될 것입니다.그런 다음 이 배열은 앞서 언급한 함수 내에서 채워집니다.
function generateRandomPunctuation() {
앞서 언급한 코드는 다양한 구두점 기호로 구성된 “characters”라는 이름의 배열을 설정합니다. 또한 “character”라는 또 다른 변수를 생성하고 그 값을 “characters” 배열에서 선택한 임의의 요소로 설정합니다. 마지막으로 전역 변수 “lastChar”에 함수와 동일한 값이 할당되며, 이 변수는 이후 프로그램의 출력으로 사용됩니다.
기본값이 100인 선택적 정수 매개변수 ‘count’를 받는 `generateParagraph`라는 함수를 만듭니다.
function generateParagraph(count = 100) {
광범위한 언어 말뭉치에서 추출한 다양한 구문을 선택하고 연결하는 새로운 메커니즘을 도입하고자 하는 시나리오를 고려해 봅시다. 이러한 맥락에서, “paragraph”로 지정된 배열을 초기화하여 “global\_text”로 명명된 다른 배열에서 무작위로 선택된 텍스트의 개별 부분으로 채우는 함수의 활용을 제안합니다. 이렇게 선택된 세그먼트는 미리 정해진 알고리즘에 의해 결정된 순서대로 문단 배열에 추가됩니다. 이 프로세스는 단어와 문장의 고유한 조합을 생성하여 혁신적인 표현을 촉진하고 서면 커뮤니케이션의 전반적인 품질을 향상시키는 역할을 합니다.
let paragraph = [];
무엇을 도와드릴까요?
let fl=paragraph[0];
각 문장은 문장 부호(일반적으로 마침표)로 끝나므로 각 단락의 끝에 마침표를 삽입하는 코드를 추가해야 합니다.
let lwPos = paragraph.length - 1;
단락 배열 내의 임의의 구성 요소에 예측할 수 없는 구두점을 추가하는 기능을 구현합니다.
paragraph.forEach((word, index) => {
다음 코드 부록은 구두점 집합에서 임의의 기호를 생성하여 문단 컬렉션에서 무작위로 선택된 단어의 마지막 부분에 첨부합니다. 그 후 추가된 문장 부호가 쉼표와 일치하지 않으면 이어지는 텍스트 조각의 대소문자를 수정합니다.
궁극적으로 활용된 알고리즘은 단락 배열 형태의 출력을 생성한 다음 실용적인 목적을 위해 문자열 형식으로 변환합니다.
return paragraph.join(" ");
로렘 입섬 텍스트의 구조 구성은 사용자가 원하는 단락 수에 따라 지정할 수 있습니다. 이러한 다양한 목적을 수용하기 위해 배열로 대표되는 정렬된 데이터 모음을 사용하여 콘텐츠의 구조적 처리를 묘사하는 것이 가능합니다.예를 들어, 사용자가 세 개의 단락으로 구성된 로렘 입섬 구절을 생성하고자 하는 경우 구조를 나타내는 배열은 다음과 같이 표현할 수 있습니다:
structure = ["First paragraph.", "\n \n", "Second paragraph.", "\n \n", "Third paragraph"]
코드 블록은 이중 줄바꿈(“\n \n”)으로 구분된 일련의 명령어로 구성됩니다. 이러한 명령이 실행되면 웹 브라우저의 개발자 콘솔에 표시되는 형식화된 출력이 생성됩니다. 구체적으로, 주어진 컨텍스트 내에서 “console.log(structures[i].join(“\n”))” 명령을 실행하면 다음과 같은 결과를 얻을 수 있습니다.
서론, 본문, 결론 섹션은 물론 주제 문장, 뒷받침하는 세부 정보, 결론문을 포함하는 단락 구조를 구성하는 프로세스를 자동화하는 함수를 고안할 수 있습니다. 이 함수는 주어진 입력 또는 매개변수를 기반으로 일관성 있고 잘 구성된 단락을 생성하기 위해 “generateParagraph”라는 다른 함수를 호출할 수 있습니다.
function generateStructure(wordCount, paragraph = 1) {
컨트롤에 이벤트 리스너 추가
“입력” 이벤트는 콜백 함수를 통해 “wordCountControl” 입력 요소에 추가되며, 입력 값은 변수 “wordCount”에 할당됩니다. 그 후 레이블의 콘텐츠가 현재 값인 “wordCount”로 업데이트됩니다.
wordCountControl.addEventListener("input", (e) => {
입력 필드에 입력된 값과 동일한 parraphCount 변수의 값을 설정하고 그에 따라 문단 수 레이블의 표시를 업데이트하여 parraphCountControl 요소에서 “입력” 이벤트를 처리하는 함수를 추가합니다.
paragraphCountControl.addEventListener("input", (e) => {
복사 버튼에 “클릭” 이벤트 리스너가 추가되며, 이 리스너는 트리거되면 원격으로 “copyText()” 함수를 호출합니다.
copy.addEventListener("click", ()=>copyText());
마지막으로 양식 HTML 요소에 ‘제출’ 이벤트에 대한 이벤트 리스너를 통합하고, 이 이벤트의 콜백 함수 내에서 ‘updateUI’ 함수를 실행해야 합니다.
document.querySelector("form").addEventListener('submit', (e) => {
UI 마무리 및 업데이트
이 함수의 목적은 일부 애플리케이션 또는 시스템에서 제어 목적으로 사용되는 두 가지 값, 즉 ‘wordCount’와 ‘paragraphCount’를 검색하는 것입니다. 이 함수는 코드 내 다른 곳에서 쉽게 활용할 수 있도록 이 값을 객체로 반환합니다.
function getControlValues() {
아래 코드는 서버에서 얻은 결과로 UI를 업데이트하는 자바스크립트에서 `updateUI()`를 구현할 수 있는 예시입니다. 이 코드는 HTML과 CSS를 사용하여 페이지에 콘텐츠를 표시합니다. 번역이 필요한 텍스트는 `textToTranslate`와 `translatedText` 변수에 저장됩니다. 번역 API 응답은 `translationObj` 변수에 저장됩니다.“`자바스크립트 함수 updateUI(translationObj) { const textContainer = document.getElementById(‘text-container’); const sourceText = document.getElementById(‘source-text’).value; const targetText = document.getElementById(‘target-text’).value; // 객체에서 번역된 텍스트를 가져옵니다. let translatedText = ”; if (translationObj && translationObj[‘translations’])
function updateUI() {
이 코드는 사용자가 “클립보드에 복사” 버튼을 클릭하여 트리거되면 선택한 텍스트를 클립보드에 복사하는 `copyText()`라는 메서드를 제공합니다.
async function copyText() {
다음 텍스트는 소프트웨어 애플리케이션에서 사용자 인터페이스를 업데이트하라는 요청과 함께 “updateUI()” 함수를 호출하는 내용입니다: “이 특정 카테고리에 더 이상 항목이 남아 있지 않음을 반영하여 UI를 업데이트해 주세요. 또한 준비가 되면 재고 화면의 남은 수량 카운트도 업데이트하세요.
updateUI();
JavaScript와 Vite를 모두 활용하여 로렘 입섬 텍스트 생성기를 성공적으로 구축한 것을 진심으로 축하드립니다.
Vite로 자바스크립트 개발을 강화하세요
Vite는 선호하는 프론트엔드 프레임워크를 쉽게 구축할 수 있는 존경받는 프론트엔드 도구입니다. React, Svelte, SolidJS, 심지어 순수한 JavaScript와 같은 다양한 프레임워크를 포괄합니다. 손쉬운 설정과 빠른 속도 덕분에 상당수의 자바스크립트 개발자가 Vite를 사용하고 있습니다.
글 내비게이션
