본문 바로가기

FE

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/개발 관련 뉴스, 서적, 자료 [개발 서적] 읽을 책 리스트 추천 필독서 목록 제목 저자 책 소개글 1. 클린코드 로버트 C.마틴 『Clean Code(클린 코드)』은 오브젝트 멘토(Object Mentor)의 동료들과 힘을 모아 ‘개발하며’ 클린 코드를 만드는 최상의 애자일 기법을 소개하고 있다. 소프트웨어 장인 정신의 가치를 심어 주며 프로그래밍 실력을 높여줄 것이다. 여러분이 노력만 한다면. 어떤 노력이 필요하냐고? 코드를 읽어야 한다. 아주 많은 코드를. 그리고 코드를 읽으면서 그 코드의 무엇이 옳은지, 그른지 생각도 해야 한다. 좀 더 중요하게는 전문가로서 자신이 지니는 가치와 장인으로서 자기 작품에 대한 헌신을 돌아보게 된다. 2. 리팩터링 코드 구조를 체계적으로 개선하여 효율적인 리팩터링 구현하기 마틴 파울러 지난 20년간 전 세계 프로그래머에게 리팩..
FE/Git [Git] local과 remote 환경에서 버전 관리하기 로컬 Git 리포지토리(Repository)란? Git이란 개발자의 코드를 효율적으로 관리하기 위해서 개발된 ‘분산형 버전 관리 시스템'이다. Git에서 코드를 저장하는 공간을 리포지토리(repository)라고 한다. 저장위치에 따라 두 가지로 구분할 수 있다. 로컬 Git 리포지토리 : 자신의 컴퓨터의 작업 공간(local)에 위치 원격 Git 리포지토리 : Github 등의 원격(remote) 공간에 위치 로컬 환경에 있는 디렉토리에서 로컬 Git 리포지토리를 추가하면 해당 디렉토리의 파일 변화를 감지할 수 있다. 파일의 변화를 기록하는 절차 코드를 저장할 디렉토리를 만들고 해당 디렉토리에 로컬 Git repository를 생성한다. (git init) 코드를 작성하고 저장하는 공간, 작업 공간(w..
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