본문 바로가기

FE/JavaScript

FE/JavaScript [JS] 객체 지향 프로그래밍 - 클래스와 인스턴스 객체 지향 프로그래밍(OOP, Object-oriented programming) 객체 지향 프로그래밍(OOP, Object-oriented programming)은 사람이 세계를 보고 이해하는 방법과 매우 흡사하다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 이미 오래전부터 프로그래밍 방법론으로 매우 빠르게 적용되었다. 객체 지향 프로그래밍을 철저하게 적용한 프로그래밍 언어 Java나 C#과는 다르게, JavaScript에서 OOP를 구현하는 방법은 조금 독특하다. 객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한곳에 묶어서 처리한다. 속성과 메서드가 하나의 "객체"라는 개념에 포함되며, 이는 JavaScript 내장 타입인 object(이하, object lite..
FE/JavaScript [JS] 추상화 ** 높은 수준에서 생각하기 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화(abstraction)이다. 우리가 살아가는 이 세상은, 추상화로 가득 차 있다. '-1'을 표현하는 현실의 방법은 존재하지 않는다. 그러나 우리는 '-1'이라는 문자를 보고, "-1은 0보다 1만큼 작은 수다."라고 설명할 수 있다. 이렇듯, 인간은 추상화를 통해 생각하고 표현한다. 추상화를 이용하면, 효율적이고 편하게 생각할 수 있기 때문이다. 브라우저 창에 주소를 입력했을 때 입력한 내용을 전파하고, 어디 서버로 갔다가 다른 서버로 가는 등 그런 복잡한 내용을, 일상생활에서는 몰라도 된다. 우리는 그저 주소창에 올바른 주소를 입력하면, 브라우저가 해당 사이트를 보여 준다는 것만 알고 있다. 스마트폰으로 카카오..
FE/JavaScript [JS] 내장 고차 함수 (filter, map, reduce) 내장 고차 함수 JavaScript에는 기본적으로 내장된 고차 함수가 여럿 있다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당한다. filter 배열의 filter 메서드는, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드이다. 예를 들어 number 타입을 요소로 갖는 배열에서 짝수만을 걸러내거나, 18 보다 작은 수만을 걸러낸다. string 타입을 요소로 갖는 배열에서, 길이가 10 이하인 문자열만 걸러내거나, 'korea' 같은 특정 문자열만 걸러낼 수도 있다. 기존 배열을 수정하지 않는다. 여기서 걸러내는 기준이 되는 특정 조건은 함수의 형태로 filter 메서드의 전달인자로 전달된다. filter 메서드는, 걸러내기 위한 조건을 명시한 함수를 전달인자로 받..
FE/JavaScript [JS] 고차함수 일급 객체 비행기에는 퍼스트 클래스(first-class)가 있다. 이코노미 클래스와는 탑승 수속부터 기내식, 수하물이 나오는 순서까지 항공사와 관련된 모든 부분에서 혜택이 다르다. JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있다. 대표적인 일급 객체 중 하나가 함수이다. JavaScript에서 함수는 아래와 같이 특별하게 취급된다. 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 1. 함수는 변수에 할당할 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성 값으로 저장할 수 있다. 함수를 데이터(string, number, b..
FE/JavaScript [JS] 헷갈렸던 스코프 개념 콘솔에 찍어보기 헷갈렸던 개념들 콘솔로 정리!!!! 콘솔을 들여다보자. (나만 들여다볼듯..) 첫번째 함수 1. 내부 함수에서 x 값 선언 후 값 할당 -> 내부 함수에서 console 찍어보면 새로운 x 값이 찍힌다. 내부 함수에서 재선언한 x의 값은 외부함수나 전역의 x 값에 영향을 주지 않는다. * 2번(중간) 콘솔 : 내부함수에서 x의 값인 NaN을 Return 하지만 outer()의 값에 찍히지 않는다. * 3번(오른쪽) 콘솔 : 외부함수에서 x를 재선언 후 값을 할당 안 했지만 전역의 x 값은 변하지 않는다. * 1번(왼쪽) 콘솔 : 외부함수 x 값을 NaN으로 재할당했다. -> 전역의 x의 값이 NaN이 됐다. * 2번(중간) 콘솔 : 외부함수 x 값을 undefined로 재할당 했다. 외부함수 inner(..
FE/JavaScript [JS] 자바스크립트로 할 수 있는 7가지 첫 번째, 모바일 앱 아이폰 앱을 만들 때는 Swift, 안드로이드는 Kotlin이라는 언어를 사용한다. 그러나 자바스크립트로 React Native를 사용하여 자바스크립트를 기반으로 프로그래밍하여 모바일앱을 만들 수 있다. 인스타그램, 페이스북이 대표적인 예이다. 🌱 자바스크립트로 모바일 앱 만들어보기 👉 https://reactnative.dev/ 두 번째, 비디오&오디오 앱 구글 행아웃, 디스코드와 같은 화상통화 앱은 특별히 프로그램 설치 없이 브라우저에서 프로그램이 돌아간다. 즉, 자바스크립트로 가능한 것! WebRTC라는 기술을 쓴다. 또한 자바스크립트로 만든 신디사이저도 존재한다. ☘️ 자바스크립트로 만든 신디사이저 체험해보기 👉 https://websynths.com/ 세 번째, 로봇 및 I..
FE/JavaScript [JS] test를 통한 scope 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('scope 대해서 학습합니다.', function () { // scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말한다. (반드시 기억!!!) it('함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.', function () { let funcExpressed ..
FE/JavaScript [JS] test를 통한 spread syntax 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('Spread syntax에 대해 학습합니다.', function () { it('전개 문법(spread syntax)을 학습합니다.', function () { const spread = [1, 2, 3]; const arr = [0, ...spread, 4]; expect(arr).to.deep.equal([0, 1, ..
FE/JavaScript [JS] test를 통한 구조 분해 할당 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('구조 분해 할당(Destructuring Assignment)에 관해서', () => { it('배열을 분해합니다', () => { const array = ['code', 'states', 'im', 'course'] const [first, second] = array // ** expect(first).to.eql(..
FE/JavaScript [JS] test를 통한 원시자료형/참조자료형 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. 원시 자료형(primitive data type 또는 원시값) 객체가 아니면서 method를 가지지 않는 아래 7가지의 데이터 (궁금) string, number, bigint, boolean, undefined, symbol, (null) ㄴ method를 가지지 않는다? 원시값은 객체는 아니지만, 객체에서 하는 것처럼 메서드를 호출할 ..
FE/JavaScript [JS] test를 통한 object 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('Object에 대해서 학습합니다.', function () { it('Object의 기본을 확인합니다.', function () { const emptyObj = {}; expect(typeof emptyObj === 'object').to.equal(true); expect(emptyObj.length).to.equal..
FE/JavaScript [JS] this this * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this this - JavaScript | MDN JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. developer.mozilla.org method는 '어떤 객체의 속성으로 정의된 함수'를 말한다. 위의 megalomaniac 객체를 예로 든다면, getMembers는 megalomaniac 객체의 속성으로 정의된 함수인 '메소드'라고 할 수 있다. megalomaniac.getMembers()와 같은 형태로 사용(호출)할 수 있다. 사실은, 전역 변수에 선언한 함..
FE/JavaScript [JS] test를 통한 array 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('Array에 대해서 학습합니다.', function () { it('Array의 기본을 확인합니다.', function () { const emptyArr = []; expect(typeof emptyArr === 'array').to.equal(false); // 배열은 다 'object'로 나온다. expect(emp..
FE/JavaScript [JS] test를 통한 화살표 함수 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('화살표 함수에 관해서', function () { it('함수 표현식 사용법을 복습합니다', function () { const add = function (x, y) { return x + y } expect(add(5, 8)).to.eql(13) }) it('화살표 함수 사용법을 익힙니다', function () { ..
FE/JavaScript [JS] test를 통한 const 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe("'const'에 대해서 학습합니다.", function () { it("'const'로 선언된 변수에는 재할당(reassignment)이 금지됩니다.", function () { const constNum = 0; expect(constNum).to.equal(0); const constString = 'I am a co..
FE/JavaScript [JS] test를 통한 type 개념 익히기 _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. describe('type에 대해서 학습합니다.', function () { it("비교연산자 '=='는 두 값의 일치 여부를 느슨하게 검사(loose equality)합니다.", function () { let actualValue = 1 + 1; let expectedValue = '2'; expect(actualValue == exp..
FE/JavaScript [JS] 테스트케이스 expect _Koans Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다. 코딩테스트 문제를 풀 때 내가 짠 코드를 콘솔에 수동으로 하나하나 찍지 않아도, A의 상황일 때 통과하는지 B의 상황일 때 통과하는지 등을 바로바로 알려주는 것이 바로 테스트 자동화이다. 다시말해 테스트 코드를 이용하면 함수를 다양한 조건에서 실행해 볼 수 있는데, 이때 실행 결과와 기대 결과를 비교할 수 있다. 대표적인 자바스크립트 라이..
FE/JavaScript [JS] spread/rest spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. function sum(...theArgs) { let total = 0; for (const arg of theArgs) { total += arg; } return total; } console.log(sum(1, 2, 3)); // Expected output: 6 console.log(sum(1, 2, 3, 4)); // Exp..
FE/JavaScript [JS] Spread syntax 용례 다음 코드가 실행된 후, value의 값은 무엇일까? let arr = [10, 30, 40, 20] let value = Math.max(arr) // value의 값은 NaN 정답은 NaN 이다. let value = Math.max(...arr) 이면 value의 값은 가장 큰 수인 40이 된다. Spread syntax를 이용하여 배열의 형태를 각각의 요소로 풀어준 상태로 Math.max에 들어가기 때문이다. Math.max 용법 console.log(Math.max(1, 3, 2)); // Expected output: 3 console.log(Math.max(-1, -3, -2)); // Expected output: -1 const array1 = [1, 3, 2]; console.log(M..
FE/JavaScript [JS] 화살표 함수 블록스코프만 신경쓸 수 있도록 되도록 화살표 함수를 쓰자. (함수 스코프 X) 함수를 정의하는 방법에는 함수선언문과 함수표현식이 있다. // 함수선언문 function sum (x, y) { return x + y; } // 함수표현식 const subtract = function (x, y) { return x - y; } ES6가 등장하면서 함수를 정의하는 방법이 하나 더 생겼는데 그것은 바로 화살표 함수(arrow function)이다. 함수표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용한다. (ES6에서 새롭게 적용된 문법 중 하나이다. ) // 화살표 함수 const multiply = (x, y) => { return x * y; } 이처럼 화살표 함수를 사용하면..
⬆︎

728x90