Lucky Charms Clover

👋🏻 JavaScript

👋🏻 JavaScript

[JavaScript] Package Manager (npm, yarn, pnpm) 이해하기

패키지 매니저란?소프트웨어 개발 과정에서 라이브러리나 프레임워크와 같은 외부 패키지 관리를 용이하게 해주는 도구로, 이를 통해 패키지의 설치, 업데이트, 삭제 등을 쉽고 효율적으로 관리할 수 있다. Node.js 환경에서 가장 널리 사용되는 패키지 매니저는 Node.js의 기본 패키지 매니저인 npm(node package manager) 이외에도 yarn, pnpm과 같은 다양한 패키지 매니저가 사용되고 있다. npm, yarn, pnpm 비교하기이들 모두 Node.js 환경에서 사용되는 패키지 매니저지만 각 패키지 매니저는 독자적인 설계 철학과 목표를 가지고 개발되었기 때문에 내부 동작 방식과 제공하는 기능에서 차이가 있다. npm가장 널리 사용되는 패키지 매니저로 커뮤니티와 패키지 수가 아주 많다...

👋🏻 JavaScript

[JavaScript] 클래스

딥다이브를 읽으면서 클래스를 대강 이해하긴 했지만 실제로 사용해본 적은 없었는데, 타입스크립트 강의를 듣던 중 강사님이 자바스크립트의 클래스에 대해서 간단하게 소개해주셨다. 클래스 클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법이다. 붕어빵 틀이라고 생각하면 된다. let studentA = { name: 'summermong', grade: 'A+', age: 27, study() { console.log('열심 공부'); }, introduce() { console.log('hi'); }, }; 앞으로 studentB, studentC를 만들 때마다 똑같은 구조의 코드를 짜야 하는데, 이러면 번거로워진다. 하나의 틀(클래스)을 만들고 거기에 재료(매개변수)를 넣을 때마다 붕어빵(객체)..

👋🏻 JavaScript

[JS] json-server로 만드는 프론트엔드 연습용 가짜 서버

json-server json 파일로 가짜 서버를 구축할 수 있는 라이브러리 프로덕션 전용은 아니며 프로토타입을 만들거나 학습하는 용도로 사용한다. 폴더를 만들고 터미널에서 아래 설치 코드를 입력한다. json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 4 months ago. Start using json-server in your project by running `npm i json-server`. There are 314 other projects in the npm registry using json-ser www.npmjs.com n..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 콜백 함수와 동기/비동기를 알아보자

콜백 함수 다른 함수의 인자로 넘겨지는 함수 (함수가 부른 다른 함수) 콜백 함수를 둘러싼 콜백 수신 함수에 의해서 특정 시점에 실행이 된다. 동기 콜백 함수라면 호출 즉시 실행되지만, 비동기 콜백 함수라면 특정 조건을 만족했을 때 실행된다. 아래 코드처럼 userInput의 인자로 넘겨지고 있는 greeting 함수를 콜백 함수라고 할 수 있다. function greeting(name) { console.log("안녕하세요" + name); } function userInput(callback) { const name = prompt("이름을 입력하세요."); callback(name) } userInput(greeting); 비동기 콜백 함수의 예시로는 크게 아래 3가지를 들 수 있다. 1. se..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Symbol 오브젝트를 알아보자

원시 데이터 타입(Primitive data types) 컴퓨터 프로그래밍 언어에서 기본적으로 제공되는 데이터 타입 JS에서 원시 데이터 값은 오브젝트가 아니라 '값'이며 함수를 갖고 있지 않다. 원시 데이터 타입으로는 숫자형, 문자형, 불리언, null, undefined, 그리고 심볼이 있다. 참고로 null, undefined는 래퍼 객체가 없다. 그래서 값으로만 쓰이는 것이다. 원시 데이터 타입은 변수에 직접 값을 할당하거나 함수의 매개변수로 전달할 수 있다. 또 값 복사에 의해 전달되며, 변경 불가능해서 값을 직접 변경할 수 없다. 원시 데이터 타입은 메모리의 스택에 저장된다. 예컨대 아래 코드를 보면 num 변수에 100만 할당되었다. 이 100을 원시값이라고 한다. const num = 10..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] yield와 제너레이터 오브젝트의 메소드 return(), throw()를 알아보자

yield의 반복 이전 게시글에서 next() 메서드로 호출될 때마다 yield 구문의 값을 반환한다고 했다. yield가 반복되면 어떻게 될까? (이런 생각은 해보지도 않았는데 역시 진짜 개발자들은 다르군) 아래 코드는 yield를 반복하는 형태로 구성되었다. let status = true; function* sports() { let count = 0; while (staus) { yield ++count; }; }; const obj = sports(); console.log(obj.next()); // {value: 1, done: false} console.log(obj.next()); // {value: 2, done: false} status = false; console.log(obj.n..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Generator 오브젝트를 알아보자 : Generator 함수, Generator Function, yield, next()

Generator 이터러블을 생성하는 함수 이터레이션 프로토콜을 준수해 이터러블을 생성하는 것보다 간편하게 이터러블을 구현할 수 있다. function* () 형태로 생성 Generator 함수를 호출하면 함수 블록을 실행하지 않고 Generator 오브젝트를 생성해 반환한다. Generator 오브젝트는 이터레이터 오브젝트다. // function* 선언문 function* sports(one) { }; // function* 표현식 const book = function* (one) { }; // Generator Function const music = Object.getPrototypeOf( function* () {}).constructor; const get = new music(); func..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Math 오브젝트를 알아보자

이번 건 웹 개발에서 사용하는 부분이 많지 않다. 그냥 참고 삼아 적어둔다. Math.trunc() : 소수를 제외한 정수를 반환한다. console.log(Math.trunc(12.56), Math.floor(12.56)); // 12, 12 console.log(Math.trunc(-12.56), Math.ceil(-12.56)); // -12, -12 console.log(Math.trunc("12.56"), Math.floor(true)); // 12, 1 Math.sign() : 값의 부호에 해당하는 값을 반환한다. 양수일 경우 1, 음수일 경우 -1, 0은 부호와 관계 없이 0으로 반환한다. console.log(Math.sign(5), Math.sign(-5)); // 1, -1 consol..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Array 오브젝트의 이터레이터 오브젝트 생성을 알아보자

Array.prototype.entries() Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다. 배열의 엘리먼트를 [key, value] 형태로 변환한다. for-of문으로 전개할 수 있다. 이터레이터는 다시 반복할 수 없다. Array 이터레이터 오브젝트는 [key, value] 형태로, 배열의 인덱스가 key가 되고 엘리먼트 값이 value가 된다. 끝까지 읽은 이터레이터 오브젝트는 다시 읽을 수 없고, 전부 읽고 나면 undefined가 뜬다. 그래서 아래 코드에서 한 번 더 콘솔을 찍으면 undefined가 찍힌다. const iterator = ["A", "B"].entries(); console.log(iterator.next().value); // [0, 'A'] co..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Array 오브젝트의 find, findIndex, fill, includes, flat, flatMap을 알아보자

Array.prototype.find() 배열의 엘리먼트를 하나씩 읽어가며 콜백 함수를 호출한다. 콜백 함수에서 true를 반환하면 종료된다. 1번째 파라미터: 콜백 함수 (파라미터: 엘리먼트, 인덱스, 배열 전체) 2번째 파라미터(opt): 콜백 함수에서 this로 참조할 오브젝트 반환: 배열 엘리먼트 OR undefined 아래처럼 find는 콜백 함수를 파라미터로 사용하며 해당 콜백 함수는 3가지 파라미터를 사용한다. const list = ["A", "B", "C"]; const cb = (val, idx, all) => val === "B"; const result = list.find(cb); console.log(result) // B const list = ["A", "B", "C"]; c..

썸머몽
'👋🏻 JavaScript' 카테고리의 글 목록