(17주차 - 22.11.07~22.11.08) 웹 프로그래밍 - 자바스크립트 (JavaScript), Vue.js

[ 배운 내용 ]

Chapter 1. 자바스크립트 (JavaScript)

Chapter 2. 데이터 타입과 변수

Chapter 3. 함수와 실행 컨텍스트

Chapter 4. 자바스크립트 객체

Chapter 5. 내장 객체

Chapter 6. Vue.js

 

[ 오늘 내용 정리 ]

1일차

프론트엔드 개발의 대표적인 언어인 자바스크립트에 대해서 배웠다.

졸업프로젝트를 하면서 급하게 공부하고 사용 중이던 언어였는데, 이번 수업으로 동작원리를 자세하게 알아갈 수 있었다.

 

자바스크립트는 완전한 프로그래밍 언어라고 보기는 어렵기 때문에 문법 등에 대한 기준이 다른 언어들에 비해 엄격하지가 않다. 세미콜론이 필수가 아니고, 함수의 인자 개수가 안맞아도 상관없고, 자료형도 명시적으로 선언할 필요가 없다. 그래서 개발하면서도 오류메세지는 따로 안나오는데 이해가 안가는 상황들이 많았던 것 같다.

 

number, string, boolean, undefined, function의 5가지 데이터 타입을 제외한 나머지를 지칭하는 object라는 데이터 타입까지 자바스크립트의 자료형에 대해 배웠다.

자바스크립트에서 함수를 선언하는 방법은 다른 언어와 비슷한 방식으로 함수를 선언하는 '선언적 함수 방법'과 변수 선언같이 var로 함수를 선언하는 '함수 리터럴 방법' 방법이 있다. 자바스크립트에서는 함수가 함수의 인자로 들어갈 수도 있고, 리턴값으로도 함수가 들어갈 수 있다.

가장 기억에 남았던 내용은 자바스크립트의 Scope라는 개념이었다. Scope에는 Global한 영역과 Local 영역이 나뉘는데 Global 영역에 선언되지 않은 함수가 선언되면 그 함수의 Scope 영역이 생기고 그 안에서 해당 함수의 지역변수, 함수들이 선언된다. 이 후 함수 실행이 끝나면 그 함수의 Scope 영역은 사라지는데 이 때 함수의 리턴값이 함수이거나, 해당 함수 안에서 글로벌 변수에 할당한 값이 있다면 영역이 사라지지 않는 클로저라는 특성이 있었다.

또한 호출된 함수가 실행되는 과정에서 할당된 스코프 내에 존재하는 변수 등이 있으면 이전에 호출된 부모 스코프 영역으로 넘어가서 같은 이름의 변수를 찾는 스코프 체인에 대해서도 배웠다.

모든 자바스크립트 코드가 실행될 땐 실행 전에 코드를 쭉 스캔해서 Global 영역에 선언적 함수를 먼저 할당하고, var로 선언된 변수명을 먼저 할당한다. 이 과정을 호이스팅이라고 하는데, 호이스팅에 대해서 실습도 엄청 많이하고 강사님께서 그림도 그려가며 설명해주셨기 때문에 이해가 잘 되었다.

 

2일차

자바스크립트의 다양항 객체(Object)에 대해 배웠다. 배열, JSON, this, 생성자 함수 등에 대해 자세하게 배울 수 있었다.

또한 String, Number, Date, Math, Array 등 JS의 다양한 내장 객체에 대해 배웠는데, 특히 배열(Array)에 적용되는 메소드들 중 splice(), filter(), forEach(), map(), reduce() 의 사용법을 익혀보는 시간을 가졌다.

 

JS의 객체 중 JS를 통한 HTML문서의 조작을 지원하는 DOM (Document Object Model) 객체에 대해서도 가볍게 배웠다.

 

마지막으로 자바스크립트 라이브러리 중 하나인 Vue.js에 대해 배웠다. Vue.js를 사용하면 Vue 객체를 생성해서 HTML의 요소값으로 바로 접근할 수 있다.

v-html, v-bind, v-model, v-show, v-if, v-else-if, v-else, v-for과 같이 Vue.js에서 제공하는 다양한 속성의 사용법을 배웠고, Vue 객체 생성 시 들어가는 el, data, computed 값에 대해서도 배웠다. 수업 시간이 많지 않았기 때문에 빠르게 넘어간 감이 없지 않은데 나중에 실습파일 참고해서 공부해보자. 이후 장고 시간에도 같이 활용할 기회가 있을 것 같다.

 

아래 사이트에 JS의 다양한 기본적인 문법과 객체에 대한 설명들이 잘 되어있으니 나중에 공부할 때 참고하자.

www.w3schools.com  

W3Schools Free Online Web Tutorials