티스토리

develop design - er

검색하기

블로그 홈

develop design - er

code-designer.tistory.com/m

디자인 사랑하는 개발자의 기록 모음

구독자: 1

방명록 방문하기

주요 글 목록

커링 Currying 과 클로저 📍 클로저 간단 복습 클로저는, 현재의 유효범위를 넘어 스코프 체인으로 연결된 객체나 변수를 참조할 수 있게 해준다. 간단하게는 "함수와 함수가 선언된 어휘적 환경의 조합" 으로 정의된다. ✔ 장점 • 함수 내에 있는 변수를 재활용할 수 있다. • 참조하고 있는 변수를 외부에 노출시키지 않을 수 있다. 은닉 가능 ✔ 단점 • 클로저 함수를 남발하면 메모리 누수가 발생한다. 📌 커링을 공부하게 된 계기 코드를 작성하면서 은연중에 클로저를 사용하고 있다는 건 안다. 하지만 효과적으로 사용하고 있냐는 질문에는 자신있게 대답을 못하겠더라 .. ㅎ 그래서 실제 클로저 예시를 찾아보게 되었다 !-! 📌 커링 Currying 커링은 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각.. 공감수 0 댓글수 0 2022. 4. 11.
자바스크립트 프로토타입 Prototype (2) 📌 프로토타입 (객체) ? ❗ 객체 간 상속inheritance을 구현하기 위한 핵심 개념 ❗ ❗ 프로토타입의 프로토타입은 언제나 Object.prototype ❗ 프로토타입은 어떤 객체의 상위 객체(부모 객체)의 역할을 하는 객체로, 다른 객체에 공유 프로퍼티/메서드를 제공한다. 프로토타입을 상속받은 하위 객체(자식 객체)는 상위 객체의 프로퍼티/메서드를 본인의 프로퍼티/메서드처럼 자유롭게 사용할 수 있다. 📌 객체 생성 방식과 프로토타입 결정 😮 (진심으로 너무 다양한) 객체 생성 방법들 ... ✔ 객체 리터럴 ✔ Object 생성자 함수 ✔ 생성자 함수 (new 연산자) ✔ Object.create 메서드 ✔ 클래스(ES6) 📍 객체 리터럴 객체 리터럴에 의해 생성되는 객체의 프로토타입은 Objec.. 공감수 0 댓글수 0 2022. 4. 4.
this 와 this binding 📌 this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing-variable 이다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property 나 method 를 참조할 수 있다. 단, this 가 가리키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정된다. 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 (간접) 호출 📎 일반 함수 호출 기본적으로 this 에는 전역 객체(global object)가 바인딩된다. (어떠한 함수[중첩 함수, 콜백 함수 포함]라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩.. 공감수 0 댓글수 0 2022. 4. 2.
자바스크립트 프로토타입 Prototype (1) (원시 타입을 제외했을 때) 자바스크립트를 이루고 있는 모든 것은 객체다. 📌 객체지향 프로그래밍 특징? 명령형 프로그래밍 객체지향 프로그래밍 ✔ 그래서, 객체지향 프로그래밍이 뭔데 ? 프로그램을 객체의 집합 으로 표현하려는 프로그래밍 패러다임 이다. 📎 객체 Object 📎 메서드 Method 📎 속성 Property 객체지향 프로그래밍은 실제 세계의 실체를 인식하는 철학적인 사고를 프로그래밍에 접목한 결과다. 현실에서 사물이나 개념은 각자의 '속성'을 가지고 있기 때문에 이를 기준으로 실체를 인식하거나 구분한다. 이 방식을 프로그래밍에 접목시켜보면, 하나의 객체(사물)는 상태(사물의 색상, 너비, 무게)와 동작(사물의 부피를 구하는 수식)으로 표현할 수 있다. 상태 state는 속성 property/.. 공감수 0 댓글수 0 2022. 3. 9.
22.02.17 면접 Q & A 📌 자바스크립트는 동기적 언어인가 비동기적 언어인가 ? 📌 자바스크립트의 "동기"와 "비동기"에 대해 아는대로 말해보기 자바스크립트는 동기적 언어입니다. 자바스크립트의 엔진이 싱글 스레드로 동작하기 때문에, 코드를 순서대로 읽을 수밖에 없습니다. 동기적인 언어의 문제점은, 해당 태스크를 끝내기 전까지는 아무것도 처리할 수 없다는 점입니다. 일례로 데이터를 불러오는 작업과 UI 컴포넌트의 렌더링 작업이 차례로 진행된다고 했을 때, 데이터가 모두 불러오기 전까지 화면이 하얗게 뜨는 문제가 발생할 수 있습니다. 반대로 UI 컴포넌트를 먼저 렌더링하더라도 컴포넌트에 할당된 이벤트가 동작되지 않는 문제를 야기할 수 있습니다. 이를 해결하기 위해 브라우저 엔진에 내장된 비동기 메서드를 사용합니다. fetch( ) .. 공감수 0 댓글수 0 2022. 2. 18.
자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식) 📍 당신이 선언한 변수는 스스로에게 할당된 값을 모 른 다. 우리가 변수로 선언하고 지정하는 모든 것은 "식별자"이다. 식별자란, 메모리 공간에 저장되어 있는 어떤 값을 구별(식별)해 낼 수 있는 고유한 이름이다. 즉, 식별자는 값이 아니라 값이 저장된 메모리 주소를 기억한다. --> 원시 타입과 객체 타입 모두에 해당되는 내용이기 때문에 굉장히 중요함 다음과 같은 방식으로 원시 타입의 값을 복사하게 되면 1또는 2와 같은 일이 일어난다. const num = 5; const copyNum = num; console.log(num === copyNum) // true // 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 "깊은 복사"라고 부르기도 한다. (공식 x) 1. 새로운 메모리 공간을 할당하여.. 공감수 0 댓글수 0 2022. 2. 15.
22.02.14 면접 Q & A 📌 원시 자료형과 참조 자료형의 차이 말해보기 원시 자료형은 (할당 후에) 변경 불가능한 데이터 타입이고, 참조 자료형은 (할당 후에) 변경 가능한 데이터 타입이다. 원시 자료형은 메모리에 저장될 때 값 그 자체가 저장되지만, 참조 자료형은 값의 참조 값, 즉 값의 주소가 저장되는 차이가 있습니다. 📍 과거 학습 내용 복습 2021.08.12 - [Front-end/JS] - 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/re.. 공감수 0 댓글수 0 2022. 2. 14.
22.02.13 면접 Q & A 📌 자바스크립트의 자료형[data type]이 필요한 이유 말해보기 모든 언어가 다 그렇지만, 원하는 값을 메모리에 저장하고 읽고, 사용하게 된다. 메모리에 값을 저장하기 위해선 저장되는 데이터의 크기를 알아야한다. 저장하기 위한 공간을 확보해야하기 때문이다. 데이터의 크기를 알 수 있게 하는 지표가 데이터 타입이다. -> 그래서 데이터 타입이 중요하다. 📌 자바스크립트의 자료형[data type]에 대해 말해보기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 1. 숫자 타입 [number] | 모든 수를 64비트 실수 처리. 2. 문자열 타입 [string] | 16비트 유니코드 문자로 표현. 3. 불리언 타입 [boolean] | True / False 4. undefined 타입 [undefine.. 공감수 0 댓글수 0 2022. 2. 13.
변수, 함수, 클래스 호이스팅 정리 📌 선언하는 모든 식별자는 호이스팅 된다 변수 선언문 (var, let, const), 함수 선언문 (function, function*), 클래스 선언문 (class) 은 모두 호이스팅이 일어난다. 📍 변수 ✔ var // var 키워드로 선언한 변수는 [1.선언 단계] & [2.초기화 단계]가 동시에 실행된다. // 따라서 변수 선언문 이전에 변수를 참조할 수 있다. console.log(VAR); // undefined var VAR; console.log(VAR); // undefined // 할당문에서 [3.할당 단계]가 실행된다. VAR = "var"; console.log(VAR); // "var" ✔ const ❗ const 키워드로 선언한 상수는 반드시 선언과 동시에 초기화 해야한다.❗ .. 공감수 0 댓글수 0 2021. 10. 5.
자바스크립트 정규표현식 RegExp 📌 정규 표현식 ? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어formal language이다. 자바스크립트의 고유 문법은 아니다. 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공하기 때문에 반복문이나 조건문을 사용하지 않고도 간단히 체크할 수 있다. 다만, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. ^!^ 📌 정규 표현식 생성 ◾ 정규 표현식 리터럴 const target = 'Is this all there is?'; // 패턴: is // 플래그: i => 대소문자를 구분하지 않고 검색한다. const regexp = /is/i; // test 메서드 // target 문자열에 대해 정규 표현.. 공감수 0 댓글수 0 2021. 9. 27.
자바스크립트 네이티브 객체와 호스트 객체 Native Object & Host Object 📌 자바스크립트 객체의 분류 (3) 자바스크립트 객체는 크게 네이티브 객체, 호스트 객체, 사용자 정의 객체 이렇게 3가지로 분류할 수 있다. 📌 네이티브 객체 Native Objects / Built-in Objects / Global Objects 란 ? ECMAScript(자바스크립트 언어 규약) 명세에 정의된 객체를 말한다. 애플리케이션의 환경과 관계 없이 언제나 사용할 수 있다. 애플리케이션 전역의 공통의 기능을 제공한다. ex. Object, String, Number, Function, Array, RegExp, Date, Math 📍 네이티브 객체(Global Objects)와 전역 객체(Global Object)는 다르다. 전역 객체는 모든 객체의 최상위 객체를 의미한다. ex. 브라우저.. 공감수 0 댓글수 0 2021. 9. 22.
자바스크립트 프로미스와 비동기 처리 Promise & Asynchronous 프로미스를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 프로미스 등장 배경 2021.09.20 - [개발 공부/JS] - 자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchron.. 공감수 0 댓글수 0 2021. 9. 21.
자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchronous 콜백 함수를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 비동기 함수에 콜백 함수가 필요했던 이유 // 여기서 흔히 말하는 callback 함수는 successCallback & failureCallback.. 공감수 0 댓글수 0 2021. 9. 20.
자바스크립트 비동기 프로그래밍 Asynchronous Programming 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 자바스크립트가 비동기적으로 작동해야하는 이유 변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 .. 공감수 0 댓글수 0 2021. 9. 6.
자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 ✔ 호이스팅이 발생하는 이유 ✔ 클로저의 동작 방식 ✔ 태스크 큐와 함께 동작하는 이벤트 헨들러 ✔ 비동기 처리의 동작 방식 실행 컨텍스트를 이해했을 때, 이 모든 것을 자연스럽게 습득할 수 있다. 📌 실행 컨텍스트execution context 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. ✔ 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)들을 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리해야 한다. ✔ 스코프는 중첩 관계에 의해 스코.. 공감수 0 댓글수 0 2021. 9. 5.
자바스크립트 돔 DOM 조작 연습 📌 JS가 받아오는 데이터 요약 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item', name: '콜드 브루' }, ], }, { type: 'group', name: '프라푸치노', children: [ { type: 'item', name: '애플 쿠키 크림 프라푸치노' }, { type: 'item', name: '더블 에스프레소 칩 프라푸.. 공감수 0 댓글수 1 2021. 8. 31.
자바스크립트 클래스 Class 입문 Achivement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 ) ✅ 객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 ) ✅ JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. ✅ Prototype이 무엇인지 이해할 수 있다 ✅ 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다. ✅ Prototype chain을 이해하고 설명할 수 있다. (__proto__) 📌 돌아보기 ◾ 메서드 호출 : 1번만 쓸 수 있음 (단순)객체 .. 공감수 0 댓글수 0 2021. 8. 29.
자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기 📌 Closure 활용 방법 대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다. // counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다. // 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다. // 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다. // 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다. let counter = (function() { let privateCounter = 0; function changeBy(val) { privateCounter += val; } return { // counter.increas.. 공감수 0 댓글수 0 2021. 8. 28.
자바스크립트 클로저 Closure 📌 일단 Lexical Scope? Dynamic Scope? ◾ Lexical Scope 함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 ) ◾ Dynamic Scope 함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 ) // 01 Lexical Scope와 Dynamic Scope 비교 let x = 1; function print() { console.log(x); // Lexical Scope : 1 -> 선언된 위치 기준 / 변수 x 전역 스코프 } function foo() { let x = 100; print(); // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프 } foo(); // 02 내부 함수.. 공감수 0 댓글수 0 2021. 8. 27.
자바스크립트 배열 고차함수 forEach / map 📍 Array.prototype.forEach ( immutable △ ) 함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. forEach 메서드는 for문을 대체할 수 있는 고차함수다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. const number = [1, 2, 3]; const pows = []; numbers.forEach(item => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]; 🔔 forEac.. 공감수 1 댓글수 0 2021. 8. 23.
자바스크립트 배열 메서드 Array Method (계속 추가중) ◾ Array.isArray ( immutable ) // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 배열과 객체를 구분할 때 typeof 대신 Array.isArray를 사용한다. ◾ Array.prototype.indexOf ( immutable ) const arr = [1, 2, 2, 3]; // 배열 arr에서 첫 번째로 검색된 요소 2의 인덱스를 반환한다. arr.indexOf(2); // 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -1 // 두 번째 인수는 검색을 시작할 인덱스다... 공감수 0 댓글수 0 2021. 8. 21.
자바스크립트 배열 고차함수 reduce 📍 Array.prototype.reduce ( immutable ) reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여, 하나의 결과값을 만들어 반환한다. // 1부터 4까지 누적을 구한다. // 숫자끼리 값을 더할 때는 초기값을 0으로 설정하지 않아도 값이 나오지만 // 그래도! 그래도! 초기값을 넣어주는 게 좋다. const sum = [1, 2, 3, 4].reduce( // 콜백 함수 (accumulator, currentvalue, index, array) => { accumulator + currentvalue }, // 초기값 0);.. 공감수 0 댓글수 0 2021. 8. 15.
자바스크립트 문서 객체 모델 DOM (Document Object Model) Achivement Goals ✅ DOM의 개념을 이해할 수 있다. ✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. 📌 웹 페이지는 어떻게 만들어지는가? 웹 브라우저는 원본 HTML문서를 읽고, Style을 입히고, 대화형 페이지로 만들고, 뷰포트에 표시하는 등 해석 과정을 거친다. 이렇게 해석하는 과정을 "Critical Rendering Path"라고 한다. 🏁 Critical Rendering Path Critical Rendering Path 01 Constructing the DOM Tree 02 Constructing the CSSOM Tree 03 Running JavaS.. 공감수 0 댓글수 0 2021. 8. 14.
자바스크립트 배열 Array 📌 자바스크립트의 배열은 배열이 아니다? 자료 구조data structure에서 말하는 "배열" === 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 즉, "배열"의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ( 밀집 배열dense array ) 하나의 데이터 타입으로 통일되어있다는 얘기는 각 요소가 동일한 데이터 크기를 가진다는 뜻과 일맥상통하다. 일반적인 배열 장단점 장점: 인덱스로 요소에 빠르게 접근할 수 있다. 단점: 특정 요소를 검색/삽입/삭제하는 경우에는 비효율적이다. 즉, 자바스크립트의 배열은 연속적으로 이어져 있지 않을 수 있다. ex. 희소 배열 즉, 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도.. 공감수 0 댓글수 0 2021. 8. 13.
자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/reference type으로 구분할 수 있다. 📌 원시 타입과 객체 타입 특징 💡 원시 타입 primitive type 특징 01 원시 값은 "변경 불가능"한 값이다. --> immutable value --> 데이터의 신뢰성을 보장한다. 02 원시 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 실제 값이 저장된다. 원시 값이 변하지 않는 건 사실이지만, 변수에 저장된 원시 값은 재할당을 통해 새로운 값을 줄 수 있다. 그러나 이 경우도 원래 변수에 할당된 원시 값을 새로운 값으로 교체하는 것이 아니라, 변수가 참조하던 메모리 공간의 주소를 변경해 새롭게.. 공감수 0 댓글수 0 2021. 8. 12.
자바스크립트 문자열 String 📌 String 생성자 함수 const strObj = new String(); console.log(strObj); // String{length: 0, [[PrimitiveValue]]: ""} // [[PrimitiveValue]]는 [[StringData]] 내부 슬롯이다 ❗ String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면, [ [ StringData ] ] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. String 래퍼 객체 === 유사 배열 객체 const strObj = new String('Lee'); console.log(strObj); // String{0:"L", 1:"e", 2:"e", length: 3, [[PrimitiveVal.. 공감수 0 댓글수 0 2021. 7. 24.
자바스크립트 제어문 Control flow statement Achivement Goals 🏁 조건문 ✅ truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. ✅ 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. ✅ if 와 else if , else를 이해하고 무리없이 활용할 수 있다. ✅ 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. 🏁 반복문 ✅ 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다. ✅ for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다. ✅ 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다. ✅ for와 while의 차이에 대해서 설명할 수 있다. ✅ 반복문에 조건문을.. 공감수 0 댓글수 0 2021. 7. 23.
자바스크립트 함수 Function Achievement Goals ✅ 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. ✅ 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. ✅ 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다. ✅ 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다. ✅ 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다. ✅ 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다. ✅ 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다. ✅ 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다. ✅ 같은 기능을 하는 함수를 선언식, 표현식, 화.. 공감수 0 댓글수 0 2021. 7. 22.
자바스크립트 표현식 & 문 📌 값value? 식(표현식expression)이 평가evaluate되어 생성된 결과 📌 리터럴literal? 사람이 이해할 수 있는 문자, 또는 약속된 기호를 사용해 값을 생성하는 표기법notation 리터럴 예시 비고 정수 리터럴 100 부동소수점 리터럴 10.5 2진수 리터럴 0b010000001 0b 로 시작 8진수 리터럴 0o101 0o 로 시작 (ES6 도입) 16진수 리터럴 0x41 0x 로 시작 (ES6 도입) string 리터럴 'Hello' "World" boolean 리터럴 true false null 리터럴 null undefined 리터럴 undefined object 리터럴 { name : 'Lee' } array 리터럴 [ 1, 2, 3 ] function 리터럴 functio.. 공감수 0 댓글수 0 2021. 7. 21.
자바스크립트 데이터 타입 Data Type Achievement Goals ✅ 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다. ✅ 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다. ✅ 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다. ✅ typeof 를 활용하여 특정 값의 타입을 확인할 수 있다. ✅ 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다. 📌 자바스크립트 데이터 타입? 왜 필요해? 값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면, 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다. 자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다. 즉, 변수에 할당되는 데이터 .. 공감수 0 댓글수 0 2021. 7. 20.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.