압도적인 언어와 프레임워크 선택 속에서 코딩 여정을 시작하는 것은 어려울 수 있습니다. AI가 모든 것을 처리하도록 하는 것도 생각해 볼 수 있습니다! 그럼에도 불구하고 웹 프로그래밍은 흥미진진하고, 접근하기 쉽고, 완전히 무료일 수 있습니다!
당신이 만들 것
이 튜토리얼에서는 텍스트 노트를 저장하고 해당 노트에 있는 문자와 단어를 세는 간단한 웹 애플리케이션을 만들어 보겠습니다.
이 애플리케이션은 데이터를 지속적으로 저장하여 페이지를 새로 고치거나 다시 연 후에도 텍스트를 검색할 수 있습니다. 주소, URL 또는 기타 중요한 텍스트에 대한 빠른 액세스를 유지하기 위한 실용적인 솔루션입니다.
또한, 앱은 문자와 단어 수를 추적하여 문자열 조작에 대한 훌륭한 소개를 제공합니다. 이 애플리케이션은 디자인이 기본적이지만, 이 튜토리얼은 기본적인 웹 앱 개발 기술을 제공하여 코딩에서 방대한 가능성을 열어줍니다.
어떻게 만들 것인가
웹 애플리케이션은 상당히 다양할 수 있지만 일반적으로 HTML, CSS, JavaScript라는 세 가지 필수 기술을 통합합니다. 이러한 각 구성 요소는 웹 개발에서 중요한 기능을 수행합니다.
- HTML: 이것은 웹 애플리케이션의 구조로, 콘텐츠가 어떻게 구성되는지를 확립합니다. HTML은 텍스트가 문단인지, 제목인지, 목록 항목인지 정의합니다.
- CSS: Cascading Style Sheets는 콘텐츠에 스타일을 추가하여 색상, 글꼴 및 레이아웃을 변경할 수 있습니다. CSS를 사용하여 요소를 굵게 표시하고, 테두리를 조정하고, 화면에서 요소를 배치할 수 있습니다.
- JavaScript: 이 프로그래밍 언어는 웹 애플리케이션에 기능을 주입하는 데 필수적입니다. JavaScript는 요소를 표시/숨기거나 게임과 같은 복잡한 애플리케이션을 구축하는 것과 같은 대화형 경험을 만들 수 있습니다.
앱 구조
여러분이 만들려는 애플리케이션은 index.html, styles.css, 의 세 개의 간단한 파일로 구성됩니다 script.js.
이 앱을 실행하기 위한 고급 요구 사항은 없습니다. 웹 브라우저만 있으면 됩니다. 프런트엔드 앱이므로 PHP나 로컬 서버와 같은 백엔드 스크립팅 언어가 필요 없습니다. 완료 후 index.html브라우저에서 열기만 하면 앱이 작동하는 것을 볼 수 있습니다.
이 앱은 웹 저장소 API를 활용하여 텍스트를 저장하고, JavaScript가 파일 시스템에 접근할 수 없기 때문에 디스크 파일에 쓸 필요 없이 정보를 보관할 수 있습니다.
노트테이커를 만드는 방법
동일한 디렉토리에 필요한 세 개의 파일을 만드는 것으로 시작합니다. 또는 이 GitHub 저장소 에서 파일을 다운로드할 수 있습니다 .
HTML로 구조 구축하기
이 index.html파일은 앱의 콘텐츠 구조를 배치합니다. 여기에는 CSS 및 JavaScript 파일에 대한 참조가 포함되어 있어 브라우저가 이를 병합하여 매끄러운 경험을 제공할 수 있습니다.
모든 HTML 문서와 마찬가지로 주요 프레임워크는 메타데이터가 포함된 헤드 섹션과 콘텐츠가 포함된 본문으로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
헤드 섹션에는 페이지 제목(브라우저의 제목 표시줄에 표시됨)과 파일 링크를 포함한 간략한 메타데이터가 포함되어 있습니다 styles.css.
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
본문은 주요 구성 요소를 포함하여 더 자세합니다.
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
“counter”로 식별된 요소 div는 단어와 문자 수를 보관합니다. 맨 위에 남아 있으며 텍스트가 변경됨에 따라 동적으로 업데이트됩니다.
속성을 사용하는 것이 중요합니다 id. 속성의 고유한 값은 이러한 요소의 스타일을 지정하고 기능을 목표로 삼는 데 도움이 됩니다.
이는 textarea사용자가 속성을 사용하여 텍스트를 입력할 수 있는 영역을 제공하여 autofocus페이지 로드 시 입력할 준비가 되도록 합니다. 마지막으로 HTML은 파일을 참조합니다 script.js.
이 시점에서 index.html브라우저에서 엽니다. 아직 작동하지 않을 수 있고 제대로 보이지 않을 수도 있지만 각 단계에서 진행 상황을 확인하는 것이 도움이 됩니다.
CSS로 사물을 보기 좋게 만들기
이 기본 앱은 광범위한 디자인 조정이 필요하지 않지만, 약간의 스타일을 적용하여 레이아웃을 개선할 수 있습니다.
먼저, 전반적인 모습을 설명하기 위해 차체 스타일을 확립합니다.
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
이 CSS는 그리드 레이아웃을 사용하여 텍스트 영역 위의 좁은 행에 단어와 문자 수를 배열합니다. 이 grid-template-rows속성은 카운트 행이 가능한 가장 적은 공간을 차지해야 하고(min-content) 텍스트 영역이 나머지 공간을 채워야 한다고 결정합니다(1fr).
카운터 행은 텍스트 영역과 구별하기 위해 주로 배경을 통해 기본 스타일을 적용합니다.
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
텍스트 영역은 텍스트를 읽기 쉽게 하기 위해 스타일이 지정되어 있으며 적절한 여백이 허용됩니다.
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
JavaScript로 기능 추가
기초가 마련되었으니, 이제 애플리케이션에 기능을 주입할 차례입니다. 바로, 애플리케이션을 실제로 구동하는 코드입니다!
코딩에 들어가기 전에, 의도한 기능을 개략적으로 설명하는 것이 필수적입니다. 이 애플리케이션에서는 두 가지 주요 목표에 집중할 것입니다.
- 입력한 텍스트를 유지하고 다시 로드합니다.
- 동적으로 문자 및 단어 수를 업데이트합니다.
이러한 기능은 특정 문서 요소에 대한 업데이트가 필요합니다. 따라서 다음 getElementById메서드를 사용하여 이러한 노드에 대한 참조를 가져오는 것으로 시작합니다.
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
여기에서, words, chars, 및 는 textarea해당 문서의 섹션에 해당하며 ID 속성으로 식별됩니다.
다음으로, 텍스트가 변경되면 앱이 응답하도록 설정하여 상호 작용 기능을 도입합니다.
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
이 addEventListener방법은 지정된 이벤트가 발생할 때 트리거할 함수를 바인딩합니다. 이 경우 사용자가 텍스트 영역과 상호 작용하면 “입력” 이벤트가 함수를 트리거합니다.
다음으로, Web Storage API를 사용하여 textarea의 현재 내용을 보존하고, .를 통해 액세스합니다 ev.target.value. 이 setItem메서드는 저장할 데이터와 키를 연결합니다.
앱이 초기화되거나 새로 고침될 때 텍스트가 로드되도록 하려면 다른 리스너를 추가하세요.
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
이 리스너는 창의 로드 이벤트에 응답합니다. 창이 로드되면 저장된 텍스트를 검색하고 그에 따라 textarea의 값을 설정하고 update_counts()단어와 문자 수를 새로 고칩니다.
나머지 기능은 update_counts()다음과 같은 함수에 있습니다.
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
textarea와 달리 일반 텍스트에는 value 속성이 없으므로 innerHTML대신 속성을 사용합니다. length문자열의 속성은 총 문자 수를 검색합니다.
텍스트를 단어로 나누려면 를 사용합니다 text.split(' '). 이는 문자열을 각 공백 문자로 나누어 단어 배열을 생성합니다. 결과 배열의 length 속성은 단어 수를 제공합니다.
하지만 이 코드를 사용하면 몇 가지 문제에 직면할 수 있습니다.
- 주변에 공백 문자가 없으면 한 줄에 있는 단어 하나하나를 올바르게 계산하지 못합니다.
- 텍스트가 없으면
split작동 방식 때문에 단일 단어만 부정확하게 보고됩니다.
첫 번째 문제를 해결하려면 공백 문자를 고려하기 위해 정규 표현식에서 분할하는 것을 고려하세요: \s. 두 번째 문제를 해결하려면 빈 문자열을 필터링하세요:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
몇 개의 기본 파일만 있으면 유용한 웹 애플리케이션을 만들 수 있습니다! window.location 속성을 사용하여 URL에 액세스하거나 .에 전달된 이름을 변경하여 여러 개의 노트를 저장할 수 있도록 하는 등 추가 기능을 통합하여 이 간단한 노트 작성 앱을 확장할 수 있습니다 localStorage.setItem.
추가 통찰력
1. 이 웹앱 튜토리얼의 전제 조건은 무엇입니까?
HTML, CSS, JavaScript에 대한 기본적인 이해만 있으면 됩니다. 텍스트 편집기(예: VSCode)와 웹 브라우저와 같은 도구도 도움이 될 것입니다.
2. 이 웹 앱을 수정하여 더 많은 기능을 추가할 수 있나요?
물론입니다! 이 튜토리얼은 기초를 제공합니다. 여러 노트 저장, 노트 분류, 심지어 검색 기능 구현과 같은 기능을 추가할 수 있습니다!
3. 웹 스토리지 API는 어떻게 작동하나요?
웹 스토리지 API를 사용하면 웹 애플리케이션이 브라우저에 데이터를 저장할 수 있습니다. 브라우저를 닫은 후에도 유지되는 키-값 쌍으로 데이터를 저장하므로 나중에 쉽게 검색할 수 있습니다.
답글 남기기