스벨트는 개발자들의 마음을 사로잡고 있는 급진적인 새 자바스크립트 프레임워크입니다. 간단한 구문 덕분에 자바스크립트 프레임워크의 세계로 뛰어들고자 하는 초보자에게 적합합니다. 가장 좋은 학습 방법 중 하나는 빌드를 통해 배우는 것이므로 이 가이드에서는 스벨트가 제공하는 기능을 사용하여 간단한 행맨 게임을 만드는 방법을 배웁니다.
행맨의 작동 원리
고전적인 행맨 게임에서는 두 사람이 지적 추론에 참여하며, 한 사람은 단어를 숨기고 다른 사람은 일련의 순차적 추론을 통해 단어를 해독하려고 노력합니다. 추리 참가자의 목표는 잘못된 추측을 할 수 있는 기회가 모두 소진되기 전에 수수께끼의 단어를 푸는 것입니다.
게임을 시작할 때 진행자가 숨겨진 단어를 선택합니다. 일반적으로 문구의 글자 수는 대시를 통해 상대 참가자(질문자)에게 전달됩니다. 질문자가 잘못된 제안을 제출하면 두개골, 몸통, 부속기, 하지부터 시작하여 교수대 프레임워크의 그림이 나타납니다.
H0비밀 단어를 구성하는 전체 글자 세트를 성공적으로 맞추면 추측 게임을 하는 사람이 승리합니다. 행맨 게임은 언어 능력, 인지능력, 추리 적성을 평가할 수 있는 좋은 기회를 제공합니다.
개발 환경 설정하기
물론! 이 정보를 좀 더 설득력 있는 언어로 표현할 수 있는 다른 방법이 있습니다: “우리 팀은 이 프로젝트의 소스 코드를 공개 GitHub 리포지토리를 통해 액세스할 수 있도록 했으며, 이 리포지토리는 널리 인정되는 MIT 라이선스 조건에 따라 무료로 사용할 수 있는 권한을 부여합니다. 관심 있는 사람은 제공된 데모를 통해 프로젝트가 실제로 작동하는 모습을 미리 볼 수 있습니다.
시스템에서 Svelte를 성공적으로 설정하려면 Vite.js를 스캐폴딩 도구로 활용하는 것이 좋습니다. 계속 진행하기 전에 장치에 Node 패키지 관리자(NPM)와 Node.js가 모두 사전 설치되어 있는지 확인하세요. 또한 Yarn과 같은 다른 패키지 관리자를 선택할 수도 있습니다. 그런 다음 터미널 애플리케이션을 열고 다음 명령을 실행하세요:
npm create vite
Vite 명령줄 인터페이스(CLI)를 사용하여 새 프로젝트를 시작하는 과정에는 여러 단계가 포함됩니다. 먼저 프로젝트의 식별자를 제공해야 합니다. 다음으로, 선택한 프레임워크로 스벨트를 사용하도록 지정하고 자바스크립트 변형을 선택합니다. 이러한 결정이 끝나면 `cd` 명령을 입력하여 지정된 프로젝트 폴더로 이동합니다. 마지막으로 프로젝트 디렉토리 내에서 필요한 설치 명령을 실행하여 필요한 모든 종속성이 제자리에 있는지 확인합니다.
npm install
프로젝트의 “src” 폴더에 “hangmanArt.js”라는 이름의 새 자바스크립트 파일을 생성합니다. 프로젝트에서 “assets” 및 “lib” 폴더가 모두 삭제되었는지 확인합니다. 다음으로, “App.svelte” 및 “App.css” 파일에서 모든 콘텐츠를 제거합니다. 마지막으로, 아래에 지정된 코드 스니펫을 포함하도록 “App.css” 파일을 수정합니다.
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
이전 메시지에 제공된 지침에 따르면 프로젝트의 GitHub 리포지토리에서 행맨아트 파일의 내용을 복사하여 “행맨아트.js”라는 새 파일에 붙여넣어 가져와야 합니다. 개발 서버를 시작하려면 프로젝트의 구성에 따라 “npm run dev” 또는 “nodemon” 명령을 사용할 수 있습니다.
npm run dev
애플리케이션 로직 정의하기
기본적으로 HTML 문서인 “App.svelte” 파일을 열고, 이 파일 내에서 표준 웹 개발 방식을 사용하여 스크립트 요소를 삽입할 수 있는 위치를 찾아야 합니다. 스크립트 요소를 삽입한 후에는 애플리케이션의 주요 기능을 구성하고 실행하기 위한 컨테이너로 사용해야 합니다. 이를 위해서는 먼저 스크립트 요소 내에 ‘단어’라는 빈 자바스크립트 배열을 정의해야 합니다. 이 배열은 결국 프로그램 기능의 기초가 되는 단어 모음을 저장하는 저장소 역할을 합니다.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
다음 단계는 별도의 자바스크립트 파일인 `hangmanArt.js`에서 `hangmanArt` 배열을 가져오는 것입니다. 그 다음에는 `사용자 입력`, `랜덤넘버`, 그리고 `words` 배열에서 무작위로 선택한 단어를 저장하기 위한 빈 변수 등 세 개의 변수를 정의합니다.
선택한 단어를 “initial”이라는 대체 변수에 할당하기 위해서는 먼저 “match”, “message”, “hangmanStages”, “output” 등 몇 가지 추가 변수를 설정해야 합니다. “selectedWord” 값에 해당하는 길이의 대시를 연속으로 생성하여 “output” 변수를 초기화하는 것이 중요합니다. 그런 다음 프로그램 내에서 나중에 사용할 수 있도록 “hangmanArt” 배열을 “hangmanStages” 변수에 할당해야 합니다.
import { hangmanArt } from "./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;
필요한 기능 추가
사용자의 입력에 따라 피드백을 제공하려면 추측 결과를 명확하고 이해하기 쉬운 방식으로 표시해야 합니다. 이를 위해 결과를 의미 있게 표현하는 `generateOutput`이라는 메서드를 만들 수 있습니다.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
주어진 입력이 정답에 해당하는지 평가하기 위해서는 평가 함수를 구현해야 합니다. 이 함수는 사용자가 제출한 내용이 정확한지 여부를 판단하는 역할을 담당해야 합니다.이 평가 결과에 따라 행맨 드로잉이 다음 단계로 진행되거나 출력 생성 프로세스가 시작되어야 합니다.
function evaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
}
if (selectedWord.includes(guess)) {
selectedWord = selectedWord.replaceAll(guess, "-");
generateOutput(initial, selectedWord);
} else {
hangmanStages.shift();
hangmanStages = hangmanStages;
}
userInput = "";
}
실제로 응용 프로그램의 논리적 진행을 달성한 후에는 마크업을 통해 시각적 표현을 묘사할 수 있습니다.
프로젝트 마크업 정의하기
기본 컴포넌트는 게임 내의 다른 모든 컴포넌트를 캡슐화해야 합니다. 이 중앙 엔티티 내에 “행맨”이라는 레이블이 있는 h1 태그를 설정합니다.
<h1 class="title">
Hangman
</h1>
행맨 그림을 표시하고 행맨 스테이지 배열의 요소 수가 0을 초과하면 태그 라인을 생성하여 캐릭터의 초기 단계만 렌더링합니다.
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
그 후, 근거를 사용하여 개인이 승리했는지 또는 패배했는지를 나타내는 알림을 표시합니다:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>You Win...</div>
{/if}
물론이죠! JavaScript를 사용하여 이를 달성하는 방법은 다음과 같습니다: ”’자바스크립트 // ‘message’ 클래스를 가진 모든 요소 가져오기 const messages = document.querySelectorAll(‘.message’); // 메시지 요소가 표시되는지 확인합니다. if (messages.length > 0) { // 출력과 폼을 표시합니다 } else { // 기본적으로 출력과 폼을 숨깁니다 } “` 이 코드 스니펫에서는 먼저 `document.querySelectorAll()` 메서드를 사용하여 HTML 문서에서 `’message’` 클래스를 가진 모든 요소를 가져옵니다. 그런 다음 `if` 문을 사용하여 길이를 확인하여 해당 요소가 있는지 확인합니다. 페이지에 메시지가 있으면 원하는 대로 출력과 양식을 표시합니다. 그렇지 않으면 기본적으로 숨깁니다.
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
다음은 AngularJS를 사용하여 HTML 요소에 CSS 클래스를 적용하는 방법의 예시입니다: “`html
Hello World!
“` 이 코드 스니펫에서는 두 개의 CSS 클래스 ‘.red`와 ‘.blue`를 정의합니다. 그런 다음 `h1` 요소 내에 이 클래스를 인라인으로 추가하여 사용합니다.
* {
color: green;
text-align: center;
}
main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2px green;
height:40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
}
.hangman {
font-size: 32px;
}
form {
margin-top: 50px;
}
.tagline,
.message {
font-size: 20px;
}
Svelte를 사용하여 행맨 게임을 개발하신 것을 축하드립니다! 여러분의 노력과 헌신은 칭찬할 만합니다.
스벨트가 놀라운 이유는 무엇인가요?
스벨테는 바닐라 자바스크립트와 구문이 유사하기 때문에 쉽게 배우고 익힐 수 있는 다용도 프레임워크입니다. 이러한 특성 덕분에 바닐라 자바스크립트를 활용하면서 반응형 프로그래밍과 같은 고급 개념을 처리할 수 있는 프레임워크를 원하는 사람들에게 이상적인 선택입니다. 복잡성으로 인해 추가 리소스가 필요한 경우, 보다 복잡한 프로젝트에는 Next.js와 유사한 메타모픽 프레임워크인 SvelteKit을 사용할 수 있습니다.