멋쟁이사자처럼 프론트엔드스쿨 w/ 제주코딩베이스캠프
오전(09:00~11:50) 수업 w/ Wade
싸피 면접..ㅎ
기타 주요해보이는 챗들
- 문자열은 원시값 : 인스턴스간에 값 공유가 불가능
원시타입의 값은 값의 위치를 참조하는 것이 아니라 값을 복사함.
그래서 같은 값을 공유하는게 아니라 계속 새로운 값이 복사가 된다. - 데이터 관리 객체 : 은닉하고 있다가 필요할때 다른 객체에 전달 혹은 수정
- 뷰어 객체 (데이터, 인풋, 버튼, 뷰어를 연결하는 객체)
오후(13:00~14:00) 수업 w/ Wade
- IIFE - 즉시 실행함수(Immediately Invoked Function Expression)
- Jasmine → spyOn, toHaveBeenCalled는 짝이다.
- 생성자함수에 method 만들어주려면 prototype이용
- 처음부터 TDD로 하면 정말 어렵다. 먼저 모듈식으로, 객체지향으로 짜보고 그 다음 TDD 연습
- 중요도로 따지면 TDD는 저 멀리
- 안쓰는 회사도 많다.
- 쓰는 플젝도 있고 안쓰는 플젝도 있다.
- 간단한 코드에 tdd 작성하는 것만해도 많이 작성을 해줘야 한다. 배보다 배꼽이 커지는 경우도
- 모든 코드가 아니라 유틸리티성 코드에다가 tdd 작성
막간 QnA
- 아무리 일했던 사람이더라도 연차를 전부 할당받기는 힘들다
- 멋사 플젝만으로 합격이 가능한가??
→ 멋사 플젝도 꽤 많다. 기여도가 많게끔 해주는 게 좋다. - 사이트 만들어달라는 기관이 있다면?
→ 무료는 바로 컷, 유료는 게시판 1~2개로 해볼만하다.
분반용 시험(14:00~16:00)
배운 내용 총망라 퀴즈! 한번 풀어보자
1. 다음 중 float 을 해제하는 방법으로 적절한 것을 고르세요. *
a. Float 된 요소에 display:inline-block 속성을 부여한다.
b. Float 된 요소의 부모요소에 clear:both 속성을 부여한다.
c. Float 된 요소의 다음 형제요소에 overflow:hidden 속성을 부여한다.
d. Float 된 요소의 부모요소에 overflow:hidden 속성을 부여한다.
2. 다음 중 css 선택자 우선순위(가중치)가 올바른 것을 고르세요. *
a. !important > ID 선택자 > class 선택자 > 가상 요소 선택자
b. Inline 스타일 > !important > 가상클래스 선택자 > class 선택자
c. 가상 요소 선택자 > class 선택자 > 가상클래스 선택자 > 요소선택자
d. ID 선택자 > 가상클래스 선택자 > 요소 선택자 > 가상 요소 선택자
3. 다음 중 웹페이지의 로딩이 느릴 경우 고려해야 할 사항이 아닌 것을 고르세요. *
a. 사용되는 이미지의 용량
b. 올바른 css 선택자의 사용
c. 자바스크립트 최적화
d. 브라우저 리플로우(reflow)를 일으키는 속성 제거
4. <button> 과 <input> 요소에 대한 설명으로 올바른 것을 고르세요. *
a. <button> 요소의 기본 타입은 button 이다.
b. <input> 요소는 인라인 요소임으로 자식으로 인라인 요소만 감싸줄수 있다.
c. <button> 요소는 컨텐츠를 중앙으로 정렬하는 기본 스타일을 가진다.
d. <button>의 submit 타입의 성능이 <input>의 submit 보다 우수하다.
5. 다음 속성에 대한 설명 중 틀린 것을 고르세요. *
a. src 속성은 필요한 소스의 경로를 나타냅니다.
b. href 속성은 하이퍼링크가 가리키는 URL을 나타냅니다.
c. alt 속성은 요소에 대한 설명으로 마우스를 호버하면 툴팁을 표시합니다.
d. lang 속성은 요소 내에 사용된 언어를 정의합니다.
6. 다음 중 display:inline 에 대한 설명으로 올바른 내용을 고르세요. *
a. normal flow 에 존재할 때 float 된 요소를 알아보지 못한다.
b. 한 라인을 모두 차지하는 특징이 있다.
c. 마진 탑(margin-top)값의 설정이 불가능하다.
d. display:inline 요소의 자식으로는 반드시 inline 요소만 가능하다.
7. HTML 요소에 대한 설명으로 틀린 것을 고르세요 *
a. <p> 태그는 문단을 나타냅니다.
b. <head> 태그는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
c. <article> 태그는 사이트 안에서 독립적으로 구분해 재사용할 수 있는 구획을 의미합니다.
d. <body> 태그는 html 문서의 내용을 나타냅니다.
8.다음 중 SEO(Search Engine Optimization) 와 관련 없는 내용을 고르세요. *
a. <title> 태그의 사용
b. 웹 접근성 준수
c. 오래된 자바스크립트 문법의 사용
d. 페이지 계층구조 작성
9. 아래 A, B 중 A 요소를 중앙정렬(가로)을 하고자 합니다. 다음 설명 중 올바른 것을 고르세요. *
A : 정렬하고자 하는 요소 / B : A를 감싸고 있는 컨테이너
a. B에 margin: 0 auto 속성을 부여한다.
b. A에 display:flex, align-items: center 속성을 부여한다.
c. B에는 position: relative 속성을, A에겐 position: absolute, left:50% 속성을 부여한다.
d. B에게 display:flex, justify-content:center 속성을 부여한다.
10. 다음은 flex에 대한 설명입니다. 올바르지 않은 설명을 하는 사람을 고르세요. *
a. 파이 : flex는 부모를 통해 자식들을 컨트롤할 수 있어!
b. 썬 : 그리고 직계자식까지만 영향을 줄 수 있지.
c. 빙키 : flex-item들은 기본적으로 Axis 기준으로 정렬되기 때문에 기본 방향은 위쪽에서 아래쪽이야!
d. 뮤라 : flex-direction이 column일 때 가로로 중앙정렬을 하고 싶다면 align-item을 center로 설정하면 된대.
11. css sprite 기법을 통해 로고 이미지를 사용하고자 합니다. 다음 이미지의 width, height가 각각 50px일 때, 올바른 것을 고르세요. *
이미지 안 로고의 width, height는 25px이며, 패딩값은 0입니다.
a. 페이스북 로고 : background: url(‘경로’) 25px 0;
b. 네이버 로고 : background: url(‘경로’) 0 -25px;
c. 구글 로고 : background: url(‘경로’) 25px -25px;
d. 네이버 로고 : background: url(‘경로’) 0 25px;
12. 다음 중 javascript class 문법에 대한 설명으로 틀린 것을 고르세요. *
a. class 선언 내의 모든 코드는 strict 모드로 작동한다.
b. class 선언은 호이스팅된다.
c. new 키워드 없이 class 생성자를 호출할 수 없다.
d.
13. 다음 코드에서 this 가 가리키는 것을 고르세요. *
var myTarget = document.querySelector('.btn');
myTarget.addEventListener('click', () => {console.log(this);})
a. document 인터페이스
b. Window 전역객체
c. myTarget 이 바라보는 요소
d. click 이벤트 타입
14. 다음 중 파일이나 디렉터리의 권한을 부여하는 명령으로 알맞은 것을 고르세요. *
a. chgrp
b. chmod
c. umask
d. quota
15. 다음 중 vi 에디터에서 삽입하기 명령으로 알맞은 것을 고르세요. *
a. k
b. b
c. i
d. x
16. 다음 Array 메서드 중 return 값이 undefined인 것은? *
a. find
b. filter
c. map
d. forEach
17. 다음 중 promise와 연계할 수 있는 명령어가 아닌 것은? *
a. then
b. catch
c. try
d. finally
18. 다음 중 SASS에서 Extend를 사용하기 위한 키워드로 알맞은 것은? *
a. @
b. %
c. $
d. &
19. bootstrap의 container는 1개의 row안에 몇 colum으로 이뤄져 있나요? *
a. 8
b. 10
c. 12
d. 16
20. (jQuery)ul 안에 li가 5개 있습니다. 3번째 요소 이상(3번째 li, 4번째 li, 5번째 li)부터 color를 red로 변경하는 코드를 작성해 주세요. *
정답: dabcc/cbcdc/bbbbc/dcbc $('ul').children('li:gt(1)').css('color', 'red');
CODE LION JavaScript 수강(16:00~18:00)
- array.indexOf(number)는 해당 number가 array에 존재시 처음으로 발견되는 number의 index를 반환(number가 여러개일 수도 있으니깐), 없으면 -1을 반환한다.
혼자 코드보고 복습(?)한 OOP, TDD
객체지향
// 객체지향
// 1. 모듈 패턴
function person() {
let age = 35;
return {
getAge: function () { return age },
setAge: function (data) { age = data }
}
}
// 함수 안에 숨겨진 변수를 함수 외부에서 접근하기 위해 setter, getter 함수 property를 가진 object 자체를 반환
const myPerson = person();
// 함수를 실행해줄 때 이미 객체가 return되기 때문에 new 연산자를 통한 생성자 함수를 실행할 이유가 없다.
console.log(myPerson.getAge());
// object property로 들어가 있는 함수 method를 실행해서 age값을 받아온다.
// -----------------------------------
// 2. 사용자 정의 타입 패턴
function PersonType() {
this.age = 35;
}
// 모듈 패턴과는 다르게 PersonType이라는 함수 객체의 부모격이라 할 수 있는 prototype에 getAge라는 method를 추가해줘서 PersonType에서 이용할 수 있개 해준다.
// 크롬 콘솔창에서 PersonType() 내부에 console.log(this)를 찍어보니 Window가 출력이 된 것으로 보아 객체에 할당하지 않고 그냥 PersonType()을 호출하면 Window 전역 객체에 age property가 35로 할당된다.
PersonType.prototype.getAge = function () {
return this.age
}
const instancePerson = new PersonType();
// 객체 자료형들을 사용하듯이 new 연산자를 통한 생성자 함수 실행으로 객체 할당
const instancePerson2 = new PersonType();
const instancePerson3 = new PersonType();
const instancePerson4 = new PersonType();
// 각 instance마다 서로 다른 객체는 할당 되겠지만 암튼 각 instance의 age는 다 35이긴 하고, age method로 값을 호출할 수 있다.
console.log(instancePerson.age);
// -------------------------------
// 3. 모듈 + 사용자 정의 타입
function PersonType2() {
let age = 25;
// 모듈 패턴처럼 함수 내 클로저 공간에 변수를 할당
function innerPersonType() { }
innerPersonType.prototype.getAge = function () {
return age;
}// getter함수를 객체 내 property로 선언하지 않고 사용자 정의 타입처럼 prototype으로 추가해줬다.
return innerPersonType;
}
const Person3 = PersonType2(); // 모듈패턴처럼 함수 실행으로 사용자 정의 타입 함수 할당
const person3 = new Person3(); // 사용자 정의 타입으로 할당
console.log(person3.getAge()); // 후 method 호출 값 콘솔
// IIFE 패턴으로 만들어보기 // 즉시 실행 함수
const PersonType3 = (function () {
let age = 25;
function innerPersonType() { }
innerPersonType.prototype.getAge = function () {
return age;
}
return innerPersonType;
})();
// 모듈 패턴 해주던 방식을 즉시 실행 함수로 수행
const personType3 = new PersonType3();
console.log(personType3.getAge());
TDD
- Java 공부하면서 도대체 error를 왜 억지로 만들어주지? 했던 의문이 TDD를 배우면서 비로소 해결 되었다. TDD를 통해서 실제 서비스에서 발생할 수 있을 것으로 예상되는 Error를 미리 throw해보는 것이다. 그것을 tdd test 프로그램등을 통해 실현해보고. 이를 통해 실제 서비스에서 발생하는 error에 유연하게 대처할 수 있게 될 것이다.
- 오늘 수업 코드에서 viewManager.js 파일에서 if 문에 error로 던져줄 경우의 수들을 미리 다 지정해주는 것을 통해서 크게 느낄 수 있었다.
- TDD를 통해 원하는대로 에러를 발생시켜보고 제대로 동작하는지 확인하며 코드를 가지고 놀 수 있으면 정말 재밌을 것 같다
- Java의 가장 큰 매력이라 생각했던 OOP를 JavaScript로도 잘 구현해서 가지고 놀아보자 ㅎㅎ
'기록 > 멋쟁이사자처럼 FE 스쿨' 카테고리의 다른 글
| [멋사 FE 스쿨] 33일차 리뷰 (0) | 2021.12.15 |
|---|---|
| [멋사 FE 스쿨] 32일차 리뷰 (0) | 2021.12.14 |
| [멋사 FE 스쿨] 30일차 리뷰 (0) | 2021.12.10 |
| [멋사 FE 스쿨] 29일차 리뷰 (0) | 2021.12.09 |
| [멋사 FE 스쿨] 28일차 리뷰 + 보라님 특강 (2) | 2021.12.08 |
댓글