목차
- 클라이언트-서버 구조
1-1. 클라이언트 주요 언어
1-2. 서버 주요 언어 - JavaSrcipt
2-1. JavaScript
2-2. JavaScript 실행 방식
2-3. JavaScript로 수행할 수 있는 기능
2-4. JavaScript 사용 이유
2-5. 개발자 도구 - JavaScript 작성 방법
3-1. internal 방식
3-2. external 방식
3-3. inline 방식
1. 클라이언트-서버 구조
- 클라이언트가 주소 URL(예. 네이버)을 입력하거든 → DNS로부터 해당 IP를 확인 받아 → 이를 기반으로 서버(Server)에 요청을 넣는다: request
- 그런 뒤 요청한 홈페이지의 메인 .html 페이지를 결과로서 돌려 받을 것이다: response
- 여기서 Client 영역을 프론트엔드(front-end), Server 영역을 백엔드(back-end)라고 칭한다.
❗ HTTP : 하이퍼텍스트 전송 규약(웹 통신)
1-1. 클라이언트 주요 언어 웹 표준
- HTML : 하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적 기술인 마크업 언어
- CSS : HTML은 뼈대이고, 자바스크립트가 기능이라면, CSS는 꾸미기 위한 기능
- 자바스크립트(JavaScript) : 로컬 브라우저 안에 장착된 엔진 통해 실행되는 인터프리터 방식의 프로그래밍 언어
- 제이쿼리(jQuery) : 존 레식(John Resig)이 창안한 자바스크립트 기반의 라이브러리 중 하나이다. 자바스크립트의 코드가 길어지면 사용하기 복잡해지는 단점을 파격적으로 개선했다.
❗ 자바스크립트 활용처는 프론트엔드에만 한정되지 않고, Node.js 등과 같은 백엔드 영역에서도 활용되고 있다.
1-2. 서버 주요 언어
- JSP : 운영체제에 구애 받지 않고 실행된다. 톰캣(Tomcate) 컨테이너 위에서 자바 기반 언어를 쓴다.
- ASP : 윈도우 기반의 IIS 서버에서만 동작한다. MS-SQL DBMS와 연동된다.
- PHP : 리눅스 기반으로 아파치(Apache) 서버에서 동작한다. 기존에 제로보드나 그누보드 같은 사이트 빌더에서 기본적으로 쓰이던 언어이다.
- Node.js : 흔히 "노드제이에스" 또는 "노드"라고 불리는 자바스크립트 라이브러리로서, 소켓을 이용하여 실시간 서버를 쉽게 구축 가능하도록 한다.
2. JavaSrcipt
2-1. JavaScript
❗ 자바스크립트는 ECMA 스크립트 표준을 따르는 대표적 웹 기술이다.
❗ ECMA(European Computer Manufacturers Association) : 표준화 기구
- HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면 자바스크립트(JavaScript)는 생동감을 불어넣기 위해 만들어진 객체 지향 프로그래밍 언어이다.
❗ <noscript> 태그 : 자바스크립트가 지원되지 않는 브라우저를 대비해 작성하는 태그로, 해당 브라우저에서는 <noscript>에 작성한 내용이 출력되게끔 만든다.
- 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. 스크립트는 웹 페이지의 HTML 안에 작성하며, 웹 페이지 로드 시 자동으로 실행된다: .html 문서의 <head> 또는 <body> 안에 <script>를 작성한다.
- 즉 이는 로컬 브라우저에서 실행되는 인터프리터(interpreter) 방식의 언어이다.
- 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장돼 있다.
2-2. JavaScript 실행 방식
❗ 웹 브라우저에 내장되어 있는 자바스크립트 파서가 소스 코드를 한 줄씩 읽고 해석한다는 점에서 인터프리터 방식으로 소스를 다룬다고 할 수 있다. 때문에 전체를 해석해가는 컴파일 언어와는 차이가 있다.
- 엔진이 스크립트를 읽고(파싱), 읽어들인 스크립트를 기계어로 전환(컴파일)하면 기계어로 전환된 코드가 실행된다.
- 전체를 해석해놓은 컴파일 언어와는 차이가 있다.
인터프리터 방식이기 때문이다. - 자바스크립트는 작성된 .html 문서를 브라우저에서 읽어들이는 즉시 실행을 확인할 수 있음이다.
2-3. JavaScript로 수행할 수 있는 기능
- 페이지에 새로운 HTML 추가
- 기존 HTML 및 스타일 수정
- 드래그, 마우스 클릭과 이동, 키보드 키 누름 등 사용자 행동에 반응
- 네트워크 통해 원격 서버에 요청(Ajax 기술 등)
- 쿠키(Cookie) 사용
- 클라이언트 측에 데이터 저장(Local Storage): 클라이언트가 사용하는 각각의 브라우저에 저장해놓는 행위를 말한다.
2-4. JavaScript 사용 이유
- 자바스크립트는 웹 표준으로서 HTML/CSS와 완전히 통합할 수 있으며, 모든 주요 브라우저에서 지원하고 기본 언어로 사용되기 때문이다.
- 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어이며, 지금은 서버단 등 다양한 환경에서도 쓰인다.
2-5. 개발자 도구
❗ 단축키 F12
- 브라우저별로 개발자 도구(Developer Tools)를 제공하며, 크롬(Chrome)의 경우 F12 키를 눌러 실행할 수 있다.
- 브라우저 창에서 확인하고자 하는 요소의 위치에 우클릭 후 '검사'를 상세히 눌러 살필 수 있다.
- 자바스크립트 소스 코드 중 console.log()는 브라우저에 출력하는 것이 아니라, 개발자 도구의 console 패널에서 출력하여 스크립트 구문을 디버깅할 때 자주 사용된다.
3. JavaScript 작성 방법
3-1. internal 방식
- <script> 태그 영역에 작성해 실행하는 방법이다.
- .html 문서의 <head> 태그, <body> 태그 내에 쓴다.
❗ <script> 태그의type 속성 더 이상 명시하지 않아도 괜찮다!
HTML5 이전 단계인 HTML4에서는 type="text/javascript" 명시하는 것이 필수사항이었으나, HTML5부터는 그렇지 않다. 현재 HTML5에서는 <script>만 작성해도 올바르게 작동하고 있다. 또,language 속성역시 자바스크립트가 기본 언어이므로 작성할 필요가 없다.
<body>
<script>
//JavaScript 한 줄 주석
/*
JavaScript
여러 줄 주석
줄바꿈이 있을 때마다 세미콜론(;) 자동 삽입 처리
*/
console.log('Hello!')
console.log('JavaScript!')
</script>
</body>❗ 줄바꿈이 있을 때마다 세미콜론(;) 자동 삽입 처리된다.
//가능
console.log('Hello!'); console.log('JavaScript!');
//가능
console.log('Hello!');
console.log('JavaScript!');
//가능
console.log('Hello!')
console.log('JavaScript!')
//오류console.log('Hello!') console.log('JavaScript!')
3-2. external 방식
- 별도의 .js 파일로 작성해 가져와 사용한다.
- 스크립트가 길어지면 이처럼 별도로 .js 파일을 만들어 쓰는 것이 좋은데, 이는 브라우저의 캐싱으로 다시 다운 받을 필요가 없어지기 때문이다: 브라우저는 캐싱 처리를 통해 한 번 읽은 것을 저장해놓기 때문에,
다시금 로드할 필요가 없는 것이다. 매번 새로운 문서처럼 읽어내는 internal 방식과의 차이점이기도 하다.
/* sample.js */
alert('Hello, JavaScript!');<!-- .html -->
<body>
<script src="../smaple.js"></script>
</body>- 외부 .js 파일과 연결하기 위해 <script> 시작태그에 src 속성을 정의한다.
3-3. inline 방식
<body>
<button onclick="alert('버튼 클릭 확인');">경고창 출력</button>
<button onclick="console.log('버튼 클릭 확인');">콘솔창 출력</button>
</body>- 시작태그에 직접 소스 코드를 작성해 실행되게 만드는 방법이다.
- <button> 태그에서 onclick 속성을 정의하면, 버튼을 클릭할 때 해당 속성값이 출력되도록 만들 수 있다.
- 주로 <script> 안에 function 함수를 만들어놓고 호출하는 방식으로 쓰인다.
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
|---|---|
| [JavaScript] 배열 | for of | forEach | map | Array 객체 메소드 (0) | 2022.02.18 |
| [JavaScript] 함수 선언문 | 함수 표현식 | 콜백 함수 | 화살표 함수 (0) | 2022.02.17 |
| [자바스크립트/수업 과제 practice] 기본 문법 실습 (0) | 2022.02.16 |
| [JavaScript] 변수 | 자료형 | 입출력 | 형변환 | 연산자 (0) | 2022.02.16 |
