학이시습
[혼공스] 1주차_자바스크립트 알아보기 본문
Chapter 1
01. 자바스크립트의 활용
자바스크립트란?
웹 브라우저에서 사용하는 프로그래밍 언어입니다.
자바와 이름이 비슷해서 헷갈렸는데 완전히 다른 프로그래밍 언어라고 합니다. (많이 헷갈렸습니다.)
자바스크립트로 할 수 있는 것들
웹 클라이언트 애플리케이션 개발
초기 하이퍼링크들로 연결되고, 변하지 않는 정적인 글자들로만 이루어졌습니다. 하지만 자바스크립트가 나오면서 웹 문서의 내용을 동적으로 바꾸거나 사용자의 클릭과 같은 이벤트 처리가 가능해졌습니다.
웹은 점점 더 발전하여 애플리케이션 모습에 가까워졌습니다. 이처럼 기존보다 다양한 기능을 가진 웹페이지를 웹 애플리케이션이라고 합니다.
웹 애플리케이션은 애플리케이션(설치)과 달리 웹 브라우저만 있으면(설치X) 언제 어디서나 사용할 수 있다는 것입니다. (웹 문서 작성 도구 등)
웹 서버 애플리케이션 개발
기존에는 웹 클라이언트 애플리케이션을 자바스크립트로 개발하고, 웹 서버 애플리케이션은 다른 프로그래밍 언어로 개발을 해야 하기 때문에 웹 개발을 하려면 2가지 이상의 프로그래밍 언어가 필요했습니다. 하지만 2009년 Node.js가 등장하면서 자바스크립트로도 웹 서버 애플리케이션을 개발할 수 있게 되었습니다.
Node.js의 장단점을 알아보도록 합시다.
Node.js는 웹 서버 애플리케이션을 개발할 때 꼭 필요한 간단한 모듈만 제공합니다.
그래서 다른 스크립트 언어와 프레임워크를 사용할 때보다 데이터 처리와 예외 처리 등이 조금 복잡합니다.
하지만 Node.js는 빠릅니다.
다른 스크립트 언어와 프레임워크로 개발한 서버 애플리케이션이 10대의 컴퓨터가 있어야 접속자를 감당할 수 있다면 Node.js로 개발한 서버 애플리케이션은 1대로도 충분합니다. 1/10이나 줄었다니 정말 대단하죠.
모바일 애플리케이션 개발
많은 사람들이 사용하는 안드로이드폰과 아이폰은 각 스마트폰에서 인식하여 실행할 수 있는 프로그래밍 언어가 달라 각각 다른 언어로 개발해야 합니다. 각각 다른 언어로 개발하면 인력, 비용 등이 2배로 듭니다. (별로 좋지 않음)
하지만 자바스크립트는 모든 스마트폰 내부에서 기본으로 인식할 수 있습니다. 그렇기에 자바스크립트를 사용하여 애플리케이션만 만들어도 제작 비용을 반으로 줄일 수 있습니다.
그래서 페이스북은 자바스크립트로 네이티브 애플리케이션을 개발할 수 있는 리액트 네이티브를 만들어 공개했습니다. 이를 활용하면 자바스크립트만으로 모든 운영체제에서 빠르게 작동하는 네이티브 애플리케이션을 만들 수 있습니다. (예시 : 페이스북, 인스타그램, 핀터레스트 등)
데스크톱 애플리케이션 개발
NW.js 모듈 등으로 데스크톱 애플리케이션 개발에 조금씩 자바스크립트를 활용하기 시작했습니다. 그러다 깃허브에서 NW.js 개발자들을 흡수하고, 자바스크립트 개발 전용 텍스트 에디터인 아톰을 만들어 배포했습니다. 아톰을 만들 때 활용한 아톰 셸을 일렉트론이라는 이름으로 공개하면서 다른 개발자들도 자바스크립트로 데스크톱 애플리케이션을 개발할 수 있게 되었습니다.
일렉트론으로 개발된 데스크톱 애플리케이션에는 비주얼 스튜디오 코드, 디스코드 클라이언트, 깃허브 데스트콥 클라이언트 등이 있습니다.
데이터베이스 관리
데이터베이스는 보통 SQL이라는 프로그래밍 언어를 사용해 관리합니다. 일반적으로 알려진 Oracle, mySQL 등의 관계형 데이터베이스 관리 시스템(RDBMS)은 모두 SQL 프로그래밍 언어를 사용합니다.
Not-Only-SQL이라고 불리며 등장한 NoSQL은 폭발적으로 증가한 빅데이터를 처리하기 위한 기술입니다. 그중 MongoDB가 데이터베이스를 관리할 때 자바스크립트를 활용하는 대표적인 NoSQL 데이터베이스입니다.
자바스크립트 표준화
자바스크립트가 많은 곳에서 사용되자 유럽컴퓨터제조협회(ECMA)는 자바스크립트를 ECMAScript라는 이름으로 표준화했습니다.
확인문제
1. 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹사이트를 5개 정도 적어 보세요.
| 유튜브 |
| 구글 |
| 네이버 |
| 페이스북 |
| 노션 |
2. Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율(Browser Market Share Worldwide)을 확인해보세요.
기본미션
02. 개발환경 설치와 코드 실행
실습
개발자 도구 실행 : Ctrl + Shift + I
자주 접하는 오류
RefernceError
ex) Uncaught ReferenceError: OO is not definde
→ OO 부분을 잘못 입력했을 때 만나는 오류
SyntaxError
ex) Uncaught SyntaxError: Invalid or unexpceted token
→ 토큰(기호)를 잘못 입력했을 때의 오류.
확인문제
1. 구글 크롬 개발자 도구의 콘솔을 실행하고 다음 명령을 입력했을 때 나온 결과를 빈칸에 적어보세요. 코드를 하나 실행할 때 여러 줄의 출력이 나오는 경우 모두 적어주세요.
| > "안녕하세요" |
| < '안녕하세요' |
| > console.log("안녕하세요") |
| 안녕하세요 < undefined |
| > "안녕하세요 |
| Uncaught SyntaxError: Invalid or unexpected token |
2. 비주얼 스튜디오 코드에 다음 소수 코드를 입력하고 ex01.html로 저장한 후 화면에 나오는 결과를 적어보세요.
<body>
<script>
document.body.innerHTML = "<h1>안녕하세요</h1>"
</script>
</body>안녕하세요
03. 알아두어야 할 기본 용어
표현식과 문장
표현식: 자바스크립트에서 값을 만들어내는 간단한 코드
문장: 표현식이 하나 이상 모인 것
프로그램: 문장이 모인 것
키워드
키워드: 자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어 (많음)
식별자
식별자: 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어
자바스크립트 식별자를 만들 때는 규칙을 반드시 지켜야 합니다.
- 키워드를 사용하면 안됩니다
- 숫자로 시작하면 안됩니다.
- 특수 문자는 _와 $만 허용합니다.
- 공백 문자를 포함할 수 없습니다.
식별자를 만드는 일반적인 관례
알파벳을 사용하는 것이 관례이며 a, b처럼 의미 없는 단어보다 input, output 같은 의미 있는 단어를 사용하는 게 좋습니다.
식별자를 만들 때 위의 내용 외에도 자바스크립트 개발자 대부분이 지키는 관례가 있습니다
- 클래스의 이름은 항상 대문자로 시작합니다.
- 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작합니다.
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 시작합니다.
식별자의 종류
크게 네 종류로 나누어 볼 수 있습니다.
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
주석
주석은 프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않습니다. HTML 페이지에는 크게 HTML 태그 주석과 자바스크립트 주석이 있습니다.
HTML 주석
<!-- -->로 문자열을 감싸 생성합니다.
자바스크립트 주석
//를 입력하는 것으로 한 줄 주석을 표현합니다.
/* */를 입력하여 여러 줄 주석을 표현합니다.
출력
경고창에 출력하기: alert()
콘솔에 출력하기: console.log()
확인문제
1. 다음 단어 중 식별자로 사용할 수 있는 것은 O표, 식별자로 사용할 수 없는 것은 X표를 하세요.
① a ( O )
② hello ( O )
③ 10times ( X )
④ _ ( O )
⑤ $ ( O )
2. console.log()에서 console은 다음 중 무엇일까요? ②
① 키워드
② 식별자
③ 연산자
④ 메소드
3. console.log()에서 log는 다음 중 무엇일까요?(중복선택 가능) ②, ④
① 키워드
② 식별자
③ 연산자
④ 메소드
4. 여러 단어로 이루어진 식별자를 만드려고 합니다. 71쪽에서 설명한 방법에 따라서 한 단어로 묶어주세요.
| ①we are the world | weAreTheWorld |
| ② create output | createOutput |
| ③ create request | createRequest |
| ④ init server | initServer |
| ⑤ init matrix | initMatrix |
5. 다음 코드를 입력해보고 어떤 오류가 뜨는지 확해보세요.
| ① konsole.log('안녕하세요') |
| Uncaught ReferenceError: konsole is not defined |
| ② +++ 1 ++ 2 + 3 |
| Uncaught SyntaxError: Invalid left-hand side expression in postfix operation |
| ③ console.log) |
| Uncaught SyntaxError: Unexpected token ')' |
페이지가 길어져서 Chapter2는 새로운 글에서 만납시다.
Chapter 2 링크: https://yunju5090.tistory.com/8
'혼공학습단 > 혼공스' 카테고리의 다른 글
| [혼공스] 5주차_객체 알아보기 (0) | 2024.02.04 |
|---|---|
| [혼공스] 4주차_함수 알아보기 (2) | 2024.01.29 |
| [혼공스] 3주차_배열과 반복문 알아보기 (1) | 2024.01.21 |
| [혼공스] 1주차_자료형 알아보기 (1) | 2024.01.11 |
| [혼공스] 2주차_조건문 알아보기! (1) | 2024.01.11 |
