JavaScript

01무엇이고, 어떤 일을 하나

• 웹 페이지의 입력·이벤트·화면 상태를 처리한다.
• 웹 API를 통해 서버와 자료를 주고받는다.
• 함수·객체·비동기 작업으로 클라이언트 프로그램의 동작을 구성한다.

02어떤 순서로 동작하나

1. 코드 해석

   실행 환경이 소스를 파싱하고 함수·변수 등의 실행 구조를 준비한다.

2. 동기 작업

   현재 호출 스택에서 표현식·함수·DOM 처리 등의 작업을 수행한다.

3. 이벤트·비동기 완료

   사용자 이벤트나 비동기 완료가 해당 실행 모델의 작업 흐름으로 이어지고 콜백·Promise 후속 동작이 실행된다.

4. 서버 경계

   요청 값이 서버로 전달되면 서버가 인증·권한·업무 조건을 독립적으로 검사하고 결과를 돌려준다.

03먼저 알아둘 용어와 구성요소

DOM

문서를 객체 구조로 표현하는 브라우저 API다. JavaScript 언어 자체와 별개이며 페이지 요소의 읽기·변경을 가능하게 한다.

이벤트

클릭·입력·완료 같은 사건을 프로그램 처리로 연결하는 방식이다. 처리 함수 등록과 실제 실행 시점은 다르다.

Promise

비동기 결과의 완료·실패를 표현하는 객체다. 작업 결과를 연결하지만 모든 계산을 별도 CPU에서 병렬 실행한다는 뜻은 아니다.

클라이언트 검증

사용 편의를 위한 입력 형식 확인 등으로 브라우저에서 수행된다. 사용자가 코드를 바꾸거나 요청을 직접 구성할 수 있으므로 서버 검증을 대체하지 않는다.

숨김 입력

화면에 표시되지 않는 폼 필드일 뿐 비밀 저장소가 아니다. 전송 전에 사용자가 바꿀 수 있는 값으로 취급해야 한다.

실행 환경

언어 엔진과 제공 API의 조합이다. 브라우저 DOM은 서버 실행 환경에 자동으로 존재하지 않으므로 언어 문법과 환경 기능을 구분한다.

04예제로 따라가기

• 브라우저에서 입력값을 숫자로 검사해도 사용자가 요청을 직접 만들 수 있으므로 서버가 같은 업무 범위를 다시 검증해야 한다.
• 공개된 문자열 변환과 해시만으로 만든 토큰에 서버 비밀이나 세션 조건이 없으면 사용자가 동일 값을 계산할 수 있다.
• 비동기 요청의 응답 전에 화면 함수를 호출하면 값이 아직 준비되지 않을 수 있어 완료 흐름과 오류 흐름을 함께 연결한다.

05혼동하기 쉬운 점과 확인 기준

• JavaScript와 Java는 서로 다른 언어이며 이름의 유사성으로 실행 모델이나 라이브러리를 혼동하지 않는다.
• 브라우저 콘솔이 열리는 사실 자체가 보안 취약점이 아니다. 서버가 클라이언트 값을 신뢰하여 권한을 부여하는 경계가 문제이다.

06상세 노트 · 실습 자료

헤더 구조, 설정 예시, 수치 계산과 수업 캡처는 아래 노트에서 이어집니다.