TIL_171023 SASS, Javascript test

SASS 문법 특징

  • 숫자 연산을 위해선 변수에 담아야만 숫자 연산이 가능
  • 기본적인 연산자는 문자열로 취급함 (e + -resize —> e-resize)

import partial

  • 선 compile 후 merge (x)
  • 선 merge 후 compile위해 _를 사용
  • partial 파일은 _header.scss, _sidebar.scss, _footer.scss 형식으로해서 merge파일(style.css)에는 일반적 형식 (@import “header”)로 임포트함

!default;

  • css의 important와 달리, 초기화 값을 설정한 것
  • 즉, 해당 문구 이전에 설정해준 값이 없다면 해당 문구를 초기화 값으로 쓰라는 의미

SASS 적용하기

아래 3가지 사항부터 먼저 시작해서 차츰 늘려나가는 방식으로 공부하기

  1. 변수 (if/for)
  2. Partial
  3. Nesting

[참고]*

  • 개발할때는 src파일에 분류하여 넣어놓고 이를 컴파일해서 배포할 파일은 dist와 같은 폴더에 분류하여 정리

오늘의 느낀점

이번 시험에서도 느껴지는 코딩연습!! 특히 19번의 경우에는, todolist 실습 선생님 답안을 해석해보고 익혀야될듯. 나는 내가 생각할 수 있는 범위 안에서 코드를 작성했지만, 이후의
문제와 가독성있는 코딩을 위해 어떤 방식으로 작성되어있는지 확인하면서 따라해봐야겠다.

TEST

1. 실행 컨텍스트란 무엇인가? 5점

ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되는 환경 이라고 말할수 있다.

2. Variable Object (VO / 변수객체)는 무엇인가? 5점

실행 컨텍스트가 생성되면 자바스크립트 엔진은 실행에 필요한 여러 정보들을 담을 객체를 생성한다. 이를 Variable Object(VO / 변수 객체)라고 한다. Variable Object는 코드가 실행될 때 엔진에 의해 참조되며 코드에서는 접근할 수 없다.

Variable Object는 아래의 정보를 담는 객체이다.

  • 변수
  • 매개변수(parameter)와 인수 정보(arguments)
  • 함수 선언(함수 표현식은 제외)

3. 클로저(closure)의 개념에 대해 설명하라 5점

클로저는 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것을 의미한다.

4. 다음 중 전역 객체의 프로퍼티(Global property)가 아닌 것은? 5점

① Infinity
② NaN
③ undefined
④ length

5. var numObj = 12345.6789;일 때, numObj.toFixed()의 결과는? 5점

12346

6. var arr = [1, 2, 3];일때, Math.max를 사용하여 가장 큰 요소를 구하라 5점

1
var max = Math.max.apply(null, arr); // 3

7. var str = ‘How are you doing?’;일 때, console.log(str.split(‘ ‘));의 출력 결과는? 5점

[ ‘How’, ‘are’, ‘you’, ‘doing?’ ]

8. 정규표현식의 플래그 i는 무엇을 의미하는가? 5점

대소문자를 구별하지 않고 검색한다.

9. 아래의 실행 결과는? 5점

1
2
3
4
5
6
var a = ['a', 'b'];
var b = ['x', 'y'];
var c = a.concat(b);
console.log(c);

[ ‘a’, ‘b’, ‘x’, ‘y’ ]

####10. 아래의 실행 결과는? 5점

1
2
var numbers = [1, 4, 9];
console.log(numbers.map(Math.sqrt));

[ 1, 2, 3 ]

####11. 배열 [1, 2, 3, 4, 5]에서 홀수만을 필터링하여 그 결과를 배열로 반환하는 코드를 작성하라. 5점

1
2
3
4
5
var result = [1, 2, 3, 4, 5].filter(function (item, index, array) {
console.log('[' + index + '] = ' + item);
return item % 2; // 홀수만을 필터링한다 (1은 true로 평가된다)
});
console.log(result); // [ 1, 3, 5 ]

####12. DOM이란 무엇인가? 5점
브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

####13. 동기식 처리와 비동기식 처리는 무엇이 다른가? 5점
동기식 처리 모델(Synchronous processing model)은 직렬적으로 작업을 수행한다. 즉 작업은 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.

비동기식 처리 모델(Asynchronous processing model or Non-Blocking processing model)은 병렬적으로 작업을 수행한다. 즉 작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 실행한다는 의미이다. 예를 들어 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 경우 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 작업을 수행한다. 이후 서버로부터 데이터가 응답되면 이벤트가 발생되고 이벤트 핸들러가 데이터를 가지고 수행할 작업을 계속하여 수행한다.

자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기적으로 동작한다.

####14. DOM Level 2 Event Listener의 경우, 이벤트 핸들러 내부의 this는 무엇을 가리키는가? 5점
this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

####15. 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 즉 이벤트가 전파(Event Propagation)되는데 전파 방향에 따라 (1)과 (2)으로 구분할 수 있다. (1)과 (2)는 무엇인가? 5점
버블링, 캡처링

####16. Event 객체의 프로퍼티 중, 이벤트를 발생시킨 요소를 가리키는 것은 무엇인가? 5점
① Event.key
② Event.currentTarget
③ Event.value
④ Event.target

####17. Ajax는 무엇인가? 5점
Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.

####18. HTTP Method 중 대표적인 4가지를 열거하라. 5점
GET, POST, PUT, DELETE

####19. 아래의 todos에 새로운 todo를 추가하려 한다. 이때 todo의 id로 사용할 현재 todos의 id 중 최대값보다 1 큰 값을 반환하는 코드를 작성하라. 10점

1
2
3
4
5
6
7
8
9
10
11
12
var todos = [
  { id: 3, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];
//답
var nextId = Math.max.apply(null, todos.map(function (todo) {
return todo.id;
})) + 1;
console.log(nextId);