본문 바로가기

JavaScript

[You don`t Know JS 정리] ch.4 클래스와 객체 혼합 Ch4. 클래스와 객체의 혼합 클래스 지향 개념은 자바스크립트 객체 체계와는 태생부터 잘 맞지 않아 지금껏 수많은 개발자가 이런 한계를 극복하고 기능을 확장하고자 노력해왔다. 4.1 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실생활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 데이터는 자신을 기반으로 하는 실행되는 작동과 연관되므로 데이터와 작동을 함께 잘 감싸는 것이 올바른 설계라고 강조한다. 컴퓨터 과학에서는 이를 자료 구조라고 표현하기도 한다. 클래스는 특정 자료 구조를 분류하는 용도로 쓴다. 다형성은 또 다른 클래스의 핵심 개념으로 부모 클래스에 뭉뚱그려 정의된 작동을 자식 클래스에서 좀 더 구체화하여 오버라이드하는 것을 뜻한다. 4.1.1 클래스 디자인 패턴 클래.. 더보기
[You don`t Know JS 정리] ch.3 객체 Ch3. 객체 3.1 구문 var myObj = { key: value, } var myObj = new Object() myObj.key = value 객체는 선언적 형식(리터럴 형식)과 생성자 형식, 두 가지로 정의한다. 거의 리터럴 형식을 사용하여 객체를 생성한다. 3.2 타입 자바스크립트 주요타입은 7개가 있다. (null, undefined, boolean, number, string, object, symbol) null의 타입은 객체가 아니고, 이렇게 와전된것은 언어 자체의 버그 때문이다. 복합 원시 타입은 객체의 하위 타입이다. function, array가 그렇다. function은 호출 가능한 객체이고, array 역시 추가 기능이 구현된 객체의 일종이다. 내장 객체 내장 객체도 객체의.. 더보기
[You don`t Know JS 정리] ch.1 this란 무엇인가 Ch1. this라나 뭐라나 this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자이다. this를 왜 사용할까 function identify() { return this.name.toUpperCase() } function speak() { var greeting = "Hello, I`m " + identify.call(this) console.log(greeting) } var me = { name: "Kyle", } var you = { name: "Reader", } identify.call(me) // KYLE identify.call(you) // READER speak.call(me) // "Hello, I`m KYLE" speak.call(you) // "Hello, I`m R.. 더보기
[You don`t Know JS 정리] ch.2 렉시컬 스코프 Ch2 렉시컬 스코프 스코프는 두 가지 방식으로 작동한다. 첫 번째 방식은 렉시컬 스코프, 두 번째 방식은 동적 스코프이다. 이 장에서는 렉시컬 스코프만 다룬다. 2.1 렉스타임 렉시컬 스코프는 렉싱 타임에 정의되는 스코프다. 프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 렉서가 코드를 처리할 때 확정된다. function foo(a) { var b = a * 2 function bar(c) { console.log(a, b, c) } bar(b * 3) } foo(2) // 2,4,12 위 예제 코드에는 3개의 중첩 스코프가 있다. 스코프 버블은 스코프 블록이 쓰이는 곳에 따라 결정되는데, 스코프 블록은 서로 중첩될 수 있다. 어떤 함수의 버블도 동시에 다른 두 스코프 버.. 더보기
[You don`t Know JS 정리] ch.1 스코프란 무엇인가 Ch1 스코프란 무엇인가 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 잘 정의된 규칙이 필요하다. 이런 규칙을 스코프라고 한다. 1.1 컴파일러 이론 자바스크립트는 사실 컴파일러 언어다. 전통적인 컴파일러 언어의 처리 과정에서는 프로그램을 이루는 소스 코드가 실행되기 전에 보통 3단계를 거치는데, 이를 '컴파일레이션' 이라고 한다. 토크나이징/렉싱 문자열을 나누어 '토큰'이라 불리는 의미 있는 조각으로 만드는 과정이다. var a = 2; // 위는 아래의 토큰으로 나눌 수 있다. var, a = 2 ; 토크나이징과 렉싱은 미묘한 차이가 있는데, 토큰을 인식할 때 무상태 방식으로 하는지 상태 유지 방식으로 하는지에 따라 구분한다. 토크나이저가 상태 유지 파싱 규칙.. 더보기
[You don`t Know JS 정리] ch.5 문법 Ch5. 문법 5.1 문과 표현식 문장은 생각을 표현하는 단어들의 완전한 조형물이다. 어구는 구두점이나 접속사로 연결할 수 있고 어구는 더 작ㅇ느 어구로 나눌 수 있다. 어떤 어구는 불완전하여 그 자체로 완성된 문장을 형성할 수 없지만 스스로의 힘만으로 완성되는 어구도 있다. 자바스크립트에서는 문은 문장, 표현식은 어구, 연산자는 구두점/접속사에 해당된다. 자바스크립트에서 모든 표현식은 단일한, 특정한 결괏값으로 계산된다. var a = 3 * 6 var b = a b 위 예에서 3*6은 표현식이다. 나머지도 모두 표현식이다. 위 세 줄은 각각 표현식이 포함된 문이다. 세 번째 줄은 표현식의 전부지만 이것만으로도 완전한 문이다. 이런 것을 '표현식 문'이라고 한다. 5.1.1 문의 완료 값 모든 문은 완.. 더보기
[You don`t Know JS 정리] ch.4 강제변환 Ch4 강제변환 4.1 값 변환 어떤 값을 다른 타입의 값으로 바꾸는 과정이 명시적이면 '타입 캐스팅', 암시적이면 '강제변환' 이라고 한다 강제변환을 하면 문자열, 숫자, 불리언 중 하나가 된다. 박싱은 강제변환이 아니다. 명시적 강제변환은 코드만 봐도 의도적으로 타입변환을 일으키는 것이 명백하고, 암시적 강제변환은 다른 작업 도중 발생하는 부수 효과이다. 4.2 추상 연산 4.2.1 ToString 내장 원시 값은 본연의 문자열화 방법이 정해져 있다. 너무 크거나 작은 숫자값은 지수 형태로 바뀐다. 일반 객체는 특별히 지정하지 않으면 기본적으로 toString() 메서드가 내부 [[Class]]를 반환한다 ([object object]) 배열은 모든 원소 값이 콤마(,)로.. 더보기
[You don`t Know JS 정리] ch.3 네이티브 Ch3 네이티브 네이티브는 특정 환경(브라우저등의 클라이언트 프로그램)에 종속되지 않은 ECMAScript 명세의 내장 함수다. 가장 많이 쓰는 네이티브들은 다음과 같다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() // new String을 예를 들자 var s = new String("Hello World") typeof s // "object" 이며 "string"이 아니다. new String()은 내부 인자를 감싸는 문재열 래퍼를 생성하며 원시값 "Hello World"는 아니다. 위의 예를 보면 s는 String 클래스의 인스턴스고, 아래와 같이 나온다. String {"Hello.. 더보기
[React] react-pagination 구현 아래 컴포넌트 사용 https://github.com/vayser/react-js-pagination 아래 블로그의 도움을 많이 받았다. https://ing-yeo.net/2019/08/react-beginner-3/ 더보기
[React] Hooks의 종류 출처: 리액트를 다루는 기술 - 개정판 1. useState() - 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌. 해당 함수의 인자에는 상태의 기본값이 들어감. 2. useEffect() - 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있음. 3. useReducer() - useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용함. - 현재 상타, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수. 반드시 불변성을 지켜줘야 함. - 첫번째 인자로 reducer 함수를 받고, 두번째 인자로 해당 리듀서의 기본값을 넣어준다. - 이 Hook은 배열을 리턴하고, 첫번째 인자가 상태고, 두번째 인.. 더보기

티스토리툴바