Claire
Front-End Developer
KEEP CALM AND LOVE CODING
- 출처: inflearn - velopert님 강의
- [Contact 검색기능 구현] input, sort, filter
- [Contact 선택기능 구현] React.js 기초개념 응용
- [state 내부 배열 처리하기] Immutability Helper / ES6 spread
- [Contact 추가/삭제/수정 기능 구현] Immutability Helper 적용하기
- [Contact 데이터 추가기능 구현] 컴포넌트 응용
- [Contact 데이터 삭제/수정 기능 구현] 컴포넌트 응용
- [Contact 엑스트라 기능 구현] i KeyPress, ref
- Component LifeCycle API
- [Contact 데이터 새로고침해도 유지하기] localStorage
- Array.prototype.some()
- Array.prototype.every()
- Array.prototype.find()
- Array.prototype.findIndex()
- Fetch API 의 가장 유용하고, 핵심적인 함수는
fetch() 함수
- 가장 간단한 형태의
fetch() 함수는 URL 을 인자로 받고 응답을 처리하기 위한 promise를 반환.
- 응답을 처리할 때
Response 객체를 이용 할 수 있다
- flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정
- Array.prototype.map()
- Array.prototype.reduce()
- Array.prototype.sort()
- Array.prototype.filter()
:root 요소에 대해 새 스타일을 선언하고 스타일 정의 내에 두개의 하이픈 --을 붙여서 변수를 선언.img 요소에 새로운 스타일을 선언하고 배경, 필터 및 패딩 속성을 루트 요소에서 정의한 변수로 설정.
- 생성자는 Date 객체가 로컬 시간에 따른 현재 날짜와 시간값을 가지도록 합니다. 만약 전달값 중 일부만 있다면, 나머지 빠진 전달값들은 모두 0이 됨.
- 모든 전달값을 제공하려면 최소한 연도, 월, 일은 포함해야 하며, 시, 분, 초 그리고 밀리초는 생략 가능.
- HTML5의
Custom Data Attributes 데이터 표현이 가능
- 태그에 대한 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)
data-* 속성은 HTML 엘리먼트내에서 별다른 역할을 하지 않는 단순한 데이터
- 연산 (Operations)
- 보간법 (#{}, Interpolation)
- Mixins
@import 호출(Import on Steroids)- 중첩
@import
- 스타일 모듈 관리 (Manage Style Modules)
- 변수(Variables, $)
- !defult, !global, !optional
- sass 내장함수
- 데이터 유형 (Data Type)
- 주석(Comments)
- 중첩 규칙(Nested Rules)
- 중첩 속성(Nested Properties)
- 부모, 참조 선택자 (&)
- RWD, 부모 참조 선택자(&)와 미디어쿼리
- 선택자 상속(Selector Inheritance, @extend)
- 선택자 상속, 옵션(!optional)
- 대체 선택자(Placeholder Selector, %)
- HTML5 MARKUP
- HTML 목록
- HTML 폼
- HTML 구조
- DTD(Document Type Definition) 선언
- meta
- 비표준 IE 조건부 주석문
- 언어 인코딩 설정
- 타이틀
- 모바일 최적화 환경 설정
- 검색 엔진 최적화 SEO (Search Engine Optimization)
- MIME Type (Multipurpose Internet Mail Extensions)
- HTML 목록(Ordered List, Unordered List, Definition List)
- HTML 폼
- HTML5 MARKUP
- DB Basic ‐ DB란 무엇인가?
- SQL (Structured Query Language)
- 관계형 데이터 베이스
- NoSQL(Not Only SQL)
- 데이터베이스 관련 용어
- MongoDB
- Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
- 프로젝트에 대한 설정을 package.json 안에 의존하고 있는 외부 라이브러리 정보를 담고 있는 문서. (JSON형식)
node_modules 폴더가 설치
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리
- 기본 함수 매개변수(default function parameter)를 사용하면 값이 없거나
undefined가 전달될 경우 매개변수를 기본값으로 초기화할 수 있다.
- 기본 함수 매개변수(default function parameter)를 사용하면 값이 없거나
undefined가 전달될 경우 매개변수를 기본값으로 초기화할 수 있다.
- 전개 연산자(spread operator)는 표현식(expression)은 2개 이상의 인수arguments(함수 호출 용)나 2개 이상의 요소elements(배열 리터럴 용) 또는 2개 이상의 변수(비구조화 할당 용)가 예상되는 곳에 확장될 수 있도록 합니다
- 나머지 매개변수(rest parameter) 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.
- 비구조화 할당(destructuring assignment) 구문은 배열 또는 객체에서 데이터를 별개(distinct) 변수로 추출할 수 있게 하는 JavaScript 식(expression).
- Array Destructuring
- Object Destructuring
let, const, and blocks
- LET is block scoped (
ES5: function scope)
var 키워드를 사용할 경우는 블록문(if, for, while)은 별도의 공간을 가지지 않는다.- ES6(ECMAScript 2015)에서는
let 키워드가 등장했는데 let 키워드를 블록문 내부에서 사용할 경우, 별도의 공간이 형성이 된다.
- 통칭 Javsscript라고 부르지만 실제 표준 명칭은
ECMAScript
- Ecma 인터내셔널의 ECMA-262 기술 규격에 정의
TC39(Technical Committee) JavaScript 버전을 정하는 그룹ES3 -> ES3.1 / ES4 -> ES3.1(===ES5) -> ES6 -> ES7 -> ES8 (계속 버전업)- ECMAScript Discussion Archives
DOM API
- DOM (Document Object Model): 현재 DOM Level 4 사용.
- API: Application Programming Interface
queryAll(), query() 헬퍼함수
window.screen
- window.screen.height
- window.screen.availHeight
- window.screen.orientation
window.navigator
- window.navigator.geolocation
- window.navigator.platform
- window.navigator.userAgent
window.location
window.devicePixelRatio
- 모든 이벤트 핸들러에는 Event Object가 넘겨져 들어온다.
- Event Object는 발생한 이벤트에 대한 추가 정보를 제공한다.
- 추가 정보는 이벤트의 종류에 따라 조금씩 차이가 있다.
Evnet Capturing : 넷스케이프, 거의 사용하지 않는다.Event Bubbling : MS, 사용을 많이 한다.
- 이벤트 속성에 함수를 연결하는 것을 이벤트 바인딩 한다. (Event property, handler, binding)
- [추가, 연결] 이벤트 속성에 함수(핸들러)를 설정
- [제거] 이벤트 속성에 초기 값인 null을 대입
올바른 데이터 유형을 체크하는 방법
typeof 키워드instanseof 키워드.constructor 속성- 사용자 정의 헬퍼 함수
isDtatType()
- 출처:Benzen Workshop-https://workshop.benzen.io/
- 객체 지향 프로그래밍(OOP)에서
인스턴스(instance)는 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미.
클래스는 속성(property)과 행위(Method)로 구성된 일종의 설계도이다. OOP에서 객체는 클래스와 인스턴스를 포함한 개념이다.- 추상화(Abstraction) : 복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.
- 캡슐화(Encapsulation) : 클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)
- 상속성(Inheritance) : 클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.
- 다형성(Polymorphism) : 다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.
Prototypes
Prototypes이란 자바스크립트의 객체 지향적 활용에 있어서 가장 중요한 개념- 객체에 걸린 링크
- window객체는 객체에 걸린 링크가 있는데 객체에 걸린 링크를 프로토타입이라고 한다.
- 스코프 체이닝을 통해 값을 찾으러 올라가다가 프로토타입에도 없을 경우에 에러가 난다.
- window객체는 객체에 걸린 링크가 있는데 객체에 걸린 링크를 프로토타입이라고 한다.
- 콘솔에 객체를 찍어보면
__proto__라고 링크가 걸려있는 객체가 나오는데 이 안에 링크가 걸려있는 객체 리스트가 나온다. 지양
- 자바스크립트에는 클래스 개념이 없다. (ES6에도 클래스가 없다.)
this의 값을 판단 방법 new keyword
- new를 사용하면 다음 4가지 발생
-
- 완전 새로운
빈 객체(Objcect)를 생성함
-
- 새로 만든 빈 객체를
또 다른 객체에 연결
-
- 새로 만들어진 빈 객체가 해당 함수의
this 값으로 넘겨짐
-
- 해당 함수에서의 retrun 이 없으면 빈 객체가 return.
- 함수 표현식 vs 함수 선언식
- 함수를 함수에 전달해 주기
- 함수를 반환하는 함수
Closures
- 유효범위 체인
Scope Chain
- 즉시실행함수
IIFE
- 주변 상황을 기억한다.
- 인자로서 전달도 가능하며, 값으로서 반환 또한 가능하다.
- 자바스크립트 함수는 일급 객체의 요건을 모두 충족한다.
- 함수가 실행되어 내부에 존재하는 함수를 외부로 반환할 경우 클로저가 생성되며, 반환된 함수는 클로저 영역을 참조할 수 있다.
- 이 때 반환된 함수를
클로저 함수라 명한다.
- JavaScript의
this는 런타임 때, 실행할 때 this가 가리킬 때 변경이 된다.
- 상황에 따라서
this가 달라지기 때문에 디버깅을 통해 알아 내야 한다.
1. Call by value ( = 원시 데이터 유형(primitive type))
- 값에 의한 호출,
값이 그대로 복사되는 자료형
- 함수를 호출하면 매개변수를 함수 내부로 전달
- 이 때
변수의 값을 복사해서 전달하는 방식
- 대부분의 언어에서 기본 데이터 타입을 전달하면 발생
