JavaScript는 값과 조건, 반복, 함수 등을 사용해 프로그램의 동작을 표현하는 언어다. 브라우저에서는 버튼 클릭에 반응하거나 문서 내용을 바꾸고, 서버 환경에서는 요청 처리 같은 작업에 사용할 수 있다. 언어 자체와 실행 환경이 제공하는 기능을 구분하면 학습과 디버깅이 쉬워진다.
언어와 브라우저 기능
배열, 문자열, 객체와 함수는 JavaScript를 이해하는 기본 단위다. 반면 화면의 요소를 찾는 document.querySelector()는 브라우저가 제공하는 DOM API에 속한다. 같은 JavaScript라도 실행 환경에 따라 사용할 수 있는 API가 다르므로, 브라우저 예제를 서버에 그대로 옮겼을 때 동작하지 않을 수 있다.
이벤트로 만드는 상호작용
위키에서 즐겨찾기 버튼을 누르면 클릭 이벤트를 받아 문서 식별자를 저장하고 화면 상태를 갱신할 수 있다. 이때 글자를 바꾸는 코드뿐 아니라 중복 클릭, 저장 실패, 키보드 조작도 함께 고려해야 한다. HTML 버튼의 기본 동작을 활용하면 모든 상호작용을 임의의 요소와 클릭 처리만으로 새로 구현하는 부담이 줄어든다.
기다리는 작업 다루기
네트워크 요청은 응답 시점을 미리 알 수 없다. Promise와 async·await는 이런 비동기 결과를 다루는 방법이다. 예를 들어 Fetch API로 문서 목록을 읽는 동안 로딩 상태를 표시하고, 응답 후 결과나 오류를 보여줄 수 있다. 비동기라는 말이 모든 계산을 자동으로 별도 스레드에서 수행한다는 뜻은 아니다. 큰 계산이 화면 반응을 막는다면 Web Workers 같은 다른 실행 수단을 검토한다. 관련 공식 설명.
이름과 타입에 관한 오해
JavaScript와 Java는 이름이 비슷하지만 서로 다른 언어다. 또한 변수가 문자열이나 숫자를 담을 수 있다는 유연함은 데이터 형태를 확인할 필요가 없다는 뜻이 아니다. 외부 입력은 예상과 다를 수 있으며, 오류 처리와 검증이 필요하다. TypeScript는 개발 중 타입 검사를 추가하는 도구지만 실행 시 모든 입력을 자동 검증해 주지는 않는다. 먼저 작동 단위를 작게 나누고 실제 입력과 오류 상황을 확인하는 것이 중요하다.
참고: 공식 개발 문서.