좋아, 웹 개발자가 되고 싶으신가요?

당신은 50시간의 튜토리얼을 시청할 수도 있고, 무언가를 만들어낼 수도 있습니다.

Tap Counter는 프론트엔드 개발자에게 있어 핵심적인 “첫 번째 프로젝트”입니다. 변수, 함수, 이벤트 리스너, DOM 조작 등 모든 기본 사항을 다룹니다.

이 가이드에서는 복사-붙여넣기 코드를 제공하지 않겠습니다. 대신, 탭 카운터가 작동하는 내부 논리를 설명하겠습니다.

The Logic flow

A counter app은 세 가지 일을 합니다:

1. 상태: `count = 0`과 같이 숫자를 기억합니다. 1. 이벤트: 버튼을 클릭하도록 기다립니다. 1. 업데이트: 클릭하면 `count = count + 1`을 실행하고 화면을 업데이트합니다.

1단계: HTML (뼈대)

필요한 곳이 있는데, 숫자를 보여주고 클릭할 버튼이 있습니다.

```

0

그게 다야. 보기 흉하지만 존재해.

단계 2: JavaScript (뇌)

이것이 바로 마법이 일어나는 곳입니다.

컴퓨터에게 다음과 같이 알려야 합니다: "어, 그 버튼을 찾아. 누군가 그걸 클릭하면, 숫자를 가져와서 1을 더하고 다시 보여줘."

코드 로직은 다음과 같습니다:

``` let count = 0; // The State

function increase() { count++; // Add 1 document.getElementById("number").innerText = count; // Update Screen } ```

3단계: LocalStorage (메모리)

코드 상단의 문제인가요? 페이지를 새로 고침하면 카운트가 0으로 돌아갑니다.

유용한 카운터(예: Tasbeeh 또는 행 카운터)를 만들려면 기억해야 합니다.

브라우저는 `localStorage`라는 작은 데이터베이스를 가지고 있습니다.

• 저장: 매번 클릭할 때마다 브라우저에게 “‘count’를 영구적으로 저장”한다고 알려줍니다.
• 로드: 페이지가 로드될 때, "저장된 번호가 있습니까?"라고 묻습니다. 그렇다면 그곳부터 시작합니다.

왜 이 프로젝트가 중요한가

탭 카운터를 만드는 것은 상태 관리의 기본 개념을 가르쳐 줍니다.

당신이 할 일 목록, 장바구니 또는 Facebook을 만들든, 그것은 모두 고급 Tap Counter의 화려한 버전일 뿐입니다.

• 페이스북 좋아요 버튼? 그건 타수 계산기입니다.
• 트위터 리트윗 수? 그것은 탭 카운터입니다.
• Amazon Cart 항목 개수? 그것은 탭 카운터입니다.

결론

단지 도구를 사용하는 것을 넘어 직접 만들어 보세요. 텍스트 파일을 열고, 그 열 가지 줄의 코드를 작성하고, 여러분만의 사용자 정의 카운터가 살아 움직이는 것을 확인해 보세요. 이것은 더 큰 세계로 향하는 첫 번째 단계입니다.