첫 번째 웹 앱을 만들어 보세요: 메모 + 카운터를 쉽고 빠르게 📝⚡

프로그래밍을 시작하는 것은 고려해야 할 언어, 프레임워크, 방법론이 너무 많아서 압도적으로 느껴질 수 있습니다. 때로는 모든 것을 AI에게 위임하는 것이 더 쉬울 수도 있습니다. 괜찮아요! 웹 프로그래밍은 간단하고, 재미있고, 무엇보다도 완전히 무료입니다! 🌐✨

당신이 만들려고 하는 것

이 튜토리얼을 따라하면 텍스트 메모를 저장하고 문자와 단어의 개수를 세는 간단한 웹 애플리케이션을 만들 수 있습니다.

앱은 데이터를 보관하므로 페이지를 다시 로드하거나 다시 열 때 텍스트를 기억합니다. 이를 통해 나중에 참조하려는 주소, URL 등 모든 텍스트를 편리하게 저장할 수 있습니다. 📄🔗

일정 항목과 URL 목록을 포함한 메모를 표시하는 간단한 텍스트 기반 웹 애플리케이션의 예입니다.

또한 문자와 단어도 계산하는데, 이는 문자열(텍스트) 처리에 대한 좋은 소개가 됩니다. 물론, 앱은 매우 간단합니다. 그게 목적이니까요! 하지만 이 튜토리얼을 통해 웹 애플리케이션을 개발하는 기본 사항을 배우고 나면 세상은 여러분의 손 안에 펼쳐질 것입니다. 🦪💻

어떻게 만들 것인가?

웹 애플리케이션은 매우 다양하지만 일반적으로 HTML, CSS, JavaScript라는 세 가지 주요 기술이 사용됩니다. 작업을 시작하기 전에 그들의 역할을 이해하는 것이 중요합니다. 📚

HTML: 하이퍼텍스트 마크업 언어를 사용하면 콘텐츠의 구조를 정의할 수 있습니다. 이를 사용하면 텍스트를 의미에 따라 표시할 수 있으며, 예를 들어 텍스트가 문단인지, 제목인지, 목록의 항목인지 등을 나타낼 수 있습니다.
CSS: Cascading Style Sheets를 사용하면 콘텐츠의 스타일을 지정할 수 있습니다. 이 언어를 사용하면 문단을 녹색으로 칠하고, 모든 링크를 굵게 표시하거나, 주요 기사 옆에 사이드바를 배치할 수 있습니다. 🎨
JavaScript: 이 프로그래밍 언어를 사용하면 웹사이트에 기능을 추가할 수 있습니다. 버튼을 클릭하면 문서의 일부가 표시되거나 숨겨지도록 할 수 있으며, 본격적인 워드 프로세서나 비디오 게임을 구현할 수도 있습니다. 🎮

그 웹사이트.dev (Chrome 팀 멤버가 작성) 및 MDN, 모질라 개발자 네트워크, 는 기본적인 웹 기술에 대한 정보를 제공하는 두 가지 훌륭한 출처입니다.

HTML, CSS, JavaScript에 대한 학습 리소스를 제공하는 web.dev 사이트의 홈페이지입니다.

앱의 구조

여러분이 만들 앱은 index.html, styles.css, script.js라는 세 개의 간단한 파일로 구성됩니다. 🗂️

앱을 실행하는 데 특별한 요구 사항은 없으며, 웹 브라우저만 있으면 됩니다. 백엔드 기능이 없으므로 PHP와 같은 스크립팅 언어나 로컬 웹 서버가 필요하지 않습니다. 완료되면 열 수 있습니다 브라우저에서 직접 index.html 파일을 엽니다. 그리고 모든 것이 잘 될 거예요. 😊

JavaScript가 파일 시스템에 접근할 수 없기 때문에 이 앱은 디스크의 특정 파일에 텍스트를 쓰지 않고 텍스트를 저장한다는 점에 유의하는 것이 중요합니다. 쿠키의 강력한 대안인 Web Storage API를 사용합니다. 🍪💾

노트테이커를 만드는 방법

같은 디렉토리에 다음 세 개의 파일을 만든 다음 웹 브라우저에서 index.html을 엽니다. 또는 다음에서 파일을 다운로드할 수 있습니다. 이 GitHub 저장소. 📥

HTML로 구조 구축

index.html 파일은 앱 콘텐츠의 HTML 구조를 정의합니다. 나머지 두 파일에 대한 참조를 포함시켜 브라우저가 최종 제품을 위해 두 파일을 결합할 수 있도록 합니다.

모든 HTML 문서와 마찬가지로 최상위 구조에는 메타데이터가 포함된 헤드 섹션과 페이지에 표시될 실제 콘텐츠가 포함된 바디 섹션이 포함됩니다.

HTML>
<HTML>
<머리>
    ...
머리>

<몸>
…
몸>
HTML>

헤드 부분의 메타데이터는 매우 간략하며, 페이지 제목(브라우저의 제목 표시줄에 표시됨)과 styles.css 파일에 대한 참조만 있습니다.

    <제목>텍스트제목>
    <링크 상대="스타일시트" HREF="스타일.css" />

신체는 더 복잡하지만 중요한 부분은 몇 가지뿐입니다.

    <사업부 ID="계수기">
        단어: <기간 ID="단어">0기간>
        / 문자: <기간 ID="문자">0기간>
    사업부>

<텍스트에어리어 ID="텍스트" 자동 초점=«1»>텍스트에어리어>

<스크립트 출처=«script.js»>스크립트>

div 요소에는 앱의 단어와 문자 수가 포함됩니다. 이는 웹 앱 상단에 위치하며 텍스트가 변경될 때마다 업데이트됩니다.

작업에 필수적인 id 속성을 주목하세요. ID 값은 고유해야 하므로 앱에서 이를 사용하여 특정 항목을 식별할 수 있습니다. 이렇게 하면 이러한 요소의 스타일을 지정하는 데 도움이 되고 기능을 추가할 때 해당 요소를 타겟팅하는 데도 도움이 됩니다.

텍스트에어리어는 브라우저에 간단한 텍스트를 입력할 수 있는 기본 제공 양식 요소입니다. 자동 초점 속성을 사용하면 페이지가 로드되는 즉시 글을 쓸 준비가 됩니다. 마지막으로, 이 페이지는 자바스크립트 파일인 script.js를 참조합니다.

이 시점에서 브라우저에서 index.html 파일을 열 수 있습니다. 지금 당장은 아무 일도 일어나지 않고 보기에도 좋지 않지만, 기본 사항이 예상대로 작동하는지 확인하기 위해 모든 단계에서 앱을 테스트하는 것이 도움이 됩니다.

기본 브라우저 스타일을 적용한 노트 작성 웹 앱의 모습. 왼쪽 상단에 모든 항목이 그룹화되어 표시되어 있습니다.

CSS로 보기 좋게 만들기

CSS를 사용하면 글꼴 크기 및 배경색과 같은 속성에 대한 값을 지정하여 웹 페이지의 특정 부분에 스타일을 지정할 수 있습니다. 이 샘플 앱은 인터페이스가 매우 기본적이기 때문에 그다지 세련된 디자인이 필요하지 않습니다. 하지만 약간의 스타일을 더하면 거친 부분을 매끈하게 다듬을 수 있습니다. 🎨✨

먼저, 전체적인 디자인을 정의하기 위해 본체의 스타일을 지정합니다.

몸 {
    여유: 0;
    심: 0;
    표시하다: 그리드;
    최소 높이: 100브이에이치;
    그리드 템플릿 행: 최소 콘텐츠 1정말로;
}

이 CSS는 다음을 사용합니다. 그리드 레이아웃 텍스트 영역 위의 좁은 행에 단어와 문자 수를 배치합니다. grid-template-rows 속성은 카운트 행이 가능한 한 짧아야 하고(min-content) textarea가 나머지 공간을 채워야 한다는 것을 지정합니다(1fr).

카운터 행에는 나머지 텍스트와 차별화되는 기본 스타일이 있는데, 주로 배경을 통해 이를 표현합니다.

#카운터 {
    글꼴 모음: 산세리프;
    배경색: #f7f7f7;
    텍스트 정렬: 센터;
    너비: 100%;
    심: 0.5엠 0;
}

마지막으로, 텍스트 영역은 충분한 공간을 확보하여 읽기 쉬운 텍스트를 표시하도록 스타일이 지정됩니다. 카운트와 텍스트를 구분하는 선은 실제로 이 텍스트 영역의 위쪽 테두리입니다.

텍스트에어리어 {
    너비: 100%;
    키: 100%;
    글꼴 크기: 16pt;
    심: 1~에;
    상자 크기: 테두리 상자;
    개요: 0;
    국경: 없음;
    테두리-상단: 1픽셀 단단한 #999;
}

사용자 정의 스타일을 적용한 메모 작성 앱은 상단에 계산 막대를 표시하고, 하단에 전체 크기의 텍스트 영역을 표시합니다.

JavaScript로 기능 추가

구조와 스타일이 갖춰지면 이제 기능을 추가할 준비가 되었습니다. 이 간단한 앱에 실제로 기능을 부여하는 코드입니다. 🛠️

가장 간단한 코드를 작성하기 전에, 그 코드로 무엇을 하고 싶은지 이해하는 것이 좋습니다. 이 경우에는 몇 가지 일반적인 요구 사항만 있습니다.

입력한 텍스트를 저장하고 필요할 때 다시 로드합니다.
실시간 통계를 제공하기 위해 문자 수와 단어 수를 업데이트합니다. 📊

두 가지 요구 사항 모두 문서의 요소를 업데이트하는 것과 관련이 있습니다. 따라서 스크립트는 getElementById 메서드를 사용하여 이러한 노드에 대한 참조를 가져오는 것으로 시작합니다.

상수 단어 = 문서.getElementById("단어");
상수 문자 = 문서.getElementById("문자");
상수 텍스트에어리어 = 문서.getElementById("텍스트");

단어, 문자, 텍스트는 문서에서 각각의 요소에 대한 ID이며, HTML 파일에서 id 속성으로 지정됩니다.

다음으로, 텍스트가 변경될 때 앱이 반응하도록 해야 합니다.

텍스트 영역.이벤트 리스너 추가("입력", 기능(에브) { 로컬 스토리지.setItem("텍스트", ev.대상.값); 업데이트_카운트(ev.대상.값); });

이벤트 리스너는 특정 이벤트가 발생할 때 JavaScript가 자동으로 실행하는 함수입니다. 이 경우, "입력" 이벤트가 발생할 때 실행되는 리스너를 textarea 노드에 연결합니다. 즉, 누군가가 텍스트 영역과 상호 작용할 때입니다.

다음으로, ev.target.value에서 제공되는 textarea의 현재 내용을 저장하기 위해 Web Storage API를 사용합니다. 이 구조에서 ev는 리스너를 트리거한 이벤트를 나타내는 객체이고, ev.target은 이벤트를 수신한 노드이고, ev.target.value는 해당 텍스트 영역의 텍스트입니다.

setItem 메서드는 두 개의 매개변수를 사용합니다. 데이터와 연결할 키 이름과 저장할 실제 데이터입니다.

다음으로, 동일한 텍스트를 전달하여 update_counts()를 호출합니다. 잠시 후에 그 기능에 대해 설명하겠습니다.

이제 텍스트를 저장했으므로 앱을 열거나 다시 로드할 때 다시 로드해야 합니다. 다른 리스너를 사용하면 이를 처리할 수 있습니다.

창문.addEventListener("짐", 기능(에브) {
    변수 텍스트 = 로컬 스토리지.getItem("텍스트"); 텍스트 영역.값 = 텍스트; 업데이트_카운트(텍스트); });

이 리스너는 브라우저 창의 최상위 표현인 window 객체에서 발생하는 로드 이벤트를 처리합니다. 창이 로드되면 getItem()을 호출하면 로컬 저장소에 저장된 텍스트 값이 반환됩니다. 그런 다음 이 코드는 textarea의 값을 로드된 텍스트로 설정하고 위의 리스너와 마찬가지로 이 텍스트로 update_counts()를 호출합니다.

나머지 작업은 다음과 같은 update_counts() 함수에서 수행됩니다.

기능 업데이트 횟수(텍스트) { 문자.내부HTML = 텍스트.길이; 단어.innerHTML = 텍스트.split(' ').길이; }

텍스트 영역과 달리 일반 텍스트에는 값 속성이 없으므로 대신 innerHTML 속성을 설정합니다. 문자열의 length 속성은 문자 수를 알려주는 간단한 읽기 전용 속성입니다.

text.split(' ')은 공백 문자에서 문자열을 분할하여 결과를 문자열 배열로 반환합니다. 문자열과 마찬가지로 배열에도 길이 속성이 있는데, 이를 통해 배열에 있는 요소의 개수를 알 수 있습니다.

하지만 이 코드를 테스트하면 몇 가지 오류가 발견될 수 있습니다.

단어 주위에 공백 문자가 없기 때문에 한 줄에 있는 단어 자체는 올바르게 계산되지 않습니다.
텍스트가 전혀 없으면 분할 방식 때문에 단어 하나만 보고됩니다.

첫 번째 문제를 해결하려면 공백 대신 정규 표현식(\s는 "공백 문자"를 의미)을 사용하여 분할할 수 있습니다. 두 번째 문제를 해결하려면 결과에서 빈 문자열을 필터링합니다.

    단어.innerHTML = 텍스트.split(/\에스/).필터(기능(N) { 반품 n != ''; }).길이;

해당 줄을 완전히 이해하지 못하는 경우 MDN 페이지를 확인하세요. 나뉘다 그리고 필터.

정확한 문자와 단어 수를 보여주는 샘플 텍스트가 있는 웹 애플리케이션입니다.

단 몇 개의 파일만으로 여러 가지 유용한 웹 애플리케이션을 만들 수 있습니다. 이 간단한 메모 앱을 확장하여 더 많은 기능을 추가할 수도 있습니다. 예를 들어, 다음을 사용할 수 있습니다. window.location 속성 localStorage.setItem에 전달하는 이름을 변경하여 현재 URL을 검색하고 여러 노트를 지원합니다. 🗒️🌍

태그: 에버그린컨텐츠 기술 팁